Page MenuHomePhabricator
Create Task
Maniphest T306025

[EPIC] Add ButtonGroup components to Codex
Closed, ResolvedPublic
Actions

Assigned To
bmartinezcalvo
Authored By
• JKieserman
Apr 13 2022, 1:20 PM
Tags
Referenced Files
F35280900: Captura de Pantalla 2022-06-27 a las 15.51.49.png
Jun 27 2022, 1:56 PM
F35268163: image.png
Jun 23 2022, 3:34 PM
F35267800: image.png
Jun 23 2022, 1:03 PM
F35267784: image.png
Jun 23 2022, 12:42 PM
F35267782: image.png
Jun 23 2022, 12:42 PM
F35259826: image.png
Jun 21 2022, 12:13 PM
F35240562: image.png
Jun 14 2022, 4:24 PM
F35223943: Screenshot from 2022-06-09 21-07-49.png
Jun 10 2022, 4:11 AM
View All 9 Files
Subscribers
Aklapper
AnneT
bmartinezcalvo
Catrope
• DAbad
DannyS712
egardner
View All 11 Subscribers

Description

Background

Description:

A group of regular Buttons (ActionButtonGroup) or ToggleButtons (ToggleButtonGroup). A ToggleButtonGroup 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

Component spec sheet here

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

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 13 2022, 1:20 PM
• JKieserman mentioned this in T306026: Change the design of the implementation/tester table connect/disconnect buttons to a button group.Apr 13 2022, 1:21 PM
• 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
Jdforrester-WMF added a parent task: T306026: Change the design of the implementation/tester table connect/disconnect buttons to a button group.Apr 19 2022, 4:17 PM
ldelench_wmf moved this task from Inbox to Needs Refinement on the Design-System-Team board.Apr 25 2022, 3:33 PM
• STH moved this task from Needs Refinement to Backlog on the Design-System-Team board.Apr 30 2022, 4:20 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
• STH moved this task from Backlog to Codex Component Backlog on the Design-System-Team board.May 17 2022, 9:19 PM
DannyS712 subscribed.May 19 2022, 5:08 AM

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

Sgs subscribed.May 23 2022, 4:18 PM
• 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)
bmartinezcalvo updated the task description. (Show Details)Jun 1 2022, 4:40 PM
bmartinezcalvo updated the task description. (Show Details)
Sgs mentioned this in T297763: Migration of Mentor dashboard modules to Vue.Jun 1 2022, 7:39 PM
ldelench_wmf mentioned this in T310186: [SPIKE] Create scope for ButtonGroup MVP.Jun 8 2022, 3:03 PM
AnneT renamed this task from Add ButtonGroup component to Codex to [EPIC] Add ButtonGroup component to Codex.Jun 8 2022, 8:57 PM
AnneT updated the task description. (Show Details)
AnneT added a project: Epic.
AnneT subscribed.

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.

AnneT updated the task description. (Show Details)Jun 9 2022, 2:08 PM
• JKieserman mentioned this in T310164: create approve/de-activate buttons for implementation table on function-viewer page.Jun 9 2022, 2:10 PM
Catrope subscribed.Jun 10 2022, 4:11 AM

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)

Catrope updated the task description. (Show Details)Jun 10 2022, 4:13 AM
RHo updated the task description. (Show Details)Jun 14 2022, 4:24 PM
RHo updated the task description. (Show Details)Jun 21 2022, 12:13 PM
RHo attached a referenced file: F35259826: image.png. (Show Details)Jun 21 2022, 11:33 PM
RHo updated the task description. (Show Details)Jun 23 2022, 12:42 PM
RHo updated the task description. (Show Details)
RHo updated the task description. (Show Details)Jun 23 2022, 1:03 PM
RHo updated the task description. (Show Details)Jun 23 2022, 3:33 PM
RHo updated the task description. (Show Details)
RHo attached a referenced file: F35268163: image.png. (Show Details)Jun 23 2022, 7:26 PM
RHo attached a referenced file: F35267800: image.png. (Show Details)
bmartinezcalvo updated the task description. (Show Details)Jun 27 2022, 1:56 PM
AnneT updated the task description. (Show Details)Jun 28 2022, 4:36 PM
AnneT added a subscriber: bmartinezcalvo.
bmartinezcalvo updated the task description. (Show Details)Jun 28 2022, 6:47 PM
RHo updated the task description. (Show Details)Jun 29 2022, 2:49 PM
RHo subscribed.Jun 29 2022, 3:05 PM

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).
In T306025#7993774, @Catrope wrote:

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)Jun 29 2022, 3:06 PM
• DAbad subscribed.Jun 30 2022, 4:53 PM

