feat(block-section): add component tokens (#11032)

**Related Issue:** #7180 ## Summary Adds the following subcomponent tokens (CSS props): - `--calcite-block-section-background-color` - `--calcite-block-section-border-color` - `--calcite-block-section-header-text-color` - `--calcite-block-section-text-color` - `--calcite-block-section-text-color-hover`
Esri · Feb 8, 2025 · a7a99b1 · a7a99b1
1 parent 064d783
commit a7a99b1
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 18 deletions.
diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, defaults, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, reflects, renders, themed, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
@@ -233,4 +233,65 @@ describe("calcite-block-section", () => {
     expect(await element.getProperty("open")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
   }
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-block-section text="Planes" open icon-end="pen" icon-start="pen" text="a block-section">
+            <p>Block section content</p>
+          </calcite-block-section>
+        `,
+        {
+          "--calcite-block-section-border-color": {
+            targetProp: "borderBlockEndColor",
+          },
+          "--calcite-block-section-background-color": [
+            {
+              targetProp: "backgroundColor",
+            },
+            {
+              shadowSelector: `.${CSS.toggle}`,
+              targetProp: "backgroundColor",
+            },
+            {
+              shadowSelector: `.${CSS.toggleContainer}`,
+              targetProp: "backgroundColor",
+            },
+          ],
+          "--calcite-block-section-header-text-color": [
+            {
+              targetProp: "color",
+            },
+          ],
+          "--calcite-block-section-text-color": [
+            { shadowSelector: `.${CSS.chevronIcon}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.iconStart}`, targetProp: "color" },
+          ],
+          "--calcite-block-section-text-color-hover": [
+            {
+              shadowSelector: `.${CSS.toggle}`,
+              targetProp: "color",
+              state: "hover",
+            },
+            {
+              shadowSelector: `.${CSS.chevronIcon}`,
+              targetProp: "color",
+              state: "hover",
+            },
+            {
+              shadowSelector: `.${CSS.sectionHeader}`,
+              targetProp: "color",
+              state: "hover",
+            },
+            {
+              shadowSelector: `.${CSS.iconStart}`,
+              targetProp: "color",
+              state: "hover",
+            },
+          ],
+        },
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -1,7 +1,20 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-block-section-background-color: Specifies the component's background color.
+ * @prop --calcite-block-section-border-color: Specifies the component's border color. When `open`, applies to the component's bottom border.
+ * @prop --calcite-block-section-header-text-color: Specifies the component's header text color.
+ * @prop --calcite-block-section-text-color: Specifies the component's text color.
+ * @prop --calcite-block-section-text-color-hover: Specifies the component's text color on hover.
+ */
+
 :host {
-  @apply bg-foreground-1 text-n1 box-border block;
+  @apply text-n1 box-border block;
 
-  color: var(--calcite-color-text-2);
+  color: var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));
+  background-color: var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));
 }
 
 calcite-switch {
@@ -14,24 +27,25 @@ calcite-switch {
 }
 
 :host([open]) {
-  @apply border-b-color-3
-    border-0
+  @apply border-0
     border-b
     border-solid;
 
+  border-block-end-color: var(--calcite-block-section-border-color, var(--calcite-color-border-3));
+
   .toggle {
-    color: var(--calcite-color-text-1);
+    color: var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1));
 
     &:hover {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1));
     }
   }
 
   .chevron-icon {
-    color: var(--calcite-color-text-3);
+    color: var(--calcite-block-section-text-color, var(--calcite-color-text-3));
 
     &:hover {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1));
     }
   }
 }
@@ -41,14 +55,16 @@ calcite-switch {
 }
 
 .toggle {
-  @apply font-sans w-full border-0 bg-transparent;
+  @apply font-sans w-full border-0;
 
   gap: var(--calcite-spacing-md);
-  color: var(--calcite-color-text-2);
+  color: var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));
+  background-color: var(--calcite-block-section-background-color, transparent);
+
   font-weight: var(--calcite-font-weight-normal);
 
   &:hover {
-    color: var(--calcite-color-text-1);
+    color: var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1));
   }
 }
 
@@ -69,7 +85,7 @@ calcite-switch {
     @apply focus-outset;
   }
   &:hover {
-    color: var(--calcite-color-text-1);
+    color: var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1));
   }
 }
 
@@ -82,8 +98,10 @@ calcite-switch {
 }
 
 .toggle-container {
-  @apply flex items-center relative bg-transparent;
+  @apply flex items-center relative;
+
   word-break: break-word;
+  background-color: var(--calcite-block-section-background-color, transparent);
 
   .toggle--switch__content {
     @apply flex flex-auto items-center;
@@ -94,10 +112,10 @@ calcite-switch {
   .chevron-icon {
     @apply flex items-center;
 
-    color: var(--calcite-color-text-3);
+    color: var(--calcite-block-section-text-color, var(--calcite-color-text-3));
 
     &:hover {
-      color: var(--calcite-color-text-1);
+      color: var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1));
     }
   }
 }

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -15,6 +15,7 @@ import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { accordion, accordionTokens } from "./custom-theme/accordion";
 import { autocomplete, autocompleteTokens } from "./custom-theme/autocomplete";
 import { buttons } from "./custom-theme/button";
+import { blockSection, blockSectionTokens } from "./custom-theme/block-section";
 import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
 import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
@@ -131,8 +132,8 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
         ${comboboxItem}
       </div>
-      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers}</div>
-      ${alert}
+      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers} ${blockSection}</div>
+      <div class="demo-column">${alert}</div>
     </div>
   </div>`;
 
@@ -148,6 +149,7 @@ const componentTokens = {
   ...alertTokens,
   ...autocompleteTokens,
   ...avatarTokens,
+  ...blockSectionTokens,
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,

diff --git a/packages/calcite-components/src/custom-theme/block-section.ts b/packages/calcite-components/src/custom-theme/block-section.ts
@@ -0,0 +1,14 @@
+import { html } from "../../support/formatting";
+
+export const blockSectionTokens = {
+  calciteBlockSectionBorderColor: "",
+  calciteBlockSectionHeaderTextColor: "",
+  calciteBlockSectionHeaderTextColorHover: "",
+  calciteBlockSectionTextColor: "",
+};
+
+export const blockSection = html`
+  <calcite-block-section text="Planes" open icon-end="pen" icon-start="pen" text="a block-section">
+    <p>Block section content</p>
+  </calcite-block-section>
+`;