Update the VFilterButton to use the new variants #1132

obulat · 2023-04-04T11:01:04Z

Fixes

Description

This PR uses the new variants for the VFilterButton. This standardizes the border behavior (no dark ring in the focus ring, no transitions for border color).

The Storybook tests are also updated: better order, added focused state test, and the hot-fix for focus-ring (wait) is removed.

~~The xl and 2xl snapshots are updated because now the button has no border, so the width for larger buttons becomes 2px more.~~ The buttons were updated to always have a border, so no snapshot changes were necessary.

Testing Instructions

Checklist

My pull request has a descriptive title (not a vague title like
Update index.md).
My pull request targets the default branch of the repository (main) or
a parent feature branch.
My commit messages follow best practices.
My code follows the established code style of the repository.
I added or updated tests for the changes I made (if applicable).
I added or updated documentation (if applicable).
I tried running the project locally and verified that there are no visible
errors.

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

github-actions · 2023-04-04T11:25:10Z

Size Change: -76 B (0%)

Total Size: 853 kB

Filename	Size	Change
`./frontend/.nuxt/dist/client/app.js`	127 kB	-31 B (0%)
`./frontend/.nuxt/dist/client/app.modern.js`	118 kB	-35 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`./frontend/.nuxt/dist/client/234.js`	272 B	0 B
`./frontend/.nuxt/dist/client/234.modern.js`	277 B	0 B
`./frontend/.nuxt/dist/client/235.js`	1.85 kB	0 B
`./frontend/.nuxt/dist/client/commons/app.js`	90.3 kB	0 B
`./frontend/.nuxt/dist/client/commons/app.modern.js`	78.5 kB	0 B
`./frontend/.nuxt/dist/client/components/loading-icon.js`	752 B	0 B
`./frontend/.nuxt/dist/client/components/loading-icon.modern.js`	758 B	0 B
`./frontend/.nuxt/dist/client/components/table-sort-icon.js`	515 B	0 B
`./frontend/.nuxt/dist/client/components/table-sort-icon.modern.js`	518 B	0 B
`./frontend/.nuxt/dist/client/components/v-all-results-grid.js`	5.65 kB	0 B
`./frontend/.nuxt/dist/client/components/v-all-results-grid.modern.js`	5.49 kB	0 B
`./frontend/.nuxt/dist/client/components/v-audio-cell.js`	393 B	0 B
`./frontend/.nuxt/dist/client/components/v-audio-cell.modern.js`	396 B	0 B
`./frontend/.nuxt/dist/client/components/v-audio-details.js`	2.48 kB	0 B
`./frontend/.nuxt/dist/client/components/v-audio-details.modern.js`	1.78 kB	0 B
`./frontend/.nuxt/dist/client/components/v-audio-track-skeleton.js`	1.02 kB	0 B
`./frontend/.nuxt/dist/client/components/v-audio-track-skeleton.modern.js`	1.02 kB	0 B
`./frontend/.nuxt/dist/client/components/v-audio-track.js`	5.6 kB	0 B
`./frontend/.nuxt/dist/client/components/v-audio-track.modern.js`	5.54 kB	0 B
`./frontend/.nuxt/dist/client/components/v-back-to-search-results-link.js`	543 B	0 B
`./frontend/.nuxt/dist/client/components/v-back-to-search-results-link.modern.js`	548 B	0 B
`./frontend/.nuxt/dist/client/components/v-bone.js`	689 B	0 B
`./frontend/.nuxt/dist/client/components/v-bone.modern.js`	693 B	0 B
`./frontend/.nuxt/dist/client/components/v-box-layout.js`	1.28 kB	0 B
`./frontend/.nuxt/dist/client/components/v-box-layout.modern.js`	1.28 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-link.js`	1.12 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-link.modern.js`	1.1 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-page.js`	524 B	0 B
`./frontend/.nuxt/dist/client/components/v-content-page.modern.js`	528 B	0 B
`./frontend/.nuxt/dist/client/components/v-content-report-button.js`	784 B	0 B
`./frontend/.nuxt/dist/client/components/v-content-report-button.modern.js`	787 B	0 B
`./frontend/.nuxt/dist/client/components/v-content-report-form.js`	3.78 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-report-form.modern.js`	3.59 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-report-popover.js`	1.17 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-report-popover.modern.js`	4.19 kB	0 B
`./frontend/.nuxt/dist/client/components/v-copy-button.js`	3.99 kB	0 B
`./frontend/.nuxt/dist/client/components/v-copy-button.modern.js`	4 kB	0 B
`./frontend/.nuxt/dist/client/components/v-copy-license.js`	1.71 kB	0 B
`./frontend/.nuxt/dist/client/components/v-copy-license.modern.js`	1.69 kB	0 B
`./frontend/.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/d219393b.js`	10 kB	0 B
`./frontend/.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/d219393b.modern.js`	9.99 kB	0 B
`./frontend/.nuxt/dist/client/components/v-dmca-notice.js`	753 B	0 B
`./frontend/.nuxt/dist/client/components/v-dmca-notice.modern.js`	759 B	0 B
`./frontend/.nuxt/dist/client/components/v-error-image.js`	1.69 kB	0 B
`./frontend/.nuxt/dist/client/components/v-error-image.modern.js`	1.69 kB	0 B
`./frontend/.nuxt/dist/client/components/v-error-section.js`	372 B	0 B
`./frontend/.nuxt/dist/client/components/v-error-section.modern.js`	376 B	0 B
`./frontend/.nuxt/dist/client/components/v-external-search-form.js`	1.86 kB	0 B
`./frontend/.nuxt/dist/client/components/v-external-search-form.modern.js`	1.85 kB	0 B
`./frontend/.nuxt/dist/client/components/v-external-source-list.js`	844 B	0 B
`./frontend/.nuxt/dist/client/components/v-external-source-list.modern.js`	846 B	0 B
`./frontend/.nuxt/dist/client/components/v-full-layout.js`	2.13 kB	0 B
`./frontend/.nuxt/dist/client/components/v-full-layout.modern.js`	2.11 kB	0 B
`./frontend/.nuxt/dist/client/components/v-grid-skeleton.js`	1.61 kB	0 B
`./frontend/.nuxt/dist/client/components/v-grid-skeleton.modern.js`	1.62 kB	0 B
`./frontend/.nuxt/dist/client/components/v-home-gallery.js`	5.27 kB	0 B
`./frontend/.nuxt/dist/client/components/v-home-gallery.modern.js`	5.25 kB	0 B
`./frontend/.nuxt/dist/client/components/v-homepage-content.js`	1.76 kB	0 B
`./frontend/.nuxt/dist/client/components/v-homepage-content.modern.js`	1.73 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-carousel.js`	4.73 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-carousel.modern.js`	4.71 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-cell.js`	1.59 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-cell.modern.js`	1.59 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-details.js`	2.08 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-details.modern.js`	1.41 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-grid.js`	2.67 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-grid.modern.js`	2.55 kB	0 B
`./frontend/.nuxt/dist/client/components/v-license-tab-panel.js`	1.24 kB	0 B
`./frontend/.nuxt/dist/client/components/v-license-tab-panel.modern.js`	1.21 kB	0 B
`./frontend/.nuxt/dist/client/components/v-load-more.js`	810 B	0 B
`./frontend/.nuxt/dist/client/components/v-load-more.modern.js`	708 B	0 B
`./frontend/.nuxt/dist/client/components/v-media-license.js`	829 B	0 B
`./frontend/.nuxt/dist/client/components/v-media-license.modern.js`	836 B	0 B
`./frontend/.nuxt/dist/client/components/v-media-reuse.js`	2.31 kB	0 B
`./frontend/.nuxt/dist/client/components/v-media-reuse.modern.js`	2.28 kB	0 B
`./frontend/.nuxt/dist/client/components/v-media-tag.js`	416 B	0 B
`./frontend/.nuxt/dist/client/components/v-media-tag.modern.js`	420 B	0 B
`./frontend/.nuxt/dist/client/components/v-modal.js`	1.01 kB	0 B
`./frontend/.nuxt/dist/client/components/v-modal.modern.js`	996 B	0 B
`./frontend/.nuxt/dist/client/components/v-no-results.js`	757 B	0 B
`./frontend/.nuxt/dist/client/components/v-no-results.modern.js`	755 B	0 B
`./frontend/.nuxt/dist/client/components/v-radio.js`	1.54 kB	0 B
`./frontend/.nuxt/dist/client/components/v-radio.modern.js`	1.5 kB	0 B
`./frontend/.nuxt/dist/client/components/v-related-audio.js`	1.26 kB	0 B
`./frontend/.nuxt/dist/client/components/v-related-audio.modern.js`	1.27 kB	0 B
`./frontend/.nuxt/dist/client/components/v-related-images.js`	3.24 kB	0 B
`./frontend/.nuxt/dist/client/components/v-related-images.modern.js`	3.13 kB	0 B
`./frontend/.nuxt/dist/client/components/v-report-desc-form.js`	977 B	0 B
`./frontend/.nuxt/dist/client/components/v-report-desc-form.modern.js`	980 B	0 B
`./frontend/.nuxt/dist/client/components/v-row-layout.js`	1.67 kB	0 B
`./frontend/.nuxt/dist/client/components/v-row-layout.modern.js`	1.68 kB	0 B
`./frontend/.nuxt/dist/client/components/v-scroll-button.js`	824 B	0 B
`./frontend/.nuxt/dist/client/components/v-scroll-button.modern.js`	829 B	0 B
`./frontend/.nuxt/dist/client/components/v-search-grid.js`	5.68 kB	0 B
`./frontend/.nuxt/dist/client/components/v-search-grid.modern.js`	5.61 kB	0 B
`./frontend/.nuxt/dist/client/components/v-search-results-title.js`	599 B	0 B
`./frontend/.nuxt/dist/client/components/v-search-results-title.modern.js`	605 B	0 B
`./frontend/.nuxt/dist/client/components/v-server-timeout.js`	300 B	0 B
`./frontend/.nuxt/dist/client/components/v-server-timeout.modern.js`	303 B	0 B
`./frontend/.nuxt/dist/client/components/v-sketch-fab-viewer.js`	1.01 kB	0 B
`./frontend/.nuxt/dist/client/components/v-sketch-fab-viewer.modern.js`	912 B	0 B
`./frontend/.nuxt/dist/client/components/v-snackbar.js`	1.16 kB	0 B
`./frontend/.nuxt/dist/client/components/v-snackbar.modern.js`	1.16 kB	0 B
`./frontend/.nuxt/dist/client/components/v-sources-table.js`	15.2 kB	-5 B (0%)
`./frontend/.nuxt/dist/client/components/v-sources-table.modern.js`	15.2 kB	-5 B (0%)
`./frontend/.nuxt/dist/client/components/v-warning-suppressor.js`	306 B	0 B
`./frontend/.nuxt/dist/client/components/v-warning-suppressor.modern.js`	311 B	0 B
`./frontend/.nuxt/dist/client/pages/about.js`	1.4 kB	0 B
`./frontend/.nuxt/dist/client/pages/about.modern.js`	1.4 kB	0 B
`./frontend/.nuxt/dist/client/pages/audio/_id/index.js`	5.66 kB	0 B
`./frontend/.nuxt/dist/client/pages/audio/_id/index.modern.js`	4.97 kB	0 B
`./frontend/.nuxt/dist/client/pages/external-sources.js`	1.56 kB	0 B
`./frontend/.nuxt/dist/client/pages/external-sources.modern.js`	1.56 kB	0 B
`./frontend/.nuxt/dist/client/pages/feedback.js`	1.34 kB	0 B
`./frontend/.nuxt/dist/client/pages/feedback.modern.js`	1.34 kB	0 B
`./frontend/.nuxt/dist/client/pages/image/_id/index.js`	6.67 kB	0 B
`./frontend/.nuxt/dist/client/pages/image/_id/index.modern.js`	5.85 kB	0 B
`./frontend/.nuxt/dist/client/pages/image/_id/report.js`	1.27 kB	0 B
`./frontend/.nuxt/dist/client/pages/image/_id/report.modern.js`	4.26 kB	0 B
`./frontend/.nuxt/dist/client/pages/index.js`	7.33 kB	0 B
`./frontend/.nuxt/dist/client/pages/index.modern.js`	7.28 kB	0 B
`./frontend/.nuxt/dist/client/pages/preferences.js`	1.32 kB	0 B
`./frontend/.nuxt/dist/client/pages/preferences.modern.js`	1.32 kB	0 B
`./frontend/.nuxt/dist/client/pages/privacy.js`	1.01 kB	0 B
`./frontend/.nuxt/dist/client/pages/privacy.modern.js`	1.02 kB	0 B
`./frontend/.nuxt/dist/client/pages/search-help.js`	1.6 kB	0 B
`./frontend/.nuxt/dist/client/pages/search-help.modern.js`	1.58 kB	0 B
`./frontend/.nuxt/dist/client/pages/search.js`	2.2 kB	0 B
`./frontend/.nuxt/dist/client/pages/search.modern.js`	2.04 kB	0 B
`./frontend/.nuxt/dist/client/pages/search/audio.js`	3.61 kB	0 B
`./frontend/.nuxt/dist/client/pages/search/audio.modern.js`	3.52 kB	0 B
`./frontend/.nuxt/dist/client/pages/search/image.js`	2.84 kB	0 B
`./frontend/.nuxt/dist/client/pages/search/image.modern.js`	2.74 kB	0 B
`./frontend/.nuxt/dist/client/pages/search/index.js`	443 B	0 B
`./frontend/.nuxt/dist/client/pages/search/index.modern.js`	447 B	0 B
`./frontend/.nuxt/dist/client/pages/search/model-3d.js`	243 B	0 B
`./frontend/.nuxt/dist/client/pages/search/model-3d.modern.js`	246 B	0 B
`./frontend/.nuxt/dist/client/pages/search/search-page.types.js`	266 B	0 B
`./frontend/.nuxt/dist/client/pages/search/search-page.types.modern.js`	270 B	0 B
`./frontend/.nuxt/dist/client/pages/search/video.js`	240 B	0 B
`./frontend/.nuxt/dist/client/pages/search/video.modern.js`	244 B	0 B
`./frontend/.nuxt/dist/client/pages/sources.js`	1.52 kB	0 B
`./frontend/.nuxt/dist/client/pages/sources.modern.js`	1.52 kB	0 B
`./frontend/.nuxt/dist/client/runtime.js`	2.72 kB	0 B
`./frontend/.nuxt/dist/client/runtime.modern.js`	2.72 kB	0 B
`./frontend/.nuxt/dist/client/vendors/app.js`	64.1 kB	0 B
`./frontend/.nuxt/dist/client/vendors/app.modern.js`	63.3 kB	0 B

