Page MenuHomePhabricator

TextInput, Select: Base height is slightly too large
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT



According to the design specs, most interactive components should be 32px tall at the base font size. 32px is defined as min-size-interactive-pointer and is the min-height of these components.

However, there is a discrepancy between the height of these components as implemented in the Codex component library:

  • Select, TextInput, and components that use TextInput (Combobox, Lookup, SeachInput, and TypeaheadSearch) are 32.84px tall (in Codex Demo)
  • Button, ToggleSwitch, and FilterChipInput are 32px tall


  • We could fix the too-tall components by reducing the line-height from line-height-x-small, a deprecated token, to line-height-xx-small, which is what they should be anyway.

This will cause a slight change in TypeaheadSearch since the height of the input will be reduced. We should ensure that this does not cause a regression, especially between the server-rendered input and the Vue version. This should not be an issue since both versions use the same styles now, but we should note it anyway.

Findings & follow-ups

  • TextInputs with type="date" are even taller at 34.84px. Changing the line-height from x-small to xx-small will reduce its height from 34.84px to 32.84px. Something inside the box model's content adds an extra 2px to the height of the date inputs. T356284
  • Note: There's a discrepancy between changes run on localhost versus Netlify preview.

Acceptance criteria

  • Decide how to fix the height discrepancy
  • Implement and test with PatchDemo

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.

This is causing a slight issue with the new floating menus:

image.png (352×562 px, 21 KB)

If you have eyes like @Volker_E, you can see that the select handle and the menu are separated by 0.15px of space. This is because FloatingUI is translating the menu down 33px, but the select handle is actually 32.85px tall.

Does anyone on the design team see an issue with moving forward with this and changing the line height from the deprecated line-height-x-small to line-height-xx-small?

egardner raised the priority of this task from Low to Needs Triage.Oct 2 2023, 9:12 PM
egardner moved this task from Needs Refinement to Backlog on the Design-System-Team board.
lwatson updated Other Assignee, added: lwatson.
lwatson updated Other Assignee, removed: lwatson.

Change 993763 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] TextInput, Select: reduce base height

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:

This is a preview of fixing TextInput and Select's height to 32px to match the Figma spec sheet. This fixes the height of TextInput, Select, Combobox, Lookup, SearchInput, and TypeaheadSearch components in the Codex Demo to now have a height of 32px. One exception is TextInput with type="date" is 2px taller than the other TextInputs. Something inside the box content adds an extra 2px.

I will follow up in a separate message about visual regression findings using PatchDemo or running a local MediaWiki instance.

Test wiki created on Patch demo by Roan Kattouw (WMF) using patch(es) linked to this task:

This PatchDemo link has a TypeAhead Search at the top of Main_Page. This demonstrates that by reducing the line-height from 20px to 19.25px, the component's height of 32px remained the same in MediaWiki. There is no visual regression noted for TypeaheadSearch.


Change 993763 merged by jenkins-bot:

[design/codex@main] TextInput, Select: reduce base height

Change 997931 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v1.3.1 to v1.3.2

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

Change 997931 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.3.1 to v1.3.2