Next Steps based on MVP ButtonGroup Review:

  • split out MVP tickets for:
    • Action Button Group
    • Toggle Button Group
  • Build out POC for Toggle Button Group
  • Once we've made decisions on Toggle Button Group we can work on implementing Action Button Group
  • update in Figma
  • delay doing button width but add to epic backlog as task and link to blocking task regarding button width
ldelench_wmf moved this task from Codex Component Backlog to Quarterly Plan on the Design-System-Team board.Jul 5 2022, 11:44 AM
AnneT renamed this task from [EPIC] Add ButtonGroup component to Codex to [EPIC] Add ButtonGroup components to Codex.Jul 7 2022, 5:10 PM
AnneT updated the task description. (Show Details)
AnneT updated the task description. (Show Details)
• DAbad closed subtask T310186: [SPIKE] Create scope for ButtonGroup MVP as Resolved.Jul 14 2022, 2:57 PM
ldelench_wmf moved this task from Quarterly Plan to Design-System-Product-Roadmap on the Design-System-Team board.Aug 12 2022, 1:37 PM
ldelench_wmf edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.
ldelench_wmf moved this task from Now to Later on the Design-System-Team (Design-System-Product-Roadmap) board.Aug 12 2022, 2:08 PM
ldelench_wmf assigned this task to bmartinezcalvo.Aug 12 2022, 2:16 PM
• DAbad moved this task from Later to Next on the Design-System-Team (Design-System-Product-Roadmap) board.Sep 1 2022, 2:44 PM
bmartinezcalvo closed subtask T310768: Design and build initial ToggleButtonGroup component (MVP) as Resolved.Oct 18 2022, 11:12 AM
Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap). · View Herald TranscriptOct 18 2022, 11:12 AM
bmartinezcalvo reopened subtask T310768: Design and build initial ToggleButtonGroup component (MVP) as Open.Oct 18 2022, 6:24 PM
Volker_E closed subtask T311756: Design and build initial ButtonGroup component (MVP) as Resolved.Oct 19 2022, 9:20 PM
ldelench_wmf closed subtask T310768: Design and build initial ToggleButtonGroup component (MVP) as Resolved.Dec 7 2022, 9:55 PM
egardner moved this task from Inbox to Design-System-Product-Roadmap on the Design-System-Team board.Dec 20 2022, 9:45 PM
egardner edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.
egardner subscribed.Dec 20 2022, 10:00 PM

Most of this work has been completed for a while now (see https://doc.wikimedia.org/codex/main/components/demos/button-group.html), but it looks like there are still two sub-tasks that need to be resolved.

egardner moved this task from Next to Blocked on the Design-System-Team (Design-System-Product-Roadmap) board.Dec 20 2022, 10:00 PM
egardner mentioned this in T310158: [Button, ButtonGroup] Reconsider max-width.
bmartinezcalvo added a comment.EditedDec 21 2022, 4:06 PM
In T306025#8483162, @egardner wrote:

Most of this work has been completed for a while now (see https://doc.wikimedia.org/codex/main/components/demos/button-group.html), but it looks like there are still two sub-tasks that need to be resolved.

To finish T311757 I think we should implement the full with prop for Button component first, right?

Volker_E updated the task description. (Show Details)Dec 21 2022, 6:41 PM
ldelench_wmf subscribed.Dec 21 2022, 7:02 PM

DST discussed: We will close this epic, move the still-open subtasks out (T311757 and T314446, and prefix them with [ButtonGroup] so that we can easily find them later.

ldelench_wmf closed this task as Resolved.Dec 21 2022, 8:06 PM
ldelench_wmf removed a subtask: T311757: [ButtonGroup] Implement full-width buttons in ButtonGroup and ToggleButtonGroup.
ldelench_wmf removed a subtask: T314446: ButtonGroup: Implement arrow key behavior for button groups.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL