Page MenuHomePhabricator
Create Task
Maniphest T306350

Update search footer styles to match the design spec
Closed, ResolvedPublic
Actions

Description

There are a few adjustments that need to be made for the TypeaheadSearch component's search footer to meet the design spec:

  • The color of the footer text should be #202122 (@color-base). The current color may be due to an override in the VitePress demo. (Will be solved via T296106: Isolate styles in demo pane)
  • The footer should stop displaying a hover style when the cursor is removed (Part of Menu component's logic. TBD if a review of this behavor is needed)
  • While the footer has a divider before it (in the form of a border-top), the no-results text should not have a border-top

See the full TypeaheadSearch design spec here.

Details

Related Changes in Gerrit:
SubjectAuthorRepoBranchLines +/-
Typeaheadsearch, style: Remove border-top for no-results textSteven Sundesign/codexmain+2 -1
Customize query in gerrit

Related Objects

Event Timeline

AnneT created this task.Apr 18 2022, 2:53 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 18 2022, 2:53 PM
• Sarai-WMDE added a subscriber: Steve-s.EditedApr 19 2022, 11:10 AM

Replaying to the questions left by @StevenSun in the Add message for no results patch:

  • Regarding the footer's color:

I checked the footer text color in my local repo via Chrome devtool. The color is just #202122, or rgb(32, 33, 34). How can I reproduce this issue?

I detected the issue inspecting the footer element in the No results' patch Netlify build, both in Chrome and Safari in MacOS.

Screenshot 2022-04-19 at 12.25.52.png (1,352×1,146 px, 254 KB)

  • Regarding the footer's hover state:

It seems the behavior of Menu component. The footer item is clickable and have a hover style as well as other items, so that users can navigate to footer by keyboard. Should we override this behavior in Typeaheadsearch?

That's right. This behavior derives from the Menu component. I don't think we should override it in the TypeaheadSearch, but instead consider adjusting how the Menu component handles the hover state when users move their cursors/focus away from the menu options and back to the input. Any needed changes would require a separate ticket, so I'll remove the second bullet point from the task description.

• Sarai-WMDE updated the task description. (Show Details)Apr 19 2022, 11:11 AM
• Sarai-WMDE added a subscriber: StevenSun.
StevenSun added a comment.Apr 20 2022, 10:16 AM

For the first issue, it maybe relate to this line: .cdx-demo-wrapper__demo-pane a override the footer text color. I'm not sure whether this style has any other use case. @AnneT: Could we remove this line?

AnneT added a comment.Apr 20 2022, 6:34 PM

@StevenSun you're right, that style is the problem. That style exists as a workaround to prevent styles coming from VitePress from affecting the demos (in this case, from turning links blue), but it's having an unfortunate side effect here because it's more specific than the style within TypeaheadSearch that properly sets the footer color.

If we just remove that style, it will have adverse effects in other demos. I think the best thing we can do is prioritize T296106, which aims to prevent all VitePress styles from applying to anything in the demo pane.

gerritbot added a comment.Apr 21 2022, 10:36 AM

Change 785126 had a related patch set uploaded (by Steven Sun; author: Steven Sun):

[design/codex@main] Typeaheadsearch, style: Remove border-top for no-results text

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

gerritbot added a project: Patch-For-Review.Apr 21 2022, 10:36 AM
gerritbot added a comment.Apr 21 2022, 8:28 PM

Change 785126 merged by jenkins-bot:

[design/codex@main] Typeaheadsearch, style: Remove border-top for no-results text

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

Maintenance_bot removed a project: Patch-For-Review.Apr 21 2022, 8:31 PM
• Sarai-WMDE mentioned this in T286922: Add message for no results in TypeaheadSearch.Apr 22 2022, 8:51 AM
• Sarai-WMDE updated the task description. (Show Details)Apr 22 2022, 5:07 PM
• Sarai-WMDE updated the task description. (Show Details)Apr 22 2022, 5:10 PM
• STH changed the task status from Open to In Progress.Apr 30 2022, 5:51 PM
• STH triaged this task as Medium priority.
• STH subscribed.

@Sarai-WMDE can this task be closed?

• STH moved this task from Inbox to Needs Refinement on the Design-System-Team board.Apr 30 2022, 5:53 PM
• Sarai-WMDE closed this task as Resolved.May 11 2022, 3:53 PM
• Sarai-WMDE claimed this task.

Hey @STHart. Sorry again for the late reply. Resolving this ticket (I hope that's fine!) because the second bullet point in the description will be discussed / tackled separately 👍🏻

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