Create a new VIconButton
#2697
Merged
Create a new VIconButton
#2697
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
github-actions
bot
added
🧱 stack: documentation
obulat
force-pushed
the
add/new_icon_button
branch
from
e258c38 to
ee7863b
Compare
openverse-bot
added
the
🚦 status: awaiting triage
|
Size Change: +1.4 kB (0%) Total Size: 839 kB
ℹ️ View Unchanged
|
obulat
added
🟨 priority: medium
|
Full-stack documentation: https://docs.openverse.org/_preview/2697 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. |
AetherUnbound
approved these changes
Jul 25, 2023
| @@ -33,17 +38,20 @@ export const Template = (args) => ({ | |||
| export const sizesTemplate = (args) => ({ | |||
| template: ` | |||
| <div class="flex gap-x-2"> | |||
| <div v-for="size in ['tiny', 'small', 'medium', 'large', 'extra-large']" :key="size" class="flex flex-col items-center p-2"> | |||
| <div v-for="size in args.baseButtonSizes" :key="size" class="flex flex-col items-center p-2"> | |||
|
@obulat could you clarify the intention of this PR? It creates the new icon button, but doesn't actually implement it anywhere, right? Does that mean that the button styles do need to change in the app (which will require updating visual regression tests) and that we will do that in subsequent PR(s)? I'm mostly curious about the approach taken and if it would make more sense to create the new VIconButton but backwards-compatible, with the old sizes included (to be deprecated later), rather than maintain two versions for a (likely brief) period. |
obulat
force-pushed
the
add/new_icon_button
branch
from
b6c8276 to
bca558e
Compare
Yes! Those sizes were previously used for Audio controls. Now the designs have updated buttons with fewer sizes - that's why we are updating. |
obulat
force-pushed
the
add/new_icon_button
branch
from
bca558e to
d2d5df3
Compare
obulat
force-pushed
the
add/new_icon_button
branch
from
d2d5df3 to
44328b2
Compare
The
The change in "close" buttons will cause changes in the visual regression snapshots.
Current component ( |
8 tasks
fcoveram
approved these changes
Jul 27, 2023
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 #460 by @fcoveram
Description
This PR adds a new
VIconButtoncomponent using the updated styles in the Figma mockupsThe old styles for
VIconButtonwere used mainly in the popover/modal close buttons, audio controls and the buttons within the search bar. They will gradually be updated to use the newVIconButton.Testing Instructions
Check out the new
VIconButtonstory. It should have all of the styles from the Figma mockup. Old buttons (listed above) should also look the same.Check the rendered Story: https://docs.openverse.org/_preview/2697/storybook/?path=/docs/components-viconbutton--default-story
Checklist
Update index.md).main) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin