Skip to content

Commit 9cbd155

Browse files
anveshmekalabenelan
anveshmekala
authored and
benelan
committed
feat(combobox-item): add component tokens (#11645)
**Related Issue:** #7180 ## Summary Adds following tokens in `combobox-item` component: `--calcite-combobox-text-color`: Specifies the text color of the component. `--calcite-combobox-text-color-hover`: Specifies the text color of the component when hovered. `--calcite-combobox-item-background-color-active`: Specifies the background color of the component when active. `--calcite-combobox-item-background-color-hover`: Specifies the background color of the component when hovered. `--calcite-combobox-selected-icon-color`: Specifies the color of the selected indicator icon. `--calcite-combobox-description-text-color`: Specifies the text color of the component's description & short-heading. `--calcite-combobox-description-text-color-press`: Specifies the text color of the component's description & short-heading when hovered. `--calcite-combobox-heading-text-color`: Specifies the text color of the component heading.
1 parent 15aab86 commit 9cbd155

File tree

7 files changed

+215
-58
lines changed

7 files changed

+215
-58
lines changed

‎README.md

+22-22
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
1616

1717
<!-- readme: contributors,calcite-admin/- -start -->
1818
<table>
19-
<tbody>
20-
<tr>
19+
<tbody>
20+
<tr>
2121
<td align="center">
2222
<a href="https://github.com/driskull">
2323
<img src="https://avatars.githubusercontent.com/u/1231455?v=4" width="100;" alt="driskull"/>
@@ -60,8 +60,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
6060
<sub><b>Erik Harper</b></sub>
6161
</a>
6262
</td>
63-
</tr>
64-
<tr>
63+
</tr>
64+
<tr>
6565
<td align="center">
6666
<a href="https://github.com/anveshmekala">
6767
<img src="https://avatars.githubusercontent.com/u/88453586?v=4" width="100;" alt="anveshmekala"/>
@@ -104,8 +104,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
104104
<sub><b>Ali Stump</b></sub>
105105
</a>
106106
</td>
107-
</tr>
108-
<tr>
107+
</tr>
108+
<tr>
109109
<td align="center">
110110
<a href="https://github.com/caripizza">
111111
<img src="https://avatars.githubusercontent.com/u/42423180?v=4" width="100;" alt="caripizza"/>
@@ -148,8 +148,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
148148
<sub><b>Kumar Jayaram Gayatri</b></sub>
149149
</a>
150150
</td>
151-
</tr>
152-
<tr>
151+
</tr>
152+
<tr>
153153
<td align="center">
154154
<a href="https://github.com/kat10140">
155155
<img src="https://avatars.githubusercontent.com/u/48069902?v=4" width="100;" alt="kat10140"/>
@@ -192,8 +192,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
192192
<sub><b>Max Patiiuk</b></sub>
193193
</a>
194194
</td>
195-
</tr>
196-
<tr>
195+
</tr>
196+
<tr>
197197
<td align="center">
198198
<a href="https://github.com/ffaubry">
199199
<img src="https://avatars.githubusercontent.com/u/3506166?v=4" width="100;" alt="ffaubry"/>
@@ -236,8 +236,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
236236
<sub><b>Jack Rowlingson</b></sub>
237237
</a>
238238
</td>
239-
</tr>
240-
<tr>
239+
</tr>
240+
<tr>
241241
<td align="center">
242242
<a href="https://github.com/crowjonah">
243243
<img src="https://avatars.githubusercontent.com/u/1634397?v=4" width="100;" alt="crowjonah"/>
@@ -280,8 +280,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
280280
<sub><b>Mike Horn</b></sub>
281281
</a>
282282
</td>
283-
</tr>
284-
<tr>
283+
</tr>
284+
<tr>
285285
<td align="center">
286286
<a href="https://github.com/Apahadi73">
287287
<img src="https://avatars.githubusercontent.com/u/36856709?v=4" width="100;" alt="Apahadi73"/>
@@ -324,8 +324,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
324324
<sub><b>Aine Fitzgerald Coleman</b></sub>
325325
</a>
326326
</td>
327-
</tr>
328-
<tr>
327+
</tr>
328+
<tr>
329329
<td align="center">
330330
<a href="https://github.com/anveshrmekala">
331331
<img src="https://avatars.githubusercontent.com/u/107427943?v=4" width="100;" alt="anveshrmekala"/>
@@ -368,8 +368,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
368368
<sub><b>Nathan Whittaker</b></sub>
369369
</a>
370370
</td>
371-
</tr>
372-
<tr>
371+
</tr>
372+
<tr>
373373
<td align="center">
374374
<a href="https://github.com/oknoway">
375375
<img src="https://avatars.githubusercontent.com/u/354970?v=4" width="100;" alt="oknoway"/>
@@ -412,8 +412,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
412412
<sub><b>Drew Tate</b></sub>
413413
</a>
414414
</td>
415-
</tr>
416-
<tr>
415+
</tr>
416+
<tr>
417417
<td align="center">
418418
<a href="https://github.com/allieorth">
419419
<img src="https://avatars.githubusercontent.com/u/48034760?v=4" width="100;" alt="allieorth"/>
@@ -428,8 +428,8 @@ We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.m
428428
<sub><b>Aaron Shetland</b></sub>
429429
</a>
430430
</td>
431-
</tr>
432-
<tbody>
431+
</tr>
432+
<tbody>
433433
</table>
434434
<!-- readme: contributors,calcite-admin/- -end -->
435435

‎packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts

+120-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { describe } from "vitest";
2-
import { defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests";
2+
import { defaults, disabled, hidden, reflects, renders, slots, themed } from "../../tests/commonTests";
3+
import { ComponentTestTokens } from "../../tests/commonTests/themed";
4+
import { html } from "../../../support/formatting";
35
import { SLOTS } from "./resources";
6+
import { CSS } from "./resources";
47

58
describe("calcite-combobox-item", () => {
69
describe("defaults", () => {
@@ -46,4 +49,120 @@ describe("calcite-combobox-item", () => {
4649
describe("disabled", () => {
4750
disabled("calcite-combobox-item", { focusTarget: "none" });
4851
});
52+
53+
describe("theme", () => {
54+
describe("default", () => {
55+
const comboboxHTML = html` <calcite-combobox-item
56+
value="Pikachu"
57+
heading="Pikachu"
58+
description="Pokemon's mascot"
59+
short-heading="0025"
60+
icon="tree"
61+
></calcite-combobox-item>`;
62+
63+
const comboboxItemTokens: ComponentTestTokens = {
64+
"--calcite-combobox-text-color": [
65+
{
66+
shadowSelector: ` .${CSS.label} `,
67+
selector: "calcite-combobox-item",
68+
targetProp: "color",
69+
},
70+
{
71+
shadowSelector: `.${CSS.iconCustom}`,
72+
selector: "calcite-combobox-item",
73+
targetProp: "color",
74+
},
75+
],
76+
"--calcite-combobox-text-color-hover": [
77+
{
78+
shadowSelector: ` .${CSS.label} `,
79+
selector: "calcite-combobox-item",
80+
targetProp: "color",
81+
state: "hover",
82+
},
83+
{
84+
shadowSelector: ` .${CSS.label} `,
85+
selector: "calcite-combobox-item",
86+
targetProp: "color",
87+
state: { press: `calcite-combobox-item >>> .${CSS.label} ` },
88+
},
89+
{
90+
shadowSelector: `.${CSS.iconCustom}`,
91+
selector: "calcite-combobox-item",
92+
targetProp: "color",
93+
state: "hover",
94+
},
95+
{
96+
shadowSelector: `.${CSS.iconCustom}`,
97+
selector: "calcite-combobox-item",
98+
targetProp: "color",
99+
state: { press: `calcite-combobox-item >>> .${CSS.iconCustom} ` },
100+
},
101+
],
102+
"--calcite-combobox-item-background-color-active": {
103+
shadowSelector: ` .${CSS.label} `,
104+
selector: "calcite-combobox-item",
105+
targetProp: "backgroundColor",
106+
state: { press: `calcite-combobox-item >>> .${CSS.label} ` },
107+
},
108+
"--calcite-combobox-item-background-color-hover": {
109+
shadowSelector: ` .${CSS.label} `,
110+
selector: "calcite-combobox-item",
111+
targetProp: "backgroundColor",
112+
state: "hover",
113+
},
114+
"--calcite-combobox-description-text-color": [
115+
{
116+
shadowSelector: `.${CSS.description}`,
117+
selector: "calcite-combobox-item",
118+
targetProp: "color",
119+
},
120+
{
121+
shadowSelector: `.${CSS.shortText}`,
122+
selector: "calcite-combobox-item",
123+
targetProp: "color",
124+
},
125+
],
126+
"--calcite-combobox-description-text-color-press": [
127+
{
128+
shadowSelector: `.${CSS.description}`,
129+
selector: "calcite-combobox-item",
130+
targetProp: "color",
131+
state: { press: `calcite-combobox-item >>> .${CSS.description} ` },
132+
},
133+
{
134+
shadowSelector: `.${CSS.shortText}`,
135+
selector: "calcite-combobox-item",
136+
targetProp: "color",
137+
state: { press: `calcite-combobox-item >>> .${CSS.shortText} ` },
138+
},
139+
],
140+
"--calcite-combobox-heading-text-color": {
141+
shadowSelector: `.${CSS.heading}`,
142+
selector: "calcite-combobox-item",
143+
targetProp: "color",
144+
},
145+
};
146+
themed(comboboxHTML, comboboxItemTokens);
147+
});
148+
149+
describe("selected", () => {
150+
const selectedComboboxItemHTML = html` <calcite-combobox-item
151+
value="Pikachu"
152+
heading="Pikachu"
153+
description="Pokemon's mascot"
154+
short-heading="0025"
155+
icon="tree"
156+
selected
157+
></calcite-combobox-item>`;
158+
const comboboxItemTokens: ComponentTestTokens = {
159+
"--calcite-combobox-selected-icon-color": {
160+
shadowSelector: ` .${CSS.icon} `,
161+
selector: "calcite-combobox-item",
162+
targetProp: "color",
163+
},
164+
};
165+
themed(selectedComboboxItemHTML, comboboxItemTokens);
166+
});
167+
});
49168
});

‎packages/calcite-components/src/components/combobox-item/combobox-item.scss

+40-26
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* These properties can be overridden using the component's tag as selector.
5+
*
6+
* @prop --calcite-combobox-text-color: Specifies the component's text color.
7+
* @prop --calcite-combobox-text-color-hover: Specifies the component's text color when hovered.
8+
* @prop --calcite-combobox-item-background-color-active: Specifies the component's background color when active.
9+
* @prop --calcite-combobox-item-background-color-hover: Specifies the component's background color when hovered.
10+
* @prop --calcite-combobox-selected-icon-color: Specifies the component's selected indicator icon color.
11+
* @prop --calcite-combobox-description-text-color: Specifies the component's `description` and `shortHeading` text color.
12+
* @prop --calcite-combobox-description-text-color-press: Specifies the component's `description` and `shortHeading` text color when hovered.
13+
* @prop --calcite-combobox-heading-text-color: Specifies the component's `heading` text color.
14+
*/
15+
116
@include base-component();
217

318
.scale--s {
@@ -47,8 +62,7 @@ ul:focus {
4762
}
4863

4964
.label {
50-
@apply text-color-3
51-
focus-base
65+
@apply focus-base
5266
relative
5367
box-border
5468
flex
@@ -57,14 +71,16 @@ ul:focus {
5771
cursor-pointer
5872
items-center
5973
no-underline
60-
duration-150
6174
ease-in-out;
6275
@include word-break();
6376
justify-content: space-around;
6477
gap: var(--calcite-combobox-item-spacing-unit-l);
6578
padding-block: var(--calcite-combobox-item-spacing-unit-s);
6679
padding-inline-end: var(--calcite-combobox-item-spacing-unit-l);
6780
padding-inline-start: var(--calcite-combobox-item-indent-value);
81+
82+
color: var(--calcite-combobox-text-color, var(--calcite-color-text-3));
83+
transition-duration: var(--calcite-animation-timing);
6884
}
6985

7086
:host([disabled]) .label {
@@ -75,24 +91,25 @@ ul:focus {
7591
@apply focus-inset;
7692
}
7793

94+
.label:hover {
95+
background-color: var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));
96+
color: var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1));
97+
}
98+
99+
.label:active {
100+
background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3));
101+
}
102+
78103
:host([selected]) .label,
79104
.label:active {
80-
@apply text-color-1;
105+
color: var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1));
81106

82107
.description,
83108
.short-text {
84-
@apply text-color-2;
109+
color: var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2));
85110
}
86111
}
87112

