Draft: Issue #3458215: Initial work for the button component
Draft: Issue #3458215: Initial work for the button component
6 unresolved threads
6 unresolved threads
Closes #3458215
Merge request reports
Activity
19 <span data-toolbar-action class="visually-hidden">{{ 'Extend'|t }}</span> 20 {% endif %} 21 {% block content %} 22 {% if text %} 23 <span class="toolbar-button__label {{ label_classes }}" data-text>{{~ text ~}}</span> 24 {% endif %} 25 {% endblock %} 26 27 {# Element that improves sub-menu UX by implementing the Safe Triangle strategy. 28 More info at https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles #} 29 {% if has_safe_triangle %} 30 <div data-toolbar-popover-safe-triangle></div> 31 {% endif %} 32 33 </{{html_tag|default('button')}}> 1 {% include 'navigation:toolbar-button' with { 
@finnsky This template is required to render the component. If we remove this template then the component toolbar-button will render empty.
added 1 commit
- 9819c5ac - for extra_classes string value has been updated to array
63 63 64 64 {% include 'navigation:toolbar-button' with { 65 65 attributes: create_attribute({ 'aria-controls': 'admin-toolbar', 'tabindex': '-1', 'type': 'button' }), 66 extra_classes: 'admin-toolbar__close-button', -
It was throwing an error "Drupal\Core\Render\Component\Exception\InvalidComponentException: [extra_classes] String value found, but an array or an object is required in Drupal\Core\Theme\Component\ComponentValidator->validateProps() (line 203 of core/lib/Drupal/Core/Theme/Component/ComponentValidator.php). "
added 15 commits
-
9819c5ac...9ddbc2c7 - 13 commits from branch
project:11.x - 59be4c00 - Issue #3458215: Initial work for the button component
- b1cfdb86 - for extra_classes string value has been updated to array
-
9819c5ac...9ddbc2c7 - 13 commits from branch
17 18 <{{html_tag}}{{ attributes.addClass(classes).addClass(extra_classes) }} data-index-text="{{ text|first|lower }}"> 19 {% if action %} 20 <span data-toolbar-action class="visually-hidden">{{ 'Extend'|t }}</span> 21 {% endif %} 22 {% if label %} 23 <span class="toolbar-button__label {{ label.attrs }}" data-text>{{~ label.text ~}}</span> 24 {% endif %} 25 26 {# Element that improves sub-menu UX by implementing the Safe Triangle strategy. 27 More info at https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles #} 28 {% if has_safe_triangle %} 29 <div data-toolbar-popover-safe-triangle></div> 30 {% endif %} 31 32 </{{html_tag|default('button')}}> 1 {# Extra classes variable added to be sure that modifiers will 2 appear after main classes #} 3 {% 4 set classes = [ 5 'toolbar-button', 6 icon ? 'toolbar-button--icon--' ~ icon : '', 7 ] 8 %} 9 10 {% if label.attrs is empty %} 11 {% set label = label |merge({ attrs: create_attribute() }) %} 12 {% endif %} 13 14 {% set has_safe_triangle = has_safe_triangle ?? false %} 15 {% set html_tag = html_tag ?? 'button' %} 17 17 } 18 18 ), 19 19 text: 'More actions'|t, 20 extra_classes: 'toolbar-button--expand--down toolbar-button--weight--400 toolbar-button--tertiary--expanded toolbar-button--actions', 20 extra_classes: ['toolbar-button--expand--down', 'toolbar-button--weight--400', 'toolbar-button--tertiary--expanded', 'toolbar-button--actions'],
Please register or sign in to reply