From ca932b5c4a3a5d7bf9bcf032ed2a0325f6920026 Mon Sep 17 00:00:00 2001 From: Ali Stump Date: Fri, 13 Sep 2024 11:33:53 -0700 Subject: [PATCH] feat(accordion-item): update component tokens **Related Issue:** #7180 #4060 ## Summary While this does not create additional tokens for the background color in a -hover or -press state explicitly because this is outside of our current design patterns, it does allow a user to accomplish this by only targeting the top-level component styles. ```css calcite-accordion-item:hover { --calcite-accordion-item-background-color: blue; } calcite-accordion-item[expanded] { --calcite-accordion-item-header-background-color: blue; } ``` ### Tokens --calcite-accordion-item-background-color: Specifies the component's background color. --calcite-accordion-item-border-color: Specifies the component's border color. --calcite-accordion-item-content-space: Specifies the component's padding. --calcite-accordion-item-header-background-color: Specifies the background color of the component's header. --calcite-accordion-item-text-color: Specifies the component's text color. --calcite-accordion-item-heading-text-color: Specifies the component's heading text color. --calcite-accordion-item-icon-color: Specifies the component's default icon color. --calcite-accordion-item-start-icon-color: Specifies the component's start icon color. Fallback to --calcite-accordion-item-icon-color or current color. --calcite-accordion-item-end-icon-color: Specifies the component's end icon color. Fallback to --calcite-accordion-item-icon-color or current color. --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color. ### Deprecated --calcite-accordion-border-color: Use --calcite-accordion-item-border-color. Specifies the component's border color. --calcite-accordion-text-color-hover: Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover. --calcite-accordion-text-color-pressed: Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed. --calcite-accordion-text-color: Use --calcite-accordion-item-text-color. Specifies the component's text color. --- .../accordion-item/accordion-item.e2e.ts | 66 ++++++++--------- .../accordion-item/accordion-item.scss | 73 +++++++++++++++---- .../components/accordion/accordion.stories.ts | 45 ------------ .../src/custom-theme.stories.ts | 7 +- .../src/custom-theme/accordion-item.ts | 13 ++++ .../src/custom-theme/accordion.ts | 21 +++++- 6 files changed, 126 insertions(+), 99 deletions(-) diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts index 7e97b524020..4880c56c307 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.e2e.ts @@ -27,57 +27,55 @@ describe("calcite-accordion-item", () => { describe("theme", () => { describe("default", () => { themed( - html`content`, { - "--calcite-accordion-text-color": [ - { - shadowSelector: `.${CSS.content}`, - targetProp: "color", - }, - { - shadowSelector: `.${CSS.expandIcon}`, - targetProp: "color", - }, + "--calcite-accordion-item-text-color": { + shadowSelector: `.${CSS.description}`, + targetProp: "color", + }, + "--calcite-accordion-item-header-background-color": { + targetProp: "backgroundColor", + shadowSelector: `.${CSS.header}`, + }, + "--calcite-accordion-item-background-color": { + targetProp: "backgroundColor", + }, + "--calcite-accordion-item-expand-icon-color": { + shadowSelector: `.${CSS.expandIcon}`, + targetProp: "color", + }, + "--calcite-accordion-item-icon-color": [ { - shadowSelector: `.${CSS.description}`, + shadowSelector: `.${CSS.iconStart}`, targetProp: "color", }, - ], - "--calcite-accordion-text-color-hover": [ { - shadowSelector: `.${CSS.heading}`, + shadowSelector: `.${CSS.iconEnd}`, targetProp: "color", }, ], - "--calcite-accordion-border-color": [ - { - shadowSelector: `.${CSS.content}`, - targetProp: "borderBlockEndColor", - }, - { - shadowSelector: `.${CSS.header}`, - targetProp: "borderBlockEndColor", - }, - ], }, ); }); - describe("expanded", () => { + describe("icons", () => { themed( - html`content`, { - "--calcite-accordion-text-color-hover": [ - { - shadowSelector: `.${CSS.description}`, - targetProp: "color", - }, - ], - "--calcite-accordion-text-color-pressed": { - shadowSelector: `.${CSS.heading}`, + "--calcite-accordion-item-start-icon-color": { + shadowSelector: `.${CSS.iconStart}`, + targetProp: "color", + }, + "--calcite-accordion-item-end-icon-color": { + shadowSelector: `.${CSS.iconEnd}`, targetProp: "color", }, }, diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss index 821d795b8f3..69f139c4cd7 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss @@ -3,11 +3,20 @@ * * These properties can be overridden using the component's tag as selector. * - * @prop --calcite-accordion-border-color: Specifies the component's border color. + * @prop --calcite-accordion-border-color: [Deprecate] Use --calcite-accordion-item-border-color. Specifies the component's border color. + * @prop --calcite-accordion-item-background-color: Specifies the component's background color. + * @prop --calcite-accordion-item-border-color: Specifies the component's border color. * @prop --calcite-accordion-item-content-space: Specifies the component's padding. - * @prop --calcite-accordion-text-color: Specifies the component's text color. - * @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover. - * @prop --calcite-accordion-text-color-pressed: Specifies the component's main text color when pressed. + * @prop --calcite-accordion-item-end-icon-color: Specifies the component's end icon color. Fallback to --calcite-accordion-item-icon-color or current color. + * @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color. + * @prop --calcite-accordion-item-header-background-color: Specifies the background color of the component's header. + * @prop --calcite-accordion-item-heading-text-color: Specifies the component's heading text color. + * @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color. + * @prop --calcite-accordion-item-start-icon-color: Specifies the component's start icon color. Fallback to --calcite-accordion-item-icon-color or current color. + * @prop --calcite-accordion-item-text-color: Specifies the component's text color. + * @prop --calcite-accordion-text-color-hover: [Deprecated] Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover. + * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed. + * @prop --calcite-accordion-text-color: [Deprecated] Use --calcite-accordion-item-text-color. Specifies the component's text color. */ %icon-position { @@ -24,8 +33,13 @@ flex-col no-underline; - color: var(--calcite-accordion-text-color, var(--calcite-color-text-3)); + color: var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3))); + background-color: var(--calcite-accordion-item-background-color); border-width: 0; + + .header { + background-color: var(--calcite-accordion-item-header-background-color); + } } // icon position variants for child @@ -55,7 +69,10 @@ .header { border-block-end-width: var(--calcite-border-width-sm); border-block-end-style: solid; - border-color: var(--calcite-accordion-border-color, theme("borderColor.color.2")); + border-color: var( + --calcite-accordion-item-border-color, + var(--calcite-accordion-border-color, theme("borderColor.color.2")) + ); } .header-content, @@ -84,19 +101,26 @@ .header-content { @apply focus-base flex-grow cursor-pointer; flex-direction: var(--calcite-internal-accordion-item-flex-direction); + color: var(--calcite-accordion-item-heading-text-color, var(--calcite-accordion-text-color, inherit)); &:focus { @apply focus-inset; } + // Deprecated &:focus, &:hover, &:active { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-heading-text-color, + var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)) + ); - .expand-icon, .heading { - color: var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)); + color: var( + --calcite-accordion-item-heading-text-color, + var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)) + ); } } } @@ -131,23 +155,27 @@ ease-in-out flex items-center; - margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-start); margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-end); } .icon--start { + color: var(--calcite-accordion-item-start-icon-color, var(--calcite-accordion-item-icon-color, currentColor)); margin-inline-end: var(--calcite-internal-accordion-icon-margin); } .icon--end { + color: var(--calcite-accordion-item-end-icon-color, var(--calcite-accordion-item-icon-color, currentColor)); margin-inline-end: var(--calcite-internal-accordion-icon-margin); margin-inline-start: var(--calcite-internal-accordion-icon-margin); } // accordion item icon .expand-icon { - color: var(--calcite-accordion-text-color, var(--calcite-color-text-3)); + color: var( + --calcite-accordion-item-expand-icon-color, + var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3))) + ); margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start); margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end); transform: rotate(var(--calcite-internal-accordion-item-icon-rotation)); @@ -168,19 +196,31 @@ :host(:not(:focus):not(:hover):not([expanded])) { .heading { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-heading-text-color, + var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)) + ); } } :host([expanded]) { - color: var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)); + color: var( + --calcite-accordion-item-text-color, + var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1))) + ); .header { border-block-end-color: transparent; } .expand-icon { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-expand-icon-color, + var( + --calcite-accordion-item-text-color, + var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))) + ) + ); transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation)); } .calcite--rtl .expand-icon { @@ -188,7 +228,10 @@ } .description { - color: var(--calcite-accordion-text-color-hover, var(--calcite-color-text-2)); + color: var( + --calcite-accordion-item-text-color, + var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))) + ); } .content { diff --git a/packages/calcite-components/src/components/accordion/accordion.stories.ts b/packages/calcite-components/src/components/accordion/accordion.stories.ts index affe84cde28..796e8df31d0 100644 --- a/packages/calcite-components/src/components/accordion/accordion.stories.ts +++ b/packages/calcite-components/src/components/accordion/accordion.stories.ts @@ -5,7 +5,6 @@ import { placeholderImage } from "../../../.storybook/placeholder-image"; import { iconNames } from "../../../.storybook/helpers"; import { html } from "../../../support/formatting"; import { ATTRIBUTES } from "../../../.storybook/resources"; -import { setCSSVariables } from "../../tests/utils/cssTokenValues"; import { Accordion } from "./accordion"; const { scale, appearance, selectionMode } = ATTRIBUTES; @@ -218,47 +217,3 @@ const accordionItemsIconHeaderUseCases = iconHeaderUseCasesArr export const longHeading_MediumIconForLargeAccordionItem_TestOnly = (): string => html` ${accordionItemsIconHeaderUseCases} `; - -export const theming_TestOnly = (): string => - html` -
- - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - -
- - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - - ${accordionItemContent} - - -
`; diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index aa1b1565103..c391f1793a6 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -10,7 +10,8 @@ import { actionPadTokens, actionGroupTokens, } from "./custom-theme/action"; -import { accordion } from "./custom-theme/accordion"; +import { accordionItemTokens } from "./custom-theme/accordion-item"; +import { accordion, accordionTokens } from "./custom-theme/accordion"; import { buttons } from "./custom-theme/button"; import { card, cardThumbnail, cardTokens } from "./custom-theme/card"; import { checkbox } from "./custom-theme/checkbox"; @@ -119,6 +120,8 @@ export default { title: "Theming/Custom Theme", args: { ...globalTokens, + ...accordionTokens, + ...accordionItemTokens, ...actionTokens, ...actionBarTokens, ...actionMenuTokens, @@ -138,6 +141,8 @@ export const themingInteractive = (args: Record): string => { export const theming_TestOnly = (): string => { return kitchenSink( { + ...accordionTokens, + ...accordionItemTokens, ...actionTokens, ...actionBarTokens, ...actionMenuTokens, diff --git a/packages/calcite-components/src/custom-theme/accordion-item.ts b/packages/calcite-components/src/custom-theme/accordion-item.ts index e58ecb4f60b..3242a32d1ec 100644 --- a/packages/calcite-components/src/custom-theme/accordion-item.ts +++ b/packages/calcite-components/src/custom-theme/accordion-item.ts @@ -1,6 +1,19 @@ import { placeholderImage } from "../../.storybook/placeholder-image"; import { html } from "../../support/formatting"; +export const accordionItemTokens = { + calciteAccordionItemBackgroundColor: "", + calciteAccordionItemBorderColor: "", + calciteAccordionItemContentSpace: "", + calciteAccordionItemEndIconColor: "", + calciteAccordionItemExpandIconColor: "", + calciteAccordionItemHeaderBackgroundColor: "", + calciteAccordionItemHeadingTextColor: "", + calciteAccordionItemIconColor: "", + calciteAccordionItemStartIconColor: "", + calciteAccordionItemTextColor: "", +}; + export const accordionItem = (idx: number): string => html` diff --git a/packages/calcite-components/src/custom-theme/accordion.ts b/packages/calcite-components/src/custom-theme/accordion.ts index f3af009055a..bf37e52279e 100644 --- a/packages/calcite-components/src/custom-theme/accordion.ts +++ b/packages/calcite-components/src/custom-theme/accordion.ts @@ -2,7 +2,20 @@ import { html } from "../../support/formatting"; import { accordionItem } from "./accordion-item"; import { tree } from "./tree"; -export const accordion = html` - ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx))} - ${tree} -`; +export const accordionTokens = { + CalciteAccordionBorderColor: "", + CalciteAccordionBackgroundColor: "", +}; +// ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx))} +// ${Array(5).map((v, idx) => accordionItem(idx))} +export const accordion = html` + ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx)).join("\n")} + ${tree} + `;