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.

Sign up for GitHub

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

Jump to bottom

feat(ButtonIcon): implement clickable icon component #405

Merged
merged 9 commits into from Dec 6, 2021
Merged

feat(ButtonIcon): implement clickable icon component #405

merged 9 commits into from Dec 6, 2021

Conversation

tiagoalvesdulce
Copy link
Member

Closes #387

Screen Shot 2021-11-29 at 14 29 40

bgptr
bgptr suggested changes Nov 29, 2021
View reviewed changes
Copy link
Contributor

@bgptr bgptr left a comment

Choose a reason for hiding this comment

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

Overall looking good, only noticed these issues:

  • styles are missing on the disabled state. Cursor, hover and colors stay the same.
  • spinner is not visible (white on white background) in loading state:

image

@tiagoalvesdulce
Copy link
Member Author

Oh, I completely forgot to implement the disabled state

@tiagoalvesdulce tiagoalvesdulce mentioned this pull request Nov 29, 2021
Merged
@bgptr
Copy link
Contributor

bgptr commented Nov 30, 2021 •
edited

Looks cool. Just two more things.

  • the darker icon color should be lighter in the disabled state:

image

  • would be nice to be able to set icon colors from props. i.e.: image

bgptr
bgptr reviewed Nov 30, 2021
View reviewed changes
Copy link
Contributor

@bgptr bgptr left a comment

Choose a reason for hiding this comment

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

just one little inline nit, but otherwise LGTM

src/theme/lightTheme.js Outdated
"button-icon-background": "var(--color-white)",
"button-icon-color-1": "var(--icon-color)",
"button-icon-color-2": "var(--color-primary-dark)",
"button-icon-color-1-disabled": "var(--color-gray-light",
Copy link
Contributor

Choose a reason for hiding this comment

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

missing close parenthesis

@bgptr bgptr mentioned this pull request Dec 1, 2021
Merged
amass01
amass01 approved these changes Dec 1, 2021
View reviewed changes
Copy link
Member

@amass01 amass01 left a comment

Choose a reason for hiding this comment

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

LGTM.

One general question: why do we need style prop if we have className ?
I guess for backward compatibility in decrediton ?

@tiagoalvesdulce
Copy link
Member Author

@bgptr I'm thinking about ditching the style prop to encourage the usage of className as per conversation with amass on matrix. Do you this is important for Decrediton anyhow?

@bgptr
Copy link
Contributor

bgptr commented Dec 2, 2021

@tiagoalvesdulce It's not used, go for it.

@tiagoalvesdulce tiagoalvesdulce merged commit 258d3ea into decred:master Dec 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@amass01 amass01 amass01 approved these changes

@bgptr bgptr bgptr approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Icons: update clickable icons
3 participants
@tiagoalvesdulce @bgptr @amass01