diff --git a/packages/calcite-components/src/components/label/label.e2e.ts b/packages/calcite-components/src/components/label/label.e2e.ts index 82d15b73a19..03a41469d34 100644 --- a/packages/calcite-components/src/components/label/label.e2e.ts +++ b/packages/calcite-components/src/components/label/label.e2e.ts @@ -1,8 +1,9 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { renders, hidden } from "../../tests/commonTests"; +import { renders, hidden, themed } from "../../tests/commonTests"; import { isElementFocused } from "../../tests/utils"; import { html } from "../../../support/formatting"; +import { CSS } from "./resources"; describe("calcite-label", () => { describe("renders", () => { @@ -204,4 +205,27 @@ describe("calcite-label", () => { expect(eventDetail).toBeTruthy(); }); + + describe("theme", () => { + describe("default", () => { + themed( + html` + + Label text + + + `, + { + "--calcite-label-margin-bottom": { + shadowSelector: `.${CSS.container}`, + targetProp: "marginBlockEnd", + }, + "--calcite-label-text-color": { + shadowSelector: `.${CSS.container}`, + targetProp: "color", + }, + }, + ); + }); + }); }); diff --git a/packages/calcite-components/src/components/label/label.scss b/packages/calcite-components/src/components/label/label.scss index 6c6b5350ecb..92669675a8d 100644 --- a/packages/calcite-components/src/components/label/label.scss +++ b/packages/calcite-components/src/components/label/label.scss @@ -3,7 +3,8 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-label-margin-bottom: The spacing below the component. + * @prop --calcite-label-margin-bottom: Specifies the component's bottom spacing. + * @prop --calcite-label-text-color: Specifies the component's text color. */ :host { @@ -40,13 +41,13 @@ margin-block-end: var(--calcite-label-margin-bottom, theme("spacing.4")); } } - :host .container { @apply text-color-1 mt-0 mx-0 w-full leading-snug; + color: var(--calcite-label-text-color, var(--calcite-color-text-1)); } :host([layout="default"]) { diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index a1d9c18c43d..6e53a5e581c 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -25,6 +25,7 @@ import { icon } from "./custom-theme/icon"; import { input, inputTokens } from "./custom-theme/input"; import { inputNumber } from "./custom-theme/input-number"; import { inputText } from "./custom-theme/input-text"; +import { label, labelTokens } from "./custom-theme/label"; import { loader } from "./custom-theme/loader"; import { notices } from "./custom-theme/notice"; import { pagination } from "./custom-theme/pagination"; @@ -120,8 +121,8 @@ const kitchenSink = (args: Record, useTestValues = false) => ${chips} ${pagination} ${slider}
- ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} - ${handle} ${textArea} ${popover} ${tile} ${tooltip} + ${datePicker} ${tabs} ${label} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} + ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
${alert} ${navigation} @@ -142,6 +143,7 @@ const componentTokens = { ...chipTokens, ...checkboxTokens, ...handleTokens, + ...labelTokens, ...popoverTokens, ...progressTokens, ...inputTokens, diff --git a/packages/calcite-components/src/custom-theme/label.ts b/packages/calcite-components/src/custom-theme/label.ts new file mode 100644 index 00000000000..fb0070c3ae1 --- /dev/null +++ b/packages/calcite-components/src/custom-theme/label.ts @@ -0,0 +1,13 @@ +import { html } from "../../support/formatting"; + +export const labelTokens = { + calciteLabelMarginBottom: "", + calciteLabelTextColor: "", +}; + +export const label = html` + + Label text + + +`; diff --git a/packages/calcite-components/src/demos/label.html b/packages/calcite-components/src/demos/label.html index db11d95668c..9e22fbf25cf 100644 --- a/packages/calcite-components/src/demos/label.html +++ b/packages/calcite-components/src/demos/label.html @@ -309,6 +309,21 @@ + +
+ +
+ + Themed + + +
+
diff --git a/packages/calcite-components/src/tests/utils/cssTokenValues.ts b/packages/calcite-components/src/tests/utils/cssTokenValues.ts index 1718740debf..c0548d0a600 100644 --- a/packages/calcite-components/src/tests/utils/cssTokenValues.ts +++ b/packages/calcite-components/src/tests/utils/cssTokenValues.ts @@ -18,7 +18,7 @@ export function getTokenValue(token: string): string { shadow$: "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", "(z-index)$": "42", - "(columns|gap|height|offset|radius|size|size-y|size-x|space|space-x|space-y|width)": "42px", + "(columns|gap|height|offset|radius|size|size-y|size-x|space|space-x|space-y|width|margin-bottom)": "42px", } as const; const match = Object.entries(tokenValueMap).find(([regexStr]) => {