[Material You] Add ripple on the button #35299
Conversation
…l-ui; branch 'master' of https://github.com/mui-org/material-ui into master
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| opacity: 0.12; |
There was a problem hiding this comment.
I've adjusted the opacity to match the state layer focus/pressed value.
mnajdova
added
component: button
@mui/material-next: parsed: +37.53% , gzip: +32.76% |
mnajdova
requested review from
michaldudak and
siriwatknp
and removed request for
siriwatknp and
danilo-leal
Signed-off-by: Marija Najdova <mnajdova@gmail.com>
|
That's likely for another PR, but during testing, I found out that the focus state of a tonal button is almost indistinguishable from the normal state. The spec shows a darker color: https://m3.material.io/components/buttons/specs#cd245ab1-c10a-4a1c-bb13-d6a08b9abfc5 normal: focused (ours): focused (spec): |
It's strange because the code followed what was in the spec. I've also checked the tokens and they are correct. I am not sure where's the difference. I've updated the value to a darker color, but we likely need to revisit this again. I've added a comment for future reference. |
| @@ -232,12 +229,37 @@ export const ButtonRoot = styled('button', { | |||
| }; | |||
|
|
|||
| const containerElevation = { | |||
There was a problem hiding this comment.
Added the missing elevations to complete the button component.
Because of the reasons mentioned in #29345 (comment). I feel like it is missed in the spec. |
| @@ -490,12 +538,16 @@ const Button = React.forwardRef(function Button< | |||
| as={ComponentProp} | |||
| className={clsx(classes.root, className)} | |||
| ownerState={ownerState} | |||
| {...getRootProps()} | |||
| {...getRootProps(getRippleHandlers(props) as unknown as EventHandlers)} | |||
There was a problem hiding this comment.
I suppose get*Props in Base hooks should be more permissive. Note taken.
It's great that someone from the community has let us know. Still, I wonder if it's worth the work of checking out how Material You is implemented in Flutter/Android and replicating it on the web before they themselves update the web documentation. That said, and if it's the case of not being worth it, it might be helpful to document that we'll be mostly following whatever is documented in the web docs (and the community should still feel free to point things out). |
This is more or less what will happen. I don't think we need some special announcement that we are going to work this way tough :) |
Preview: https://codesandbox.io/s/jovial-currying-g7u9m0?file=/demo.tsx
Docs: https://deploy-preview-35299--material-ui.netlify.app/material-ui/react-button/#material-you-version
The only change in the
TouchRipplecomponent is the value for the opacity, which now matches the one defined in the state's layer opacity for focused/pressed states.In addition to this, I've also decided to apply the changes from #34258 regarding the focus ripple, as it is anyway a step in the right direction.