Page MenuHomePhabricator

Icon: Support a generic class and size classes for CSS only icons
Open, Needs TriagePublicFeature

Description

NOTE: not having this led to T358160 and T358161.

Feature summary (what you would like to be able to do and where):
A generic codex icon class like .cdx-icon would effectively replace .mw-ui-icon. Size icon classes (.cdx-icon--size-medium, .cdx-icon--size-small, .cdx-icon--size-x-small) would replace .mw-ui-icon-small. These classes would be analogous to the cdx-button and cdx-button--size-medium classes, and could be implemented like so:

.cdx-icon {
	.cdx-mixin-css-icon-background();
	.cdx-mixin-css-icon-size();
	.cdx-mixin-css-icon-alignment();
}

.cdx-icon--size-small {
	.cdx-mixin-css-icon-background( @size-icon-small );
	.cdx-mixin-css-icon-size( @size-icon-small );
}

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):

Currently we have the same duplicated CSS across multiple codebase with vector-icon, minerva-icon, mf-icon and popups-icon.

Benefits (why should this be implemented?):
While implementing codex CSS only icon across Web maintained skins/extensions, we found these classes very helpful during the migration for the following reasons

  1. They allow drop in replacements with mediawiki.ui.icon classes, making adoption easier, and make it easier to remove mediawiki.ui.icon
  2. They allow skins/extensions to continue using icon resource loader. Because resource loader icons are usually optimized to be bundled with modules that are loaded only when needed (i.e. js modules), and because resource loader icons are not inlined like with Codex, it is difficult to completely replace them with Codex icon mixins with impacting performance. A 'base' icon class without a specific background image allows skins/extensions to benefit from Codex icons styles without having to deal with the performance hit.
  3. Generic icon classes are needed in CSS in general (i.e. they are used currently to set the space between icon and text in icon buttons). Perhaps the cdx-button__icon and @param-is-button-icon could even be replaced or removed if a generic icon class was used, which would simplify icon button usage and documentation.
  4. Providing classes that correlate with a components props (i.e. size) work nicely with the component based classes and templates that are commonly used in Minerva and Vector. This architecture is closely aligned with how Vue components are implemented, and allows us to use data to render icons, rather than purely from CSS. These classes would also be inline with how the CSS only button classes work.

Event Timeline

CCiufo-WMF subscribed.

Thanks @bwang! Will get back to you once we get a chance to discuss this as a team.

AnneT renamed this task from Support a generic class and size classes for CSS only icons to Icon: Support a generic class and size classes for CSS only icons.Aug 17 2023, 1:45 PM
CCiufo-WMF changed the subtype of this task from "Task" to "Feature Request".Aug 17 2023, 1:53 PM