mediawiki-skins-MinervaNeue/components/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" href="{{href}}" data-event-name="{{data-event-name}}">
			<span class="toggle-list-item__icon {{class}}">
				<span class="toggle-list-item__label">{{text}}</span>
			</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">`
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 class="toggle-list-item__anchor" href="{{href}}" data-event-name="{{data-event-name}}">`
Labels for mw-ui-icon-before elements should be vertically aligned inside This also resolves the issue with the language menu item being grayed out for pages without languages Bug: T233167 Bug: T233050 Change-Id: I05c54c0d35e4990717a8c3dc4ab42841349535f1 2019-09-18 15:31:24 +00:00			`<span class="toggle-list-item__icon {{class}}">`
			`<span class="toggle-list-item__label">{{text}}</span>`
			`</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}}`