edb4385345
A list that toggles visibility via the checkbox hack is needed in at least two spots: the page actions overflow menu and the user menu. This patch makes several refactors to turn what was previously hardcoded into page actions a reusable component: - Start a new components directory. Components are reusable and composable. The subdirectories are organized by function, not ResourceLoader module bundling which greatly improves the ability to see a component's full functionality in one directory instead of examining the entire codebase. See updates to README. - Extract pageactions.less into: - ToggleList.less: LESS for any checkbox hack list. - DropDownList.less: LESS for lists that open downwards. - MenuListItem.less: LESS for list items of menus. The division makes it easier to see concerns, dependencies, and change code. - Move pageActionMenu.mustache to a component and extract ToggleList template. - Extract ToggleList.js from Toolbar.js. Bug: T214540 Change-Id: I171831469a6733c458bc5c7ba249a5096ca975b8
27 lines
977 B
Plaintext
27 lines
977 B
Plaintext
{{!
|
|
A list with visibility toggled by a checkbox.
|
|
string|null class Optional CSS class for the root element.
|
|
string checkboxID CSS identifier unique to the page needed to connect label and input.
|
|
string|null toggleID Optional toggle button CSS identifier to connect label and toggle aria.
|
|
string|null toggleClass Optional toggle button CSS class.
|
|
string|null listClass Optional list CSS class.
|
|
string|null text Optional text and aria label for the toggle button.
|
|
array|null items Optional array of drop down list items for the unordered list.
|
|
}}
|
|
<div class="toggle-list {{class}}">
|
|
<input
|
|
type="checkbox"
|
|
id="{{checkboxID}}"
|
|
class="toggle-list__checkbox"
|
|
role="button"
|
|
aria-labelledby="{{toggleID}}"
|
|
aria-expanded="false">
|
|
<label id="{{toggleID}}" class="toggle-list__toggle {{toggleClass}}" for="{{checkboxID}}">
|
|
{{text}}
|
|
</label>
|
|
<ul class="toggle-list__list {{listClass}}">
|
|
{{#items}}
|
|
{{> ToggleList/ToggleListItem}}
|
|
{{/items}}
|
|
</ul>
|
|
</div> |