This repository has been archived by the owner on Feb 22, 2023. It is now read-only.
Update the VSearchTypeButton to match the new homepage designs #2069
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
|
Storybook and Tailwind configuration previews: Ready Storybook: https://wordpress.github.io/openverse-frontend/_preview/2069 Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again. You can check the GitHub pages deployment action list to see the current status of the deployments. |
openverse-bot
added
the
🚦 status: awaiting triage
|
Size Change: -100 B (0%) Total Size: 896 kB
ℹ️ View Unchanged
|
obulat
force-pushed
the
update/search_type_button
branch
2 times, most recently
from
173b094 to
7e8b808
Compare
obulat
added
🟨 priority: medium
The chevron rotation is mostly for indicating areas that expand/collapse. Like Gutenberg does.
But in this case, the chevron lives in a button that opens a popover. Like Github does.
Therefore, I would keep the chevron orientation as in the mockup. |
obulat
force-pushed
the
update/search_type_button
branch
from
6fe9e98 to
805c716
Compare
obulat
force-pushed
the
update/search_type_button
branch
3 times, most recently
from
1d1ce19 to
fd4f474
Compare
obulat
force-pushed
the
update/search_type_button
branch
from
a037637 to
346287e
Compare
obulat
force-pushed
the
update/search_type_button
branch
from
346287e to
11fa9e7
Compare
obulat
force-pushed
the
fix/internal_header_spacings
branch
from
06818c1 to
c9b691c
Compare
obulat
force-pushed
the
update/search_type_button
branch
2 times, most recently
from
a2865a3 to
9e21abe
Compare
fcoveram
previously requested changes
Jan 3, 2023
obulat
force-pushed
the
update/search_type_button
branch
from
9e21abe to
5373263
Compare
obulat
force-pushed
the
update/search_type_button
branch
2 times, most recently
from
5f63b65 to
2e9f60e
Compare
dhruvkb
approved these changes
Jan 6, 2023
obulat
force-pushed
the
update/search_type_button
branch
from
20409db to
25a5942
Compare
obulat
force-pushed
the
update/search_type_button
branch
from
498c7dd to
5106f6c
Compare
obulat
commented
Jan 8, 2023
| @@ -317,7 +317,7 @@ a.button { | |||
| } | |||
|
|
|||
| .action-menu { | |||
| @apply border-tx bg-tx text-dark-charcoal hover:border-dark-charcoal-20; | |||
| @apply border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20 group-focus-within:hover:border-tx; | |||
There was a problem hiding this comment.
Suggested change
| @apply border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20 group-focus-within:hover:border-tx; | |
| @apply border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20; |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Fixes
Related to #1433 by @panchovm
Description
The main goal of this PR is to make it possible to set whether the search type button has a label in JavaScript, instead of relying on the CSS breakpoint. This is necessary because the breakpoints from which the button has a text label (in addition to the icon) are different:
lgon the homepage andxlin the header.Here is a list of all changes in this PR:
to stop the button from changing the width when the label text changes, it adds all of the non-selected search type labels, but makes them invisible (and aria-hidden). This way, the button width is as high as the longest search type name. It is also capped at 175px (if the text is wider, it is truncated) to make sure that the button doesn't grow larger than 260px (the width of the content switcher popover).This change was reverted because it doesn't work well when the labels have very different lengths:activeTypein theuseSearchTypecomposable.rotates the chevron when the button is pressed to show that it's open. I wanted to try this out because that's what I usually see happen to the dropdown arrow, but I can easily revert it.Should it be rotated as in this PR, or should it stay the same as in Figma, @panchovm? - change reverted, see the reason in a comment below.Testing Instructions
Run the storybook to see the
VSearchTypeButton.Go to
/preferencesand turn thenew_headerflag on. Then, check the VSearchTypeButton in the homepage searchbar, and in the search header. It should look correct, and should have correct aria properties (so, check the Screen reader experience, too).Checklist
Update index.md).main) ora parent feature branch.
errors.
Developer Certificate of Origin
Developer Certificate of Origin