_{compressed-size-action}

github-actions · 2023-04-04T11:30:41Z

Full-stack documentation: https://docs.openverse.org/_preview/1132

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.

zackkrida · 2023-04-12T17:52:37Z

@obulat is this one ready for review? Just want to make sure; saw some new commits.

obulat · 2023-04-12T17:57:32Z

@obulat is this one ready for review? Just want to make sure; saw some new commits.

Yes, @zackkrida, it's ready for review. The latest change was to set the hover color to dark-charcoal-90, not 80, after @panchovm confirmed in Figma that the correct value is 90

zackkrida

LGTM.

fcoveram · 2023-04-12T18:18:52Z

Yes! Confirming what @obulat said

obulat · 2023-04-13T07:23:09Z

@panchovm, just a note about the bordered-white variant that is used for the Filters button when it's not pressed. Normally, it shows that it's hovered by showing the gray button. However, if it's focused, we do not show the border even if it's hovered, so when the button is focused, there's no indication of hover. I don't think it's a problem because it is an edge-case, and we do show the focus state which is required for accessibility.

fcoveram · 2023-04-13T08:21:31Z

You are right @obulat. We can leave it as it is.

I checked the same situation in Gutenberg and the style doesn't change. We can review it in the future if we notice some problems.

fcoveram

