Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit ecf4060

Browse files
bonniezhoubonniezhou
authored
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.
1 parent 4b24b51 commit ecf4060

File tree

11 files changed

+73
-69
lines changed

11 files changed

+73
-69
lines changed

‎demos/chips.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,6 @@
2424
.custom-chip-secondary {
2525
@include mdc-chip-fill-color(white);
2626
@include mdc-chip-ink-color($mdc-theme-secondary);
27+
@include mdc-chip-selected-ink-color($mdc-theme-secondary);
2728
@include mdc-chip-stroke(2px, solid, $mdc-theme-secondary);
2829
}

‎packages/mdc-chips/README.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -100,16 +100,14 @@ Mixin | Description
100100
`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
101101
`mdc-chip-fill-color($color)` | Customizes the background fill color for a chip
102102
`mdc-chip-ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match
103-
`mdc-chip-activated-ink-color($color)` | Customizes text ink color and updates the ripple opacity of a chip in the _activated_ state
103+
`mdc-chip-selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state
104104
`mdc-chip-stroke($width, $style, $color)` | Customizes the border stroke properties for a chip
105105
`mdc-chip-stroke-width($width)` | Customizes the border stroke width for a chip
106106
`mdc-chip-stroke-style($style)` | Customizes the border stroke style for a chip
107107
`mdc-chip-stroke-color($color)` | Customizes the border stroke color for a chip
108108

109109
> _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.
110110
111-
> _NOTE_: `mdc-chip-ink-color` also updates the chip's text ink color for _hover_ and _activated_ states, and updates the ripple opacity of the chip in the _activated_ state.
112-
113111
### `MDCChip` and `MDCChipSet`
114112

115113
The MDC Chips module is comprised of two JavaScript classes:
@@ -122,7 +120,7 @@ To use the `MDCChip` and `MDCChipSet` classes, [import](../../docs/importing-js.
122120

123121
Method Signature | Description
124122
--- | ---
125-
`toggleActive() => void` | Proxies to the foundation's `toggleActive` method
123+
`toggleSelected() => void` | Proxies to the foundation's `toggleSelected` method
126124

127125
Property | Value Type | Description
128126
--- | --- | ---
@@ -164,7 +162,7 @@ Method Signature | Description
164162

165163
Method Signature | Description
166164
--- | ---
167-
`toggleActive() => void` | Toggles the activated class on the chip element
165+
`toggleSelected() => void` | Toggles the selected class on the chip element
168166

169167
#### `MDCChipSetFoundation`
170168
None yet, coming soon.

‎packages/mdc-chips/_mixins.scss

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@
2929

3030
@if ($fill-tone == "dark") {
3131
@include mdc-chip-ink-color(text-primary-on-dark);
32-
@include mdc-chip-activated-ink-color(white);
32+
@include mdc-chip-selected-ink-color(white);
3333
} @else {
3434
@include mdc-chip-ink-color(text-primary-on-light);
35-
@include mdc-chip-activated-ink-color(black);
35+
@include mdc-chip-selected-ink-color(black);
3636
}
3737
}
3838

@@ -42,23 +42,24 @@
4242

4343
@mixin mdc-chip-ink-color($color) {
4444
@include mdc-states($color);
45-
@include mdc-chip-activated-ink-color($color);
4645
@include mdc-theme-prop(color, $color);
4746

4847
&:hover {
4948
@include mdc-theme-prop(color, $color);
5049
}
5150
}
5251

53-
@mixin mdc-chip-activated-ink-color($activated-ink-color) {
52+
@mixin mdc-chip-selected-ink-color($color) {
5453
&.mdc-chip {
55-
// This changes the opacity of the ripple based on whether $activated-ink-color is light or dark.
56-
// It does not change the color of the ripple.
57-
@include mdc-states-activated($activated-ink-color);
54+
@include mdc-states-selected($color);
5855
}
5956

60-
&.mdc-chip--activated {
61-
@include mdc-theme-prop(color, $activated-ink-color);
57+
&.mdc-chip--selected {
58+
@include mdc-theme-prop(color, $color);
59+
60+
&:hover {
61+
@include mdc-theme-prop(color, $color);
62+
}
6263
}
6364
}
6465

‎packages/mdc-chips/chip-set/foundation.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@ class MDCChipSetFoundation extends MDCFoundation {
5656
super(Object.assign(MDCChipSetFoundation.defaultAdapter, adapter));
5757

5858
/**
59-
* The active chips in the set. Only used for choice chip set or filter chip set.
59+
* The selected chips in the set. Only used for choice chip set or filter chip set.
6060
* @private {!Array<!MDCChip>}
6161
*/
62-
this.activeChips_ = [];
62+
this.selectedChips_ = [];
6363

6464
/** @private {function(!Event): undefined} */
6565
this.chipInteractionHandler_ = (evt) => this.handleChipInteraction_(evt);
@@ -83,23 +83,23 @@ class MDCChipSetFoundation extends MDCFoundation {
8383
handleChipInteraction_(evt) {
8484
const {chip} = evt.detail;
8585
if (this.adapter_.hasClass(cssClasses.CHOICE)) {
86-
if (this.activeChips_.length === 0) {
87-
this.activeChips_[0] = chip;
88-
} else if (this.activeChips_[0] !== chip) {
89-
this.activeChips_[0].toggleActive();
90-
this.activeChips_[0] = chip;
86+
if (this.selectedChips_.length === 0) {
87+
this.selectedChips_[0] = chip;
88+
} else if (this.selectedChips_[0] !== chip) {
89+
this.selectedChips_[0].toggleSelected();
90+
this.selectedChips_[0] = chip;
9191
} else {
92-
this.activeChips_ = [];
92+
this.selectedChips_ = [];
9393
}
94-
chip.toggleActive();
94+
chip.toggleSelected();
9595
} else if (this.adapter_.hasClass(cssClasses.FILTER)) {
96-
const index = this.activeChips_.indexOf(chip);
96+
const index = this.selectedChips_.indexOf(chip);
9797
if (index >= 0) {
98-
this.activeChips_.splice(index, 1);
98+
this.selectedChips_.splice(index, 1);
9999
} else {
100-
this.activeChips_.push(chip);
100+
this.selectedChips_.push(chip);
101101
}
102-
chip.toggleActive();
102+
chip.toggleSelected();
103103
}
104104
}
105105
}

‎packages/mdc-chips/chip/constants.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const strings = {
2424

2525
/** @enum {string} */
2626
const cssClasses = {
27-
ACTIVATED: 'mdc-chip--activated',
27+
SELECTED: 'mdc-chip--selected',
2828
};
2929

3030
export {strings, cssClasses};

‎packages/mdc-chips/chip/foundation.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,13 +87,13 @@ class MDCChipFoundation extends MDCFoundation {
8787
}
8888

8989
/**
90-
* Toggles the activated class on the chip element.
90+
* Toggles the selected class on the chip element.
9191
*/
92-
toggleActive() {
93-
if (this.adapter_.hasClass(cssClasses.ACTIVATED)) {
94-
this.adapter_.removeClass(cssClasses.ACTIVATED);
92+
toggleSelected() {
93+
if (this.adapter_.hasClass(cssClasses.SELECTED)) {
94+
this.adapter_.removeClass(cssClasses.SELECTED);
9595
} else {
96-
this.adapter_.addClass(cssClasses.ACTIVATED);
96+
this.adapter_.addClass(cssClasses.SELECTED);
9797
}
9898
}
9999

‎packages/mdc-chips/chip/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,10 @@ class MDCChip extends MDCComponent {
5151
}
5252

5353
/**
54-
* Toggles active state of the chip.
54+
* Toggles selected state of the chip.
5555
*/
56-
toggleActive() {
57-
this.foundation_.toggleActive();
56+
toggleSelected() {
57+
this.foundation_.toggleSelected();
5858
}
5959

6060
/**

‎packages/mdc-chips/chip/mdc-chip.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
@include mdc-chip-corner-radius($mdc-chip-border-radius-default);
2828
@include mdc-chip-fill-color($mdc-chip-fill-color-default);
2929
@include mdc-chip-ink-color($mdc-chip-ink-color-default);
30-
@include mdc-chip-activated-ink-color(black);
30+
@include mdc-chip-selected-ink-color(primary);
3131

3232
display: inline-flex;
3333
position: relative;
@@ -42,6 +42,10 @@
4242
}
4343
}
4444

45+
.mdc-chip--selected {
46+
@include mdc-theme-prop(background-color, white);
47+
}
48+
4549
.mdc-chip__text {
4650
// Set line-height to be <18px to force the content height of mdc-chip to be 18px.
4751
line-height: 17px;

‎test/unit/mdc-chips/mdc-chip-set.foundation.test.js

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ const setupTest = () => {
4242
const mockAdapter = td.object(MDCChipSetFoundation.defaultAdapter);
4343
const foundation = new MDCChipSetFoundation(mockAdapter);
4444
const chipA = td.object({
45-
toggleActive: () => {},
45+
toggleSelected: () => {},
4646
});
4747
const chipB = td.object({
48-
toggleActive: () => {},
48+
toggleSelected: () => {},
4949
});
5050
return {foundation, mockAdapter, chipA, chipB};
5151
};
@@ -64,7 +64,7 @@ test('#destroy removes event listeners', () => {
6464
td.verify(mockAdapter.deregisterInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)));
6565
});
6666

67-
test('on custom MDCChip:interaction event toggles active state with single selection on choice chips', () => {
67+
test('on custom MDCChip:interaction event toggles selected state with single selection on choice chips', () => {
6868
const {foundation, mockAdapter, chipA, chipB} = setupTest();
6969
let chipInteractionHandler;
7070
td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
@@ -73,36 +73,36 @@ test('on custom MDCChip:interaction event toggles active state with single selec
7373
});
7474
td.when(mockAdapter.hasClass(cssClasses.CHOICE)).thenReturn(true);
7575

76-
assert.equal(foundation.activeChips_.length, 0);
76+
assert.equal(foundation.selectedChips_.length, 0);
7777
foundation.init();
7878

7979
chipInteractionHandler({
8080
detail: {
8181
chip: chipA,
8282
},
8383
});
84-
td.verify(chipA.toggleActive());
85-
assert.equal(foundation.activeChips_.length, 1);
84+
td.verify(chipA.toggleSelected());
85+
assert.equal(foundation.selectedChips_.length, 1);
8686

8787
chipInteractionHandler({
8888
detail: {
8989
chip: chipB,
9090
},
9191
});
92-
td.verify(chipA.toggleActive());
93-
td.verify(chipB.toggleActive());
94-
assert.equal(foundation.activeChips_.length, 1);
92+
td.verify(chipA.toggleSelected());
93+
td.verify(chipB.toggleSelected());
94+
assert.equal(foundation.selectedChips_.length, 1);
9595

9696
chipInteractionHandler({
9797
detail: {
9898
chip: chipB,
9999
},
100100
});
101-
td.verify(chipB.toggleActive());
102-
assert.equal(foundation.activeChips_.length, 0);
101+
td.verify(chipB.toggleSelected());
102+
assert.equal(foundation.selectedChips_.length, 0);
103103
});
104104

105-
test('on custom MDCChip:interaction event toggles active state with multi-selection on filter chips', () => {
105+
test('on custom MDCChip:interaction event toggles selected state with multi-selection on filter chips', () => {
106106
const {foundation, mockAdapter, chipA, chipB} = setupTest();
107107
let chipInteractionHandler;
108108
td.when(mockAdapter.registerInteractionHandler('MDCChip:interaction', td.matchers.isA(Function)))
@@ -111,38 +111,38 @@ test('on custom MDCChip:interaction event toggles active state with multi-select
111111
});
112112
td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(true);
113113

114-
assert.equal(foundation.activeChips_.length, 0);
114+
assert.equal(foundation.selectedChips_.length, 0);
115115
foundation.init();
116116

117117
chipInteractionHandler({
118118
detail: {
119119
chip: chipA,
120120
},
121121
});
122-
td.verify(chipA.toggleActive());
123-
assert.equal(foundation.activeChips_.length, 1);
122+
td.verify(chipA.toggleSelected());
123+
assert.equal(foundation.selectedChips_.length, 1);
124124

125125
chipInteractionHandler({
126126
detail: {
127127
chip: chipB,
128128
},
129129
});
130-
td.verify(chipB.toggleActive());
131-
assert.equal(foundation.activeChips_.length, 2);
130+
td.verify(chipB.toggleSelected());
131+
assert.equal(foundation.selectedChips_.length, 2);
132132

133133
chipInteractionHandler({
134134
detail: {
135135
chip: chipB,
136136
},
137137
});
138-
td.verify(chipB.toggleActive());
139-
assert.equal(foundation.activeChips_.length, 1);
138+
td.verify(chipB.toggleSelected());
139+
assert.equal(foundation.selectedChips_.length, 1);
140140

141141
chipInteractionHandler({
142142
detail: {
143143
chip: chipA,
144144
},
145145
});
146-
td.verify(chipA.toggleActive());
147-
assert.equal(foundation.activeChips_.length, 0);
146+
td.verify(chipA.toggleSelected());
147+
assert.equal(foundation.selectedChips_.length, 0);
148148
});

‎test/unit/mdc-chips/mdc-chip.foundation.test.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -70,20 +70,20 @@ test('#destroy removes event listeners', () => {
7070
td.verify(mockAdapter.deregisterTrailingIconInteractionHandler('mousedown', td.matchers.isA(Function)));
7171
});
7272

73-
test('#toggleActive adds mdc-chip--activated class if the class does not exist', () => {
73+
test('#toggleSelected adds mdc-chip--selected class if the class does not exist', () => {
7474
const {foundation, mockAdapter} = setupTest();
75-
td.when(mockAdapter.hasClass(cssClasses.ACTIVATED)).thenReturn(false);
75+
td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(false);
7676

77-
foundation.toggleActive();
78-
td.verify(mockAdapter.addClass(cssClasses.ACTIVATED));
77+
foundation.toggleSelected();
78+
td.verify(mockAdapter.addClass(cssClasses.SELECTED));
7979
});
8080

81-
test('#toggleActive removes mdc-chip--activated class if the class exists', () => {
81+
test('#toggleSelected removes mdc-chip--selected class if the class exists', () => {
8282
const {foundation, mockAdapter} = setupTest();
83-
td.when(mockAdapter.hasClass(cssClasses.ACTIVATED)).thenReturn(true);
83+
td.when(mockAdapter.hasClass(cssClasses.SELECTED)).thenReturn(true);
8484

85-
foundation.toggleActive();
86-
td.verify(mockAdapter.removeClass(cssClasses.ACTIVATED));
85+
foundation.toggleSelected();
86+
td.verify(mockAdapter.removeClass(cssClasses.SELECTED));
8787
});
8888

8989
test('on click, emit custom event', () => {

0 commit comments

Comments
 (0)