search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.34k stars 6.74k forks source link

bug(MatCheckbox): hover area small than ripple #19438

Closed markkoo closed 1 year ago

markkoo commented 4 years ago

Reproduction

https://stackblitz.com/edit/angular-japugn?file=src%2Fapp%2Fcheckbox-overview-example.html

Steps to reproduce:

  1. Slowly hover to checkbox
  2. When cursor touch the ripple area, it is still no able to check

Expected Behavior

When cursor touch the ripple area, it should be able the check. This behavior is follow Material IO Guide.

Material IO material IO

Gmail google gmail

Google Ads google ads

Actual Behavior

Only when cursor touch the checkbox, then only can check. material angular

Remark Normally user needs a bigger space to check the checkbox, hope angular material team consider to follow material IO guide, even this hard to implement it.

Environment

Angular CLI: 9.1.6 Node: 12.16.1 OS: win32 x64

Angular: 9.1.9 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.6 @angular-devkit/build-angular 0.901.6 @angular-devkit/build-ng-packagr 0.901.6 @angular-devkit/build-optimizer 0.901.6 @angular-devkit/build-webpack 0.901.6 @angular-devkit/core 9.1.6 @angular-devkit/schematics 9.1.6 @angular/cdk 9.2.4 @angular/cli 9.1.6 @angular/material 9.2.4 @angular/material-moment-adapter 9.2.4 @ngtools/webpack 9.1.6 @schematics/angular 9.1.6 @schematics/update 0.901.6 ng-packagr 9.0.0 rxjs 6.5.5 typescript 3.7.5 webpack 4.42.0

devversion commented 4 years ago

Great issue. Thanks! This will be fixed by our MDC-based version of the Material Design checkbox. The checkbox currently lives in @angular/material-experimental, but at the time of writing, this issue is already fixed there.

amysorto commented 1 year ago

Closing this issue since this is the behavior in the MDC based checkbox which is available soon in v15.

angular-automatic-lock-bot[bot] commented 1 year ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.