The button looks correct.

I just noticed a shaking effect when enabling it. In the inspector I see a width difference, pointed out in the table below.

Disabled	Enabled

fcoveram

It looks great ✨ 🚀

obulat requested a review from a team as a code owner April 4, 2023 11:01

obulat requested review from zackkrida and dhruvkb April 4, 2023 11:01

openverse-bot added this to Needs review in Openverse PRs Apr 4, 2023

obulat changed the base branch from main to add_new_buttons April 4, 2023 11:01

github-actions bot added the 🧱 stack: frontend Related to the Nuxt frontend label Apr 4, 2023

obulat added 🟨 priority: medium Not blocking but should be addressed soon 🕹 aspect: interface Concerns end-users' experience with the software ✨ goal: improvement Improvement to an existing user-facing feature labels Apr 4, 2023

obulat force-pushed the update/filter_button branch from 9d6ed9b to 8bd2121 Compare April 4, 2023 11:48

obulat force-pushed the add_new_buttons branch from f2c3ce3 to e37ce56 Compare April 4, 2023 16:10

obulat force-pushed the update/filter_button branch from 775d0c6 to b506445 Compare April 4, 2023 16:18

Base automatically changed from add_new_buttons to main April 4, 2023 17:26

obulat force-pushed the update/filter_button branch from b506445 to 917b1a7 Compare April 4, 2023 17:32

