[Button] Add outlined variant #11346
Conversation
|
@oliviertassinari Riddle me this. 😄 Why did this unrelated test break? |
oliviertassinari
added
design: material
|
Just as an aside, the states (hover, focus etc.) are (obviously) v1 style, so this variant is a bit of a hybrid of v1 and v2. |
|
@mbrookes Indeed, let's say this is a "backported MD v1 outlined button" The hover and focus look pretty similar in MDI v2 to me. 🤔 Once we have a solution for the new focus/hover states, it will look exactly as in the specs. The font size is also different in the new specs. |
Hover is close, but focus isn't. I can find the the spec for the ripple in the new guidelines though.
Changing it is arguably a breaking change though. |
|
Oh, you're right. Our hover looks like the new focus.The ripple effect for the pressed state looks like the old ripple effect.
Yes, but not if we add this as an opt-in MD2 theme and keep the "hybrid" solution anyway. |
| <Button variant="outlined" disabled className={classes.button}> | ||
| Disabled | ||
| </Button> | ||
| <Button variant="outlined" href="#flat-buttons" className={classes.button}> |
| > | ||
| Does something | ||
| </Button> | ||
| </div> |
There was a problem hiding this comment.
I'm removing the rather pointless "Link disabled" and "Does something" examples from the FlatButton demo in another PR (they've been on my hit-list for ages!), so no need to add them here.
|
NVM, I'll fix it in my PR. |
This adds a new
outlinedvariant to theButton, as seen here.The border and radius matches the specs (yup, 23% opacity…). Unfortunately, there is nothing said about the dark style, so I don't really know which value to put there. It looks pretty good imho. 😉
Light:
Dark:
Related to #11342 and #11284