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 [[ https://storybook.js.org/ | Storybook ]]. Here's an example from the Button page:
{F54750790}
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 [[ https://doc.wikimedia.org/codex/main/contributing/contributing-code/component-demos.html#configurable-demos | 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