From 9ea9f43764ced2ef39147229b7663053b7df7a29 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Tue, 18 Jun 2024 15:41:43 -0700 Subject: [PATCH] test(radio-button): add component token E2E tests (#9591) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Related Issue:** #7180 ## Summary ✨🧪✨ --- .../radio-button/radio-button.e2e.ts | 44 +++++++++++ .../components/radio-button/radio-button.scss | 73 ++++++------------- 2 files changed, 65 insertions(+), 52 deletions(-) diff --git a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts index 5d92108b372..9bd8ef76c53 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts +++ b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts @@ -9,9 +9,11 @@ import { labelable, reflects, renders, + themed, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { getFocusedElementProp } from "../../tests/utils"; +import { CSS } from "./resources"; describe("calcite-radio-button", () => { describe("renders", () => { @@ -611,4 +613,46 @@ describe("calcite-radio-button", () => { ); }); }); + + describe("theme", () => { + describe("default", () => { + themed("calcite-radio-button", { + "--calcite-radio-button-background-color": { + shadowSelector: `.${CSS.radio}`, + targetProp: "backgroundColor", + }, + "--calcite-radio-button-border-radius": { + shadowSelector: `.${CSS.radio}`, + targetProp: "borderRadius", + }, + "--calcite-radio-button-border-color": { + shadowSelector: `.${CSS.radio}`, + targetProp: "boxShadow", + }, + "--calcite-radio-button-size": [ + { + shadowSelector: `.${CSS.radio}`, + targetProp: "blockSize", + }, + { + shadowSelector: `.${CSS.radio}`, + targetProp: "maxInlineSize", + }, + { + shadowSelector: `.${CSS.radio}`, + targetProp: "minInlineSize", + }, + ], + }); + }); + + describe("checked", () => { + themed("calcite-radio-button", { + "--calcite-radio-button-border-color": { + shadowSelector: `.${CSS.radio}`, + targetProp: "boxShadow", + }, + }); + }); + }); }); diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss index 137ee3f7dcf..3bb9b08046b 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.scss +++ b/packages/calcite-components/src/components/radio-button/radio-button.scss @@ -4,15 +4,17 @@ * These properties can be overridden using the component's tag as selector. * * @prop --calcite-radio-button-background-color: Specifies the background color of the component. + * @prop --calcite-radio-button-border-color: Specifies the shadow of the component. * @prop --calcite-radio-button-border-radius: Specifies the border radius of the component. - * @prop --calcite-radio-button-shadow: Specifies the shadow of the component. * @prop --calcite-radio-button-size: Specifies the size of the component. - * @prop --calcite-radio-focus: Specifies the focus of the component. */ :host { display: block; cursor: pointer; + + --calcite-internal-radio-button-shadow-spread: 1px; + --calcite-internal-radio-button-border-color-fallback: var(--calcite-color-border-input); } .container { @@ -29,7 +31,11 @@ all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s; - box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 1px var(--calcite-color-border-input)); + box-shadow: inset 0 0 0 var(--calcite-internal-radio-button-shadow-spread) + var( + --calcite-radio-button-border-color, + var(--calcite-internal-radio-button-border-color, var(--calcite-internal-radio-button-border-color-fallback)) + ); } :host([scale="s"]) .radio { @@ -52,21 +58,14 @@ :host([focused]) { .radio { - @include focusOutset("--calcite-radio-focus", "--calcite-internal-radio-focus-offset"); - } -} - -:host([hovered][disabled]) { - .radio { - box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 1px var(--calcite-color-border-input)); + @apply focus-outset; } } :host([hovered]), :host(:not([checked])[focused]:not([disabled])) { - .radio { - box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 2px var(--calcite-color-brand)); - } + --calcite-internal-radio-button-shadow-spread: 2px; + --calcite-internal-radio-button-border-color-fallback: var(--calcite-color-brand); } @include disabled() { @@ -77,54 +76,24 @@ } :host([scale="s"][checked]), -:host([hovered][scale="s"][checked][disabled]) { - .radio { - box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 4px var(--calcite-color-brand)); - } -} - +:host([hovered][scale="s"][checked][disabled]), :host([scale="s"][focused][checked]:not([disabled])) { - .radio { - box-shadow: var( - --calcite-radio-button-shadow, - inset 0 0 0 4px var(--calcite-color-brand), - 0 0 0 2px var(--calcite-color-foreground-1) - ); - } + --calcite-internal-radio-button-shadow-spread: 4px; + --calcite-internal-radio-button-border-color-fallback: var(--calcite-color-brand); } :host([scale="m"][checked]), -:host([hovered][scale="m"][checked][disabled]) { - .radio { - box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 5px var(--calcite-color-brand)); - } -} - +:host([hovered][scale="m"][checked][disabled]), :host([scale="m"][focused][checked]:not([disabled])) { - .radio { - box-shadow: var( - --calcite-radio-button-shadow, - inset 0 0 0 5px var(--calcite-color-brand), - 0 0 0 2px var(--calcite-color-foreground-1) - ); - } + --calcite-internal-radio-button-shadow-spread: 5px; + --calcite-internal-radio-button-border-color-fallback: var(--calcite-color-brand); } :host([scale="l"][checked]), -:host([hovered][scale="l"][checked][disabled]) { - .radio { - box-shadow: var(--calcite-radio-button-shadow, inset 0 0 0 6px var(--calcite-color-brand)); - } -} - +:host([hovered][scale="l"][checked][disabled]), :host([scale="l"][focused][checked]:not([disabled])) { - .radio { - box-shadow: var( - --calcite-radio-button-shadow, - inset 0 0 0 6px var(--calcite-color-brand), - 0 0 0 2px var(--calcite-color-foreground-1) - ); - } + --calcite-internal-radio-button-shadow-spread: 6px; + --calcite-internal-radio-button-border-color-fallback: var(--calcite-color-brand); } @media (forced-colors: active) {