feat(block): add component tokens (#11014)

**Related Issue:** #7180 ## Summary Adds the following subcomponent tokens (CSS props): - `--calcite-block-border-color` - `--calcite-block-header-background-color` - `--calcite-block-header-background-color-hover` - `--calcite-block-header-text-color` - `--calcite-block-block-text-color` - `--calcite-block-block-text-color-hover`
Esri · Dec 30, 2024 · 3ca4c98 · 3ca4c98
1 parent 58280e5
commit 3ca4c98
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 37 deletions.
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -550,25 +550,27 @@ describe("calcite-action-bar", () => {
   });
 
   describe("theme", () => {
-    themed(
-      html`<calcite-action-bar expanded layout="vertical">
-        <calcite-action-group>
-          <calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
-        </calcite-action-group>
-        <calcite-action-group>
-          <calcite-action-menu label="Save and open">
-            <calcite-action id="menu-action" text-enabled text="Save" label="Save" icon="save"></calcite-action>
-          </calcite-action-menu>
-        </calcite-action-group>
-      </calcite-action-bar>`,
-      {
-        "--calcite-action-bar-expanded-max-width": {
-          targetProp: "maxInlineSize",
-        },
-        "--calcite-action-bar-items-space": {
-          targetProp: "gap",
+    describe("default", () => {
+      themed(
+        html`<calcite-action-bar expanded layout="vertical">
+          <calcite-action-group>
+            <calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
+          </calcite-action-group>
+          <calcite-action-group>
+            <calcite-action-menu label="Save and open">
+              <calcite-action id="menu-action" text-enabled text="Save" label="Save" icon="save"></calcite-action>
+            </calcite-action-menu>
+          </calcite-action-group>
+        </calcite-action-bar>`,
+        {
+          "--calcite-action-bar-expanded-max-width": {
+            targetProp: "maxInlineSize",
+          },
+          "--calcite-action-bar-items-space": {
+            targetProp: "gap",
+          },
         },
-      },
-    );
+      );
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -12,6 +12,7 @@ import {
   renders,
   slots,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
@@ -422,4 +423,53 @@ describe("calcite-block", () => {
   describe("translation support", () => {
     t9n("calcite-block");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`<calcite-block
+          heading="heading"
+          description="description"
+          open
+          collapsible
+          icon-end="pen"
+          icon-start="pen"
+        >
+          <calcite-icon icon="compass" slot="content-start"></calcite-icon>
+          <div>content</div>
+        </calcite-block>`,
+        {
+          "--calcite-block-border-color": {
+            targetProp: "borderColor",
+          },
+          "--calcite-block-header-background-color": {
+            shadowSelector: `.${CSS.toggle}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-block-header-background-color-hover": {
+            shadowSelector: `.${CSS.toggle}`,
+            targetProp: "backgroundColor",
+            state: "hover",
+          },
+          "--calcite-block-text-color": [
+            { shadowSelector: `.${CSS.description}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.contentStart}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.iconEnd}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.iconStart}`, targetProp: "color" },
+            { shadowSelector: `.${CSS.toggleIcon}`, targetProp: "color" },
+          ],
+          "--calcite-block-text-color-hover": {
+            shadowSelector: `.${CSS.toggleIcon}`,
+            targetProp: "color",
+            state: "hover",
+          },
+        },
+      );
+    });
+    describe("closed", () => {
+      themed(html`<calcite-block heading="heading"></calcite-block>`, {
+        "--calcite-block-header-text-color": { shadowSelector: `.${CSS.heading}`, targetProp: "color" },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss
@@ -3,16 +3,23 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-block-padding: Specifies the padding of the block `default` slot.
+ * @prop --calcite-block-border-color: Specifies the border color of the component.
+ * @prop --calcite-block-header-background-color: Specifies the background color of the component's header.
+ * @prop --calcite-block-header-background-color-hover: Specifies the background color of the component's header when hovered.
+ * @prop --calcite-block-header-text-color: Specifies the text color of the component's header.
+ * @prop --calcite-block-padding: [Deprecated] Specifies the padding of the component's `default` slot.
+ * @prop --calcite-block-text-color: Specifies the text color of the component.
+ * @prop --calcite-block-text-color-hover: Specifies the text color component when hovered
  */
 
 :host {
   @extend %component-host;
   @extend %component-spacing;
-  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0
+  @apply transition-margin ease-cubic flex flex-shrink-0 flex-grow-0
     flex-col border-0 border-b border-solid p-0;
   flex-basis: auto;
   transition-duration: var(--calcite-animation-timing);
+  border-color: var(--calcite-block-border-color, var(--calcite-color-border-3));
 }
 
 @include disabled();
@@ -41,7 +48,10 @@
   grid-row: 1 / 2;
 }
 
-.content-start,
+.content-start {
+  margin-inline-end: var(--calcite-spacing-md);
+}
+
 .icon,
 .icon--start,
 .icon--end {
@@ -56,7 +66,7 @@
 
 .icon--start,
 .icon--end {
-  @apply text-color-3;
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
 }
 
 .actions-end {
@@ -66,20 +76,20 @@
 .toggle {
   @apply font-sans
     focus-base
-    m-0
     flex
     cursor-pointer
     flex-nowrap
     items-center
     justify-between
     border-none
+    m-0
     p-0;
 
   text-align: initial;
-  background-color: transparent;
+  background-color: var(--calcite-block-header-background-color, transparent);
 
   &:hover {
-    @apply bg-foreground-2;
+    background-color: var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2));
   }
   &:focus {
     @apply focus-inset;
@@ -101,22 +111,24 @@ calcite-handle {
 
 .header .title .heading {
   @apply text-n1
-    text-color-2
     word-break
     transition-color
-    p-0
     font-medium
     leading-tight
     duration-150
-    ease-in-out;
+    ease-in-out
+    p-0;
+
+  color: var(--calcite-block-header-text-color, var(--calcite-color-text-2));
 }
 
 .description {
   @apply text-n2-wrap
-    text-color-3
     word-break
     mt-0.5
     p-0;
+
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
 }
 
 .icon {
@@ -150,18 +162,18 @@ calcite-handle {
 }
 
 .toggle-icon {
-  @apply text-color-3
-  transition-color
+  @apply transition-color
   self-center
   justify-self-end
   duration-150
   ease-in-out;
 
   margin-inline-end: var(--calcite-spacing-md);
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
 }
 
 .toggle:hover .toggle-icon {
-  @apply text-color-1;
+  color: var(--calcite-block-text-color-hover, var(--calcite-color-text-1));
 }
 
 .container {
@@ -175,7 +187,9 @@ calcite-handle {
 }
 
 .content-start {
-  @apply text-color-3 flex items-center;
+  @apply flex items-center;
+
+  color: var(--calcite-block-text-color, var(--calcite-color-text-3));
 }
 
 .control-container {
@@ -195,7 +209,7 @@ calcite-action-menu {
   @apply my-2;
 
   .header .title .heading {
-    @apply text-color-1;
+    color: var(--calcite-block-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
@@ -14,6 +14,7 @@ import { alertTokens, alert } from "./custom-theme/alert";
 import { accordionItemTokens } from "./custom-theme/accordion-item";
 import { accordion, accordionTokens } from "./custom-theme/accordion";
 import { autocomplete, autocompleteTokens } from "./custom-theme/autocomplete";
+import { block, blockTokens } from "./custom-theme/block";
 import { buttons } from "./custom-theme/button";
 import { blockSection, blockSectionTokens } from "./custom-theme/block-section";
 import { calciteSwitch } from "./custom-theme/switch";
@@ -132,8 +133,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} ${blockSection}</div>
-      <div class="demo-column">${alert}</div>
+      <div class="demo-column">${navigation} ${navigationLogos} ${navigationUsers} ${blockSection} ${block}</div>
+      <div class="demo-column"><div class="demo-column">${alert}</div></div>
     </div>
   </div>`;
 
@@ -150,6 +151,7 @@ const componentTokens = {
   ...autocompleteTokens,
   ...avatarTokens,
   ...blockSectionTokens,
+  ...blockTokens,
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,

diff --git a/packages/calcite-components/src/custom-theme/block.ts b/packages/calcite-components/src/custom-theme/block.ts
@@ -0,0 +1,23 @@
+import { html } from "../../support/formatting";
+
+export const blockTokens = {
+  calciteBlockBorderColor: "",
+  calciteBlockContentStartColor: "",
+  calciteBlockHeaderBackgroundColor: "",
+  calciteBlockHeaderDescriptionColor: "",
+  calciteBlockHeaderIconColor: "",
+  calciteBlockIconColorEnd: "",
+  calciteBlockIconColorStart: "",
+};
+
+export const block = html` <calcite-block
+  heading="heading"
+  description="description"
+  open
+  collapsible
+  icon-end="pen"
+  icon-start="pen"
+>
+  <calcite-icon icon="compass" slot="content-start"></calcite-icon>
+  <div>content</div>
+</calcite-block>`;