Page MenuHomePhabricator

[EPIC] Add ButtonGroup component to Codex
Open, HighPublic

Assigned To
None
Authored By
JKieserman
Apr 13 2022, 1:20 PM
Referenced Files
F35280900: Captura de Pantalla 2022-06-27 a las 15.51.49.png
Mon, Jun 27, 1:56 PM
F35268163: image.png
Thu, Jun 23, 3:34 PM
F35267800: image.png
Thu, Jun 23, 1:03 PM
F35267784: image.png
Thu, Jun 23, 12:42 PM
F35267782: image.png
Thu, Jun 23, 12:42 PM
F35259826: image.png
Tue, Jun 21, 12:13 PM
F35240562: image.png
Tue, Jun 14, 4:24 PM
F35223943: Screenshot from 2022-06-09 21-07-49.png
Fri, Jun 10, 4:11 AM

Description

Background

Description:

A group of regular Buttons or ToggleButtons. A ButtonGroup can be multi-select or single-select.

History:

Commonly used component that exists in OOUI and is documented in the Design Style Guide; see links below.

Known use case(s):

GrowthExperiments - note: the current use-case will be made obselete by a new design

  • Current
    image.png (1×816 px, 84 KB)
  • Proposed revision is removing this component and replacing with a single dropdown
    image.png (1×872 px, 145 KB)
    - see T311228 for detailed reasons for moving away from using ButtonGroup.

Recent Changes:

image.png (1×3 px, 1 MB)

WikiLambda:
Currently need a group of regular buttons with mutually-exclusive actions. Multiselect would be nice in the future.

image.png (576×1 px, 67 KB)

Function Page:
Selectable button group with quiet buttons will be needed to create the table pagination:

Captura de Pantalla 2022-06-27 a las 15.51.49.png (986×1 px, 857 KB)

Considerations:**

User stories

  • As a designer/developer I need to create group of clickable buttons to use them as group of actions in my projects.
  • As a designer/developer I need to create group of selectable buttons to filter information in my projects.

Previous implementations

These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.


Codex implementation

Component task owners

Design spec


Stage 1: Minimum viable product (MVP)

MVP includes basic layout, default states, and most important functionality.

Acceptance criteria

  • Determine what MVP includes for this component and document this in a subtask. Assign task to designer.
  • Design MVP spec sheet. Once complete, assign task to developer.
  • Implement MVP

Stage 2: Additional states, features, and variants

This might include a disabled state, framed/frameless designs, transitions, supporting different use cases, etc., which will be captured in separate subtasks.

Acceptance criteria

  • Document design and implementation of additional states and features in individual subtasks
  • Complete each additional state/feature subtask

Stage 3: Refinement

This stage includes any final touches or bug fixes needed before the component can be deemed complete, which will be captured in separate subtasks.

Acceptance criteria

  • Finalize docs: open and complete a subtask for any additional demos that need to be added or documentation that needs work
  • Meet accessibility standards: open and complete a subtask for any necessary accessibility improvements
  • Meet internationalization standards: open and complete a subtask to fix any i18n bugs
  • Complete testing: open and complete a subtask for any additional unit or functional tests that are needed

Event Timeline

STH renamed this task from codex button group component to Button Group Codex Component.Apr 15 2022, 5:24 PM
STH updated the task description. (Show Details)
STH added a project: Codex.
STH renamed this task from Button Group Codex Component to Codex Component: Button Group.Apr 15 2022, 5:29 PM
STH updated the task description. (Show Details)
STH renamed this task from Codex Component: Button Group to Add Button Group component to Codex.Apr 15 2022, 5:33 PM
STH triaged this task as Medium priority.May 1 2022, 1:19 PM
STH raised the priority of this task from Medium to High.May 17 2022, 5:57 PM

The figma spec linked in the description says that the file is not found (perhaps it needs to be made public?)

STH renamed this task from Add Button Group component to Codex to Add ButtonGroup component to Codex.May 26 2022, 1:00 AM
STH updated the task description. (Show Details)
AnneT renamed this task from Add ButtonGroup component to Codex to [EPIC] Add ButtonGroup component to Codex.Wed, Jun 8, 8:57 PM
AnneT updated the task description. (Show Details)
AnneT added a project: Epic.
AnneT added a subscriber: AnneT.

FYI, we're trying out a new component epic template here to break this component down into its minimum viable product (MVP) version and other features, to be added iteratively. The task description is currently a work in progress; more will be added soon.

Here's an example of a use case for ButtonGroup in GrowthExperiments. Note the groups of three buttons (1, 3, 7 and 1, 2, 6) under "Recent days" and "Recent months".

Screenshot from 2022-06-09 21-07-49.png (627×864 px, 126 KB)

RHo updated the task description. (Show Details)
RHo updated the task description. (Show Details)

Note: Growth has revisited the usage of the ButtonGroup component in the Mentor Dashboard and we have proposed its removal, instead replacing it with a single dropdown on T311228, which contains detailed reasons for moving away from using ButtonGroup, namely:

  • Simplify to a single form component for selection (removing the confusion that there are two separate buttongroups but only 1 value is selectable across both Days and Hours).
  • Change to a single dropdown selection also has the following benefits for our use-case:
    • More flexibility to add more options in future.
    • More mobile-friendly, esp. for narrow devices as 6 buttons may lead to overflow issues.
    • More details, clearer labels relating to time ago options ("Past 24 hours")
    • Potential to allow commonly used filter options as links to pre-fill the combo (which is less feasible using ButtonGroup).

Here's an example of a use case for ButtonGroup in GrowthExperiments. Note the groups of three buttons (1, 3, 7 and 1, 2, 6) under "Recent days" and "Recent months".

Screenshot from 2022-06-09 21-07-49.png (627×864 px, 126 KB)