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.
Esri · Sep 13, 2024 · ca932b5 · ca932b5
1 parent 2fcf11e
commit ca932b5
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 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
@@ -27,57 +27,55 @@ describe("calcite-accordion-item", () => {
   describe("theme", () => {
     describe("default", () => {
       themed(
-        html`<calcite-accordion-item heading="Heading" description="Description" icon-start="home" icon-end="home"
+        html`<calcite-accordion-item
+          expanded
+          heading="Heading"
+          description="Description"
+          icon-start="home"
+          icon-end="home"
           >content</calcite-accordion-item
         >`,
         {
-          "--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`<calcite-accordion-item heading="Heading" description="Description" expanded
+        html`<calcite-accordion-item heading="Heading" description="Description" icon-start="home" icon-end="home"
           >content</calcite-accordion-item
         >`,
         {
-          "--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
@@ -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,27 +196,42 @@
 
 :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 {
     transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation-rtl));
   }
 
   .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
@@ -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`
   <calcite-accordion scale="l" style="width: 600px"> ${accordionItemsIconHeaderUseCases} </calcite-accordion>
 `;
-
-export const theming_TestOnly = (): string =>
-  html` <style>
-      .container {
-        ${setCSSVariables([
-        "--calcite-accordion-background-color",
-        "--calcite-accordion-border-color",
-        "--calcite-accordion-text-color-hover",
-        "--calcite-accordion-text-color-pressed",
-        "--calcite-accordion-text-color",
-      ])}
-      }
-    </style>
-    <div class="container">
-      <calcite-accordion appearance="solid" selection-mode="multiple">
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana">
-          ${accordionItemContent}
-        </calcite-accordion-item>
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana">
-          ${accordionItemContent}
-        </calcite-accordion-item>
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana">
-          ${accordionItemContent}
-        </calcite-accordion-item>
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana" expanded>
-          ${accordionItemContent}
-        </calcite-accordion-item>
-      </calcite-accordion>
-      <br />
-      <calcite-accordion appearance="transparent" selection-mode="multiple">
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana">
-          ${accordionItemContent}
-        </calcite-accordion-item>
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana">
-          ${accordionItemContent}
-        </calcite-accordion-item>
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana">
-          ${accordionItemContent}
-        </calcite-accordion-item>
-        <calcite-accordion-item heading="Heading" description="Description for item" icon-start="banana" expanded>
-          ${accordionItemContent}
-        </calcite-accordion-item>
-      </calcite-accordion>
-    </div>`;
diff --git 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, string>): 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
@@ -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`<calcite-accordion-item heading="${idx === 0 ? "Accordion Item" : `Accordion Item ${idx + 1}`}"
     ><img src="${placeholderImage({ width: 300, height: 200 })}" />

diff --git 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`<calcite-accordion>
-  ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx))}
-  <calcite-accordion-item heading="Accordion Item 5" expanded>${tree}</calcite-accordion-item>
-</calcite-accordion>`;
+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`<style>
+    calcite-accordion-item:hover {
+      --calcite-accordion-item-background-color: white;
+    }
+    calcite-accordion-item[expanded] {
+      --calcite-accordion-item-header-background-color: #ccc;
+    }</style
+  ><calcite-accordion>
+    ${[0, 1, 2, 3, 4].map((idx) => accordionItem(idx)).join("\n")}
+    <calcite-accordion-item heading="Accordion Item 5" expanded>${tree}</calcite-accordion-item>
+  </calcite-accordion>`;