Update report buttons #1004
Merged
Update report buttons #1004
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
obulat
added
🟨 priority: medium
|
Size Change: -1.15 kB (0%) Total Size: 856 kB
ℹ️ View Unchanged
|
|
Full-stack documentation: https://docs.openverse.org/_preview/1004 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. |
obulat
force-pushed
the
add_new_buttons
branch
6 times, most recently
from
eb15997
to
64374df
Compare
obulat
force-pushed
the
add_new_buttons
branch
2 times, most recently
from
f2c3ce3
to
e37ce56
Compare
obulat
force-pushed
the
use_new_buttons
branch
3 times, most recently
from
34dc86a
to
7b0713c
Compare
6 tasks
fcoveram
requested changes
Apr 24, 2023
fcoveram
requested changes
Apr 25, 2023
There was a problem hiding this comment.
I don't know why, but the focus style's white ring looks thicker than the pink one. Here is the style documentation in the Design Library, and below is attached a zoom-in of the area.
obulat
force-pushed
the
use_new_buttons
branch
2 times, most recently
from
4e606f9
to
4e2fc3c
Compare
I have changed the inner ring width, could you check if it looks correct now, @panchovm ? I don't fully understand what's happening here. The ring width was set to 1.5px, the same as the pink ring width. I've changed the white inner border width to 1px, but it looks as wide as the outer pink one. And the other Storybook snapshots (the focused ones) didn't change. TL;DR: I think the rings are fixed now, but I don't know how |
fcoveram
requested changes
Apr 28, 2023
|
I've found the reason for mismatch: Chrome applies 1px of outline offset for any focus-visible link. This is why on Chrome the white ring looked bigger than the pink ring. Updating the code now. |
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.
Fixes
Related to #1020 by @obulat
Description
This PR uses the new button variants and sizes from the Core UI improvements project in the content report components.
transparent-graymediumhas-icon-end,pe-0(to line it up with the layout)VContentReportButton.vuebordered-graymediumVContentReportForm.vuefilled-darkmediumhas-icon-endReport button's font is semibold, and dark-charcoal instead of dark-charcoal-70. On hover, it has a border instead of underline, as before.
The buttons have larger font and icons, and the bordered button's border is lighter:
Testing Instructions
Check that the 3 buttons use the correct styles.
Checklist
Update index.md).main) ora parent feature branch.
errors.
Developer Certificate of Origin
Developer Certificate of Origin