bug(checkbox, radio, toggle): inhomogenous ripple effects and other styles

RobinKamps commented 1 year ago

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

In v15 the ripple effect for radio differs from checkbox/toggle etc. - the radio has a short transition - would be nice to have same styling on every material elements (e.g. remove the transition - because then it is matching mat-button / mat-icon button as well as all other elements).

In v15 the radio and the slide toggle have no pointer cursor on hover the label (in v14 there was a pointer cursor)

In v15 the focus indicator/ripple on hover of checkbox and radio are 40x40px and not matching the new touch element wich is 48x48px. It would be more homogenous if the focus indicator of checkbox and radio match 48x48px - other elements like toggle, Slider, of course all mat-icon-buttons etc are 48x48px. 40x40px looks a bit weird if all elements are near together like in https://material.angular.io/components/tree/examples.

the new "more contrast" on hover for checkboxes and radio is not homogenous with all other controls (e.g. icon-buttons, menus etc.) as well - how to deactivate this new behaviour?

Furthermore a click on toggle/checkbox behaves differently than a click on a radio. On the later one the ripple is activated on clickDown and clickUp - if it was choosen before. Would be nice to have the same focus/ripple experience (only on click up) as on checkbox/toggle

Reproduction

Steps to reproduce:

just head to the docu and try the different elements in coparison: e.g.

Expected Behavior

homogenous styling / behaviour

Actual Behavior

different styling / behaviour

Environment

Angular: 15
CDK/Material: 15

RobinKamps commented 1 year ago

I have overwritten some css styles in my projects to circumvent the most (for me annoying) regressions / changes (mainly cursors for radio labels, suppress the new "more contrast style" on hover/checked stylings, bigger 48px ripples and hovers for radio and checkbox etc.).(mainly because i made the switch to v15 and the effort to )

However the radio ripple behaves still very different from the checkbox ripple. The radio ripple is animated on enter and on focus leave and double ripples if chosen and clicked on label.

In the process of monkey patching the new mdc component styles i found other bugs in v15:

if you click right on the edges of a radio or checkbox (so that you click on the 48x48px touch div, but not on the 40x40px ripple) - the remaining focus indicator is different (the opacity is lesser - no reaminig focus is triggered), than if you click on the 40x40px ripple/input div).
the checkbox ripple is not triggerd, if you click on the label - than there is just a background but no ripple animation. This behaviour is the same on the toggle, so it might be easier again to drop the extra/longer animation from radio.
on the slide toggle the remainig focus is buggy, too: if you click the label, the focus persists. if you click on the toggle itself, there is no remaining focus indication.

martijnbodde commented 1 year ago

For anyone running into the same issue, I used this CSS workaround to hide the radio ripple:

.mat-mdc-radio-button.mat-accent {
    --mat-mdc-radio-ripple-color: transparent;
    --mat-mdc-radio-checked-ripple-color: transparent;
}

angular / components