Page MenuHomePhabricator

Codex button should adapt to large font sizes
Open, Needs TriagePublic

Assigned To
None
Authored By
Sarai-WMDE
Wed, Jun 22, 8:58 AM
Referenced Files
Restricted File
Wed, Jun 22, 10:11 AM
Restricted File
Wed, Jun 22, 10:11 AM
Restricted File
Wed, Jun 22, 10:11 AM
Restricted File
Wed, Jun 22, 8:58 AM
Restricted File
Wed, Jun 22, 8:58 AM
Restricted File
Wed, Jun 22, 8:58 AM
Restricted File
Wed, Jun 22, 8:58 AM

Description

Background

Currently, Codex buttons don't feature a specific line-height. They also don't have any inline padding applied to them. Both conditions prevent buttons from correctly adjusting to bigger font sizes: for example, whenever the browser's default font size is increased to satisfy accessibility needs.

Here are some examples of the visual aspect of Codex buttons in Chrome when the font size is changed to "Very large" in the Appearance settings (24px):

Button componentCombobox*ToggleButton
{F35263330}{F35263333}{F35263337}

*Please note that the issue related to the also unresponsive size of text inputs is covered by this separate task: T311267

Goal

Buttons should scale to display correct proportions and proper spacing around their text.

Considerations

The solution might consist on specifying a line-height for Button (probably @line-height-component, to keep its height aligned with the rest of Codex elements) and default inline paddings (of 4px, in order to match that of other components).

We should apply an approach and values that make buttons to reshape in a way that's consistent with the rest of system elements (e.g. apply same padding values to inputs and buttons, apply same line-height, specify the same relative height...)

ACs

  • The height of Codex Button components increases proportionally with font size

Event Timeline

Sarai-WMDE renamed this task from Make Codex input heights relative to Codex inputs should have relative heights.Wed, Jun 22, 9:00 AM
This comment was removed by Sarai-WMDE.
Sarai-WMDE renamed this task from Codex inputs should have relative heights to Codex button should adapt to large font sizes.Wed, Jun 22, 10:11 AM
Sarai-WMDE updated the task description. (Show Details)