diff --git a/apps/website/src/examples/ButtonGroup.input.tsx b/apps/website/src/examples/ButtonGroup.input.tsx new file mode 100644 index 00000000000..710837f3491 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + ); +}; diff --git a/apps/website/src/examples/ButtonGroup.main.tsx b/apps/website/src/examples/ButtonGroup.main.tsx index af8974e7b9c..945c6d1e061 100644 --- a/apps/website/src/examples/ButtonGroup.main.tsx +++ b/apps/website/src/examples/ButtonGroup.main.tsx @@ -8,21 +8,19 @@ import { SvgAdd, SvgEdit, SvgDelete, SvgUndo } from '@itwin/itwinui-icons-react' export default () => { return ( -
- - {}}> - - - {}} isActive> - - - {}}> - - - {}}> - - - -
+ + {}}> + + + {}} isActive> + + + {}}> + + + {}}> + + + ); }; diff --git a/apps/website/src/examples/ButtonGroup.overflow.tsx b/apps/website/src/examples/ButtonGroup.overflow.tsx new file mode 100644 index 00000000000..325470b04fb --- /dev/null +++ b/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 ( + + + + ); + }); + + return ( +
+ ( + + Array(buttons.length - overflowStart + 1) + .fill(null) + .map((_, _index) => { + const index = overflowStart + _index; + const onClick = () => { + close(); + }; + return ( + }> + Button #{index} + + ); + }) + } + > + + + + + )} + > + {buttons} + +
+ ); +}; diff --git a/apps/website/src/examples/ButtonGroup.usage.tsx b/apps/website/src/examples/ButtonGroup.usage.tsx new file mode 100644 index 00000000000..8fe8e6f563b --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/apps/website/src/examples/ButtonGroup.vertical.tsx b/apps/website/src/examples/ButtonGroup.vertical.tsx new file mode 100644 index 00000000000..6058838a1aa --- /dev/null +++ b/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 ( + + {}}> + + + {}} isActive> + + + {}}> + + + {}}> + + + + ); +}; diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx index de83e62db7a..84ffdc4d26c 100644 --- a/apps/website/src/examples/index.tsx +++ b/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'; diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index 43197e16792..8ccadcdb5d2 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/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';

{frontmatter.description}

- - -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). + + + + + +### Vertical + +Use the orientation prop to switch the button group to vertical. + + + + + +### With input + +You can combine [inputs](input) with buttons in a button group. + + + + + +## 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. + + + + ## Props - +To be defined