SelectControl: Apply custom classname to the root element #70621
Description
What problem does this address?
The SelectControl component supports the className prop, but it applies to the inner components, not the root BaseControl component. As a result, the following HTML is rendered:
<div class="components-base-control">
<div class="components-base-control__field">
<div class="components-flex components-input-base components-select-control my-custom-classname">
<div class="components-flex-item">
<label class="components-truncate components-text components-input-control__label">Label</label>
</div>
<div class="components-input-control__container">
<select class="components-select-control__input"></select>
<div aria-hidden="true" class="components-input-control__backdrop"></div>
</div>
</div>
</div>
</div>This makes it difficult for consumers to apply styles to, for example, the root element or label of the component.
I'm not sure if this was intentional or not, but it appears that nearly five years ago, the element to which the class names apply was changed:
What is your proposed solution?
Apply the .components-select-control and custom class to the root element. The HTML will look like this:
<div class="components-base-control components-select-control my-custom-classname">
<div class="components-base-control__field">
<div class="components-flex components-input-base">
<div class="components-flex-item">
<label class="components-truncate components-text components-input-control__label">Label</label>
</div>
<div class="components-input-control__container">
<select class="components-select-control__input"></select>
<div aria-hidden="true" class="components-input-control__backdrop"></div>
</div>
</div>
</div>
</div>This format is consistent with other components that have the BaseControl component as their root, but it does create backward compatibility issues.
For example, in Gutenberg, the code below uses custom classnames, so we may need to adjust CSS:
gutenberg/packages/block-library/src/video/tracks-editor.js
Lines 144 to 147 in 309338a
gutenberg/packages/components/src/custom-gradient-picker/index.tsx
Lines 106 to 108 in 309338a
gutenberg/packages/components/src/date-time/time/index.tsx
Lines 162 to 163 in 309338a
gutenberg/packages/dataviews/src/components/dataviews-filters/filter.tsx
Lines 402 to 403 in 309338a
gutenberg/packages/dataviews/src/dataform-controls/datetime.tsx
Lines 87 to 88 in 309338a
gutenberg/packages/editor/src/components/post-author/select.js
Lines 24 to 27 in 309338a
gutenberg/packages/components/src/dimension-control/index.tsx
Lines 114 to 120 in 6d20ad7
If making a change would cause significant issues, we may need to decide not to fix it.
cc @WordPress/gutenberg-components