Page MenuHomePhabricator

(MS4) Toggle button group component
Closed, ResolvedPublic


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.


  • The toggle button group component is implemented according to the Figma specs and follows the behavior and accessibility principles defined in the component documentation.
  • The toggle button's 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)


Both selected and unselected toggle buttons have the following states (as seen in the specs):

  • Default state
  • Hover
  • Active
  • Focus
  • Selected
  • Selected - focus
  • Disabled


This component has its own pages in Storybook, included by alphabetical order (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


  • 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 this sandbox. Implementation of the mixin to be copied and adjusted as needed: vue-components/src/styles/mixins/ButtonGroup.scss

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Sarai-WMDE updated the task description. (Show Details)
Sarai-WMDE added a subscriber: Sarai-WMDE.
amy_rc renamed this task from Toggle button group component to (MS4) Toggle button group component.Jan 18 2021, 12:21 PM
amy_rc triaged this task as High priority.
Sarai-WMDE moved this task from Backlog to Ready for story time on the Wikidata Query Builder board.
Sarai-WMDE updated the task description. (Show Details)
amy_rc claimed this task.
amy_rc added a subscriber: amy_rc.

💃 💃 💃