Fix orange outline on global site search #1752
Merged
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
danacotoran
force-pushed
the
fix_header_input_focus
branch
from
3b453e9 to
222d515
Compare
alex-ju
previously approved these changes
Oct 26, 2020
| .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside | ||
| // stylelint-disable selector-max-id | ||
| .gem-c-search__input[type="search"], | ||
| #global-header .gem-c-search__input[type="search"] { // overly specific to prevent some overrides from outside |
There was a problem hiding this comment.
Awful we need this but until we get rid of govuk_template styles we don't have a real alternative.
There was a problem hiding this comment.
Yes unfortunately we can't remove the conflicting styles from the govuk_template repo itself so till we get rid of that dependency, this will have to do 😬
danacotoran
force-pushed
the
fix_header_input_focus
branch
from
222d515 to
48dacec
Compare
36degrees
reviewed
Oct 27, 2020
app/assets/stylesheets/govuk_publishing_components/components/_search.scss
Outdated
Show resolved
Hide resolved
danacotoran
force-pushed
the
fix_header_input_focus
branch
from
48dacec to
69171a9
Compare
danacotoran
force-pushed
the
fix_header_input_focus
branch
from
69171a9 to
5017abd
Compare
The global header was recently updated to use the search component instead of a hard coded search field. This resulted in an issue where the input outline is now orange due to more specific styles from govuk_template conflicting with the search component styles. This updates the component styles to be more specific in order to override the CSS from govuk_template. It uses the compatibility mixin to ensure the fix is only applied when in compatibility mode, and also to ensure the code is easier to clean up when compatibility mode is no longer a "thing".
danacotoran
force-pushed
the
fix_header_input_focus
branch
from
5017abd to
d58bafe
Compare
alex-ju
approved these changes
Oct 27, 2020
There was a problem hiding this comment.
Thank you for the review @36degrees, and for the work on this @danacotoran!
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 global header was recently updated to use the search component instead of a hard coded search field.
This resulted in an issue where the input outline is now orange due to more specific styles from
govuk_templateconflicting with the search component styles.This updates the component styles to be more specific in order to override the CSS from
govuk_template.Why
The site search input focus style has an orange outline due to
govuk_templatestyles being more specific than the search component styles.The outline should match the focus style of the search button.
Visual Changes
Before
After
NOTE: as of the time this PR is being created the bug is not live, we caught the issue on staging.
https://trello.com/c/RbD3om74