Skip to content

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

@RobinKamps

Description

@RobinKamps

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:

  1. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: manyArea label for issues related to many components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions