Page MenuHomePhabricator
Create Task
Maniphest T329287

TypeaheadSearch: Search footer icon shrinks at 14px base font size
Closed, ResolvedPublicBUG REPORT
Actions

Description

Steps to replicate the issue (include links if applicable):

What happens?:

The search footer icon is shrinking to 35px wide, while the result thumbnails remain 40px wide. This causes a misalignment between the result text and the search footer text.

image.png (1×928 px, 245 KB)

What should have happened instead?:

The icon should be 40px wide like the thumbnails, so the text is aligned with the results.

image.png (1×920 px, 239 KB)

Software version (skip for WMF-hosted wikis like Wikipedia): Codex v0.5.0

Other information (browser name/version, screenshots, etc.):

Details

SubjectRepoBranchLines +/-
Update Codex from v0.5.0 to v0.6.0mediawiki/coremaster+1 K -1 K
Use the wikimedia-ui-legacy theme for Codex component stylesmediawiki/skins/Vectormaster+4 -0
TypeaheadSearch, styles: Prevent footer icon container from shrinkingdesign/codexmain+3 -1
Customize query in gerrit

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedegardnerT287532 [Epic] Resolve key questions for design of shared component library
 ResolvedNoneT287538 Identify Design System hurdles & blockers and resolve open questions
 OpenNoneT113560 Standardize MediaWiki components (tracking)
 OpenNoneT90687 Define a baseline grid and support a responsive grid system
 Duplicate• STHT302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
 InvalidNoneT302025 Upgrade Codex to Beta version
 ResolvedVolker_ET293127 [EPIC] Design System Foundation: Design and define design tokens
 Resolved• CatropeT318016 Provide a way to inject Codex tokens into WikimediaUI Base variables, while later are widely used
 ResolvedVolker_ET295711 Turn component-specific (SFC) Less variables into Codex design tokens
 ResolvedNoneT314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
 ResolvedbmartinezcalvoT295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
 ResolvedVolker_ET296995 Define the system's color palette
 ResolvedVolker_ET297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
 ResolvedVolker_ET305236 Create visited red link color token
 ResolvedVolker_ET313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
 Resolvedldelench_wmfT322833 Update Yellow 600 for warning color
 ResolvedVolker_ET324449 Add new colors used in Message component and update border colors to the darkest tone
 Resolved• EUdoh-WMFT322960 Define `accent-color` design token
 Resolved• Sarai-WMDET296998 [Epic] Define the system's typographic styles and scale
 Resolved• DAbadT305920 Define the system's sans, serif and monospace typefaces
 ResolvedVolker_ET305947 Define the system's typographic scale (font sizes and line-heights)
 ResolvedbmartinezcalvoT321470 Use the system's typographic scale tokens (font size and line-heights)
 Resolved• KieranMcCannT303587 Choose typographies (Sans Serif and Serif) for designing our text styles in Figma in different languages
 OpenNoneT331612 Document internationalization limitations of Figma font selection in Typography guidelines
 DuplicateNoneT309158 Update Wikimedia Design Style Guide with typeface choices
 ResolvedVolker_ET313693 Implement system typeface choices in Codex tokens
 Resolved• DAbadT318023 Define the system's typographic styles on text decoration
 ResolvedVolker_ET322707 Provide `tab-size` option and decision token
 Resolved• DAbadT322811 Provide (legacy) font families as Codex tokens
 Resolved• Sarai-WMDET297000 Define the design system's size and spacing scale
 ResolvedVolker_ET297001 Define the system's opacities
 ResolvedVolker_ET305084 Add 0.3 opacity
 ResolvedVolker_ET297003 Define the system's box shadow styles
 ResolvedVolker_ET310409 Button: Simplify focus styles application including `box-shadow`
 Resolved• Sarai-WMDET297007 Define the system's iconography
 ResolvedVolker_ET300562 Define Border tokens
 ResolvedbmartinezcalvoT302181 Define the system's cursors
 Resolved• CatropeT304443 Document Motion tokens (animations and transitions)
Resolved• DAbadT303522 Decide on CSS breakpoints for the design system
 ResolvedVolker_ET322712 tokens: Add `background-position` option and decision token with value `center`
 OpenNoneT296689 [EPIC] Address themeability needs for Codex components
 Resolved• CatropeT324367 Enable Codex tokens to work with different font sizes
 ResolvedovasilevaT328053 Verify impact of Design Systems Team's Codex Update on Web properties
 ResolvedBUG REPORTVolker_ET329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size

Event Timeline

AnneT created this task.Feb 9 2023, 2:11 PM
Restricted Application added a project: Design-System-Team. · View Herald TranscriptFeb 9 2023, 2:11 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
gerritbot added a comment.Feb 9 2023, 2:23 PM

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

[design/codex@main] TypeaheadSearch, styles: Prevent footer icon container from shrinking

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

gerritbot added a project: Patch-For-Review.Feb 9 2023, 2:23 PM
PatchDemoBot added a comment.Feb 9 2023, 2:31 PM

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

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

gerritbot added a comment.Feb 9 2023, 3:06 PM

Change 888014 merged by jenkins-bot:

[design/codex@main] TypeaheadSearch, styles: Prevent footer icon container from shrinking

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

Volker_E added a parent task: T328053: Verify impact of Design Systems Team's Codex Update on Web properties.Feb 9 2023, 3:15 PM
Volker_E removed a project: Patch-For-Review.
Volker_E edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.
Restricted Application triaged this task as High priority. · View Herald TranscriptFeb 9 2023, 3:16 PM
• Catrope subscribed.Feb 9 2023, 8:38 PM

I think this bug really happened because https://gerrit.wikimedia.org/r/c/mediawiki/core/+/869852 was merged without https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/886438. That combination leads to Vector receiving styles meant for a 16px base font size, so all the em values are a little too small. However, Volker's patch probably does still solve a real issue, just a different one (which is that you'd see the same shrinkage if you set the browser's font size scaling to 87.5%).

gerritbot added a comment.Feb 9 2023, 9:39 PM

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

[mediawiki/skins/Vector@master] Use the wikimedia-ui-legacy theme for Codex component styles

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

gerritbot added a project: Patch-For-Review.Feb 9 2023, 9:39 PM
gerritbot added a comment.Feb 10 2023, 1:32 PM

Change 886438 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use the wikimedia-ui-legacy theme for Codex component styles

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.23; 2023-02-13).Feb 10 2023, 2:00 PM
Maintenance_bot removed a project: Patch-For-Review.Feb 10 2023, 2:30 PM
Volker_E assigned this task to bmartinezcalvo.Feb 11 2023, 5:03 PM
Volker_E moved this task from Committed to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.
egardner moved this task from Design Sign-Off to Pending Release on the Design-System-Team (Design-System-Sprint) board.Feb 14 2023, 6:08 PM
gerritbot added a comment.Feb 14 2023, 9:23 PM

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

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

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

gerritbot added a project: Patch-For-Review.Feb 14 2023, 9:23 PM
PatchDemoBot added a comment.Feb 14 2023, 9:27 PM

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

gerritbot added a comment.Feb 14 2023, 9:58 PM

Change 889230 merged by jenkins-bot:

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

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.24; 2023-02-20); removed MW-1.40-notes (1.40.0-wmf.23; 2023-02-13).Feb 14 2023, 10:00 PM
Maintenance_bot removed a project: Patch-For-Review.Feb 14 2023, 10:11 PM
egardner moved this task from Inbox to Planned Component Updates on the Codex board.Feb 21 2023, 11:36 PM
Volker_E closed this task as Resolved.Feb 22 2023, 1:54 PM
Volker_E claimed this task.
Volker_E added a subscriber: bmartinezcalvo.
PatchDemoBot added a comment.May 10 2023, 9:10 PM

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

https://patchdemo.wmflabs.org/wikis/66d018802f/w/

PatchDemoBot added a comment.May 10 2023, 9:10 PM

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

https://patchdemo.wmflabs.org/wikis/26cc40e1ed/w/

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits