Skip to content

Commit 85f9378

Browse files
alisonaileabenelan
alisonailea
authored and
benelan
committed
feat(dropdown, dropdown-item, dropdown-group): add component tokens (#11465)
**Related Issue:** #7180 ## Summary Add Component Tokens ### Dropdown --calcite-dropdown-background-color ### Dropdown Group --calcite-dropdown-group-border-color: Specifies the color of the dropdown's border. --calcite-dropdown-group-title-text-color: Specifies the color of the dropdown's title. ### Dropdown Item --calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered. --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active. --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered. --calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active. --calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active. --calcite-dropdown-item-text-color: Specifies the color of the dropdown item text.
1 parent 78cd21e commit 85f9378

File tree

10 files changed

+231
-31
lines changed

10 files changed

+231
-31
lines changed

‎packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts

+28
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { describe, expect, it } from "vitest";
44
import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
55
import { html } from "../../../support/formatting";
66
import { findAll } from "../../tests/utils";
7+
import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
8+
import { CSS } from "./resources";
79

810
describe("calcite-dropdown-group", () => {
911
describe("defaults", () => {
@@ -73,4 +75,30 @@ describe("calcite-dropdown-group", () => {
7375
expect(await item.getProperty("selectionMode")).toBe("none");
7476
}
7577
});
78+
79+
describe("theme", () => {
80+
const tokens: ComponentTestTokens = {
81+
"--calcite-dropdown-group-border-color": [
82+
{
83+
targetProp: "borderColor",
84+
shadowSelector: `.${CSS.title}`,
85+
selector: `calcite-dropdown-group`,
86+
},
87+
{
88+
targetProp: "backgroundColor",
89+
shadowSelector: `.${CSS.separator}`,
90+
selector: `calcite-dropdown-group.two`,
91+
},
92+
],
93+
"--calcite-dropdown-group-title-text-color": {
94+
targetProp: "color",
95+
shadowSelector: `.${CSS.title}`,
96+
selector: `calcite-dropdown-group`,
97+
},
98+
};
99+
themed(
100+
`<calcite-dropdown open><calcite-dropdown-group group-title="one"><calcite-dropdown-item>A</calcite-dropdown-item></calcite-dropdown-group><calcite-dropdown-group group-title="two" class="two"><calcite-dropdown-item>A</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`,
101+
tokens,
102+
);
103+
});
76104
});

‎packages/calcite-components/src/components/dropdown-group/dropdown-group.scss

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* These properties can be overridden using the component's tag as selector.
5+
*
6+
* @prop --calcite-dropdown-group-border-color: Specifies the color of the dropdown's border.
7+
* @prop --calcite-dropdown-group-title-text-color: Specifies the color of the dropdown's title.
8+
*/
9+
110
:host {
211
@apply block;
312
}
@@ -7,21 +16,22 @@
716
}
817

918
.dropdown-title {
10-
@apply border-color-3
11-
text-color-2
12-
-mb-px
19+
@apply -mb-px
1320
block
1421
cursor-default
1522
break-words
1623
border-0
1724
border-b
1825
border-solid
1926
font-bold;
27+
28+
border-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
29+
color: var(--calcite-dropdown-group-title-text-color, var(--calcite-color-text-2));
2030
}
2131

2232
.dropdown-separator {
2333
@apply block h-px;
24-
background-color: theme("borderColor.color.3");
34+
background-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
2535
}
2636

2737
:host([scale="s"]) {

‎packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { PropertyValues } from "lit";
33
import { LitElement, property, createEvent, h, JsxNode } from "@arcgis/lumina";
44
import { Scale, SelectionMode } from "../interfaces";
55
import { createObserver } from "../../utils/observers";
6-
import { CSS } from "../dropdown-item/resources";
6+
import { CSS as ItemCSS } from "../dropdown-item/resources";
77
import type { DropdownItem } from "../dropdown-item/dropdown-item";
8+
import { CSS } from "./resources";
89
import { RequestedItem } from "./interfaces";
910
import { styles } from "./dropdown-group.scss";
1011

@@ -135,13 +136,13 @@ export class DropdownGroup extends LitElement {
135136

136137
override render(): JsxNode {
137138
const groupTitle = this.groupTitle ? (
138-
<span ariaHidden="true" class="dropdown-title">
139+
<span ariaHidden="true" class={CSS.title}>
139140
{this.groupTitle}
140141
</span>
141142
) : null;
142143

143144
const dropdownSeparator =
144-
this.groupPosition > 0 ? <div class="dropdown-separator" role="separator" /> : null;
145+
this.groupPosition > 0 ? <div class={CSS.separator} role="separator" /> : null;
145146
/* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
146147
this.el.ariaLabel = this.groupTitle;
147148
/* TODO: [MIGRATION] This used <Host> before. In Stencil, <Host> props overwrite user-provided props. If you don't wish to overwrite user-values, replace "=" here with "??=" */
@@ -150,7 +151,7 @@ export class DropdownGroup extends LitElement {
150151
return (
151152
<div
152153
class={{
153-
[CSS.container]: true,
154+
[ItemCSS.container]: true,
154155
}}
155156
>
156157
{dropdownSeparator}

‎packages/calcite-components/src/components/dropdown-group/resources.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const CSS = {
2+
title: "dropdown-title",
3+
separator: "dropdown-separator",
4+
};

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

+94-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
22
import { describe, expect, it } from "vitest";
3-
import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
3+
import { focusable, renders, hidden, disabled, themed } from "../../tests/commonTests";
4+
import { ComponentTestTokens } from "../../tests/commonTests/themed";
5+
import { CSS } from "./resources";
46

57
describe("calcite-dropdown-item", () => {
68
describe("renders", () => {
@@ -50,4 +52,95 @@ describe("calcite-dropdown-item", () => {
5052

5153
expect(itemChangeSpy).toHaveReceivedEventTimes(3);
5254
});
55+
56+
describe("theme", () => {
57+
describe("default", () => {
58+
const tokens: ComponentTestTokens = {
59+
"--calcite-dropdown-item-text-color": {
60+
targetProp: "color",
61+
shadowSelector: `.${CSS.container}`,
62+
selector: `calcite-dropdown-item`,
63+
},
64+
"--calcite-dropdown-item-background-color-hover": {
65+
targetProp: "backgroundColor",
66+
shadowSelector: `.${CSS.container}`,
67+
state: "hover",
68+
selector: `calcite-dropdown-item`,
69+
},
70+
"--calcite-dropdown-item-background-color-press": {
71+
targetProp: "backgroundColor",
72+
shadowSelector: `.${CSS.container}`,
73+
state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
74+
selector: `calcite-dropdown-item`,
75+
},
76+
"--calcite-dropdown-item-icon-color-hover": {
77+
targetProp: "color",
78+
shadowSelector: `.${CSS.icon}`,
79+
state: "hover",
80+
selector: "calcite-dropdown-item",
81+
},
82+
"--calcite-dropdown-item-text-color-press": [
83+
{
84+
targetProp: "color",
85+
shadowSelector: `.${CSS.container}`,
86+
selector: "calcite-dropdown-item",
87+
state: "focus",
88+
},
89+
{
90+
targetProp: "color",
91+
shadowSelector: `.${CSS.container}`,
92+
selector: "calcite-dropdown-item",
93+
state: "hover",
94+
},
95+
{
96+
targetProp: "color",
97+
shadowSelector: `.${CSS.link}`,
98+
selector: "calcite-dropdown-item",
99+
state: "hover",
100+
},
101+
{
102+
targetProp: "color",
103+
shadowSelector: `.${CSS.container}`,
104+
selector: "calcite-dropdown-item",
105+
state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
106+
},
107+
{
108+
targetProp: "color",
109+
shadowSelector: `.${CSS.link}`,
110+
selector: "calcite-dropdown-item",
111+
state: { press: `calcite-dropdown-item >>> .${CSS.container}` },
112+
},
113+
],
114+
};
115+
themed(
116+
`<calcite-dropdown open>
117+
<calcite-dropdown-item href="esri.com">1</calcite-dropdown-item>
118+
<calcite-dropdown-item>2</calcite-dropdown-item>
119+
</calcite-dropdown>`,
120+
tokens,
121+
);
122+
});
123+
describe("selected", () => {
124+
const tokens: ComponentTestTokens = {
125+
"--calcite-dropdown-item-icon-color-press": {
126+
targetProp: "color",
127+
shadowSelector: `calcite-icon`,
128+
selector: `calcite-dropdown-item`,
129+
},
130+
"--calcite-dropdown-item-text-color-press": {
131+
targetProp: "color",
132+
shadowSelector: `.${CSS.container}`,
133+
selector: `calcite-dropdown-item`,
134+
},
135+
};
136+
themed(
137+
`<calcite-dropdown selectionMode="multiple" open>
138+
<calcite-dropdown-item href="esri.com" selected icon-start="home">1</calcite-dropdown-item>
139+
<calcite-dropdown-item href="esri.com" selected>2</calcite-dropdown-item>
140+
<calcite-dropdown-item selected class="selected">3</calcite-dropdown-item>
141+
</calcite-dropdown>`,
142+
tokens,
143+
);
144+
});
145+
});
53146
});

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

+36-13
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* These properties can be overridden using the component's tag as selector.
5+
*
6+
* @prop --calcite-dropdown-item-background-color-hover: Specifies the background color of the dropdown item when hovered.
7+
* @prop --calcite-dropdown-item-background-color-press: Specifies the background color of the dropdown item when selected or active.
8+
* @prop --calcite-dropdown-item-icon-color-hover: Specifies the color of the dropdown item icon when hovered.
9+
* @prop --calcite-dropdown-item-icon-color-press: Specifies the color of the dropdown item icons when selected or active.
10+
* @prop --calcite-dropdown-item-text-color-press: Specifies the color of the dropdown item text when selected or active.
11+
* @prop --calcite-dropdown-item-text-color: Specifies the color of the dropdown item text.
12+
*/
13+
114
@mixin item-styling {
2-
@apply text-color-3
3-
relative
15+
@apply relative
416
flex
517
flex-grow
618
cursor-pointer
719
items-center
820
no-underline;
21+
22+
color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3));
923
}
1024

1125
:host {
@@ -88,39 +102,48 @@
88102
:host(:focus) {
89103
.container {
90104
@apply focus-inset text-color-1 no-underline;
105+
color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
106+
}
107+
}
108+
109+
:host(:hover:not([disabled])) {
110+
.container {
111+
background-color: var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2));
91112
}
92113
}
93114

115+
:host(:active:not([disabled])) .container {
116+
background-color: var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3));
117+
}
118+
94119
:host(:hover:not([disabled])),
95120
:host(:active:not([disabled])) {
96121
.container {
97-
@apply bg-foreground-2 text-color-1 no-underline;
122+
@apply no-underline;
123+
color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
98124
}
99125

100126
.dropdown-link {
101-
@apply text-color-1;
127+
color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
102128
}
103129
}
104130

105-
:host(:active:not([disabled])) .container {
106-
@apply bg-foreground-3;
107-
}
108-
109131
:host([selected]) .container:not(.container--none-selection),
110132
:host([selected]) .dropdown-link {
111-
@apply text-color-1 font-medium;
112-
& calcite-icon {
113-
color: theme("backgroundColor.brand");
133+
@apply font-medium;
134+
color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1));
135+
136+
calcite-icon {
137+
color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand));
114138
}
115139
}
116140

117141
:host(:hover:not([disabled])) .dropdown-item-icon {
118-
color: theme("borderColor.color.1");
142+
color: var(--calcite-dropdown-item-icon-color-hover, var(--calcite-color-border-1));
119143
@apply opacity-100;
120144
}
121145

122146
:host([selected]) .dropdown-item-icon {
123-
color: theme("backgroundColor.brand");
124147
@apply opacity-100;
125148
}
126149

‎packages/calcite-components/src/components/dropdown/dropdown.e2e.ts

+15
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
} from "../../tests/utils";
2323
import type { DropdownItem } from "../dropdown-item/dropdown-item";
2424
import type { Button } from "../button/button";
25+
import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
2526
import { CSS } from "./resources";
2627

2728
describe("calcite-dropdown", () => {
@@ -1467,4 +1468,18 @@ describe("calcite-dropdown", () => {
14671468
expect(await isElementFocused(page, "#item-2")).toBe(true);
14681469
});
14691470
});
1471+
1472+
describe("theme", () => {
1473+
const tokens: ComponentTestTokens = {
1474+
"--calcite-dropdown-width": {
1475+
targetProp: "inlineSize",
1476+
shadowSelector: `.${CSS.content}`,
1477+
},
1478+
"--calcite-dropdown-background-color": {
1479+
targetProp: "backgroundColor",
1480+
shadowSelector: `.${CSS.content}`,
1481+
},
1482+
};
1483+
themed(`<calcite-dropdown open></calcite-dropdown>`, tokens);
1484+
});
14701485
});

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

