Add new classes for dropdown component

Bug: T319358
Change-Id: Iab55dc190aa2ebc48eb9c8b34cf10baae8a89914
This commit is contained in:
Jon Robson 2023-06-26 14:44:13 -07:00
parent 153c6f2668
commit 1e6b647971
4 changed files with 11 additions and 11 deletions

View file

@ -17,7 +17,7 @@
role="button"
aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}"
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
class="vector-dropdown-checkbox vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
{{^aria-label}}aria-label="{{label}}"{{/aria-label}}
{{{html-vector-menu-checkbox-attributes}}}
@ -25,12 +25,12 @@
<label
id="{{id}}-label"
for="{{id}}-checkbox"
class="vector-menu-heading{{#label-class}} {{.}}{{/label-class}}"
class="vector-dropdown-label vector-menu-heading{{#label-class}} {{.}}{{/label-class}}"
aria-hidden="true"
{{{html-vector-menu-label-attributes}}}
>
{{#icon}}{{>Icon}}{{/icon}}
<span class="vector-menu-heading-label">{{label}}</span>
<span class="vector-dropdown-label-text vector-menu-heading-label">{{label}}</span>
</label>
{{! FIXME: Rename this class to vector-dropdown-content. It currently clashes with MenuContents mustache template }}
<div class="vector-menu-content vector-dropdown-content">

View file

@ -14,9 +14,9 @@ exports[`Sticky header renders 1`] = `
<div> </div> <div class=\\"vector-sticky-header-context-bar\\">
<nav role=\\"navigation\\" aria-label=\\"\\" class=\\"vector-toc-landmark\\">
<div id=\\"vector-sticky-header-toc\\" class=\\"vector-menu vector-dropdown vector-menu-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc\\">
<input type=\\"checkbox\\" id=\\"vector-sticky-header-toc-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-sticky-header-toc\\" class=\\"vector-menu-checkbox\\" aria-label=\\"\\" tabindex=\\"-1\\">
<label id=\\"vector-sticky-header-toc-label\\" for=\\"vector-sticky-header-toc-checkbox\\" class=\\"vector-menu-heading cdx-button cdx-button--weight-quiet cdx-button--icon-only\\" aria-hidden=\\"true\\" tabindex=\\"-1\\">
<span class=\\"vector-menu-heading-label\\"></span>
<input type=\\"checkbox\\" id=\\"vector-sticky-header-toc-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-sticky-header-toc\\" class=\\"vector-dropdown-checkbox vector-menu-checkbox\\" aria-label=\\"\\" tabindex=\\"-1\\">
<label id=\\"vector-sticky-header-toc-label\\" for=\\"vector-sticky-header-toc-checkbox\\" class=\\"vector-dropdown-label vector-menu-heading cdx-button cdx-button--weight-quiet cdx-button--icon-only\\" aria-hidden=\\"true\\" tabindex=\\"-1\\">
<span class=\\"vector-dropdown-label-text vector-menu-heading-label\\"></span>
</label>
<div class=\\"vector-menu-content vector-dropdown-content\\">

View file

@ -18,10 +18,10 @@ exports[`UserLinks renders 1`] = `
</div>
</div>
<div id=\\"vector-user-links-dropdown\\" class=\\"vector-menu vector-dropdown vector-menu-dropdown vector-user-menu vector-user-menu-logged-in vector-menu-dropdown\\">
<input type=\\"checkbox\\" id=\\"vector-user-links-dropdown-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-user-links-dropdown\\" class=\\"vector-menu-checkbox\\" aria-label=\\"Personal tools\\">
<label id=\\"vector-user-links-dropdown-label\\" for=\\"vector-user-links-dropdown-checkbox\\" class=\\"vector-menu-heading\\" aria-hidden=\\"true\\">
<span class=\\"vector-menu-heading-label\\">Personal tools</span>
<div id=\\"vector-user-links-dropdown\\" class=\\"vector-menu vector-dropdown vector-menu-dropdown vector-user-menu vector-user-menu-logged-in\\">
<input type=\\"checkbox\\" id=\\"vector-user-links-dropdown-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-user-links-dropdown\\" class=\\"vector-dropdown-checkbox vector-menu-checkbox\\" aria-label=\\"Personal tools\\">
<label id=\\"vector-user-links-dropdown-label\\" for=\\"vector-user-links-dropdown-checkbox\\" class=\\"vector-dropdown-label vector-menu-heading\\" aria-hidden=\\"true\\">
<span class=\\"vector-dropdown-label-text vector-menu-heading-label\\">Personal tools</span>
</label>
<div class=\\"vector-menu-content vector-dropdown-content\\">

View file

@ -30,7 +30,7 @@ const templateData = {
},
'data-user-links-dropdown': {
id: 'vector-user-links-dropdown',
class: 'vector-user-menu vector-user-menu-logged-in vector-menu-dropdown',
class: 'vector-user-menu vector-user-menu-logged-in',
label: 'Personal tools'
},
'data-user-links-dropdown-menus': [ {