mediawiki-skins-MinervaNeue/includes/Skins/ToggleList/ToggleListItem.mustache

{{!
	array components
	string|null components.class Optional anchor CSS class.
	string|null components.href Optional URI.
	string|null components.text Optional text.
	string|null components.data-event-name Optional tracking code.
}}
{{#components}}
	<li class="toggle-list-item">
		<a class="toggle-list-item__anchor {{class}}"
			{{#array-attributes}}{{key}}="{{value}}"{{/array-attributes}}>
			{{#data-icon}}{{>Icon}}{{/data-icon}}
			<span class="toggle-list-item__label">{{label}}</span>
		</a>
	</li>
{{/components}}
Hygiene: extract ToggleList to a reusable component 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 2019-06-20 19:17:50 +00:00			`{{!`
			`array components`
			`string\|null components.class Optional anchor CSS class.`
			`string\|null components.href Optional URI.`
			`string\|null components.text Optional text.`
Track all menu interactions Changes: - added support of event-data-name to toggle list and all menu entries - track main menu open actions - prefix all menu interactions with `menu.` - prefix menu opening with `ui.` - track tab clicks (also a part of new ui) - track notification icon clicks We're not tracking the Download icon as it has it's own instrumentation. Bug: T220016 Change-Id: I442103c1f8967c6710429329f024f266c9b11ea6 2019-08-08 21:43:04 +00:00			`string\|null components.data-event-name Optional tracking code.`
Hygiene: extract ToggleList to a reusable component 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 2019-06-20 19:17:50 +00:00			`}}`
			`{{#components}}`
			`<li class="toggle-list-item">`
[Icons] Use Button template in PageActionsMenu. Use the Button.mustache partial in the PageActionsMenu.mustache template. This converts the page actions menu to use the Button template in a way that doesn't change the existing HTML. The mw-ui-icon-element and mw-ui-icon-with-label-desktop classes are placed onto the Button.mustache markup. Bug: T342908 Change-Id: Ib5dadd929eea2e72a24e061c4174348615890617 2023-08-08 23:33:28 +00:00			`<a class="toggle-list-item__anchor {{class}}"`
			`{{#array-attributes}}{{key}}="{{value}}"{{/array-attributes}}>`
Switch Minerva button template to use Codex and remove mw-ui-button - Removes 'mw-ui-icon-with-label-desktop' as that is now the default behavior for icon only buttons in Minerva - Removes icon flushing classes, use codex mixins instead 80 Visual changes relating to minor icon/button subpixel changes in the heading, edit section links, and page actions Bug: T319260 Change-Id: I503b643d33e43196483af4b5f9dd312237322ac8 2023-08-09 21:49:19 +00:00			`{{#data-icon}}{{>Icon}}{{/data-icon}}`
[Icons] Use Button template in PageActionsMenu. Use the Button.mustache partial in the PageActionsMenu.mustache template. This converts the page actions menu to use the Button template in a way that doesn't change the existing HTML. The mw-ui-icon-element and mw-ui-icon-with-label-desktop classes are placed onto the Button.mustache markup. Bug: T342908 Change-Id: Ib5dadd929eea2e72a24e061c4174348615890617 2023-08-08 23:33:28 +00:00			`<span class="toggle-list-item__label">{{label}}</span>`
Remove the mw-ui-icon hacks and overrides Note: this agitates T230232 again - when merging this please make sure a merge for I929090848f3e04647a97f4979ec78682623fa070 is pending. In various places we try to override the default mw-ui-icon behaviours The hacks need to be removed as part of addressing the core problem. Changes: * Wherever we use mw-ui-icon-before in PHP - wrap the label with a span so that label font-size is altered where needed - not the icon * Where a small icon is needed us isSmall parameter for the Icon component * Apply font-size to labels of mw-ui-icon-before elements * The browser tests need a slight update to access the span element inside a menu item - in the case of the logout button the label is always hidden, so we need to check the visibility of the parent element (secondary_action) Bug: T229440 Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366 2019-08-30 17:23:55 +00:00			`</a>`
Hygiene: extract ToggleList to a reusable component 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 2019-06-20 19:17:50 +00:00			`</li>`
			`{{/components}}`