Page MenuHomePhabricator

[SPIKE] Create scope for ButtonGroup MVP
Closed, ResolvedPublicSpike



At 2022-06-07 DST task refinement, we decided to prioritize scoping an MVP for the ButtonGroup Codex component since it will help both Abstract Wikipedia (T306026) and Growth (T297763) deliver value. We have a task for this (T306025); the goal is to scope/refine it for MVP delivery.

User stories

As a contributor interested in the ButtonGroup Codex component, I want to understand what the scope looks like for an MVP version of this component, so that I can more effectively plan and communicate about our work.

  • We could potentially use this as an opportunity to test our new component epic template (T309417).
  • Could we identify one DST engineer and one DST designer to be directly responsible individuals (DRIs) for 1) ensuring this component is moving along, surfacing risks, etc, and 2) serve as points of contact for our partner teams?
Development considerations

[to come]

Open questions
  • How to handle the maximum case when there is not enough space for all buttons in a button group (options here)

MVP version of the Figma spec sheet here

Acceptance criteria
  • T310768 has been updated with MVP scope
  • MVP version of the Figma spec sheet is done

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptJun 8 2022, 3:03 PM
AnneT added a subscriber: AnneT.

Assigning to myself for now just so I can create the epic task. More work will continue on this in the next sprint.

One thing that I think we should clarify for ButtonGroup is what its function is. It could be:

  1. Purely stylistic: a way to display multiple buttons together in a way that looks good. This is what ButtonGroupWidget is in OOUI
  2. Similar to a group of radio buttons: allow the user to select only one of the buttons. The buttons would be ToggleButtons, and toggling one button "on" would cause the previously toggled-on button to be toggled "off". Code using this would be able to use v-model to read/write the value of the selected button. This is what ButtonSelectWidget is in OOUI (except that, in a ButtonSelectWidget, clicking an already toggled-on button doesn't toggle it off; this is more like a radio button and less like a ToggleButton).
  3. Similar to a group of checkboxes: allow the user to select multiple buttons. The buttons would be ToggleButtons, but toggling one button "on" wouldn't affect the state of the other buttons. Code using this would be able to use v-model to read/write the selected values as an array. This doesn't exist in OOUI.

From what I can tell based on screenshots, Growth wants #2. I looked at the WikiLambda code but I wasn't able to figure out which type of button group they need.

#2 seems like something that is clearly useful, while it's not clear to me that #1 and #3 are useful or needed by anything right now. So maybe our MVP should focus on #2?

Small detail for clarification on #3's last sentence of “this doesn't exist in OOUI”. The ButtonGroupWidget with ToggleButtonWidgets is exactly that and that's also part of the Epic's task description.

@Catrope could you share the screenshots related to the Growth work? I haven't seen those yet.

#2 does seem like the most important use case (it's what we need for our direction switcher, too), and I agree we should focus on a single use case for MVP if possible. I spoke with Julia today and she passed along more info on their use case, which is mutually exclusive regular buttons (but maybe eventually multi-select). I'll post more in the epic task...

AnneT removed AnneT as the assignee of this task.Jun 9 2022, 2:09 PM

@Catrope will run as engineering lead
TBD on lead for design team

AnneT updated the task description. (Show Details)
AnneT added a subscriber: bmartinezcalvo.

MVP scope is complete, although implementation details are still being ironed out. This is ready for product feedback and sign-off.

Scope looks good as per our review sessions we will add new tickets for additional feedback, demos, and next steps.