88-
.label:hover {
89-
@apply text-color-1 bg-foreground-2;
90-
}
91-
92-
.label:active {
93-
background-color: var(--calcite-color-foreground-3);
94-
}
95-
96113
.icon {
97114
@apply inline-flex
98115
opacity-0
@@ -102,7 +119,7 @@ ul:focus {
102119

103120
:host([selected]) .icon {
104121
@apply opacity-100;
105-
color: theme("backgroundColor.brand");
122+
color: var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand));
106123
}
107124

108125
.icon--custom {
@@ -124,25 +141,22 @@ ul:focus {
124141
white-space: nowrap;
125142
}
126143

127-
.title {
128-
color: var(--calcite-color-text-1);
144+
.heading {
145+
color: var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1));
129146
}
130147

131-
:host([selected]) {
132-
.title {
133-
@apply font-medium;
134-
}
148+
.description,
149+
.short-text {
150+
color: var(--calcite-combobox-description-text-color, var(--calcite-color-text-3));
135151
}
136152

137-
.label,
138-
.label:hover {
139-
.description,
140-
.short-text {
141-
@apply text-color-3;
153+
:host([selected]) {
154+
.heading {
155+
@apply font-medium;
142156
}
143157
}
144158

145-
.title,
159+
.heading,
146160
.description,
147161
.short-text {
148162
line-height: var(--calcite-font-line-height-relative-snug);

‎packages/calcite-components/src/components/combobox-item/combobox-item.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
235235
return this.icon ? (
236236
<calcite-icon
237237
class={{
238-
[CSS.custom]: !!this.icon,
238+
[CSS.iconCustom]: !!this.icon,
239239
}}
240240
flipRtl={this.iconFlipRtl}
241241
icon={this.icon || iconPath}
@@ -310,7 +310,7 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
310310
<slot name={SLOTS.contentStart} />
311311
{this.renderIcon(icon)}
312312
<div class={CSS.centerContent}>
313-
<div class={CSS.title}>
313+
<div class={CSS.heading}>
314314
{highlightText({
315315
text: headingText,
316316
pattern: filterTextMatchPattern,

0 commit comments

Comments
 (0)