github-actions bot added 🧱 stack: api Related to the Django API 🧱 stack: ingestion server Related to the ingestion/data refresh server labels Apr 4, 2023

obulat force-pushed the update/filter_button branch from 547ea0b to c3a6f6b Compare April 5, 2023 04:12

obulat requested a review from a team as a code owner April 5, 2023 04:12

obulat mentioned this pull request Apr 5, 2023

Fix Storybook tests by waiting for URL instead of a port #1137

Merged

7 tasks

obulat force-pushed the update/filter_button branch from 88f21dc to 148282b Compare April 10, 2023 12:17

zackkrida approved these changes Apr 12, 2023

View reviewed changes

obulat requested a review from fcoveram April 13, 2023 07:14

obulat force-pushed the update/filter_button branch from 148282b to d5f9722 Compare April 14, 2023 08:50

fcoveram requested changes Apr 14, 2023

View reviewed changes

krysal removed 🧱 stack: api Related to the Django API 🧱 stack: ingestion server Related to the ingestion/data refresh server labels Apr 14, 2023

obulat changed the base branch from main_old to main April 16, 2023 05:45

obulat force-pushed the update/filter_button branch from d5f9722 to b02daff Compare April 16, 2023 12:24

obulat mentioned this pull request Apr 17, 2023

