Page MenuHomePhabricator

Docs: Update the Configurable Demo to support Select/Dropdown in Controls
Closed, ResolvedPublic3 Estimated Story Points

Description

Most component documentation pages on the Codex docs site include a configurable demo, which allows the user to change the various props or content that get passed to a component and see the results update in real time. This is our DIY alternative to a tool like Storybook. Here's an example from the Button page:

Screenshot 2024-05-30 at 2.20.16 PM.png (1×1 px, 138 KB)

Currently we support 4 different kinds of controls here: radio, boolean, text, and slot. These controls can be used when we want to show different kinds of options to the user in terms of how to configure a given component option. Radios are useful for choosing between a small number of existing values, booleans for simply enabling or disabling a given option, and text/slot inputs take free text content from the user.

One thing we do not currently support (but could) is a select or dropdown-style control – this would be useful when we want to allow the user to select from a *large* list of options (more than just 3 or 4).

One use-case for having a dropdown menu of options in a component demo is for the upcoming Tooltip component (from T366104). This component will take a number of different options for "placement" – top, bottom, left, right, as well as -start / -end for each of the basic sides. This is 12 options total – too many for a radio-based interface, but perfect for a dropdown-based one.

Acceptance Criteria
  • The Wrapper and Controls components in the codex-docs package (as well as the corresponding ControlConfig type in this package) are updated to support an additional type of control, a select type. A user should be able to provide an array of MenuOptions to for the data here, just as they would for any other Codex menu component.
  • This new control should be built using the Codex Select component, and should match the visual style of the other controls
  • The configurable demos documentation should be updated to mention this new control type
  • The configurable demo for the upcoming Tooltip component is updated to use this control for its placement options

Event Timeline

egardner set the point value for this task to 3.May 30 2024, 9:33 PM

Change #1038861 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] docs: update the Config Demo to support Select/Dropdown

https://gerrit.wikimedia.org/r/1038861

Change #1062730 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Use select control in Tooltip demo

https://gerrit.wikimedia.org/r/1062730

Change #1038861 merged by jenkins-bot:

[design/codex@main] docs: update the Config Demo to support Select/Dropdown

https://gerrit.wikimedia.org/r/1038861

Change #1062730 merged by jenkins-bot:

[design/codex@main] docs: Use select control in Tooltip demo

https://gerrit.wikimedia.org/r/1062730

Change #1064134 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v1.11.0 to v1.11.1

https://gerrit.wikimedia.org/r/1064134

Change #1064134 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.11.0 to v1.11.1

https://gerrit.wikimedia.org/r/1064134