Several places in Claro use the regular size for input fields and take a lot of vertical space.
As we have for buttons, we need smaller and more compact input and selects for smaller forms like the content page filter or the people page filter.
The issue was going to implement 3 sizes: normal, small and extra small. But after evolving its implementation we found out we were introducing too much
complexity
📌
Create smaller variations for form elements
Needs work
so we decided to use only normal and small variations on the UI, and leave the extrasmall for really specific situations like Views UI.
Input full specs: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...
Select full specs: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...
Some forms will occupy lest space.
Wrapper class:
Filters and bulk operations for the following lists:
- /admin/content (wrapper .claro-form-elements-small) (to test Bulk Operations at least 1 node needs to be added)
- /admin/people (wrapper .claro-form-elements-small)
- /admin/structure/block (wrapper .claro-form-elements-small) > applied to the selects
Direct class in form element:
- Select (.form-element--type-select.form-element--small):
/node/add/page Text format selector under the Body text area.
- Field (.form-element--small)
/node/add/page > manually add the class .form-element--small to the Title field input element (.form-element--type-text).
None for now.
Needs work
11.0 🔥
It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.
Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
Extra-small creates usability/accessibility issues for me. I created Give users option to override Claro --font-size-xs with --font-size-s ✨ Give users option to override Claro --font-size-xs with --font-size-s Active , which I believe would also apply to the current issue.