[Checkbox] Theme flashes the secondary color after click

MrSimmmons commented 5 years ago

Bug report

When the theme of a checkbox has been changed, clicking on the checkbox flashes the secondary color at the start and end of the aniamtion.

Steps to reproduce

Go to https://material-components.github.io/material-components-web-catalog/#/component/theme
Click on The check boxes

Actual behavior

The secondary color flashes

Expected behavior

The primary color should flash, not the secondary color

Screenshots

bug

abhiomkar commented 5 years ago

I think the catalog usage needs to be updated, here the demo of latest checkbox with custom theme: https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/08/19_30_20_273/spec/mdc-checkbox/mixins/container-colors.html?utm_source=golden_json

Here is the usage: https://github.com/material-components/material-components-web/blob/master/test/screenshot/spec/mdc-checkbox/fixture.scss

I'm transferring this issue to catalog repo.

Yavanosta commented 4 years ago

Actually theme demo already removed, but problem was in the way of styling components in demo:

.theme-demo {
  $mdc-theme-primary: #fcb8ab;
  $mdc-theme-secondary: #feeae6;

  @import "@material/checkbox/mdc-checkbox";
}

<div class="theme-demo">
  <div className='mdc-checkbox'>...</div>
</div>

In this case because of this condition wrong class for checkbox animation was generated .theme-demo.mdc-checkbox--anim-unchecked-checked .... (without space after .theme-demo).

Two components mdc-top-app-bar and mdc-checkbox are affected by this problem.

Including whole components style inside parent selector is considered as a bad practice, so no fixes on components side required. Since this code already removed from material-components-web-catalog no additional actions required.

Closing this issue.

material-components / material-components-web-catalog