Focus ring has an extra border if an element has a transparent border #1252

Closed

obulat force-pushed the update/filter_button branch from b02daff to 1959262 Compare April 19, 2023 14:13

obulat changed the base branch from main to fix/focus_rings April 19, 2023 14:20

obulat force-pushed the fix/focus_rings branch from 894a7bc to 094fca7 Compare April 20, 2023 06:01

obulat force-pushed the update/filter_button branch from 3598f71 to d87b4e3 Compare April 20, 2023 06:38

obulat force-pushed the fix/focus_rings branch 2 times, most recently from c10d1c2 to d157169 Compare April 20, 2023 10:00

obulat force-pushed the update/filter_button branch from d87b4e3 to 766eec2 Compare April 20, 2023 10:17

obulat requested a review from fcoveram April 20, 2023 14:54

Base automatically changed from fix/focus_rings to main April 20, 2023 14:59

obulat added 8 commits April 21, 2023 07:03

Update VR snapshots

cb4afd5

Fix snapshots

c2941f9

Fix snapshot

4fb07fa

Use the new variants for filter button

3a76ed9

Update VFilterButton Storybook tests

ff6f4fa

Update stories to make the visual changes easier to see

fd3ddf9

Update snapshots

495527e

Try to fix flaky test

e2b1709

obulat force-pushed the update/filter_button branch from c30a3d6 to e2b1709 Compare April 21, 2023 04:04

fcoveram approved these changes Apr 24, 2023

View reviewed changes

Openverse PRs automation moved this from Needs review to Reviewer approved Apr 24, 2023

obulat merged commit 1f7b8e6 into main Apr 24, 2023

Openverse PRs automation moved this from Reviewer approved to Merged! Apr 24, 2023

obulat deleted the update/filter_button branch April 24, 2023 13:19

obulat mentioned this pull request May 1, 2023

Correctly pass maxDiffPixelRatio to add tolerance for pages-single-result VR test #1960

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update the VFilterButton to use the new variants #1132

Update the VFilterButton to use the new variants #1132

obulat commented Apr 4, 2023 •

edited

Loading

github-actions bot commented Apr 4, 2023 •

edited

Loading

github-actions bot commented Apr 4, 2023

zackkrida commented Apr 12, 2023

obulat commented Apr 12, 2023

zackkrida left a comment

fcoveram commented Apr 12, 2023

obulat commented Apr 13, 2023

fcoveram commented Apr 13, 2023

fcoveram left a comment

fcoveram left a comment

Update the VFilterButton to use the new variants #1132

Update the VFilterButton to use the new variants #1132

Conversation

obulat commented Apr 4, 2023 • edited Loading

Fixes

Description

Testing Instructions

Checklist

Developer Certificate of Origin

github-actions bot commented Apr 4, 2023 • edited Loading

github-actions bot commented Apr 4, 2023

zackkrida commented Apr 12, 2023

obulat commented Apr 12, 2023

zackkrida left a comment

Choose a reason for hiding this comment

fcoveram commented Apr 12, 2023

obulat commented Apr 13, 2023

fcoveram commented Apr 13, 2023

fcoveram left a comment

Choose a reason for hiding this comment

fcoveram left a comment

Choose a reason for hiding this comment

obulat commented Apr 4, 2023 •

edited

Loading

github-actions bot commented Apr 4, 2023 •

edited

Loading