Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

THEMES-1864: Button styling fix #273

Merged
merged 4 commits into from
Aug 20, 2024

Conversation

vgalatro
Copy link
Contributor

@vgalatro vgalatro commented Aug 14, 2024

Description

Jira Ticket: THEMES-1864

This PR fixes the styling for the button component. It was out of sync with what is in the Figma style docs. The button styles are located here: https://www.figma.com/design/NBjMF1v4mzwv9jkn7NEq9V/Themes-Block-Styling-2.0?node-id=10862-135976&t=YU12KWjCz73C7KdP-0.

Test Steps

  1. Checkout this branch - git checkout THEMES-1864
  2. Update dependencies - npm i
  3. Run Storybook npm run storybook
  4. Verify that the Button variants (on this page with storybook running http://localhost:6006/?path=/story/components-button--button-variants) Primary, Primary-reverse, Secondary, and Secondary-reverse match the Figma docs. Check both the at rest and hover states.

@vgalatro vgalatro requested a review from a team as a code owner August 14, 2024 14:40
Copy link
Contributor

@malavikakoppula malavikakoppula left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vgalatro Secondary reverse button label is not visible until hover it. In Figma, it has neutral-3 background.

Screenshot 2024-08-15 at 11 43 39 AM Screenshot 2024-08-15 at 11 40 23 AM

@vgalatro
Copy link
Contributor Author

@malavikakoppula , I believe that is just the box's background color and not part of the button. It's meant to be used on dark backgrounds and the colors for the rest state are listed here:
Screenshot 2024-08-15 at 12 09 45 PM

@malavikakoppula
Copy link
Contributor

@malavikakoppula , I believe that is just the box's background color and not part of the button. It's meant to be used on dark backgrounds and the colors for the rest state are listed here: Screenshot 2024-08-15 at 12 09 45 PM

So, including border, button label should also appear on hover?

@vgalatro
Copy link
Contributor Author

@malavikakoppula , right, it's just the background for storybook is also white, which makes it hard to see.

Copy link
Contributor

@malavikakoppula malavikakoppula left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@malavikakoppula malavikakoppula dismissed their stale review August 19, 2024 20:15

needed additional review

@vgalatro vgalatro merged commit 8534f71 into arc-themes-release-version-2.5.0 Aug 20, 2024
7 checks passed
@vgalatro vgalatro deleted the THEMES-1864 branch August 20, 2024 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants