From 332bddca8e41c7746abe8b87b43b1c379ca85675 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 28 Mar 2023 17:05:35 +0300 Subject: [PATCH 1/9] Updating button group docs --- .../src/examples/ButtonGroup.input.tsx | 25 ++++++ .../website/src/examples/ButtonGroup.main.tsx | 30 +++---- .../src/examples/ButtonGroup.overflow.tsx | 89 +++++++++++++++++++ .../src/examples/ButtonGroup.usage.tsx | 44 +++++++++ .../src/examples/ButtonGroup.vertical.tsx | 26 ++++++ apps/website/src/examples/index.tsx | 4 + apps/website/src/pages/docs/buttongroup.mdx | 48 ++++++++-- 7 files changed, 244 insertions(+), 22 deletions(-) create mode 100644 apps/website/src/examples/ButtonGroup.input.tsx create mode 100644 apps/website/src/examples/ButtonGroup.overflow.tsx create mode 100644 apps/website/src/examples/ButtonGroup.usage.tsx create mode 100644 apps/website/src/examples/ButtonGroup.vertical.tsx 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..5e08b420d8a --- /dev/null +++ b/apps/website/src/examples/ButtonGroup.overflow.tsx @@ -0,0 +1,89 @@ +/*--------------------------------------------------------------------------------------------- + * 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 = [ + + + , + + + , + + + , + + + , + + + , + + + , + + + , + + + , + + + , + + + , + + + , + + + , + + + , + ]; + 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 509d3aed669..541a2d4242f 100644 --- a/apps/website/src/examples/index.tsx +++ b/apps/website/src/examples/index.tsx @@ -45,6 +45,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..6909bfe3644 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: Buttons 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 but similar functionality in one place. It helps users differentiate functional areas of the UI. + +Buttons in button group can be active, disabled and both, active and disabled. + +## Appearance + +### Overflow + +If there is not enough space to display all of the buttons, the buttons can truncate into an overflow menu. + + + + + +### Vertical + +Use orientation prop to switch button group to vertical. + + + + + +### With input + +You can combine inputs with buttons in a button group. + + + + + +## Usage + +- The button group should only consist of default buttons or borderless buttons +- You should not mix different styles buttons in the same group. +- You can put buttons and button group 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 From 23490edd6f6755f0866b58cbf8ceb592ec2dcacb Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 29 Mar 2023 10:34:33 +0300 Subject: [PATCH 2/9] Update apps/website/src/pages/docs/buttongroup.mdx Co-authored-by: Jon Graft <849817+FlyersPh9@users.noreply.github.com> --- apps/website/src/pages/docs/buttongroup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index 6909bfe3644..84bc323bd40 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/apps/website/src/pages/docs/buttongroup.mdx @@ -42,7 +42,7 @@ Use orientation prop to switch button group to vertical. ### With input -You can combine inputs with buttons in a button group. +You can combine [inputs](input) with buttons in a button group. From 996c667ac46dc6d3c976ed40c51e24955909bf6d Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Thu, 30 Mar 2023 11:39:49 +0300 Subject: [PATCH 3/9] Update apps/website/src/pages/docs/buttongroup.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/buttongroup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index 84bc323bd40..51c6c0bd035 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/apps/website/src/pages/docs/buttongroup.mdx @@ -1,6 +1,6 @@ --- title: Button group -description: Buttons group is a set of buttons with similar functionality. +description: A button group is a set of buttons with similar functionality. layout: ./_layout.astro propsPath: '@itwin/itwinui-react/esm/core/ButtonGroup/ButtonGroup.d.ts' thumbnail: ButtonGroup From 36581055d5e8dfe116435c526f53207ad321f97c Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Thu, 30 Mar 2023 11:40:00 +0300 Subject: [PATCH 4/9] Update apps/website/src/pages/docs/buttongroup.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/buttongroup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index 51c6c0bd035..24a25eec215 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/apps/website/src/pages/docs/buttongroup.mdx @@ -18,7 +18,7 @@ import * as AllExamples from '~/examples'; -Use a button group if you want to but similar functionality in one place. It helps users differentiate functional areas of the UI. +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 button group can be active, disabled and both, active and disabled. From 9a14dc22094872d5ff2caa6d8d9e3f0ed2df6d57 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Thu, 30 Mar 2023 11:40:13 +0300 Subject: [PATCH 5/9] Update apps/website/src/pages/docs/buttongroup.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/buttongroup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index 24a25eec215..97a505aa225 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/apps/website/src/pages/docs/buttongroup.mdx @@ -52,7 +52,7 @@ You can combine [inputs](input) with buttons in a button group. - The button group should only consist of default buttons or borderless buttons - You should not mix different styles buttons in the same group. -- You can put buttons and button group 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. +- 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. From fd973f31376239cb356c675c96b80fcb2b1e66ee Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Thu, 30 Mar 2023 11:40:28 +0300 Subject: [PATCH 6/9] Update apps/website/src/pages/docs/buttongroup.mdx Co-authored-by: adamhock <78564221+adamhock@users.noreply.github.com> --- apps/website/src/pages/docs/buttongroup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index 97a505aa225..73e331edbae 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/apps/website/src/pages/docs/buttongroup.mdx @@ -34,7 +34,7 @@ If there is not enough space to display all of the buttons, the buttons can trun ### Vertical -Use orientation prop to switch button group to vertical. +Use the orientation prop to switch the button group to vertical. From 1c7a0758d9995d3dafca06cfacd86bfd3cbd2b76 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Thu, 30 Mar 2023 11:41:54 +0300 Subject: [PATCH 7/9] Update buttongroup.mdx --- apps/website/src/pages/docs/buttongroup.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index 73e331edbae..8ab175c26c3 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/apps/website/src/pages/docs/buttongroup.mdx @@ -20,7 +20,7 @@ import * as AllExamples from '~/examples'; 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 button group can be active, disabled and both, active and disabled. +Buttons in a button group can be active, disabled and both. ## Appearance @@ -51,7 +51,7 @@ You can combine [inputs](input) with buttons in a button group. ## Usage - The button group should only consist of default buttons or borderless buttons -- You should not mix different styles buttons in the same group. +- 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. From a05c346f80bed1fc0cd35620d9e2674b47c3ed17 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Fri, 31 Mar 2023 11:37:03 +0300 Subject: [PATCH 8/9] Added link to dropdown menu --- .../src/examples/ButtonGroup.overflow.tsx | 51 ++++--------------- apps/website/src/pages/docs/buttongroup.mdx | 2 +- 2 files changed, 11 insertions(+), 42 deletions(-) diff --git a/apps/website/src/examples/ButtonGroup.overflow.tsx b/apps/website/src/examples/ButtonGroup.overflow.tsx index 5e08b420d8a..325470b04fb 100644 --- a/apps/website/src/examples/ButtonGroup.overflow.tsx +++ b/apps/website/src/examples/ButtonGroup.overflow.tsx @@ -14,47 +14,16 @@ import { } from '@itwin/itwinui-icons-react'; export default () => { - const buttons = [ - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - - - , - ]; + const buttons = Array(12) + .fill(null) + .map((_, _index) => { + return ( + + + + ); + }); + return (
From cbfe6ba8006d1f281ab4481bb7e37de545d5118e Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Fri, 31 Mar 2023 11:40:22 +0300 Subject: [PATCH 9/9] oops --- apps/website/src/pages/docs/buttongroup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/website/src/pages/docs/buttongroup.mdx b/apps/website/src/pages/docs/buttongroup.mdx index d001560b577..8ccadcdb5d2 100644 --- a/apps/website/src/pages/docs/buttongroup.mdx +++ b/apps/website/src/pages/docs/buttongroup.mdx @@ -50,7 +50,7 @@ You can combine [inputs](input) with buttons in a button group. ## Usage -- The button group should only consist of default buttons or borderless buttons +- 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.