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}}" href="{{href}}"
		   data-event-name="{{data-event-name}}" data-mw="interface">
			{{#icon}}<span class="mw-ui-icon mw-ui-icon-{{.}}"></span>{{/icon}}
			<span class="toggle-list-item__label">{{text}}</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">`
Add data-mw="interface" attribute to Menu elements While dropping support of smart logout in favour of core ready.js logout, we noticed that the logout selector is a little bit too weak. Editors could make a link on a page that would work as a logout button. The easiest way to prevent this (and any other possible problems) is to add `data-mw="interface"` attribute to all generated menu entries. Change-Id: I22611b9641d82328623beb3f693bf7cddb2289ff 2021-02-10 23:35:17 +00:00			`<a class="toggle-list-item__anchor {{class}}" href="{{href}}"`
			`data-event-name="{{data-event-name}}" data-mw="interface">`
Fix spacing between icon + text in toggle menu and JS This fix was already applied to the main menu in change Idc603ccaeeb42f60899059ebb51226e8a20a969d Bug: T301056 Change-Id: Id31fa76f40aab44672efc51fb981d481c27f1ff8 2022-02-06 01:28:59 +00:00			`{{#icon}}<span class="mw-ui-icon mw-ui-icon-{{.}}"></span>{{/icon}}`
Remove .toggle-list-item__icon selector `.toggle-list-item__icon` sole purpose appears to have been to apply `vertical-align: middle`. However, this is already being fullfilled by .toggle-list-item__label. It is also causing the labels to not be vertically centered. This will also fix the ellipsis not being aligned (T287522#7264959) when the text overflows. Bug: T287522 Bug: T288306 Change-Id: I2d434d1d2b90eab16fc96fe8bb1f0738e5c6921b 2021-08-05 21:40:44 +00:00			`<span class="toggle-list-item__label">{{text}}</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}}`