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

New design of VaButton implementation #1923

Closed
aluarius opened this issue Jun 8, 2022 · 6 comments · Fixed by #1945
Closed

New design of VaButton implementation #1923

aluarius opened this issue Jun 8, 2022 · 6 comments · Fixed by #1945
Assignees
Labels
feature Something useful to end user

Comments

@aluarius
Copy link
Contributor

aluarius commented Jun 8, 2022

New buttons (figma) have some new states, that will affect the list of component's props.

  1. Add the pressed state. I can't see it anywhere at all. May be we should create new composable usePressed.
  2. Delete the outline prop and state (no design for it, watch next option).
  3. Add borderColor prop (undefined as default). In purpose to create old-like outline buttons based on secondary state of the new design (suggestion by Vasily).
  4. Rename the flat prop to plain.
  5. ~~Delete type prop. It's seems to be double of the tag prop. ~~
    5.1. NEW: visual presets (primary, secondary, plain, plain-opacity) will be located in Global Config and connected with components via Feat #1806: Presets for all components & components config structure change #1921
    5.2. NEW: opacity variables (e.g.: opacity-hover, hover-opacity etc.) will be located in Color Config.
  6. Add the borderRadius prop (undefined as default). To allow users to change default border radius (suggestion by Vasily).
  7. CHANGED: round will serve as a helper for border-radius: 50%.
  8. Delete the rounded prop (all new variants are square).
  9. Change default color prop value to undefined (by default appearance will depend on new type/style prop).
  10. Add iconColor prop if we want different colors for text & icon (suggestion by Vasily).
@aluarius aluarius added feature Something useful to end user review required labels Jun 8, 2022
@aluarius aluarius self-assigned this Jun 8, 2022
@aluarius aluarius mentioned this issue Jun 8, 2022
3 tasks
@aluarius
Copy link
Contributor Author

aluarius commented Jun 8, 2022

@RVitaly1978 @asvae @Derranion @rustem-nasyrov take a look, please.

@asvae
Copy link
Member

asvae commented Jun 8, 2022

@xx13 can you explain why we're getting rid of outline buttons?

@asvae
Copy link
Member

asvae commented Jun 8, 2022

3 - I don't see a point. If outline buttons are solution we don't want our users to employ - why give them tools? I suggest supporting outline preset or removing altogether.
5 - probably we want to use new preset system for that.
6 - that's not great, definitely not prop, css variable - yes.
7-8 - I strongly feel we need to have a way for button to be rounded/not rounded. There are cases like fab button, so even in same design solution - you can have semantically different buttons of varying roundedness.
9. Probably should still have some kind of default on button. You can think of presets as external layer. It adds goodness, but button should be perfectly functional without it.

Other points look reasonable. 👯

@xx13
Copy link

xx13 commented Jun 8, 2022

@asvae we are switching from styles to its functions. one can customize secondary (or any other style) and add stroke to it, but we won't have it in the default theme. but we should definitely mention that in the docs.

@asvae
Copy link
Member

asvae commented Jun 8, 2022

Let's discuss that in grooming :)

@aluarius
Copy link
Contributor Author

Closed via #1945

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature Something useful to end user
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants