TahS: Correct padding of footer's icon
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Sarai-WMDE
	Jul 5 2022, 4:42 PM

Description

Background

As stated in previous tasks, the content included in the TypeaheadSearch footer should be as visually aligned as possible with that of the rest of the items in the Menu. Both in terms of sizing and styling, but also when it comes to alignment.

At the moment, the spacing between the icon wrapper and the footer text is slightly bigger than the spacing between thumbnails and menu titles. This causes the footer text to not be aligned with the text within menu options when they display thumbnails:

Screenshot 2022-07-05 at 15.49.36.png (1×2 px, 553 KB)

Goal

We should make sure that the content in all menu items (including the footer) is correctly vertically aligned.

Considerations

We should apply the same inline-end padding to the search-footer icon span applied to thumbnails. This means reducing said padding from 12px to 8px.

Acceptance criterion

Footer text is vertically aligned with the text of MenuItems that contain thumbnails

Details

	Subject	Repo	Branch	Lines +/-
	styles, TypeaheadSearch: Correct padding of footer's icon	design/codex	main	+3 -8

Customize query in gerrit

Event Timeline

Sarai-WMDE created this task.Jul 5 2022, 4:42 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 5 2022, 4:42 PM

SimoneThisDot claimed this task.Jul 6 2022, 1:28 PM

SimoneThisDot moved this task from Inbox to Design-System-Sprint on the Design-System-Team board.

SimoneThisDot edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.

SimoneThisDot moved this task from Committed to Code Review on the Design-System-Team (Design-System-Sprint) board.

Change 811925 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[design/codex@main] styles: TahS: Correct padding of footer's icon

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

gerritbot added a project: Patch-For-Review.Jul 7 2022, 10:05 AM

Change 811925 merged by jenkins-bot:

[design/codex@main] styles, TypeaheadSearch: Correct padding of footer's icon

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

Maintenance_bot removed a project: Patch-For-Review.Jul 25 2022, 2:30 PM

Catrope reassigned this task from SimoneThisDot to Sarai-WMDE.Jul 26 2022, 6:05 PM

Catrope moved this task from Code Review to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.

Catrope added a subscriber: SimoneThisDot.

Sarai-WMDE updated the task description. (Show Details)Jul 28 2022, 10:20 AM

Signing off since the change made the footer text to be aligned with the menu item text in TypeaheadSearch. Checked using Chrome v103, Safari v15.5 and Firefox v102 in macOS Monterey.

Sarai-WMDE reassigned this task from Sarai-WMDE to • EUdoh-WMF.Jul 28 2022, 10:31 AM

Sarai-WMDE moved this task from Design Sign-Off to QTE Sign-off on the Design-System-Team (Design-System-Sprint) board.