Merge branch 'main' into greta/search-box

.vscode/settings.json

@@ -14,7 +14,8 @@
   "html.format.wrapLineLength": 120,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
   },
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"

LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2021-2023 Bentley Systems, Incorporated. All rights reserved.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

apps/storybook/package.json

@@ -45,7 +45,7 @@
   "lint-staged": {
     "*.{tsx,ts,jsx,js}": [
       "prettier --write",
-      "node ../../packages/configs/copyrightLinter.js --fix"
+      "node ../../scripts/copyrightLinter.js --fix"
     ],
     "*.{tsx,ts}": [
       "eslint --max-warnings=0 --fix"

apps/website/src/components/LiveExample.tsx

@@ -15,7 +15,11 @@ import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@itwin/itwinui-react';
 import App from './App';
 import './styles.css';
-createRoot(document.getElementById('root')).render(<ThemeProvider theme='dark'><App /></ThemeProvider>);
+createRoot(document.getElementById('root')!).render(
+  <ThemeProvider theme='dark' themeOptions={{ applyBackground: false }}>
+    <App />
+  </ThemeProvider>,
+);
 `;
 
 const indexCss = `
@@ -85,7 +89,8 @@ export default ({ code = '', staticComponent, ...rest }: Props) => {
         }}
         customSetup={{
           dependencies: {
-            '@itwin/itwinui-react': 'dev',
+            '@itwin/itwinui-react': 'latest',
+            '@itwin/itwinui-icons-react': 'latest',
           },
         }}
         id={id}

apps/website/src/examples/Avatar.main.tsx

@@ -3,16 +3,16 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { UserIconGroup, UserIcon } from '@itwin/itwinui-react';
+import { AvatarGroup, Avatar } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <UserIconGroup animated iconSize='medium'>
-      <UserIcon abbreviation='TR' backgroundColor='#6AB9EC' title='Terry Rivers' />
-      <UserIcon abbreviation='RM' backgroundColor='#C8C2B4' title='Robin Mercer' />
-      <UserIcon abbreviation='MV' backgroundColor='#73C7C1' title='Morgan Vera' />
-      <UserIcon abbreviation='JM' backgroundColor='#A3779F' title='Jean Mullins' />
-      <UserIcon abbreviation='AM' backgroundColor='#73C7C1' title='Ashley Miles' />
-    </UserIconGroup>
+    <AvatarGroup animated iconSize='medium'>
+      <Avatar abbreviation='TR' backgroundColor='#6AB9EC' title='Terry Rivers' />
+      <Avatar abbreviation='RM' backgroundColor='#C8C2B4' title='Robin Mercer' />
+      <Avatar abbreviation='MV' backgroundColor='#73C7C1' title='Morgan Vera' />
+      <Avatar abbreviation='JM' backgroundColor='#A3779F' title='Jean Mullins' />
+      <Avatar abbreviation='AM' backgroundColor='#73C7C1' title='Ashley Miles' />
+    </AvatarGroup>
   );
 };

apps/website/src/examples/LabeledTextarea.main.tsx → apps/website/src/examples/Button.default.tsx

@@ -3,16 +3,16 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { LabeledTextarea } from '@itwin/itwinui-react';
+import { Button } from '@itwin/itwinui-react';
 
 export default () => {
   return (
     <div>
-      <LabeledTextarea
-        label='Textarea label'
-        message='Help message'
-        placeholder='Labeled textarea'
-      />
+      <div style={{ display: 'grid', gap: '24px', justifyItems: 'center' }}>
+        <Button size='small'>Small</Button>
+        <Button>Default</Button>
+        <Button size='large'>Large</Button>
+      </div>
     </div>
   );
 };

apps/website/src/examples/Button.main.tsx

