Page MenuHomePhabricator

Icon: use relative sizing
Open, HighPublic

Description

Background

The icon component's size is current set via absolute width and height attributes on the <svg> element:

<!-- Simplified version of the Icon template -->
<template>
    <span class="cdx-icon">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 20 20"
        >
            ...
        </svg>
    </span>
</template>

However, icons are meant to have the same level of importance in an interface, when it comes to providing information to users and helping them go through processes, as textual content—for example, an icon-only button. Therefore, like text, icons should be able to size up with font size, which means their size must be set in relative figures within the Icon component.

This would be an ideal application for rem units, but enabling the user of rems within a MediaWiki context is a complex issue that will take time to discuss and resolve. As a stop-gap measure, we will use ems to relatively size the icon component.


Acceptance criteria

Design resources

  • Relative sizing is well-documented on the component spec sheet in Figma and on the Icon component's demo page

Development

  • The Icon component is updated to use relative sizing
  • Hacks to make icons relatively sized are removed from the Message and MenuItem components

Event Timeline

@Volker_E please feel free to update the task description, and thanks for the explanation yesterday!

AnneT updated the task description. (Show Details)

We have full control of icons sizes via CSS, both as SVG icons and CSS background-images like in the new CSS-only icon format. Having the width and height attributes in the SVGs itself is needed for lone-standing view of them.
What's sensible here is to rephrase the task description so that the CSS sizing is done relatively in order to enable text zoom settings.

Change 869274 had a related patch set uploaded (by VolkerE; author: Catrope):

[design/codex@main] build, tokens, styles: Introduce simple stylesheet unit transform

https://gerrit.wikimedia.org/r/869274

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bf2faf093a/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/bf2faf093a/w/build/codex/docs

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/bf2faf093a/w/

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/595f8966a0/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/595f8966a0/w/build/codex/docs

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/595f8966a0/w/

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/71dd00c269/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/71dd00c269/w/build/codex/docs

ldelench_wmf added a subscriber: ldelench_wmf.

Moving this to the sprint board since it appears to be in progress; feel free to move out if that is not the case.

Change 869274 merged by jenkins-bot:

[design/codex@main] build, tokens, styles: Introduce simple stylesheet unit transform

https://gerrit.wikimedia.org/r/869274

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/71dd00c269/w/

The visual issues and improvements detected during the peer review phase of the relevant patch are documented as separate tasks (see T326900, T322631 and T260617).
No other problems were found in the latest review. Thus, design sign-off can be considered done.

Change 869852 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

https://gerrit.wikimedia.org/r/869852

Change 885450 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

https://gerrit.wikimedia.org/r/885450

Change 885450 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

https://gerrit.wikimedia.org/r/885450