WP components audit: selection controls

[davewhitley]

Is your feature request related to a problem? Please describe.

This issue is part of a review on the naming, structure, and composition of the UI components as brought up in #16367

These are the current components that are related to text input fields that I considered in this issue:

• CheckboxControl
• FormToggle
• RadioControl
• RangeControl
• SelectControl
• ToggleControl
• TreeSelect

CheckboxControl / RadioControl

Audit

Opportunities I came across while reviewing this component.

• Initially not clear how these relate to the BaseControl component. Using the term "control" seems to unnecessarily confuses the names of these components.

Suggestions

• Simplify language by using simpler names, Checkbox and Radio.
• Consider adding a new RadioGroup component to easily group radio buttons.

FormToggle / ToggleControl

Audit

Opportunities I came across while reviewing this component.

• I was confused why there were two toggle components that seemed very similar. Hard to understand the difference between the two.
• Same as CheckboxControl and RadioControl, it's not clear how ToggleControl is related to BaseControl.

Suggestions

• Simplify language by using a simpler name for both components, Switch. This aligns with the aria switch role.
• “Toggle” is a generic verb that can be used in other places in the system to describe on/off behavior. We need a unique term to describe this UI element.

SelectControl / TreeSelect

Audit

Opportunities I came across while reviewing this component.

• See above components with the "Control" suffix. Same applies here.
• It was confusing trying to understand the difference between TreeSelect and SelectControl.

Suggestions

• Simplify language by using a simpler name, Select.
• Consider provide the functionality of TreeSelect in the Select component as a prop to make things simpler.
• Consider removing the multiple option. This native option on the select element seems unfamiliar and hard to use (requires keyboard shortcuts to select multiple). We want people to use checkboxes or maybe FormTokenField in this case.
• Consider an “enhanced” option that provides a custom popover for selecting elements.

RangeControl

Note: a11y audit on the RangeControl component.

Audit

Opportunities I came across while reviewing this component.

• See above components with the "Control" suffix. Same applies here.

Suggestions

• Simplify language by using a simpler name, Slider or RangeSlider. "Slider" is more recognizable and more visually descriptive than RangeControl.

Feedback

The feedback I'm looking for is related to naming, structure, and composition. I'm not looking for visual feedback of the components. I'm also not examining each prop for each component; only the ones that I think are relevant for the audit. I know this issue is a lot to take in, and I appreciate any feedback you have.

[davewhitley]

Props audit

As an addendum, here is a deeper evaluation of the props for these components. This is an effort to expand the components to be more useful and to answer the question, "Are properties well thought out and consistently applied?" This only covers visual props. Event handler props will be evaluated at a later date.

CheckboxControl/RadioControl

✨ New

• indeterminate or mixed: the "mixed" state of the checkbox
• hideLabel: visually hide the label
• error: depends on how we implement error states in text inputs.
• disabled

📋 Rename

• help → helpText

👍 No change

• checked
• label

✂️ Remove

• heading

FormToggle / ToggleControl

Similar to Checkbox above

SelectControl / TreeSelect

✨ New

Many of the text input props can be applied here as well, including helpText, icon, hideLabel, dense, etc.

👍 No change

• label

✂️ Remove

• multiple: As described in the audit: "Consider removing the multiple option. This native option on the select element seems unfamiliar and hard to use (requires keyboard shortcuts to select multiple). We want people to use checkboxes or maybe FormTokenField in this case."

---

[hacknug]

Could use this as an excuse to also revisit #12732 and maybe even start using CheckboxControl for the Categories list? ✌️

[mapk]

I'm closing out the Component Audit issues for now.