ToggleControl does not allow setting custom classes #11349
Description
Describe the bug
The ToggleControl element doesn't have a way to set a custom classname on the element. The element's classes are hardcoded.
gutenberg/packages/components/src/toggle-control/index.js
Lines 41 to 46 in b7d8fbf
Compare this to the TextControl element, which allows setting custom classes:
gutenberg/packages/components/src/text-control/index.js
Lines 15 to 16 in b7d8fbf
To Reproduce
Code to reproduce the behavior:
edit: function( props ) {
return [
el(
InspectorControls,
{},
el(
TextControl,
{
label: __( 'Test element' ),
className: 'example',
}
),
el(
ToggleControl,
{
label: __( 'Test element' ),
className: 'example',
}
)
)
]
}TextControl will have the class example added; ToggleControl will not:
<div>
<div class="components-base-control example">
<div class="components-base-control__field">
<label class="components-base-control__label" for="inspector-text-control-0">Test element</label>
<input class="components-text-control__input" type="text" id="inspector-text-control-0" value="">
</div>
</div>
<div class="components-base-control components-toggle-control">
<div class="components-base-control__field">
<span class="components-form-toggle">
<input class="components-form-toggle__input" id="inspector-toggle-control-1" type="checkbox">
<span class="components-form-toggle__track">
</span>
<span class="components-form-toggle__thumb">
</span>
<svg class="components-form-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6">
<path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z">
</path>
</svg>
</span>
<label for="inspector-toggle-control-1" class="components-toggle-control__label">Test element</label>
</div>
</div>
</div>Expected behavior
Setting the className attribute on a ToggleControl will cause that class name to be output in the rendered React module.
Additional context
- Gutenberg: WordPress 5.0-beta2-43852