@@ -8,36 +8,12 @@ import { Button } from '@itwin/itwinui-react';
 export default () => {
   return (
     <div>
-      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', margin: '12px' }}>
-        <Button size='small'>Default</Button>
-        <Button size='small' styleType='cta'>
-          Call-to-action
-        </Button>
-        <Button size='small' styleType='high-visibility'>
-          High Visibility
-        </Button>
-        <Button size='small' styleType='borderless'>
-          Borderless
-        </Button>
-      </div>
       <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', margin: '12px' }}>
         <Button>Default</Button>
         <Button styleType='cta'>Call-to-action</Button>
         <Button styleType='high-visibility'>High Visibility</Button>
         <Button styleType='borderless'>Borderless</Button>
       </div>
-      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', margin: '12px' }}>
-        <Button size='large'>Default</Button>
-        <Button size='large' styleType='cta'>
-          Call-to-action
-        </Button>
-        <Button size='large' styleType='high-visibility'>
-          High Visibility
-        </Button>
-        <Button size='large' styleType='borderless'>
-          Borderless
-        </Button>
-      </div>
     </div>
   );
 };

apps/website/src/examples/Input.main.tsx

@@ -3,12 +3,12 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Input } from '@itwin/itwinui-react';
+import { LabeledInput } from '@itwin/itwinui-react';
 
 export default () => {
   return (
     <div>
-      <Input placeholder='Basic input' />
+      <LabeledInput label='Labeled input' message='Input message' />
     </div>
   );
 };

apps/website/src/examples/Select.main.tsx

@@ -3,13 +3,15 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Select } from '@itwin/itwinui-react';
+import { LabeledSelect } from '@itwin/itwinui-react';
 
 export default () => {
   return (
     <div>
-      <Select
-        placeholder='Select'
+      <LabeledSelect
+        label='Select label'
+        message='Help message'
+        placeholder='Labeled select'
         options={[
           { value: 1, label: 'Item #1' },
           { value: 2, label: 'Item #2' },

apps/website/src/examples/Tabs.main.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { HorizontalTabs, Tab } from '@itwin/itwinui-react';
+import { Tabs, Tab } from '@itwin/itwinui-react';
 
 export default () => {
   const [index, setIndex] = React.useState(0);
@@ -19,7 +19,8 @@ export default () => {
   };
   return (
     <div style={{ width: '70%' }}>
-      <HorizontalTabs
+      <Tabs
+        orientation='horizontal'
         labels={[
           <Tab key={1} label='Item1' />,
           <Tab key={2} label='Item2' />,
@@ -28,7 +29,7 @@ export default () => {
         onTabSelected={setIndex}
       >
         {getContent()}
-      </HorizontalTabs>
+      </Tabs>
     </div>
   );
 };

apps/website/src/examples/Textarea.main.tsx

@@ -3,12 +3,16 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Textarea } from '@itwin/itwinui-react';
+import { LabeledTextarea } from '@itwin/itwinui-react';
 
 export default () => {
   return (
     <div>
-      <Textarea placeholder={'This is a textarea'} />
+      <LabeledTextarea
+        label='Textarea label'
+        message='Help message'
+        placeholder='Labeled textarea'
+      />
     </div>
   );
 };

apps/website/src/examples/index.tsx

@@ -8,6 +8,7 @@ export { default as AnchorMainExample } from './Anchor.main';
 export { default as BadgeMainExample } from './Badge.main';
 export { default as BlockquoteMainExample } from './Blockquote.main';
 export { default as ButtonMainExample } from './Button.main';
+export { default as ButtonDefaultExample } from './Button.default';
 export { default as IconButtonMainExample } from './IconButton.main';
 export { default as DropdownButtonMainExample } from './DropdownButton.main';
 export { default as ButtonGroupMainExample } from './ButtonGroup.main';
@@ -23,7 +24,6 @@ export { default as DatePickerMainExample } from './DatePicker.main';
 export { default as DialogStaticExample } from './Dialog.static';
 export { default as DialogMainExample } from './Dialog.main';
 export { default as DropdownMenuMainExample } from './DropdownMenu.main';
-export { default as DropdownMenuStaticExample } from './DropdownMenu.static';
 export { default as NonIdealStateMainExample } from './NonIdealState.main';
 export { default as ExpandableBlockMainExample } from './ExpandableBlock.main';
 export { default as FieldsetMainExample } from './Fieldset.main';
@@ -33,9 +33,6 @@ export { default as HeaderMainExample } from './Header.main';
 export { default as InformationPanelMainExample } from './InformationPanel.main';
 export { default as KeyboardMainExample } from './Keyboard.main';
 export { default as InputMainExample } from './Input.main';
-export { default as LabeledInputMainExample } from './LabeledInput.main';
-export { default as LabeledSelectMainExample } from './LabeledSelect.main';
-export { default as LabeledTextareaMainExample } from './LabeledTextarea.main';
 export { default as LabelMainExample } from './Label.main';
 export { default as ProgressLinearMainExample } from './ProgressLinear.main';
 export { default as ProgressRadialMainExample } from './ProgressRadial.main';

apps/website/src/pages/docs/button.mdx

@@ -2,8 +2,17 @@
 title: Button
 description: Buttons allow users to take actions and make choices with a single tap or click.
 layout: ./_layout.astro
-propsPath: '@itwin/itwinui-react/esm/core/Buttons/Button/Button.d.ts'
+propsPathDefault: '@itwin/itwinui-react/esm/core/Buttons/Button/Button.d.ts'
+propsPathSplitButton: '@itwin/itwinui-react/esm/core/Buttons/SplitButton/SplitButton.d.ts'
+propsPathIconButton: '@itwin/itwinui-react/esm/core/Buttons/IconButton/IconButton.d.ts'
+propsPathIdeasButton: '@itwin/itwinui-react/src/core/Buttons/IdeasButton/IdeasButton.tsx'
+propsPathDropdownButton: '@itwin/itwinui-react/src/core/Buttons/DropdownButton/DropdownButton.tsx'
 exampleCodeFile1: Button.main.tsx
+exampleCodeFileDefault: Button.default.tsx
+exampleCodeFileSplitButton: SplitButton.main.tsx
+exampleCodeFileIconButton: IconButton.main.tsx
+exampleCodeFileIdeasButton: IdeasButton.main.tsx
+exampleCodeFileDropdownButton: DropdownButton.main.tsx
 thumbnail: Button
 group: buttons
 ---
@@ -17,6 +26,46 @@ import LiveExample from '~/components/LiveExample.astro';
 
 Buttons are the recipients of a user onClick action (a mouse click for browsers and a finger press on touch-sensitive devices). Buttons have states and events and should be used when a form is submitted (post) or where the button represents a clear call to action on a page. In some cases, buttons can also be used in place of href links to draw special attention to that action.
 
-## Props
+## Button
 
-<PropsTable path={frontmatter.propsPath} />
+<LiveExample src={frontmatter.exampleCodeFileDefault} />
+
+### Props
+
+<PropsTable path={frontmatter.propsPathDefault} />
+
+## Split button
+
+<LiveExample src={frontmatter.exampleCodeFileSplitButton} />
+
+Pressing this left side of the button will commit the action. Pressing the right side of the button will open a menu. Upon selecting an option from the menu, the action immediately takes place, and the left side of the button’s label will change to match the recent selection.
+
+### Props
+
+<PropsTable path={frontmatter.propsPathSplitButton} />
+
+## Dropdown button
+
+<LiveExample src={frontmatter.exampleCodeFileDropdownButton} />
+
+Pressing this button will always open a menu. Upon selecting an option from the menu, the action immediately takes place. The label of the button is not effected from your selection within the menu. The menu button can only be applied to default buttons and borderless buttons.
+
+### Props
+
+<PropsTable path={frontmatter.propsPathDropdownButton} />
+
+## Icon button
+
+<LiveExample src={frontmatter.exampleCodeFileIconButton} />
+
+### Props
+
+<PropsTable path={frontmatter.propsPathIconButton} />
+
+## Ideas button
+
+<LiveExample src={frontmatter.exampleCodeFileIdeasButton} />
+
+### Props
+
+<PropsTable path={frontmatter.propsPathIdeasButton} />