+8-7
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* These properties can be overridden using the component's tag as selector.
55
*
66
* @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.
7+
* @prop --calcite-dropdown-background-color: Specifies the background color of the component.
78
*/
89

910
:host {
@@ -18,12 +19,12 @@
1819
@include floating-ui-elem-anim(".calcite-dropdown-wrapper");
1920

2021
.calcite-dropdown-content {
21-
@apply bg-foreground-1
22-
w-auto
22+
@apply w-auto
2323
overflow-y-auto
2424
overflow-x-hidden
2525
max-h-menu;
26-
inline-size: var(--calcite-dropdown-width);
26+
inline-size: var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));
27+
background-color: var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));
2728
}
2829

2930
.calcite-trigger-container {
@@ -32,21 +33,21 @@
3233
}
3334

3435
.width-s {
35-
--calcite-dropdown-width: theme("spacing.48");
36+
--calcite-internal-dropdown-width: theme("spacing.48");
3637
}
3738

3839
.width-m {
39-
--calcite-dropdown-width: theme("spacing.56");
40+
--calcite-internal-dropdown-width: theme("spacing.56");
4041
}
4142

4243
.width-l {
43-
--calcite-dropdown-width: theme("spacing.64");
44+
--calcite-internal-dropdown-width: theme("spacing.64");
4445
}
4546

4647
@media (forced-colors: active) {
4748
/* use real border since box-shadow is removed in high contrast mode */
4849
:host([open]) .calcite-dropdown-wrapper {
49-
border: 1px solid canvasText;
50+
border: var(--calcite-border-width-sm) solid canvasText;
5051
}
5152
}
5253

0 commit comments

Comments
 (0)