feat(chips): Change chip color when selected #2329

bonniezhou · 2018-03-01T17:38:42Z

For filter and choice chips, change its fill and ink (and ripple) color to the primary color upon selection.

Also change selection terminology for both choice and filter chips to "selected" instead of "activated", and use the regular selection ripple opacity of 8%.

Fixes #2295 and #2296.

codecov-io · 2018-03-01T17:52:15Z

Codecov Report

Merging #2329 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master    #2329   +/-   ##
=======================================
  Coverage   98.84%   98.84%           
=======================================
  Files         100      100           
  Lines        4075     4075           
  Branches      524      524           
=======================================
  Hits         4028     4028           
  Misses         47       47

Impacted Files	Coverage Δ
packages/mdc-chips/chip/constants.js	`100% <ø> (ø)`	⬆️
packages/mdc-chips/chip/foundation.js	`100% <100%> (ø)`	⬆️
packages/mdc-chips/chip/index.js	`82.75% <100%> (ø)`	⬆️
packages/mdc-chips/chip-set/foundation.js	`100% <100%> (ø)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4b24b51...e3e51af. Read the comment docs.

acdvorak

Just rename the mixin, otherwise LGTM!

acdvorak · 2018-03-01T18:17:18Z

packages/mdc-chips/_mixins.scss

  @include mdc-theme-prop(color, $color);

  &:hover {
    @include mdc-theme-prop(color, $color);
  }
 }

-@mixin mdc-chip-activated-ink-color($activated-ink-color) {
+@mixin mdc-chip-selected-color($color) {


mdc-chip-selected-ink-color

@alternate

commit f17e0d3 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Thu Mar 8 13:20:48 2018 -0500 fix(text-field): Clicking label should focus textfield (#2353) commit 77b15f4 Author: Bonnie Zhou <bzbee003@gmail.com> Date: Wed Mar 7 16:29:57 2018 -0800 refactor(button): Remove compact variant (#2361) BREAKING CHANGE: The compact variant of MDC Button is removed. commit 35a5cfc Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Tue Mar 6 19:54:23 2018 -0500 fix(toolbar): Fix colors for svg icons. Update custom-toolbar demo (#2331) SVG icons in the toolbar will now use the same color as the font icons. commit dc52201 Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Tue Mar 6 16:00:12 2018 -0800 fix(theme): Move @alternate annotations for Closure Stylesheets (#2355) `@alternate` annotations need to come before the _second_ property. Otherwise, Closure Compiler strips the first property (it does not output it at all). commit 3c04419 Author: aprigogin <17075403+aprigogin@users.noreply.github.com> Date: Tue Mar 6 14:29:12 2018 -0800 fix(button): icon in rtl should have margin right flipped. (#2346) commit b9000a4 Author: Cory Reed <swashcap@gmail.com> Date: Tue Mar 6 07:37:40 2018 -0800 fix(demos): Correct RTL/LTR toggling in demos in Safari (#2348) commit ab85736 Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Mon Mar 5 19:00:11 2018 -0500 fix: Use `var` instead of `const` in menu demo (#2345) Safari 9.x and IE 10 do not support `const` commit dc3d69f Author: aprigogin <17075403+aprigogin@users.noreply.github.com> Date: Mon Mar 5 15:22:31 2018 -0800 fix(rtl): Adding noflip annotations to fix downstream rtl issues (#2344) * fix(rtl): Adding noflip annotations to fix downstream rtl issues * fix(rtl): remove changes to button, will be in separate PR * fix(rtl): remove changes to button, will be in separate PR - second attempt. * fix(rtl): removed extra whitespace commit eb4138e Author: Patrick RoDee <prodee@google.com> Date: Mon Mar 5 14:10:46 2018 -0800 docs: Update CHANGELOG.md commit f478610 Author: Patrick RoDee <prodee@google.com> Date: Mon Mar 5 14:10:30 2018 -0800 chore: Publish commit 78408bb Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Mon Mar 5 16:13:02 2018 -0500 fix: Use `var` instead of `const` in demos/ready.js (#2343) Safari 9.x and IE 10 do not support `const`, and `ready.js` is not transpiled to ES5. commit 49a9449 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Mon Mar 5 12:21:54 2018 -0500 chore(select): Fix JS example in Readme (#2332) commit bc17291 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Fri Mar 2 13:21:07 2018 -0500 feat(top app bar): Add short top app bar always collapsed feature (#2327) commit 0ba7d10 Author: Matty Goo <mattgoo@google.com> Date: Fri Mar 2 11:33:19 2018 -0500 fix(text-field): disable validation check in setRequired (#2201) BREAKING CHANGE: removed setRequired and isRequired from foundation. commit c14d244 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Fri Mar 2 10:37:18 2018 -0500 chore(select): Fix ID values in demo (#2330) Remove unused ID and changed duplicated ID values. Also fixed the parentheses in RTL. commit ecf4060 Author: Bonnie Zhou <bzbee003@gmail.com> Date: Thu Mar 1 16:38:41 2018 -0500 feat(chips): Change chip color when selected (#2329) BREAKING CHANGE: The `mdc-chip--activated` class, `mdc-chip-activated-ink-color` Sass mixin, and the `toggleActive` methods on `MDCChip`/`MDCChipSet` have been renamed to `mdc-chip--selected`, `mdc-chip-selected-ink-color`, and `toggleSelected`, respectively. commit 4b24b51 Author: Matty Goo <mattgoo@google.com> Date: Wed Feb 28 15:20:19 2018 -0500 chore(floating-label): separate label module from text-field (#2237) BREAKING CHANGE: must use `.mdc-floating-label` selector instead of `.mdc-text-field__label` commit fd8d8d9 Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Wed Feb 28 14:21:55 2018 -0500 feat(top-app-bar): Implement short top app bar (#2290) Adds the short top app bar variant to the top app bar. commit a9f9bf2 Author: Kenneth G. Franqueiro <kfranqueiro@users.noreply.github.com> Date: Wed Feb 28 13:06:41 2018 -0500 docs(select): Fix front matter for label sub-component (#2323)

bonniezhou added 4 commits February 28, 2018 14:00

feat(chips): Change fill color to primary when chip is selected

104413a

Change activated to selected

b692d2e

Fix tests

d29e414

Remove filter from theme examples

ffa0653

bonniezhou changed the title ~~Feat/chips/selected color~~ feat(chips): Change chip color when selected Mar 1, 2018

Merge branch 'master' into feat/chips/selected-color

2b77009

bonniezhou requested a review from acdvorak March 1, 2018 17:40

acdvorak approved these changes Mar 1, 2018

View reviewed changes

rename mixin

e3e51af

bonniezhou merged commit ecf4060 into master Mar 1, 2018

bonniezhou deleted the feat/chips/selected-color branch March 1, 2018 21:38

bonniezhou mentioned this pull request Mar 2, 2018

Use primary color when a chip is selected #2296

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(chips): Change chip color when selected #2329

feat(chips): Change chip color when selected #2329

bonniezhou commented Mar 1, 2018 •

edited

Loading

codecov-io commented Mar 1, 2018 •

edited

Loading

acdvorak left a comment

acdvorak Mar 1, 2018

feat(chips): Change chip color when selected #2329

feat(chips): Change chip color when selected #2329

Conversation

bonniezhou commented Mar 1, 2018 • edited Loading

codecov-io commented Mar 1, 2018 • edited Loading

Codecov Report

acdvorak left a comment

Choose a reason for hiding this comment

acdvorak Mar 1, 2018

Choose a reason for hiding this comment

bonniezhou commented Mar 1, 2018 •

edited

Loading

codecov-io commented Mar 1, 2018 •

edited

Loading