Skip to content

Commit 8db5697

Browse files
aPreciado88benelan
aPreciado88
authored and
benelan
committed
feat(chip): enhance component's interactivity states (#11538)
**Related Issue:** [#10005](#10005) ## Summary - Update `chip`'s interactivity states for `chip-group`'s with selection modes. - `appearance=“solid” kind=“neutral”`: - Update `hover` `background-color` to `--calcite-color-foreground-3`. - Update `active` `background-color` to `--calcite-color-border-3`. - `appearance=“solid” kind=“inverse”`: - Update `hover` `background-color` to `--calcite-color-inverse-hover`. - Update `active` `background-color` to `--calcite-color-inverse-press`. - `appearance=“solid” kind=“brand”`: - Update `hover` `background-color` to `--calcite-color-brand-hover`. - Update `active` `background-color` to `--calcite-color-brand-press`. - `appearance=“outline-fill” kind=“neutral”`: - Update `hover` `background-color` to `--calcite-color-foreground-2`. - Update `hover` `border-color` to `--calcite-color-border-input`. - Update `active` `background-color` to `--calcite-color-foreground-3`. - Update `active` `border-color` to `--calcite-color-text-3`. - `appearance=“outline-fill” kind=“inverse | brand”`: - Update `hover` `background-color` to `--calcite-color-foreground-2`. - Update `active` `background-color` to `--calcite-color-foreground-3`. - `appearance=“outline” kind=“neutral”`: - Update `hover` `background-color` to `--calcite-color-transparent-hover`. - Update `hover` `border-color` to `--calcite-color-border-input`. - Update `active` `background-color` to `--calcite-color-transparent-press`. - Update `active` `border-color` to `--calcite-color-text-3`. - `appearance=“outline” kind=“inverse | brand”`: - Update `hover` `background-color` to `--calcite-color-transparent-hover`. - Update `active` `background-color` to `--calcite-color-transparent-press`.
1 parent d7eb358 commit 8db5697

File tree

2 files changed

+165
-0
lines changed

2 files changed

+165
-0
lines changed

‎packages/calcite-components/src/components/chip-group/chip-group.stories.ts

+76
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,79 @@ export const darkThemeRTL_TestOnly = (): string => html`
105105
`;
106106

107107
darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };
108+
109+
export const interactivityStates = (): string => html`
110+
<div>
111+
<h2>appearance="solid" & kind="neutral"</h2>
112+
<calcite-chip-group selection-mode="single">
113+
<calcite-chip appearance="solid" kind="neutral" value="forest">Forest</calcite-chip>
114+
<calcite-chip appearance="solid" kind="neutral" value="tundra">Tundra</calcite-chip>
115+
<calcite-chip appearance="solid" kind="neutral" value="shore">Seashore</calcite-chip>
116+
<calcite-chip appearance="solid" kind="neutral" value="estuary">Estuary</calcite-chip>
117+
</calcite-chip-group>
118+
119+
<h2>appearance="solid" & kind="inverse"</h2>
120+
<calcite-chip-group selection-mode="single">
121+
<calcite-chip appearance="solid" kind="inverse" value="forest">Forest</calcite-chip>
122+
<calcite-chip appearance="solid" kind="inverse" value="tundra">Tundra</calcite-chip>
123+
<calcite-chip appearance="solid" kind="inverse" value="shore">Seashore</calcite-chip>
124+
<calcite-chip appearance="solid" kind="inverse" value="estuary">Estuary</calcite-chip>
125+
</calcite-chip-group>
126+
127+
<h2>appearance="solid" & kind="brand"</h2>
128+
<calcite-chip-group selection-mode="single">
129+
<calcite-chip appearance="solid" kind="brand" value="forest">Forest</calcite-chip>
130+
<calcite-chip appearance="solid" kind="brand" value="tundra">Tundra</calcite-chip>
131+
<calcite-chip appearance="solid" kind="brand" value="shore">Seashore</calcite-chip>
132+
<calcite-chip appearance="solid" kind="brand" value="estuary">Estuary</calcite-chip>
133+
</calcite-chip-group>
134+
135+
<h2>appearance="outline-fill" & kind="neutral"</h2>
136+
<calcite-chip-group selection-mode="single">
137+
<calcite-chip appearance="outline-fill" kind="neutral" value="forest">Forest</calcite-chip>
138+
<calcite-chip appearance="outline-fill" kind="neutral" value="tundra">Tundra</calcite-chip>
139+
<calcite-chip appearance="outline-fill" kind="neutral" value="shore">Seashore</calcite-chip>
140+
<calcite-chip appearance="outline-fill" kind="neutral" value="estuary">Estuary</calcite-chip>
141+
</calcite-chip-group>
142+
143+
<h2>appearance="outline-fill" & kind="inverse"</h2>
144+
<calcite-chip-group selection-mode="single">
145+
<calcite-chip appearance="outline-fill" kind="inverse" value="forest">Forest</calcite-chip>
146+
<calcite-chip appearance="outline-fill" kind="inverse" value="tundra">Tundra</calcite-chip>
147+
<calcite-chip appearance="outline-fill" kind="inverse" value="shore">Seashore</calcite-chip>
148+
<calcite-chip appearance="outline-fill" kind="inverse" value="estuary">Estuary</calcite-chip>
149+
</calcite-chip-group>
150+
151+
<h2>appearance="outline-fill" & kind="brand"</h2>
152+
<calcite-chip-group selection-mode="single">
153+
<calcite-chip appearance="outline-fill" kind="brand" value="forest">Forest</calcite-chip>
154+
<calcite-chip appearance="outline-fill" kind="brand" value="tundra">Tundra</calcite-chip>
155+
<calcite-chip appearance="outline-fill" kind="brand" value="shore">Seashore</calcite-chip>
156+
<calcite-chip appearance="outline-fill" kind="brand" value="estuary">Estuary</calcite-chip>
157+
</calcite-chip-group>
158+
159+
<h2>appearance="outline" & kind="neutral"</h2>
160+
<calcite-chip-group selection-mode="single">
161+
<calcite-chip appearance="outline" kind="neutral" value="forest">Forest</calcite-chip>
162+
<calcite-chip appearance="outline" kind="neutral" value="tundra">Tundra</calcite-chip>
163+
<calcite-chip appearance="outline" kind="neutral" value="shore">Seashore</calcite-chip>
164+
<calcite-chip appearance="outline" kind="neutral" value="estuary">Estuary</calcite-chip>
165+
</calcite-chip-group>
166+
167+
<h2>appearance="outline" & kind="inverse"</h2>
168+
<calcite-chip-group selection-mode="single">
169+
<calcite-chip appearance="outline" kind="inverse" value="forest">Forest</calcite-chip>
170+
<calcite-chip appearance="outline" kind="inverse" value="tundra">Tundra</calcite-chip>
171+
<calcite-chip appearance="outline" kind="inverse" value="shore">Seashore</calcite-chip>
172+
<calcite-chip appearance="outline" kind="inverse" value="estuary">Estuary</calcite-chip>
173+
</calcite-chip-group>
174+
175+
<h2>appearance="outline" & kind="brand"</h2>
176+
<calcite-chip-group selection-mode="single">
177+
<calcite-chip appearance="outline" kind="brand" value="forest">Forest</calcite-chip>
178+
<calcite-chip appearance="outline" kind="brand" value="tundra">Tundra</calcite-chip>
179+
<calcite-chip appearance="outline" kind="brand" value="shore">Seashore</calcite-chip>
180+
<calcite-chip appearance="outline" kind="brand" value="estuary">Estuary</calcite-chip>
181+
</calcite-chip-group>
182+
</div>
183+
`;

