From add3d80a9351a457dea4d493f73d44e44207ee95 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 31 Mar 2025 15:05:07 -0700 Subject: [PATCH 1/6] feat(fab): add component tokens --- .../src/components/fab/fab.e2e.ts | 39 ++++++++++++++++++- .../src/components/fab/fab.scss | 26 ++++++++++++- .../src/custom-theme.stories.ts | 5 +++ .../src/custom-theme/fab.ts | 8 ++++ 4 files changed, 76 insertions(+), 2 deletions(-) create mode 100644 packages/calcite-components/src/custom-theme/fab.ts diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index 151b340647f..af003321030 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -1,7 +1,8 @@ import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it } from "vitest"; -import { accessible, defaults, disabled, hidden, renders } from "../../tests/commonTests"; +import { accessible, defaults, disabled, hidden, renders, themed } from "../../tests/commonTests"; import { findAll } from "../../tests/utils"; +import { html } from "../../../support/formatting"; import { CSS } from "./resources"; describe("calcite-fab", () => { @@ -148,4 +149,40 @@ describe("calcite-fab", () => { }); }); }); + + describe("theme", () => { + describe("default", () => { + themed(html``, { + "--calcite-fab-background-color": { + targetProp: "backgroundColor", + shadowSelector: `.${CSS.button}`, + }, + "--calcite-fab-border-color": { + targetProp: "borderColor", + shadowSelector: `.${CSS.button}`, + }, + "--calcite-fab-corner-radius": { + targetProp: "borderRadius", + shadowSelector: `.${CSS.button}`, + }, + "--calcite-fab-text-color": { + targetProp: "color", + shadowSelector: `.${CSS.button}`, + }, + "--calcite-fab-shadow": { + targetProp: "boxShadow", + shadowSelector: `.${CSS.button}`, + }, + }); + + describe("loader", () => { + themed(html``, { + "--calcite-fab-loader-color": { + targetProp: "color", + shadowSelector: `.${CSS.button} >>> calcite-loader`, + }, + }); + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index ecdf9684fa9..34018a5b505 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -1,3 +1,16 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-fab-background-color: Specifies the component's background color. + * @prop --calcite-fab-border-color: Specifies the component's border color. + * @prop --calcite-fab-corner-radius: Specifies the component's corner radius. + * @prop --calcite-fab-text-color: Specifies the component's text color. + * @prop --calcite-fab-loader-color: Specifies the component's loader color. + * @prop --calcite-fab-shadow: Specifies the component's shadow. + */ + :host { @apply flex bg-transparent; } @@ -5,13 +18,24 @@ @include disabled(); calcite-button { - @apply shadow-2; + --calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08); + box-shadow: var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal)); + &:hover { @apply shadow-2-lg; } &:active { @apply shadow-2-sm; } + + --calcite-button-background-color: var(--calcite-fab-background-color); + --calcite-button-border-color: var(--calcite-fab-border-color); + --calcite-button-corner-radius: var(--calcite-fab-corner-radius); + --calcite-button-text-color: var(--calcite-fab-text-color); + + calcite-loader { + --calcite-button-loader-color: var(--calcite-fab-loader-color); + } } @include base-component(); diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 9da4af33890..4525c4283fb 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -24,6 +24,7 @@ import { chips, chipTokens } from "./custom-theme/chips"; import { comboboxItem, comboboxItemTokens, selectedComboboxItem } from "./custom-theme/combobox-item"; import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker"; import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown"; +import { fab, fabTokens } from "./custom-theme/fab"; import { flow, flowTokens } from "./custom-theme/flow"; import { graph, graphTokens } from "./custom-theme/graph"; import { handle, handleTokens } from "./custom-theme/handle"; @@ -166,6 +167,9 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${datePicker}
${datePickerRange}
+
+
${fab}
+
${inputMessage}
@@ -194,6 +198,7 @@ const componentTokens = { ...DropdownTokens, ...DropdownItemTokens, ...DropdownGroupTokens, + ...fabTokens, ...flowTokens, ...handleTokens, ...inlineEditableTokens, diff --git a/packages/calcite-components/src/custom-theme/fab.ts b/packages/calcite-components/src/custom-theme/fab.ts new file mode 100644 index 00000000000..017a6147bc1 --- /dev/null +++ b/packages/calcite-components/src/custom-theme/fab.ts @@ -0,0 +1,8 @@ +import { html } from "../../support/formatting"; + +export const fabTokens = { + calciteFabBackgroundColor: "", + calciteFabShadow: "", +}; + +export const fab = html` `; From fdf9096fefded32991f9fccc310fca4e8cde0fe4 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 31 Mar 2025 15:10:35 -0700 Subject: [PATCH 2/6] fabTokens --- packages/calcite-components/src/custom-theme/fab.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/calcite-components/src/custom-theme/fab.ts b/packages/calcite-components/src/custom-theme/fab.ts index 017a6147bc1..fb6bc2e776c 100644 --- a/packages/calcite-components/src/custom-theme/fab.ts +++ b/packages/calcite-components/src/custom-theme/fab.ts @@ -2,6 +2,10 @@ import { html } from "../../support/formatting"; export const fabTokens = { calciteFabBackgroundColor: "", + calciteFabBorderColor: "", + calciteFabCornerRadius: "", + calciteFabTextColor: "", + calciteFabLoaderColor: "", calciteFabShadow: "", }; From 154aeb5a98ff9ef8e8b3d357dcb9946d309d16c8 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 31 Mar 2025 16:22:36 -0700 Subject: [PATCH 3/6] refine selectors --- .../src/components/fab/fab.e2e.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index af003321030..7912e48d95c 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -155,33 +155,33 @@ describe("calcite-fab", () => { themed(html``, { "--calcite-fab-background-color": { targetProp: "backgroundColor", - shadowSelector: `.${CSS.button}`, + shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-border-color": { targetProp: "borderColor", - shadowSelector: `.${CSS.button}`, + shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-corner-radius": { targetProp: "borderRadius", - shadowSelector: `.${CSS.button}`, + shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-text-color": { targetProp: "color", - shadowSelector: `.${CSS.button}`, + shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-shadow": { targetProp: "boxShadow", shadowSelector: `.${CSS.button}`, }, }); + }); - describe("loader", () => { - themed(html``, { - "--calcite-fab-loader-color": { - targetProp: "color", - shadowSelector: `.${CSS.button} >>> calcite-loader`, - }, - }); + describe("loader", () => { + themed(html``, { + "--calcite-fab-loader-color": { + targetProp: "color", + shadowSelector: `.${CSS.button} >>> calcite-loader`, + }, }); }); }); From 9dea067227e31060a2b333a46d1d5aa6a24e05af Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 31 Mar 2025 20:10:36 -0700 Subject: [PATCH 4/6] cleanup and add loading screenshot --- .../calcite-components/src/components/fab/fab.e2e.ts | 2 +- packages/calcite-components/src/components/fab/fab.scss | 9 ++++----- packages/calcite-components/src/custom-theme.stories.ts | 3 ++- packages/calcite-components/src/custom-theme/fab.ts | 3 ++- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index 7912e48d95c..27646bb671b 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -180,7 +180,7 @@ describe("calcite-fab", () => { themed(html``, { "--calcite-fab-loader-color": { targetProp: "color", - shadowSelector: `.${CSS.button} >>> calcite-loader`, + shadowSelector: `.${CSS.button} >>> button >>> calcite-loader`, }, }); }); diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index 34018a5b505..92eee0f654e 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -12,7 +12,9 @@ */ :host { - @apply flex bg-transparent; + @apply flex; + + background-color: transparent; } @include disabled(); @@ -32,10 +34,7 @@ calcite-button { --calcite-button-border-color: var(--calcite-fab-border-color); --calcite-button-corner-radius: var(--calcite-fab-corner-radius); --calcite-button-text-color: var(--calcite-fab-text-color); - - calcite-loader { - --calcite-button-loader-color: var(--calcite-fab-loader-color); - } + --calcite-button-loader-color: var(--calcite-fab-loader-color); } @include base-component(); diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 4525c4283fb..24a9c337fde 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -24,7 +24,7 @@ import { chips, chipTokens } from "./custom-theme/chips"; import { comboboxItem, comboboxItemTokens, selectedComboboxItem } from "./custom-theme/combobox-item"; import { datePicker, datePickerRange, datePickerTokens } from "./custom-theme/date-picker"; import { dropdown, DropdownGroupTokens, DropdownItemTokens, DropdownTokens } from "./custom-theme/dropdown"; -import { fab, fabTokens } from "./custom-theme/fab"; +import { fab, fabLoading, fabTokens } from "./custom-theme/fab"; import { flow, flowTokens } from "./custom-theme/flow"; import { graph, graphTokens } from "./custom-theme/graph"; import { handle, handleTokens } from "./custom-theme/handle"; @@ -169,6 +169,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${fab}
+
${fabLoading}
${inputMessage}
diff --git a/packages/calcite-components/src/custom-theme/fab.ts b/packages/calcite-components/src/custom-theme/fab.ts index fb6bc2e776c..186117d46a5 100644 --- a/packages/calcite-components/src/custom-theme/fab.ts +++ b/packages/calcite-components/src/custom-theme/fab.ts @@ -9,4 +9,5 @@ export const fabTokens = { calciteFabShadow: "", }; -export const fab = html` `; +export const fab = html``; +export const fabLoading = html``; From fb9640aa56dc836d6405b57e39869b7836a72b14 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 3 Apr 2025 15:34:50 -0700 Subject: [PATCH 5/6] target internals of the button component --- .../calcite-components/src/components/fab/fab.e2e.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index 27646bb671b..ae46f4ee5a6 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -154,19 +154,19 @@ describe("calcite-fab", () => { describe("default", () => { themed(html``, { "--calcite-fab-background-color": { - targetProp: "backgroundColor", + targetProp: "--calcite-button-background-color", shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-border-color": { - targetProp: "borderColor", + targetProp: "--calcite-button-border-color", shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-corner-radius": { - targetProp: "borderRadius", + targetProp: "--calcite-button-corner-radius", shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-text-color": { - targetProp: "color", + targetProp: "--calcite-button-text-color", shadowSelector: `.${CSS.button} >>> button`, }, "--calcite-fab-shadow": { @@ -179,7 +179,7 @@ describe("calcite-fab", () => { describe("loader", () => { themed(html``, { "--calcite-fab-loader-color": { - targetProp: "color", + targetProp: "--calcite-button-loader-color", shadowSelector: `.${CSS.button} >>> button >>> calcite-loader`, }, }); From d8f8ff4d9fc7cb2a83f8e481daae9d494ee36dc4 Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 3 Apr 2025 16:35:18 -0700 Subject: [PATCH 6/6] cleanup shadowSelector --- .../calcite-components/src/components/fab/fab.e2e.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index ae46f4ee5a6..e70ea0c13ff 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -155,19 +155,19 @@ describe("calcite-fab", () => { themed(html``, { "--calcite-fab-background-color": { targetProp: "--calcite-button-background-color", - shadowSelector: `.${CSS.button} >>> button`, + shadowSelector: `.${CSS.button}`, }, "--calcite-fab-border-color": { targetProp: "--calcite-button-border-color", - shadowSelector: `.${CSS.button} >>> button`, + shadowSelector: `.${CSS.button}`, }, "--calcite-fab-corner-radius": { targetProp: "--calcite-button-corner-radius", - shadowSelector: `.${CSS.button} >>> button`, + shadowSelector: `.${CSS.button}`, }, "--calcite-fab-text-color": { targetProp: "--calcite-button-text-color", - shadowSelector: `.${CSS.button} >>> button`, + shadowSelector: `.${CSS.button}`, }, "--calcite-fab-shadow": { targetProp: "boxShadow", @@ -180,7 +180,7 @@ describe("calcite-fab", () => { themed(html``, { "--calcite-fab-loader-color": { targetProp: "--calcite-button-loader-color", - shadowSelector: `.${CSS.button} >>> button >>> calcite-loader`, + shadowSelector: `.${CSS.button}`, }, }); });