From d36c13a6909298bac0e719983b424003805c7c36 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 10 Mar 2025 14:09:42 -0700 Subject: [PATCH 1/9] feat(fab, filter): add component tokens --- .../src/components/fab/fab.scss | 12 ++++++- .../src/components/filter/filter.scss | 36 +++++++++++++------ 2 files changed, 37 insertions(+), 11 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index ecdf9684fa9..7dbecd87eda 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -1,5 +1,15 @@ +/** + * 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. + */ + :host { - @apply flex bg-transparent; + @apply flex; + + background-color: var(--calcite-fab-background-color, transparent); } @include disabled(); diff --git a/packages/calcite-components/src/components/filter/filter.scss b/packages/calcite-components/src/components/filter/filter.scss index 9c4236e5d8e..f40ad2d130f 100644 --- a/packages/calcite-components/src/components/filter/filter.scss +++ b/packages/calcite-components/src/components/filter/filter.scss @@ -1,3 +1,14 @@ +/** + * CSS Custom Properties + * + * These properties can be overridden using the component's tag as selector. + * + * @prop --calcite-filter-background-color: Specifies the component's background color. + * @prop --calcite-filter-border-color: Specifies the component's border color. + * @prop --calcite-filter-text-color: Specifies the component's text color. + * @prop --calcite-filter-text-color-hover: Specifies the component's text color when hovered. + */ + :host { @extend %component-host; @apply flex w-full; @@ -35,13 +46,14 @@ label { input[type="text"] { @apply font-inherit - text-color-1 text-n2h mb-1 w-full border-none - bg-transparent py-1; + + background-color: var(--calcite-filter-background-color, transparent); + color: var(--calcite-filter-text-color, var(--calcite-color-text-1)); padding-inline-end: theme("spacing.1"); padding-inline-start: theme("spacing.6"); transition: @@ -57,9 +69,10 @@ calcite-input { } .search-icon { - @apply text-color-2 - absolute + @apply absolute flex; + + color: var(--calcite-filter-text-color, var(--calcite-color-text-2)); inset-inline-start: 0; transition: inset-inline-start var(--calcite-animation-timing), @@ -68,7 +81,9 @@ calcite-input { } input[type="text"]:focus { - @apply border-color-brand outline-none; + @apply outline-none; + + border-color: var(--calcite-filter-border-color, var(--calcite-color-brand)); padding-inline: theme("padding.1"); & ~ .search-icon { inset-inline-start: calc(theme("spacing.4") * -1); @@ -77,16 +92,17 @@ input[type="text"]:focus { } .clear-button { - @apply text-color-2 - flex + @apply flex cursor-pointer items-center - border-0 - bg-transparent; + border-0; + + background-color: var(--calcite-filter-background-color, transparent); &:hover, &:focus { - @apply text-color-1; + color: var(--calcite-filter-text-color-hover, var(--calcite-color-text-1)); } + color: var(--calcite-filter-text-color, var(--calcite-color-text-2)); } @include base-component(); From 6adc36a8b81ab2a635dd7d67f363e31b8befefd9 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 10 Mar 2025 16:28:16 -0700 Subject: [PATCH 2/9] e2e and stories --- .../src/components/fab/fab.e2e.ts | 13 ++++- .../src/components/filter/filter.e2e.ts | 56 ++++++++++++++++++- .../src/components/filter/resources.ts | 2 + .../src/custom-theme.stories.ts | 7 +++ .../src/custom-theme/fab.ts | 7 +++ .../src/custom-theme/filter.ts | 9 +++ 6 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 packages/calcite-components/src/custom-theme/fab.ts create mode 100644 packages/calcite-components/src/custom-theme/filter.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..3f6abae6712 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,14 @@ describe("calcite-fab", () => { }); }); }); + + describe("theme", () => { + describe("default", () => { + themed(html``, { + "--calcite-fab-background-color": { + targetProp: "--calcite-fab-background-color", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index e62dec171d4..01bdc16c411 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/packages/calcite-components/src/components/filter/filter.e2e.ts @@ -1,9 +1,20 @@ // @ts-strict-ignore import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it, beforeEach } from "vitest"; -import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests"; -import { CSS as INPUT_CSS } from "../input/resources"; +import { + accessible, + defaults, + disabled, + focusable, + hidden, + reflects, + renders, + t9n, + themed, +} from "../../tests/commonTests"; import { DEBOUNCE } from "../../utils/resources"; +import { html } from "../../../support/formatting"; +import { CSS } from "./resources"; import type { Filter } from "./filter"; describe("calcite-filter", () => { @@ -122,7 +133,7 @@ describe("calcite-filter", () => { .shadowRoot.querySelector(buttonSelector) .click(); }, - `.${INPUT_CSS.clearButton}`, + `.${CSS.clearButton}`, ); await page.waitForChanges(); @@ -358,4 +369,43 @@ describe("calcite-filter", () => { describe("translation support", () => { t9n("calcite-filter"); }); + + describe("theme", () => { + describe("default", () => { + themed(html``, { + "--calcite-filter-background-color": [ + { + shadowSelector: `calcite-input >>> input`, + targetProp: "--calcite-filter-background-color", + }, + { + shadowSelector: `calcite-input >>> .${CSS.clearButton}`, + targetProp: "--calcite-filter-background-color", + }, + ], + "--calcite-filter-border-color": { + shadowSelector: `calcite-input >>>.${CSS.input}`, + targetProp: "--calcite-filter-border-color", + }, + "--calcite-filter-text-color": [ + { + shadowSelector: `.${CSS.input}`, + targetProp: "--calcite-filter-text-color", + }, + { + shadowSelector: `.${CSS.searchIcon}`, + targetProp: "--calcite-filter-text-color", + }, + { + shadowSelector: `.${CSS.clearButton}`, + targetProp: "--calcite-filter-text-color", + }, + ], + "--calcite-filter-border-color-hover": { + shadowSelector: `.${CSS.input}`, + targetProp: "--calcite-filter-border-color", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts index cf06f61b465..3095d551b79 100644 --- a/packages/calcite-components/src/components/filter/resources.ts +++ b/packages/calcite-components/src/components/filter/resources.ts @@ -1,5 +1,7 @@ export const CSS = { + clearButton: "clear-button", container: "container", + input: "input", searchIcon: "search-icon", }; diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index a98ea872f05..1a25883c7f0 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -24,6 +24,8 @@ import { chips, chipTokens } from "./custom-theme/chips"; import { comboboxItem } 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 { filter, filterTokens } from "./custom-theme/filter"; import { flow, flowTokens } from "./custom-theme/flow"; import { graph, graphTokens } from "./custom-theme/graph"; import { handle, handleTokens } from "./custom-theme/handle"; @@ -157,6 +159,9 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${datePicker}
${datePickerRange}
+
+
${fab} ${filter}
+
`; const componentTokens = { @@ -180,6 +185,8 @@ const componentTokens = { ...DropdownTokens, ...DropdownItemTokens, ...DropdownGroupTokens, + ...fabTokens, + ...filterTokens, ...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..9f854962c7c --- /dev/null +++ b/packages/calcite-components/src/custom-theme/fab.ts @@ -0,0 +1,7 @@ +import { html } from "../../support/formatting"; + +export const fabTokens = { + calciteFabBackgroundColor: "", +}; + +export const fab = html` `; diff --git a/packages/calcite-components/src/custom-theme/filter.ts b/packages/calcite-components/src/custom-theme/filter.ts new file mode 100644 index 00000000000..0ab8d90adaf --- /dev/null +++ b/packages/calcite-components/src/custom-theme/filter.ts @@ -0,0 +1,9 @@ +import { html } from "../../support/formatting"; + +export const filterTokens = { + calciteFilterBackgroundColor: "", + calciteFilterBorderColor: "", + calciteFilterTextColor: "", + calciteFilterTextColorHover: "", +}; +export const filter = html` `; From 81fd1124f5427efc9e37afb005b5de3e8a6cc724 Mon Sep 17 00:00:00 2001 From: eliza Date: Fri, 14 Mar 2025 15:51:01 -0700 Subject: [PATCH 3/9] e2e cleanup --- .../src/components/filter/filter.e2e.ts | 12 ++++++------ .../src/components/filter/resources.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index 01bdc16c411..c9cfb67b089 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/packages/calcite-components/src/components/filter/filter.e2e.ts @@ -372,10 +372,10 @@ describe("calcite-filter", () => { describe("theme", () => { describe("default", () => { - themed(html``, { + themed(html``, { "--calcite-filter-background-color": [ { - shadowSelector: `calcite-input >>> input`, + shadowSelector: `calcite-input`, targetProp: "--calcite-filter-background-color", }, { @@ -384,12 +384,12 @@ describe("calcite-filter", () => { }, ], "--calcite-filter-border-color": { - shadowSelector: `calcite-input >>>.${CSS.input}`, + shadowSelector: `calcite-input >>> ${CSS.input}`, targetProp: "--calcite-filter-border-color", }, "--calcite-filter-text-color": [ { - shadowSelector: `.${CSS.input}`, + shadowSelector: `${CSS.input}`, targetProp: "--calcite-filter-text-color", }, { @@ -402,8 +402,8 @@ describe("calcite-filter", () => { }, ], "--calcite-filter-border-color-hover": { - shadowSelector: `.${CSS.input}`, - targetProp: "--calcite-filter-border-color", + shadowSelector: `${CSS.input}`, + targetProp: "--calcite-filter-border-color-hover", }, }); }); diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts index 3095d551b79..786a4bda46d 100644 --- a/packages/calcite-components/src/components/filter/resources.ts +++ b/packages/calcite-components/src/components/filter/resources.ts @@ -2,7 +2,7 @@ export const CSS = { clearButton: "clear-button", container: "container", input: "input", - searchIcon: "search-icon", + searchIcon: "icon", }; export const ICONS = { From 0a442272a522b7fab2a876212ae85b35349764db Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 17 Mar 2025 13:15:43 -0700 Subject: [PATCH 4/9] remove filter changes to seperate fab --- .../src/components/filter/filter.e2e.ts | 58 ++----------------- .../src/components/filter/filter.scss | 30 +++------- .../src/components/filter/resources.ts | 3 - .../src/custom-theme.stories.ts | 4 +- .../src/custom-theme/filter.ts | 9 --- 5 files changed, 13 insertions(+), 91 deletions(-) delete mode 100644 packages/calcite-components/src/custom-theme/filter.ts diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index c9cfb67b089..a856bc98af4 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/packages/calcite-components/src/components/filter/filter.e2e.ts @@ -1,21 +1,10 @@ // @ts-strict-ignore import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { describe, expect, it, beforeEach } from "vitest"; -import { - accessible, - defaults, - disabled, - focusable, - hidden, - reflects, - renders, - t9n, - themed, -} from "../../tests/commonTests"; +import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests"; +import { CSS as INPUT_CSS } from "../input/resources"; import { DEBOUNCE } from "../../utils/resources"; -import { html } from "../../../support/formatting"; -import { CSS } from "./resources"; -import type { Filter } from "./filter"; +import { Filter } from "./filter"; describe("calcite-filter", () => { describe("renders", () => { @@ -133,7 +122,7 @@ describe("calcite-filter", () => { .shadowRoot.querySelector(buttonSelector) .click(); }, - `.${CSS.clearButton}`, + `.${INPUT_CSS.clearButton}`, ); await page.waitForChanges(); @@ -369,43 +358,4 @@ describe("calcite-filter", () => { describe("translation support", () => { t9n("calcite-filter"); }); - - describe("theme", () => { - describe("default", () => { - themed(html``, { - "--calcite-filter-background-color": [ - { - shadowSelector: `calcite-input`, - targetProp: "--calcite-filter-background-color", - }, - { - shadowSelector: `calcite-input >>> .${CSS.clearButton}`, - targetProp: "--calcite-filter-background-color", - }, - ], - "--calcite-filter-border-color": { - shadowSelector: `calcite-input >>> ${CSS.input}`, - targetProp: "--calcite-filter-border-color", - }, - "--calcite-filter-text-color": [ - { - shadowSelector: `${CSS.input}`, - targetProp: "--calcite-filter-text-color", - }, - { - shadowSelector: `.${CSS.searchIcon}`, - targetProp: "--calcite-filter-text-color", - }, - { - shadowSelector: `.${CSS.clearButton}`, - targetProp: "--calcite-filter-text-color", - }, - ], - "--calcite-filter-border-color-hover": { - shadowSelector: `${CSS.input}`, - targetProp: "--calcite-filter-border-color-hover", - }, - }); - }); - }); }); diff --git a/packages/calcite-components/src/components/filter/filter.scss b/packages/calcite-components/src/components/filter/filter.scss index f40ad2d130f..43a915f8164 100644 --- a/packages/calcite-components/src/components/filter/filter.scss +++ b/packages/calcite-components/src/components/filter/filter.scss @@ -1,14 +1,3 @@ -/** - * CSS Custom Properties - * - * These properties can be overridden using the component's tag as selector. - * - * @prop --calcite-filter-background-color: Specifies the component's background color. - * @prop --calcite-filter-border-color: Specifies the component's border color. - * @prop --calcite-filter-text-color: Specifies the component's text color. - * @prop --calcite-filter-text-color-hover: Specifies the component's text color when hovered. - */ - :host { @extend %component-host; @apply flex w-full; @@ -46,14 +35,14 @@ label { input[type="text"] { @apply font-inherit + text-color-1 text-n2h mb-1 w-full border-none + bg-transparent py-1; - background-color: var(--calcite-filter-background-color, transparent); - color: var(--calcite-filter-text-color, var(--calcite-color-text-1)); padding-inline-end: theme("spacing.1"); padding-inline-start: theme("spacing.6"); transition: @@ -69,10 +58,10 @@ calcite-input { } .search-icon { - @apply absolute + @apply text-color-2 + absolute flex; - color: var(--calcite-filter-text-color, var(--calcite-color-text-2)); inset-inline-start: 0; transition: inset-inline-start var(--calcite-animation-timing), @@ -81,9 +70,8 @@ calcite-input { } input[type="text"]:focus { - @apply outline-none; + @apply border-color-brand outline-none; - border-color: var(--calcite-filter-border-color, var(--calcite-color-brand)); padding-inline: theme("padding.1"); & ~ .search-icon { inset-inline-start: calc(theme("spacing.4") * -1); @@ -92,17 +80,15 @@ input[type="text"]:focus { } .clear-button { - @apply flex + @apply text-color-2 + flex cursor-pointer items-center - border-0; - background-color: var(--calcite-filter-background-color, transparent); &:hover, &:focus { - color: var(--calcite-filter-text-color-hover, var(--calcite-color-text-1)); + @apply text-color-1; } - color: var(--calcite-filter-text-color, var(--calcite-color-text-2)); } @include base-component(); diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts index 786a4bda46d..1a3754dde38 100644 --- a/packages/calcite-components/src/components/filter/resources.ts +++ b/packages/calcite-components/src/components/filter/resources.ts @@ -1,8 +1,5 @@ export const CSS = { - clearButton: "clear-button", container: "container", - input: "input", - searchIcon: "icon", }; export const ICONS = { diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index 1a25883c7f0..80c6c0445e4 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -25,7 +25,6 @@ import { comboboxItem } 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 { filter, filterTokens } from "./custom-theme/filter"; import { flow, flowTokens } from "./custom-theme/flow"; import { graph, graphTokens } from "./custom-theme/graph"; import { handle, handleTokens } from "./custom-theme/handle"; @@ -160,7 +159,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${datePickerRange}
-
${fab} ${filter}
+
${fab}
`; @@ -186,7 +185,6 @@ const componentTokens = { ...DropdownItemTokens, ...DropdownGroupTokens, ...fabTokens, - ...filterTokens, ...flowTokens, ...handleTokens, ...inlineEditableTokens, diff --git a/packages/calcite-components/src/custom-theme/filter.ts b/packages/calcite-components/src/custom-theme/filter.ts deleted file mode 100644 index 0ab8d90adaf..00000000000 --- a/packages/calcite-components/src/custom-theme/filter.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { html } from "../../support/formatting"; - -export const filterTokens = { - calciteFilterBackgroundColor: "", - calciteFilterBorderColor: "", - calciteFilterTextColor: "", - calciteFilterTextColorHover: "", -}; -export const filter = html` `; From f30d87488f0e863a71574d47dd6d10b6ac6fe1f6 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 17 Mar 2025 13:19:31 -0700 Subject: [PATCH 5/9] continued --- .../calcite-components/src/components/filter/filter.e2e.ts | 2 +- .../calcite-components/src/components/filter/filter.scss | 6 ++---- .../calcite-components/src/components/filter/resources.ts | 1 + 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index a856bc98af4..e62dec171d4 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/packages/calcite-components/src/components/filter/filter.e2e.ts @@ -4,7 +4,7 @@ import { describe, expect, it, beforeEach } from "vitest"; import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests"; import { CSS as INPUT_CSS } from "../input/resources"; import { DEBOUNCE } from "../../utils/resources"; -import { Filter } from "./filter"; +import type { Filter } from "./filter"; describe("calcite-filter", () => { describe("renders", () => { diff --git a/packages/calcite-components/src/components/filter/filter.scss b/packages/calcite-components/src/components/filter/filter.scss index 43a915f8164..9c4236e5d8e 100644 --- a/packages/calcite-components/src/components/filter/filter.scss +++ b/packages/calcite-components/src/components/filter/filter.scss @@ -42,7 +42,6 @@ input[type="text"] { border-none bg-transparent py-1; - padding-inline-end: theme("spacing.1"); padding-inline-start: theme("spacing.6"); transition: @@ -61,7 +60,6 @@ calcite-input { @apply text-color-2 absolute flex; - inset-inline-start: 0; transition: inset-inline-start var(--calcite-animation-timing), @@ -71,7 +69,6 @@ calcite-input { input[type="text"]:focus { @apply border-color-brand outline-none; - padding-inline: theme("padding.1"); & ~ .search-icon { inset-inline-start: calc(theme("spacing.4") * -1); @@ -84,7 +81,8 @@ input[type="text"]:focus { flex cursor-pointer items-center - + border-0 + bg-transparent; &:hover, &:focus { @apply text-color-1; diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts index 1a3754dde38..cf06f61b465 100644 --- a/packages/calcite-components/src/components/filter/resources.ts +++ b/packages/calcite-components/src/components/filter/resources.ts @@ -1,5 +1,6 @@ export const CSS = { container: "container", + searchIcon: "search-icon", }; export const ICONS = { From a486f67536726d935de1a016ff0e88ca079a8406 Mon Sep 17 00:00:00 2001 From: eliza Date: Mon, 17 Mar 2025 15:57:46 -0700 Subject: [PATCH 6/9] add shadow, shadow-hover, and shadow-press tokens --- .../src/components/fab/fab.scss | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index 7dbecd87eda..ca876c196b0 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -4,6 +4,9 @@ * 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-shadow: Specifies the component's shadow. + * @prop --calcite-fab-shadow-hover: Specifies the component's shadow when hovered. + * @prop --calcite-fab-shadow-press: Specifies the component's shadow when pressed. */ :host { @@ -15,12 +18,30 @@ @include disabled(); calcite-button { - @apply shadow-2; + --tw-shadow: var(--calcite-fab-shadow, 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)); + --tw-shadow-colored: var( + --calcite-fab-shadow, + 0 6px 20px -4px var(--tw-shadow-color), + 0 4px 12px -2px var(--tw-shadow-color) + ); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); &:hover { - @apply shadow-2-lg; + --tw-shadow: var(--calcite-fab-shadow-hover, var(--calcite-shadow-md)); + --tw-shadow-colored: var(--calcite-fab-shadow-hover, var(--calcite-shadow-md)); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } &:active { - @apply shadow-2-sm; + --tw-shadow: var( + --calcite-fab-shadow-press, + 0 2px 12px -4px rgba(0, 0, 0, 0.2), + 0 2px 4px -2px rgba(0, 0, 0, 0.16) + ); + --tw-shadow-colored: var( + --calcite-fab-shadow-press, + 0 2px 12px -4px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color) + ); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } From 4e6b718900ef37acdc5b81563a683aef2221d4f3 Mon Sep 17 00:00:00 2001 From: eliza Date: Tue, 18 Mar 2025 14:02:27 -0700 Subject: [PATCH 7/9] remove tokens for shadow hover and active, add test --- .../src/components/fab/fab.e2e.ts | 3 +++ .../src/components/fab/fab.scss | 18 ++---------------- .../calcite-components/src/custom-theme/fab.ts | 1 + 3 files changed, 6 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index 3f6abae6712..3a597104bc5 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -156,6 +156,9 @@ describe("calcite-fab", () => { "--calcite-fab-background-color": { targetProp: "--calcite-fab-background-color", }, + "--calcite-fab-shadow": { + targetProp: "--calcite-fab-shadow", + }, }); }); }); diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index ca876c196b0..3266cc6e07e 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -5,8 +5,6 @@ * * @prop --calcite-fab-background-color: Specifies the component's background color. * @prop --calcite-fab-shadow: Specifies the component's shadow. - * @prop --calcite-fab-shadow-hover: Specifies the component's shadow when hovered. - * @prop --calcite-fab-shadow-press: Specifies the component's shadow when pressed. */ :host { @@ -26,22 +24,10 @@ calcite-button { ); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); &:hover { - --tw-shadow: var(--calcite-fab-shadow-hover, var(--calcite-shadow-md)); - --tw-shadow-colored: var(--calcite-fab-shadow-hover, var(--calcite-shadow-md)); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + @apply shadow-2-lg; } &:active { - --tw-shadow: var( - --calcite-fab-shadow-press, - 0 2px 12px -4px rgba(0, 0, 0, 0.2), - 0 2px 4px -2px rgba(0, 0, 0, 0.16) - ); - --tw-shadow-colored: var( - --calcite-fab-shadow-press, - 0 2px 12px -4px var(--tw-shadow-color), - 0 2px 4px -2px var(--tw-shadow-color) - ); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + @apply shadow-2-sm; } } diff --git a/packages/calcite-components/src/custom-theme/fab.ts b/packages/calcite-components/src/custom-theme/fab.ts index 9f854962c7c..017a6147bc1 100644 --- a/packages/calcite-components/src/custom-theme/fab.ts +++ b/packages/calcite-components/src/custom-theme/fab.ts @@ -2,6 +2,7 @@ import { html } from "../../support/formatting"; export const fabTokens = { calciteFabBackgroundColor: "", + calciteFabShadow: "", }; export const fab = html` `; From ab88c4c9bb0ca8accdb6a04690a6a82bcba9d2fb Mon Sep 17 00:00:00 2001 From: eliza Date: Wed, 19 Mar 2025 09:07:58 -0700 Subject: [PATCH 8/9] drop the use of tw and ring values for box-shadow --- packages/calcite-components/src/components/fab/fab.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index 3266cc6e07e..d363660f097 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -16,13 +16,7 @@ @include disabled(); calcite-button { - --tw-shadow: var(--calcite-fab-shadow, 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)); - --tw-shadow-colored: var( - --calcite-fab-shadow, - 0 6px 20px -4px var(--tw-shadow-color), - 0 4px 12px -2px var(--tw-shadow-color) - ); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + box-shadow: var(--calcite-fab-shadow, 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)); &:hover { @apply shadow-2-lg; } From eb5ad5c929a066408787dfc6772fcb5d17a3e2ce Mon Sep 17 00:00:00 2001 From: eliza Date: Thu, 20 Mar 2025 13:37:49 -0700 Subject: [PATCH 9/9] set as an internal prop and accept an override --- packages/calcite-components/src/components/fab/fab.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss index d363660f097..e2bb65dd53f 100755 --- a/packages/calcite-components/src/components/fab/fab.scss +++ b/packages/calcite-components/src/components/fab/fab.scss @@ -16,7 +16,9 @@ @include disabled(); calcite-button { - box-shadow: var(--calcite-fab-shadow, 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)); + --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; }