From 88b285e6f34d3f9ef90ed0a2ef58e76e5f2b0dfa Mon Sep 17 00:00:00 2001 From: lynnjepsen Date: Tue, 27 Mar 2018 17:55:02 -0700 Subject: [PATCH 1/2] feat(chips): Add mdc-chip-icon-color mixin --- packages/mdc-chips/README.md | 3 ++- packages/mdc-chips/_mixins.scss | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index 65bf0f4980d..e11546578fc 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -133,7 +133,8 @@ Mixin | Description `mdc-chip-corner-radius($radius)` | Customizes the corner radius for a chip `mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink and ripple color to meet accessibility standards `mdc-chip-fill-color($color)` | Customizes the background fill color for a chip -`mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match +`mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match. This affects both text and icon, unless `mdc-chip-icon-color` is also used. +`mdc-chip-icon-color($color)` | Customizes the icon color for a chip `mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state `mdc-chip-stroke($width, $style, $color)` | Customizes the border stroke properties for a chip `mdc-chip-stroke-width($width)` | Customizes the border stroke width for a chip diff --git a/packages/mdc-chips/_mixins.scss b/packages/mdc-chips/_mixins.scss index d6313a0eeaf..91f0a0c0a85 100644 --- a/packages/mdc-chips/_mixins.scss +++ b/packages/mdc-chips/_mixins.scss @@ -49,6 +49,12 @@ } } +@mixin mdc-chip-icon-color($color) { + .mdc-chip__icon { + @include mdc-theme-prop(color, $color); + } +} + @mixin mdc-chip-selected-ink-color($color) { &.mdc-chip { @include mdc-states-selected($color); From 339063b245d33a5de7812a135e8f1bc8507ee9b6 Mon Sep 17 00:00:00 2001 From: lynnjepsen Date: Tue, 27 Mar 2018 18:23:09 -0700 Subject: [PATCH 2/2] add demos, fix readme --- demos/chips.html | 54 ++++++++++++++++++++++++++++++++++++ demos/chips.scss | 4 +++ packages/mdc-chips/README.md | 2 +- 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/demos/chips.html b/demos/chips.html index c23f4108031..e1526a96f2c 100644 --- a/demos/chips.html +++ b/demos/chips.html @@ -226,6 +226,60 @@

Custom theme

+ +
+

Different Color Icons/Ink: Entry Chips

+
+
+ face +
Jane Smith
+ more_vert +
+
+ face +
John Doe
+ more_vert +
+
+
+ +
+

Different Color Icons/Ink: Filter Chips

+
+
+ face +
+ + + +
+
Alice
+
+
+ face +
+ + + +
+
Bob
+
+
+
+ +
+

Different Color Icons/Ink: Action Chips

+
+
+ wb_sunny +
Turn on lights
+
+
+ bookmark +
Bookmark
+
+
+
diff --git a/demos/chips.scss b/demos/chips.scss index d9f059c153c..4fadef9a0e1 100644 --- a/demos/chips.scss +++ b/demos/chips.scss @@ -27,3 +27,7 @@ @include mdc-chip-selected-ink-color($mdc-theme-secondary); @include mdc-chip-stroke(2px, solid, $mdc-theme-secondary); } + +.demo-icon-color { + @include mdc-chip-icon-color(orange); +} diff --git a/packages/mdc-chips/README.md b/packages/mdc-chips/README.md index e11546578fc..7622f3a9ddf 100644 --- a/packages/mdc-chips/README.md +++ b/packages/mdc-chips/README.md @@ -134,7 +134,7 @@ Mixin | Description `mdc-chip-fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink and ripple color to meet accessibility standards `mdc-chip-fill-color($color)` | Customizes the background fill color for a chip `mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match. This affects both text and icon, unless `mdc-chip-icon-color` is also used. -`mdc-chip-icon-color($color)` | Customizes the icon color for a chip +`mdc-chip-icon-color($color)` | Customizes the icon color for a chip. `mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state `mdc-chip-stroke($width, $style, $color)` | Customizes the border stroke properties for a chip `mdc-chip-stroke-width($width)` | Customizes the border stroke width for a chip