‎packages/calcite-components/src/components/chip/chip.scss

+89
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,95 @@
108108
opacity: 1;
109109
}
110110

111+
:host([appearance="solid"]) {
112+
&:host([kind="neutral"]) .container {
113+
&.selectable {
114+
&:hover {
115+
background-color: var(--calcite-color-foreground-3);
116+
}
117+
&:active {
118+
background-color: var(--calcite-color-border-3);
119+
}
120+
}
121+
}
122+
123+
&:host([kind="inverse"]) .container {
124+
&.selectable {
125+
&:hover {
126+
background-color: var(--calcite-color-inverse-hover);
127+
}
128+
&:active {
129+
background-color: var(--calcite-color-inverse-press);
130+
}
131+
}
132+
}
133+
134+
&:host([kind="brand"]) .container {
135+
&.selectable {
136+
&:hover {
137+
background-color: var(--calcite-color-brand-hover);
138+
}
139+
&:active {
140+
background-color: var(--calcite-color-brand-press);
141+
}
142+
}
143+
}
144+
}
145+
146+
:host([appearance="outline-fill"]) {
147+
&:host([kind="neutral"]) .container {
148+
&.selectable {
149+
&:hover {
150+
background-color: var(--calcite-color-foreground-2);
151+
border-color: var(--calcite-color-border-input);
152+
}
153+
&:active {
154+
background-color: var(--calcite-color-foreground-3);
155+
border-color: var(--calcite-color-text-3);
156+
}
157+
}
158+
}
159+
160+
&:host([kind="inverse"]) .container,
161+
&:host([kind="brand"]) .container {
162+
&.selectable {
163+
&:hover {
164+
background-color: var(--calcite-color-foreground-2);
165+
}
166+
&:active {
167+
background-color: var(--calcite-color-foreground-3);
168+
}
169+
}
170+
}
171+
}
172+
173+
:host([appearance="outline"]) {
174+
&:host([kind="neutral"]) .container {
175+
&.selectable {
176+
&:hover {
177+
background-color: var(--calcite-color-transparent-hover);
178+
border-color: var(--calcite-color-border-input);
179+
}
180+
&:active {
181+
background-color: var(--calcite-color-transparent-press);
182+
border-color: var(--calcite-color-text-3);
183+
}
184+
}
185+
}
186+
187+
&:host([kind="inverse"]) .container,
188+
&:host([kind="brand"]) .container {
189+
&.selectable {
190+
&:hover {
191+
background-color: var(--calcite-color-transparent-hover);
192+
}
193+
&:active {
194+
background-color: var(--calcite-color-transparent-press);
195+
}
196+
}
197+
}
198+
}
199+
111200
:host([scale="s"]) {
112201
.container {
113202
--calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) /* 24px */;

0 commit comments

Comments
 (0)