Fix bottom border colour issue in the super nav search button #4642
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hannalaakso
force-pushed
the
fix-border-in-search-button
branch
from
0395dc3 to
8dc8ce7
Compare
hannalaakso
force-pushed
the
fix-border-in-search-button
branch
from
8dc8ce7 to
185e5eb
Compare
hannalaakso
force-pushed
the
fix-border-in-search-button
branch
from
185e5eb to
f6ca1c7
Compare
hannalaakso
changed the title
There was a problem hiding this comment.
Very nice work on this!, happy to approve the PR once the debug commit you mentioned is removed 👍
hannalaakso
force-pushed
the
fix-border-in-search-button
branch
from
88c88a6 to
a693d46
Compare
This fixes the toggle button in its unhovered/unfocused state having a 1px dark navy bottom border. The colour change was made in #2413 and the colour didn't get updated when the header design subsequently changed. Change the bottom border to have a transparent colour, instead of removing it so that when user changes the default colours of the browser such as in Firefox, or uses Windows High Contrast mode, the button still has a bottom border. The change doesn't impact the current homepage header which continues to set its own brighter blue bottom border.
hannalaakso
force-pushed
the
fix-border-in-search-button
branch
from
a693d46 to
10deb6a
Compare
hannalaakso
force-pushed
the
fix-border-in-search-button
branch
from
10deb6a to
bdc3d1b
Compare
MartinJJones
approved these changes
Feb 24, 2025
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
The search button had in its default unopened state an unintended 1px dark navy bottom border. The colour change to navy was made in #2413 and the colour wasn't updated when the header design subsequently changed.
This changes the bottom border to a transparent colour, instead of removing it, so that when user changes the default colours of their browser such as in Firefox, or uses Windows High Contrast mode, the button still has a visual bottom border.
The change doesn't impact the current homepage header which continues to set its own brighter blue bottom border.
Why
The bottom dark navy border isn't part of the intended design for the search button.
Preview link
https://components-gem-pr-4642.herokuapp.com/public
Visual Changes
Before
After
Before
After (no change)
Firefox with user defined colours
Before
After (no change)
Windows High Contrast mode
Before
After (no change)
Fixes #4166
Trello https://trello.com/c/kw9acHlY/3312-fix-search-toggle-button-styling-in-super-navigation-menu