website: Combine components

apps/website/package.json

@@ -18,6 +18,7 @@
     "@fontsource/noto-sans": "^4.5.11",
     "@fontsource/noto-sans-mono": "^4.5.11",
     "@itwin/itwinui-react": "*",
+    "@itwin/itwinui-icons-react": "*",
     "@jsdevtools/rehype-toc": "3.0.2",
     "@tippyjs/react": "4.2.6",
     "@types/react": "^18.0.0",

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/Button.main.tsx

@@ -3,40 +3,32 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Button } from '@itwin/itwinui-react';
+import { Button, SplitButton, MenuItem, IconButton, IdeasButton } from '@itwin/itwinui-react';
+import { SvgPlaceholder } from '@itwin/itwinui-icons-react';
 
 export default () => {
+  const menuItems = (close: () => void) => [
+    <MenuItem key={1} onClick={close}>
+      Item #1
+    </MenuItem>,
+    <MenuItem key={2} onClick={close}>
+      Item #2
+    </MenuItem>,
+  ];
+
   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>
+        <SplitButton onClick={() => {}} menuItems={menuItems} styleType='high-visibility'>
+          Split button
+        </SplitButton>
+        <IconButton styleType='borderless'>!</IconButton>
       </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

@@ -23,7 +23,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 +32,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/input.mdx

@@ -2,7 +2,7 @@
 title: Input
 description: Input let users enter and edit data.
 layout: ./_layout.astro
-propsPath: '@itwin/itwinui-react/src/core/Input/Input.tsx'
+propsPath: '@itwin/itwinui-react/src/core/LabeledInput/LabeledInput.tsx'
 exampleCodeFile1: Input.main.tsx
 thumbnail: Input
 group: inputs

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

@@ -0,0 +1,32 @@
+---
+title: Progress indicator
+description: Progress indicators express an unspecified wait time or display the length of a process.
+layout: ./_layout.astro
+propsPath1: '@itwin/itwinui-react/esm/core/ProgressIndicators/ProgressLinear/ProgressLinear.d.ts'
+propsPath2: '@itwin/itwinui-react/esm/core/ProgressIndicators/ProgressRadial/ProgressRadial.d.ts'
+exampleCodeFile1: ProgressLinear.main.tsx
+exampleCodeFile2: ProgressRadial.main.tsx
+thumbnail: ProgressIndicator
+group: core
+---
+
+import PropsTable from '~/components/PropsTable.astro';
+import LiveExample from '~/components/LiveExample.astro';
+
+<p>{frontmatter.description}</p>
+
+## Progress linear
+
+<LiveExample src={frontmatter.exampleCodeFile1} />
+
+### Props
+
+<PropsTable path={frontmatter.propsPath1} />
+
+## Progress radial
+
+<LiveExample src={frontmatter.exampleCodeFile2} />
+
+### Props
+
+<PropsTable path={frontmatter.propsPath2} />