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

feat(button): Refactor button component #276

Merged
merged 1 commit into from
Oct 25, 2023
Merged

feat(button): Refactor button component #276

merged 1 commit into from
Oct 25, 2023

Conversation

diogomateus
Copy link
Collaborator

What this PR does

This PR refactors the button component to use up to date icons, new variant names and replacing props names for a more standardised approach (children vs buttonTitle allowing ReactNodes).

How to test?

Run storybook and run button story.

Preview:
Screenshot 2023-10-20 at 10 21 40
Screenshot 2023-10-20 at 10 21 35
Screenshot 2023-10-20 at 10 21 45

Checklist:

  • I reviewed my own code
  • The changes align with the designs I received
    Or give a reason why this does not apply:
  • I have attached screenshot(s), video(s) or gif(s) showing that the solution is working as expected
    Or give a reason why this does not apply:
  • I have updated the task(s) status on Linear
  • All new media is optimized (images, gifs, videos)

Browser support

My code works in the following browsers:

  • Firefox
  • Chrome
  • Safari
  • Edge

src/lib/models/styles.ts Outdated Show resolved Hide resolved
Copy link
Contributor

@talo242 talo242 left a comment

Choose a reason for hiding this comment

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

Just a comment about deprecating leftIcon prop, but that change could be introduced in a subsequent PR so this one is good to go 👍

src/lib/components/downloadButton/index.tsx Show resolved Hide resolved
@a-maffei
Copy link
Contributor

a-maffei commented Oct 25, 2023

While reviewing the new Card component, I observed that the button text overflows vertically on smaller screens, especially when the copy is lengthy. A solution could be setting the button's height to auto and adjusting its padding. The rest looks great!

Screenshot 2023-10-25 at 13 24 17

@diogomateus
Copy link
Collaborator Author

While reviewing the new Card component, I observed that the button text overflows vertically on smaller screens, especially when the copy is lengthy. A solution could be setting the button's height to auto and adjusting its padding. The rest looks great!

Screenshot 2023-10-25 at 13 24 17

I think this should actually be fixed now, at least according to the visual regression report on app! 🤞

I think adapting the mobile layout would also help 😅 but I usually don't care that much about it on storybook

@diogomateus diogomateus force-pushed the diogo/button branch 3 times, most recently from 176fcd0 to 910a563 Compare October 25, 2023 14:56
@diogomateus diogomateus merged commit 4432438 into main Oct 25, 2023
4 checks passed
@diogomateus diogomateus deleted the diogo/button branch October 25, 2023 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants