website: ButtonGroup

apps/website/src/examples/ButtonGroup.input.tsx

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ButtonGroup, IconButton, Input, Flex, Button } from '@itwin/itwinui-react';
+import { SvgSearch, SvgAdd } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <Flex flexDirection='column' gap='m'>
+      <ButtonGroup>
+        <Button>Button 1</Button>
+        <Input />
+        <IconButton>
+          <SvgSearch />
+        </IconButton>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Input value='Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2V4YW1wbGUuYXV0aDAuY29tLyIsImF1ZCI6Imh0dHBzOi8vYXBpLmV4YW1wbGUuY29tL2NhbGFuZGFyL3YxLyIsInN1YiI6InVzcl8xMjMiLCJpYXQiOjE0NTg3ODU3OTYsImV4cCI6MTQ1ODg3MjE5Nn0.CA7eaHjIHz5NxeIJoFK9krqaeZrPLwmMmgI_XiQiIkQ' />
+        <Button styleType='high-visibility'>Copy</Button>
+      </ButtonGroup>
+    </Flex>
+  );
+};

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

@@ -8,21 +8,19 @@ import { SvgAdd, SvgEdit, SvgDelete, SvgUndo } from '@itwin/itwinui-icons-react'
 
 export default () => {
   return (
-    <div>
-      <ButtonGroup>
-        <IconButton onClick={() => {}}>
-          <SvgAdd />
-        </IconButton>
-        <IconButton onClick={() => {}} isActive>
-          <SvgEdit />
-        </IconButton>
-        <IconButton disabled onClick={() => {}}>
-          <SvgDelete />
-        </IconButton>
-        <IconButton onClick={() => {}}>
-          <SvgUndo />
-        </IconButton>
-      </ButtonGroup>
-    </div>
+    <ButtonGroup>
+      <IconButton onClick={() => {}}>
+        <SvgAdd />
+      </IconButton>
+      <IconButton onClick={() => {}} isActive>
+        <SvgEdit />
+      </IconButton>
+      <IconButton disabled onClick={() => {}}>
+        <SvgDelete />
+      </IconButton>
+      <IconButton onClick={() => {}}>
+        <SvgUndo />
+      </IconButton>
+    </ButtonGroup>
   );
 };

apps/website/src/examples/ButtonGroup.overflow.tsx

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ButtonGroup, DropdownMenu, IconButton, MenuItem } from '@itwin/itwinui-react';
+import {
+  SvgAdd,
+  SvgEdit,
+  SvgDelete,
+  SvgUndo,
+  SvgMore,
+  SvgPlaceholder,
+} from '@itwin/itwinui-icons-react';
+
+export default () => {
+  const buttons = Array(12)
+    .fill(null)
+    .map((_, _index) => {
+      return (
+        <IconButton>
+          <SvgPlaceholder />
+        </IconButton>
+      );
+    });
+
+  return (
+    <div style={{ maxWidth: '70%' }}>
+      <ButtonGroup
+        overflowButton={(overflowStart) => (
+          <DropdownMenu
+            menuItems={(close) =>
+              Array(buttons.length - overflowStart + 1)
+                .fill(null)
+                .map((_, _index) => {
+                  const index = overflowStart + _index;
+                  const onClick = () => {
+                    close();
+                  };
+                  return (
+                    <MenuItem key={index} onClick={onClick} icon={<SvgPlaceholder />}>
+                      Button #{index}
+                    </MenuItem>
+                  );
+                })
+            }
+          >
+            <IconButton>
+              <SvgMore />
+            </IconButton>
+          </DropdownMenu>
+        )}
+      >
+        {buttons}
+      </ButtonGroup>
+    </div>
+  );
+};

apps/website/src/examples/ButtonGroup.usage.tsx

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ButtonGroup, IconButton, Flex, Button } from '@itwin/itwinui-react';
+import {
+  SvgAdd,
+  SvgEdit,
+  SvgDelete,
+  SvgUndo,
+  SvgSearch,
+  SvgFilter,
+} from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <Flex style={{ width: '60%' }}>
+      <Button styleType='high-visibility' startIcon={<SvgAdd />}>
+        New
+      </Button>
+      <ButtonGroup>
+        <IconButton>
+          <SvgEdit />
+        </IconButton>
+        <IconButton disabled>
+          <SvgDelete />
+        </IconButton>
+        <IconButton>
+          <SvgUndo />
+        </IconButton>
+      </ButtonGroup>
+      <Flex.Spacer />
+      <ButtonGroup>
+        <IconButton isActive>
+          <SvgFilter />
+        </IconButton>
+        <IconButton>
+          <SvgSearch />
+        </IconButton>
+      </ButtonGroup>
+    </Flex>
+  );
+};

apps/website/src/examples/ButtonGroup.vertical.tsx

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ButtonGroup, IconButton } from '@itwin/itwinui-react';
+import { SvgAdd, SvgEdit, SvgDelete, SvgUndo } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <ButtonGroup orientation='vertical'>
+      <IconButton onClick={() => {}}>
+        <SvgAdd />
+      </IconButton>
+      <IconButton onClick={() => {}} isActive>
+        <SvgEdit />
+      </IconButton>
+      <IconButton disabled onClick={() => {}}>
+        <SvgDelete />
+      </IconButton>
+      <IconButton onClick={() => {}}>
+        <SvgUndo />
+      </IconButton>
+    </ButtonGroup>
+  );
+};

apps/website/src/examples/index.tsx

@@ -49,6 +49,10 @@ export { default as IdeasButtonMainExample } from './IdeasButton.main';
 export { default as SplitButtonMainExample } from './SplitButton.main';
 
 export { default as ButtonGroupMainExample } from './ButtonGroup.main';
+export { default as ButtonGroupVerticalExample } from './ButtonGroup.vertical';
+export { default as ButtonGroupOverflowExample } from './ButtonGroup.overflow';
+export { default as ButtonGroupInputExample } from './ButtonGroup.input';
+export { default as ButtonGroupUsageExample } from './ButtonGroup.usage';
 
 export { default as CarouselMainExample } from './Carousel.main';
 

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

@@ -1,8 +1,8 @@
 ---
 title: Button group
-description: Buttons allow users to take actions and make choices with a single tap or click.
+description: A button group is a set of buttons with similar functionality.
 layout: ./_layout.astro
-propsPath: '@itwin/itwinui-react/esm/core/Buttons/Button/Button.d.ts'
+propsPath: '@itwin/itwinui-react/esm/core/ButtonGroup/ButtonGroup.d.ts'
 thumbnail: ButtonGroup
 group: buttons
 ---
@@ -14,14 +14,50 @@ import * as AllExamples from '~/examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='buttons-buttongroup' />
-
 <LiveExample src='ButtonGroup.main.tsx'>
   <AllExamples.ButtonGroupMainExample client:load />
 </LiveExample>
 
-A button group consists of similar tools. The button group can only consist of default buttons or borderless buttons, a button group can not be a mix of the two. If there is not enough space to display all of the buttons, the buttons can truncate into an overflow menu.
+Use a button group if you want to put similar functionality in one place. It helps users differentiate functional areas of the UI.
+
+Buttons in a button group can be active, disabled and both.
+
+## Appearance
+
+### Overflow
+
+If there is not enough space to display all of the buttons, the buttons can truncate into an [dropdown menu](dropdownmenu).
+
+<LiveExample src='ButtonGroup.overflow.tsx'>
+  <AllExamples.ButtonGroupOverflowExample client:load />
+</LiveExample>
+
+### Vertical
+
+Use the <code>orientation</code> prop to switch the button group to vertical.
+
+<LiveExample src='ButtonGroup.vertical.tsx'>
+  <AllExamples.ButtonGroupVerticalExample client:load />
+</LiveExample>
+
+### With input
+
+You can combine [inputs](input) with buttons in a button group.
+
+<LiveExample src='ButtonGroup.input.tsx'>
+  <AllExamples.ButtonGroupInputExample client:load />
+</LiveExample>
+
+## Usage
+
+- The button group should only consist of [default buttons](button#default) or [borderless buttons](button#borderless).
+- You should not mix different styled buttons in the same group.
+- You can put buttons and button groups in close proximity. In such cases, see if there is a main action and give it emphasis with a [high visibility](button#high-visibility) button.
+
+<LiveExample src='ButtonGroup.usage.tsx'>
+  <AllExamples.ButtonGroupUsageExample client:load />
+</LiveExample>
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+To be defined