Audit buttons #1864

obulat · 2022-09-26T14:08:00Z

Fixes

Description

This PR audits all the button variants to prepare for the new header. The Storybook VButton story was updated with the new variant groups: Primary, Secondary, and Action Menu.

Testing Instructions

Look at the variants section of the VButton story in the Storybook. The different variants all have pressed, hovered and focused styles according to the mockups in https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=2352%3A4745 .

I've also added the Storybook visual regression tests for all button variants and their states.

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 · 2022-09-26T14:08:27Z

Storybook and Tailwind configuration previews: Ready

Storybook: https://wordpress.github.io/openverse-frontend/_preview/1864
Tailwind: https://wordpress.github.io/openverse-frontend/_preview/1864/tailwind

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.

github-actions · 2022-09-26T14:12:37Z

Size Change: +12 kB (+2%)

Total Size: 813 kB

Filename	Size	Change
`./.nuxt/dist/client/234.js`	0 B	-272 B (removed)	🏆
`./.nuxt/dist/client/234.modern.js`	0 B	-277 B (removed)	🏆
`./.nuxt/dist/client/235.js`	0 B	-1.85 kB (removed)	🏆
`./.nuxt/dist/client/app.js`	127 kB	+5.38 kB (+4%)
`./.nuxt/dist/client/app.modern.js`	119 kB	+6.36 kB (+6%)	🔍
`./.nuxt/dist/client/commons/app.js`	88.2 kB	+20 B (0%)
`./.nuxt/dist/client/commons/app.modern.js`	77.1 kB	+25 B (0%)
`./.nuxt/dist/client/components/v-content-report-button.js`	778 B	+13 B (+2%)
`./.nuxt/dist/client/components/v-content-report-button.modern.js`	782 B	+10 B (+1%)
`./.nuxt/dist/client/components/v-content-report-form.js`	3.75 kB	-18 B (0%)
`./.nuxt/dist/client/components/v-content-report-form.modern.js`	3.56 kB	-18 B (-1%)
`./.nuxt/dist/client/components/v-content-report-popover.js`	4.43 kB	-23 B (-1%)
`./.nuxt/dist/client/components/v-content-report-popover.modern.js`	4.24 kB	-16 B (0%)
`./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/09090664.js`	9.69 kB	+48 B (0%)
`./.nuxt/dist/client/components/v-copy-license/components/v-error-image/components/v-media-reuse/components/v-search-grid/09090664.modern.js`	9.66 kB	+33 B (0%)
`./.nuxt/dist/client/components/v-search-grid.js`	5.45 kB	+12 B (0%)
`./.nuxt/dist/client/components/v-search-type-radio.js`	794 B	-35 B (-4%)
`./.nuxt/dist/client/components/v-search-type-radio.modern.js`	769 B	-51 B (-6%)	✅
`./.nuxt/dist/client/components/v-sources-table.js`	15 kB	+179 B (+1%)
`./.nuxt/dist/client/components/v-sources-table.modern.js`	15 kB	+182 B (+1%)
`./.nuxt/dist/client/pages/index.modern.js`	4.91 kB	-31 B (-1%)
`./.nuxt/dist/client/runtime.js`	2.67 kB	-61 B (-2%)
`./.nuxt/dist/client/runtime.modern.js`	2.67 kB	-61 B (-2%)
`./.nuxt/dist/client/vendors/app.js`	47.9 kB	+78 B (0%)
`./.nuxt/dist/client/220.js`	272 B	+272 B (new file)	🆕
`./.nuxt/dist/client/220.modern.js`	277 B	+277 B (new file)	🆕
`./.nuxt/dist/client/221.js`	1.85 kB	+1.85 kB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
`./.nuxt/dist/client/components/loading-icon.js`	746 B	-1 B (0%)
`./.nuxt/dist/client/components/loading-icon.modern.js`	753 B	0 B
`./.nuxt/dist/client/components/table-sort-icon.js`	508 B	0 B
`./.nuxt/dist/client/components/table-sort-icon.modern.js`	512 B	0 B
`./.nuxt/dist/client/components/v-all-results-grid.js`	2.77 kB	-2 B (0%)
`./.nuxt/dist/client/components/v-all-results-grid.modern.js`	2.75 kB	0 B
`./.nuxt/dist/client/components/v-all-results-grid/pages/search/audio/pages/search/index.js`	3.02 kB	-2 B (0%)
`./.nuxt/dist/client/components/v-all-results-grid/pages/search/audio/pages/search/index.modern.js`	2.92 kB	-1 B (0%)
`./.nuxt/dist/client/components/v-audio-cell.js`	357 B	0 B
`./.nuxt/dist/client/components/v-audio-cell.modern.js`	359 B	-1 B (0%)
`./.nuxt/dist/client/components/v-audio-details.js`	1.81 kB	+2 B (0%)
`./.nuxt/dist/client/components/v-audio-details.modern.js`	1.79 kB	-3 B (0%)
`./.nuxt/dist/client/components/v-audio-track-skeleton.js`	1.01 kB	-3 B (0%)
`./.nuxt/dist/client/components/v-audio-track-skeleton.modern.js`	1.02 kB	0 B
`./.nuxt/dist/client/components/v-audio-track.js`	5.12 kB	+4 B (0%)
`./.nuxt/dist/client/components/v-audio-track.modern.js`	5.05 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-back-to-search-results-link.js`	570 B	-1 B (0%)
`./.nuxt/dist/client/components/v-back-to-search-results-link.modern.js`	573 B	-1 B (0%)
`./.nuxt/dist/client/components/v-bone.js`	684 B	0 B
`./.nuxt/dist/client/components/v-bone.modern.js`	687 B	-3 B (0%)
`./.nuxt/dist/client/components/v-box-layout.js`	1.2 kB	-3 B (0%)
`./.nuxt/dist/client/components/v-box-layout.modern.js`	1.2 kB	0 B
`./.nuxt/dist/client/components/v-content-link.js`	1.13 kB	-2 B (0%)
`./.nuxt/dist/client/components/v-content-link.modern.js`	1.11 kB	-2 B (0%)
`./.nuxt/dist/client/components/v-content-page.js`	466 B	0 B
`./.nuxt/dist/client/components/v-content-page.modern.js`	471 B	+1 B (0%)
`./.nuxt/dist/client/components/v-content-settings-button.js`	689 B	-2 B (0%)
`./.nuxt/dist/client/components/v-content-settings-button.modern.js`	694 B	-1 B (0%)
`./.nuxt/dist/client/components/v-copy-button.js`	3.97 kB	0 B
`./.nuxt/dist/client/components/v-copy-button.modern.js`	3.99 kB	+5 B (0%)
`./.nuxt/dist/client/components/v-copy-license.js`	2.95 kB	+3 B (0%)
`./.nuxt/dist/client/components/v-copy-license.modern.js`	2.92 kB	-4 B (0%)
`./.nuxt/dist/client/components/v-dmca-notice.js`	749 B	0 B
`./.nuxt/dist/client/components/v-dmca-notice.modern.js`	750 B	-4 B (-1%)
`./.nuxt/dist/client/components/v-error-image.js`	1.69 kB	0 B
`./.nuxt/dist/client/components/v-error-image.modern.js`	1.68 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-error-section.js`	372 B	+1 B (0%)
`./.nuxt/dist/client/components/v-error-section.modern.js`	376 B	0 B
`./.nuxt/dist/client/components/v-full-layout.js`	1.48 kB	-1 B (0%)
`./.nuxt/dist/client/components/v-full-layout.modern.js`	1.48 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-grid-skeleton.js`	1.6 kB	-3 B (0%)
`./.nuxt/dist/client/components/v-grid-skeleton.modern.js`	1.61 kB	0 B
`./.nuxt/dist/client/components/v-image-cell-square.js`	1.01 kB	-1 B (0%)
`./.nuxt/dist/client/components/v-image-cell-square.modern.js`	1.02 kB	0 B
`./.nuxt/dist/client/components/v-image-cell.js`	1.42 kB	-1 B (0%)
`./.nuxt/dist/client/components/v-image-cell.modern.js`	1.42 kB	-1 B (0%)
`./.nuxt/dist/client/components/v-image-details.js`	1.44 kB	-1 B (0%)
`./.nuxt/dist/client/components/v-image-details.modern.js`	1.43 kB	0 B
`./.nuxt/dist/client/components/v-image-grid.js`	2.53 kB	-3 B (0%)
`./.nuxt/dist/client/components/v-image-grid.modern.js`	2.42 kB	+3 B (0%)
`./.nuxt/dist/client/components/v-license-tab-panel.js`	923 B	+2 B (0%)
`./.nuxt/dist/client/components/v-license-tab-panel.modern.js`	919 B	+2 B (0%)
`./.nuxt/dist/client/components/v-load-more.js`	787 B	0 B
`./.nuxt/dist/client/components/v-load-more.modern.js`	684 B	-1 B (0%)
`./.nuxt/dist/client/components/v-media-license.js`	798 B	0 B
`./.nuxt/dist/client/components/v-media-license.modern.js`	808 B	0 B
`./.nuxt/dist/client/components/v-media-reuse.js`	1.08 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-media-reuse.modern.js`	1.08 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-media-reuse/pages/image/_id.js`	2.95 kB	+4 B (0%)
`./.nuxt/dist/client/components/v-media-reuse/pages/image/_id.modern.js`	2.93 kB	-3 B (0%)
`./.nuxt/dist/client/components/v-media-tag.js`	430 B	0 B
`./.nuxt/dist/client/components/v-media-tag.modern.js`	434 B	0 B
`./.nuxt/dist/client/components/v-meta-search-form.js`	3.11 kB	+6 B (0%)
`./.nuxt/dist/client/components/v-meta-search-form.modern.js`	3.08 kB	+8 B (0%)
`./.nuxt/dist/client/components/v-meta-source-list.js`	2.57 kB	+6 B (0%)
`./.nuxt/dist/client/components/v-meta-source-list.modern.js`	2.54 kB	+9 B (0%)
`./.nuxt/dist/client/components/v-no-results.js`	2.77 kB	+8 B (0%)
`./.nuxt/dist/client/components/v-no-results.modern.js`	2.74 kB	+9 B (0%)
`./.nuxt/dist/client/components/v-radio.js`	1.51 kB	+2 B (0%)
`./.nuxt/dist/client/components/v-radio.modern.js`	1.47 kB	+2 B (0%)
`./.nuxt/dist/client/components/v-related-audio.js`	1.23 kB	0 B
`./.nuxt/dist/client/components/v-related-audio.modern.js`	1.24 kB	0 B
`./.nuxt/dist/client/components/v-related-images.js`	3.09 kB	-3 B (0%)
`./.nuxt/dist/client/components/v-related-images.modern.js`	2.98 kB	+4 B (0%)
`./.nuxt/dist/client/components/v-report-desc-form.js`	966 B	0 B
`./.nuxt/dist/client/components/v-report-desc-form.modern.js`	965 B	0 B
`./.nuxt/dist/client/components/v-row-layout.js`	1.68 kB	+3 B (0%)
`./.nuxt/dist/client/components/v-row-layout.modern.js`	1.69 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-scroll-button.js`	813 B	0 B
`./.nuxt/dist/client/components/v-scroll-button.modern.js`	819 B	0 B
`./.nuxt/dist/client/components/v-search-grid.modern.js`	5.4 kB	+6 B (0%)
`./.nuxt/dist/client/components/v-search-results-title.js`	657 B	0 B
`./.nuxt/dist/client/components/v-search-results-title.modern.js`	651 B	-1 B (0%)
`./.nuxt/dist/client/components/v-server-timeout.js`	298 B	0 B
`./.nuxt/dist/client/components/v-server-timeout.modern.js`	303 B	0 B
`./.nuxt/dist/client/components/v-sketch-fab-viewer.js`	995 B	-1 B (0%)
`./.nuxt/dist/client/components/v-sketch-fab-viewer.modern.js`	894 B	0 B
`./.nuxt/dist/client/components/v-skip-to-content-container.js`	887 B	-2 B (0%)
`./.nuxt/dist/client/components/v-skip-to-content-container.modern.js`	895 B	+1 B (0%)
`./.nuxt/dist/client/components/v-snackbar.js`	1.18 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-snackbar.modern.js`	1.19 kB	+1 B (0%)
`./.nuxt/dist/client/components/v-tab-panel.js`	688 B	-1 B (0%)
`./.nuxt/dist/client/components/v-tab-panel.modern.js`	684 B	0 B
`./.nuxt/dist/client/components/v-tab.js`	1.73 kB	+2 B (0%)
`./.nuxt/dist/client/components/v-tab.modern.js`	1.72 kB	-6 B (0%)
`./.nuxt/dist/client/components/v-tabs.js`	780 B	0 B
`./.nuxt/dist/client/components/v-tabs.modern.js`	765 B	0 B
`./.nuxt/dist/client/components/v-warning-suppressor.js`	298 B	0 B
`./.nuxt/dist/client/components/v-warning-suppressor.modern.js`	303 B	0 B
`./.nuxt/dist/client/pages/about.js`	1.05 kB	+3 B (0%)
`./.nuxt/dist/client/pages/about.modern.js`	1.06 kB	+4 B (0%)
`./.nuxt/dist/client/pages/audio/_id.js`	6.62 kB	-4 B (0%)
`./.nuxt/dist/client/pages/audio/_id.modern.js`	6.45 kB	-5 B (0%)
`./.nuxt/dist/client/pages/feedback.js`	3.23 kB	-4 B (0%)
`./.nuxt/dist/client/pages/feedback.modern.js`	3.21 kB	-2 B (0%)
`./.nuxt/dist/client/pages/image/_id.js`	6.99 kB	+2 B (0%)
`./.nuxt/dist/client/pages/image/_id.modern.js`	6.77 kB	+6 B (0%)
`./.nuxt/dist/client/pages/index.js`	5.05 kB	-2 B (0%)
`./.nuxt/dist/client/pages/meta-search.js`	1.67 kB	-2 B (0%)
`./.nuxt/dist/client/pages/meta-search.modern.js`	1.67 kB	+1 B (0%)
`./.nuxt/dist/client/pages/preferences.js`	1.21 kB	-1 B (0%)
`./.nuxt/dist/client/pages/preferences.modern.js`	1.21 kB	-6 B (0%)
`./.nuxt/dist/client/pages/search-help.js`	1.54 kB	-2 B (0%)
`./.nuxt/dist/client/pages/search-help.modern.js`	1.55 kB	+1 B (0%)
`./.nuxt/dist/client/pages/search.js`	2.73 kB	-3 B (0%)
`./.nuxt/dist/client/pages/search.modern.js`	2.58 kB	+1 B (0%)
`./.nuxt/dist/client/pages/search/audio.js`	1.19 kB	+2 B (0%)
`./.nuxt/dist/client/pages/search/audio.modern.js`	1.19 kB	+1 B (0%)
`./.nuxt/dist/client/pages/search/image.js`	2.78 kB	-4 B (0%)
`./.nuxt/dist/client/pages/search/image.modern.js`	2.67 kB	+3 B (0%)
`./.nuxt/dist/client/pages/search/index.js`	2.99 kB	-3 B (0%)
`./.nuxt/dist/client/pages/search/index.modern.js`	2.96 kB	0 B
`./.nuxt/dist/client/pages/search/model-3d.js`	243 B	0 B
`./.nuxt/dist/client/pages/search/model-3d.modern.js`	246 B	0 B
`./.nuxt/dist/client/pages/search/search-page.types.js`	266 B	0 B
`./.nuxt/dist/client/pages/search/search-page.types.modern.js`	270 B	0 B
`./.nuxt/dist/client/pages/search/video.js`	240 B	+1 B (0%)
`./.nuxt/dist/client/pages/search/video.modern.js`	243 B	0 B
`./.nuxt/dist/client/pages/sources.js`	1.44 kB	-3 B (0%)
`./.nuxt/dist/client/pages/sources.modern.js`	1.45 kB	+2 B (0%)
`./.nuxt/dist/client/vendors/app.modern.js`	47 kB	-3 B (0%)

_{compressed-size-action}

https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=558%3A2277

zackkrida

Great work. I notice one bug, but it predates this PR and is visible on the live site, too. The left button in the reporting form is taller than the right because of its border:

Do all our buttons need a border set matching the background color to fix this?

dhruvkb

Thanks for consolidating all the different variants.

obulat · 2022-09-30T03:56:43Z

Do all our buttons need a border set matching the background color to fix this?

Thank you for noticing it and suggesting the fix! I did make sure to make all buttons have a border to avoid jumping on hover when the color changes, but I didn't realize that a transparent border will be invisible for the dark charcoal buttons 😬
I tried adding the matching border color, and it didn't change anything. Apparently, the problem here is that I added border-tx, but forgot to add border.

Update button variants

f949c7b

openverse-bot added ✨ goal: improvement Improvement to an existing user-facing feature 💻 aspect: code Concerns the software code in the repository 🟧 priority: high Stalls work on the project or its dependents labels Sep 26, 2022

obulat self-assigned this Sep 26, 2022

Update button variants

b4ce8d4

obulat force-pushed the audit_buttons branch from 52bb1bf to b4ce8d4 Compare September 26, 2022 14:18

obulat added 2 commits September 26, 2022 18:28

Update tests

1102918

Update snapshots

fc87f3b

obulat marked this pull request as ready for review September 27, 2022 04:24

obulat requested a review from a team as a code owner September 27, 2022 04:24

obulat requested review from dhruvkb and sarayourfriend September 27, 2022 04:24

obulat added 3 commits September 27, 2022 07:42

Make the action-menu buttons match the mockups

21266e8

https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=558%3A2277

Update snapshots

0715cfc

Make action-menu-bordered match the mockups

98d9047

zackkrida requested review from zackkrida and removed request for sarayourfriend September 27, 2022 19:21

zackkrida approved these changes Sep 29, 2022

View reviewed changes

dhruvkb approved these changes Sep 29, 2022

View reviewed changes

obulat added 4 commits September 30, 2022 08:32

Set the border for all non-plain-dangerous button variants

52b9b50

Set the correct bg shade

43bf93f

Update the snapshots

8ae7b10

Remove duplicated border declarations

de23a4f

obulat added 7 commits September 30, 2022 10:00

Update snapshots

d31a2dc

Revert height changes

126ece5

Add snapshots

b9997c5

Add snapshots

0a7c648

Add snapshots

60cc077

Add snapshots

00d238b

Add snapshots

6867734

obulat merged commit afd7c7d into main Sep 30, 2022

obulat deleted the audit_buttons branch September 30, 2022 12:05

github-actions bot pushed a commit that referenced this pull request Sep 30, 2022

Clean preview for PR #1864

373b7ca

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Audit buttons #1864

Audit buttons #1864

obulat commented Sep 26, 2022 •

edited

Loading

github-actions bot commented Sep 26, 2022 •

edited

Loading

github-actions bot commented Sep 26, 2022 •

edited

Loading

zackkrida left a comment

dhruvkb left a comment

obulat commented Sep 30, 2022 •

edited

Loading

Audit buttons #1864

Audit buttons #1864

Conversation

obulat commented Sep 26, 2022 • edited Loading

Fixes

Description

Testing Instructions

Checklist

Developer Certificate of Origin

github-actions bot commented Sep 26, 2022 • edited Loading

github-actions bot commented Sep 26, 2022 • edited Loading

zackkrida left a comment

Choose a reason for hiding this comment

dhruvkb left a comment

Choose a reason for hiding this comment

obulat commented Sep 30, 2022 • edited Loading

obulat commented Sep 26, 2022 •

edited

Loading

github-actions bot commented Sep 26, 2022 •

edited

Loading

github-actions bot commented Sep 26, 2022 •

edited

Loading

obulat commented Sep 30, 2022 •

edited

Loading