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:
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