Skip to content

Commit b6516f8

Browse files
driskullbenelan
driskull
authored and
benelan
committed
feat(filter): add component tokens (#11885)
**Related Issue:** #7180 ## Summary Adds the following tokens for `filter` component. - --calcite-filter-content-space: Specifies the padding of the component's content. - --calcite-filter-input-background-color: Specifies the input's background color. - --calcite-filter-input-border-color: Specifies the input's border color. - --calcite-filter-input-corner-radius: Specifies the input's corner radius. - --calcite-filter-input-shadow: Specifies the shadow around the input. - --calcite-filter-input-icon-color: Specifies the input's icon color. - --calcite-filter-input-text-color: Specifies the input's text color. - --calcite-filter-input-placeholder-text-color: Specifies the input's placeholder text color. - --calcite-filter-input-actions-background-color: Specifies the background color of the input's `clearable` and `number-button-type` elements. - --calcite-filter-input-actions-background-color-hover: Specifies the background color of the input's `clearable` and `number-button-type` elements when hovered. - --calcite-filter-input-actions-background-color-press: Specifies the background color of the input's `clearable` and `number-button-type` elements when pressed. - --calcite-filter-input-actions-icon-color: Specifies the icon color of the input's `clearable` and `number-button-type` elements. - --calcite-filter-input-actions-icon-color-hover: Specifies the icon color of the input's `clearable` and `number-button-type` elements when hovered. - --calcite-filter-input-actions-icon-color-press: Specifies the icon color of the input's `clearable` and `number-button-type` elements when pressed. /nts when pressed.
1 parent 617238c commit b6516f8

File tree

4 files changed

+139
-4
lines changed

4 files changed

+139
-4
lines changed

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

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
// @ts-strict-ignore
22
import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
33
import { describe, expect, it, beforeEach } from "vitest";
4-
import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
4+
import {
5+
accessible,
6+
defaults,
7+
disabled,
8+
focusable,
9+
hidden,
10+
reflects,
11+
renders,
12+
t9n,
13+
themed,
14+
} from "../../tests/commonTests";
515
import { CSS as INPUT_CSS } from "../input/resources";
616
import { DEBOUNCE } from "../../utils/resources";
17+
import { html } from "../../../support/formatting";
718
import type { Filter } from "./filter";
19+
import { CSS } from "./resources";
820

921
describe("calcite-filter", () => {
1022
describe("renders", () => {
@@ -358,4 +370,67 @@ describe("calcite-filter", () => {
358370
describe("translation support", () => {
359371
t9n("calcite-filter");
360372
});
373+
374+
describe("theme", () => {
375+
describe("default", () => {
376+
themed(html`<calcite-filter></calcite-filter>`, {
377+
"--calcite-filter-content-space": {
378+
targetProp: "padding",
379+
shadowSelector: `.${CSS.container}`,
380+
},
381+
"--calcite-filter-input-background-color": {
382+
targetProp: "--calcite-input-background-color",
383+
shadowSelector: "calcite-input",
384+
},
385+
"--calcite-filter-input-border-color": {
386+
targetProp: "--calcite-input-border-color",
387+
shadowSelector: "calcite-input",
388+
},
389+
"--calcite-filter-input-corner-radius": {
390+
targetProp: "--calcite-input-corner-radius",
391+
shadowSelector: "calcite-input",
392+
},
393+
"--calcite-filter-input-shadow": {
394+
targetProp: "--calcite-input-shadow",
395+
shadowSelector: "calcite-input",
396+
},
397+
"--calcite-filter-input-icon-color": {
398+
targetProp: "--calcite-input-icon-color",
399+
shadowSelector: "calcite-input",
400+
},
401+
"--calcite-filter-input-text-color": {
402+
targetProp: "--calcite-input-text-color",
403+
shadowSelector: "calcite-input",
404+
},
405+
"--calcite-filter-input-placeholder-text-color": {
406+
targetProp: "--calcite-input-placeholder-text-color",
407+
shadowSelector: "calcite-input",
408+
},
409+
"--calcite-filter-input-actions-background-color": {
410+
targetProp: "--calcite-input-actions-background-color",
411+
shadowSelector: "calcite-input",
412+
},
413+
"--calcite-filter-input-actions-background-color-hover": {
414+
targetProp: "--calcite-input-actions-background-color-hover",
415+
shadowSelector: "calcite-input",
416+
},
417+
"--calcite-filter-input-actions-background-color-press": {
418+
targetProp: "--calcite-input-actions-background-color-press",
419+
shadowSelector: "calcite-input",
420+
},
421+
"--calcite-filter-input-actions-icon-color": {
422+
targetProp: "--calcite-input-actions-icon-color",
423+
shadowSelector: "calcite-input",
424+
},
425+
"--calcite-filter-input-actions-icon-color-hover": {
426+
targetProp: "--calcite-input-actions-icon-color-hover",
427+
shadowSelector: "calcite-input",
428+
},
429+
"--calcite-filter-input-actions-icon-color-press": {
430+
targetProp: "--calcite-input-actions-icon-color-press",
431+
shadowSelector: "calcite-input",
432+
},
433+
});
434+
});
435+
});
361436
});

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

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* @prop --calcite-filter-content-space: Specifies the padding of the component's content.
5+
*
6+
* @prop --calcite-filter-input-background-color: Specifies the input's background color.
7+
* @prop --calcite-filter-input-border-color: Specifies the input's border color.
8+
* @prop --calcite-filter-input-corner-radius: Specifies the input's corner radius.
9+
* @prop --calcite-filter-input-shadow: Specifies the shadow around the input.
10+
*
11+
* @prop --calcite-filter-input-icon-color: Specifies the input's icon color.
12+
* @prop --calcite-filter-input-text-color: Specifies the input's text color.
13+
* @prop --calcite-filter-input-placeholder-text-color: Specifies the input's placeholder text color.
14+
*
15+
* @prop --calcite-filter-input-actions-background-color: Specifies the background color of the input's `clearable` element.
16+
* @prop --calcite-filter-input-actions-background-color-hover: Specifies the background color of the input's `clearable` element when hovered.
17+
* @prop --calcite-filter-input-actions-background-color-press: Specifies the background color of the input's `clearable` element when pressed.
18+
* @prop --calcite-filter-input-actions-icon-color: Specifies the icon color of the input's `clearable` element.
19+
* @prop --calcite-filter-input-actions-icon-color-hover: Specifies the icon color of the input's `clearable` element when hovered.
20+
* @prop --calcite-filter-input-actions-icon-color-press: Specifies the icon color of the input's `clearable` element when pressed.
21+
*/
22+
123
:host {
224
@extend %component-host;
325
@apply flex w-full;
@@ -11,17 +33,17 @@
1133

1234
:host([scale="s"]) {
1335
.container {
14-
padding: var(--calcite-spacing-sm);
36+
padding: var(--calcite-filter-content-space, var(--calcite-spacing-sm));
1537
}
1638
}
1739
:host([scale="m"]) {
1840
.container {
19-
padding: var(--calcite-spacing-md);
41+
padding: var(--calcite-filter-content-space, var(--calcite-spacing-md));
2042
}
2143
}
2244
:host([scale="l"]) {
2345
.container {
24-
padding: var(--calcite-spacing-lg);
46+
padding: var(--calcite-filter-content-space, var(--calcite-spacing-lg));
2547
}
2648
}
2749

@@ -35,6 +57,19 @@ label {
3557

3658
calcite-input {
3759
@apply w-full;
60+
--calcite-input-background-color: var(--calcite-filter-input-background-color);
61+
--calcite-input-border-color: var(--calcite-filter-input-border-color);
62+
--calcite-input-corner-radius: var(--calcite-filter-input-corner-radius);
63+
--calcite-input-shadow: var(--calcite-filter-input-shadow);
64+
--calcite-input-icon-color: var(--calcite-filter-input-icon-color);
65+
--calcite-input-text-color: var(--calcite-filter-input-text-color);
66+
--calcite-input-placeholder-text-color: var(--calcite-filter-input-placeholder-text-color);
67+
--calcite-input-actions-background-color: var(--calcite-filter-input-actions-background-color);
68+
--calcite-input-actions-background-color-hover: var(--calcite-filter-input-actions-background-color-hover);
69+
--calcite-input-actions-background-color-press: var(--calcite-filter-input-actions-background-color-press);
70+
--calcite-input-actions-icon-color: var(--calcite-filter-input-actions-icon-color);
71+
--calcite-input-actions-icon-color-hover: var(--calcite-filter-input-actions-icon-color-hover);
72+
--calcite-input-actions-icon-color-press: var(--calcite-filter-input-actions-icon-color-press);
3873
}
3974

4075
@include base-component();

‎packages/calcite-components/src/custom-theme.stories.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { comboboxItem, comboboxItemTokens, selectedComboboxItem } from "./custom
2525
import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker";
2626
import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown";
2727
import { fab, fabLoading, fabTokens } from "./custom-theme/fab";
28+
import { filter, filterTokens } from "./custom-theme/filter";
2829
import { flow, flowTokens } from "./custom-theme/flow";
2930
import { graph, graphTokens } from "./custom-theme/graph";
3031
import { handle, handleTokens } from "./custom-theme/handle";
@@ -176,6 +177,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
176177
<div class="demo-column">${fab}</div>
177178
<div class="demo-column">${fabLoading}</div>
178179
</div>
180+
<div class="demo-row">
181+
<div class="demo-column">${filter}</div>
182+
</div>
179183
<div class="demo-row">
180184
<div class="demo-column">${inputMessage}</div>
181185
</div>
@@ -212,6 +216,7 @@ const componentTokens = {
212216
...DropdownItemTokens,
213217
...DropdownGroupTokens,
214218
...fabTokens,
219+
...filterTokens,
215220
...flowTokens,
216221
...handleTokens,
217222
...inlineEditableTokens,

‎packages/calcite-components/src/custom-theme/filter.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { html } from "../../support/formatting";
2+
3+
export const filterTokens = {
4+
calciteFilterContentSpace: "",
5+
calciteFilterInputBackgroundColor: "",
6+
calciteFilterInputBorderColor: "",
7+
calciteFilterInputCornerRadius: "",
8+
calciteFilterInputShadow: "",
9+
calciteFilterInputIconColor: "",
10+
calciteFilterInputTextColor: "",
11+
calciteFilterInputPlaceholderTextColor: "",
12+
calciteFilterInputActionsBackgroundColor: "",
13+
calciteFilterInputActionsBackgroundColorHover: "",
14+
calciteFilterInputActionsBackgroundColorPress: "",
15+
calciteFilterInputActionsIconColor: "",
16+
calciteFilterInputActionsIconColorHover: "",
17+
calciteFilterInputActionsIconColorPress: "",
18+
};
19+
20+
export const filter = html`<calcite-filter></calcite-filter>`;

0 commit comments

Comments
 (0)