Change Details

As a DS designer and developer, I want to have a new toggle button group component available, because it is needed in the Simple Query Builder. **ACs** [] The toggle button group component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=4024%3A3357 | Figma specs ]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.g9feefcd492_1_1 | component documentation ]]. [x] The toggle button's [[ https://github.com/wmde/wikit/pull/350 | component-level tokens ]] are created according to the naming convention used to style the component [] The toggle button and toggle button group are shown in Storybook according to the specifications (see below) **States** Both selected and unselected toggle buttons have the following states (as seen in the specs): [] Default state [] Hover [] Active [] Focus [] Selected [] Selected - focus [] Disabled **Storybook:** This component has its own pages in Storybook, included by alphabetical order ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Basic// page including only the enabled toggle button controls: they allow users to enter custom text to replace the default label [] An //All// page including the toggle button and its disabled version [] A //Group// page including the toggle button group and its disabled version **Open questions:** * Initial approach to tackle button grouping (currently in discussion): The grouping of the buttons will be achieved using a grouping mixin. This mixin will be internal and not advertised as a usable output. POC available in [[ https://codesandbox.io/s/jolly-bartik-hsb2b?file=/src/components/Slotula.vue | this sandbox ]]. Implementation of the mixin to be copied and adjusted as needed: [vue-components/src/styles/mixins/ButtonGroup.scss](https://github.com/wmde/wikit/pull/353/files#diff-27ed721e2e813f7deadfc825b82ad7c2de1fa98b0c84453435d30507565eb88f) * How much of the existing button component code will be reused?

As a DS designer and developer, I want to have a new toggle button group component available, because it is needed in the Simple Query Builder. **ACs** [] The toggle button group component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=4024%3A3357 | Figma specs ]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.g9feefcd492_1_1 | component documentation ]]. [x] The toggle button's [[ https://github.com/wmde/wikit/pull/350 | component-level tokens ]] are created according to the naming convention used to style the component [] The toggle button and toggle button group are shown in Storybook according to the specifications (see below) **States** Both selected and unselected toggle buttons have the following states (as seen in the specs): [] Default state [] Hover [] Active [] Focus [] Selected [] Selected - focus [] Disabled **Storybook:** This component has its own pages in Storybook, included by alphabetical order ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Basic// page including only the enabled toggle button controls: they allow users to enter custom text to replace the default label [] An //All// page including the toggle button and its disabled version [] A //Group// page including the toggle button group and its disabled version **Notes:** * Work on this component can be continued from an existing [[ https://github.com/wmde/wikit/pull/358 | Pull request ]] created after an [[ https://phabricator.wikimedia.org/T272460 | investigation process ]] * Initial approach to tackle button grouping (currently in discussion): The grouping of the buttons will be achieved using a grouping mixin. This mixin will be internal and not advertised as a usable output. POC available in [[ https://codesandbox.io/s/jolly-bartik-hsb2b?file=/src/components/Slotula.vue | this sandbox ]]. Implementation of the mixin to be copied and adjusted as needed: [vue-components/src/styles/mixins/ButtonGroup.scss](https://github.com/wmde/wikit/pull/353/files#diff-27ed721e2e813f7deadfc825b82ad7c2de1fa98b0c84453435d30507565eb88f)

As a DS designer and developer, I want to have a new toggle button group component available, because it is needed in the Simple Query Builder. **ACs** [] The toggle button group component is implemented according to the [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit?node-id=4024%3A3357 | Figma specs ]] and follows the behavior and accessibility principles defined in the [[ https://docs.google.com/presentation/d/1GB9WcQDQDYaf_kr0RvuaAuadKLPRytdcZ1vL78N2vx0/edit#slide=id.g9feefcd492_1_1 | component documentation ]]. [x] The toggle button's [[ https://github.com/wmde/wikit/pull/350 | component-level tokens ]] are created according to the naming convention used to style the component [] The toggle button and toggle button group are shown in Storybook according to the specifications (see below) **States** Both selected and unselected toggle buttons have the following states (as seen in the specs): [] Default state [] Hover [] Active [] Focus [] Selected [] Selected - focus [] Disabled **Storybook:** This component has its own pages in Storybook, included by alphabetical order ([[ https://docs.google.com/document/d/1loENZ13z5s_Nes4exm5Z9d5S3PnR7F_0brv5azQ5XB4/edit | see structure ]]): [] A //Basic// page including only the enabled toggle button controls: they allow users to enter custom text to replace the default label [] An //All// page including the toggle button and its disabled version [] A //Group// page including the toggle button group and its disabled version **Open questions:**Notes:** * Work on this component can be continued from an existing [[ https://github.com/wmde/wikit/pull/358 | Pull request ]] created after an [[ https://phabricator.wikimedia.org/T272460 | investigation process ]] * Initial approach to tackle button grouping (currently in discussion): The grouping of the buttons will be achieved using a grouping mixin. This mixin will be internal and not advertised as a usable output. POC available in [[ https://codesandbox.io/s/jolly-bartik-hsb2b?file=/src/components/Slotula.vue | this sandbox ]]. Implementation of the mixin to be copied and adjusted as needed: [vue-components/src/styles/mixins/ButtonGroup.scss](https://github.com/wmde/wikit/pull/353/files#diff-27ed721e2e813f7deadfc825b82ad7c2de1fa98b0c84453435d30507565eb88f) * How much of the existing button component code will be reused?