feat(flow, flow-item): add component tokens (#11365)

**Related Issue:** #7180 ## Summary Add `flow` and `flow-item` component tokens. ### Deprecates the following tokens - `--calcite-flow-item-footer-padding`: [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer. - `--calcite-flow-item-header-border-block-end`: [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border. ### Adds the following tokens - `--calcite-flow-corner-radius`: Specifies the component's corner radius. - `--calcite-flow-heading-text-color`: Specifies the text color of the component's `heading`. - `--calcite-flow-description-text-color`: Specifies the text color of the component's `description`. - `--calcite-flow-border-color`: Specifies the component's border color. - `--calcite-flow-background-color`: Specifies the component's background color. - `--calcite-flow-header-background-color`: Specifies the background color of the component's header. - `--calcite-flow-footer-background-color`: Specifies the background color of the component's footer. - `--calcite-flow-space`: Specifies the padding of the component's `"unnamed (default)"` slot. - `--calcite-flow-header-content-space`: Specifies the padding of the `"header-content"` slot. - `--calcite-flow-footer-space`: Specifies the padding of the component's footer. - `--calcite-action-background-color`: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s. - `--calcite-action-background-color-hover`: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. - `--calcite-action-background-color-pressed`: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. - `--calcite-action-text-color-hover`: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s. - `--calcite-action-text-color-pressed`: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s. - `--calcite-popover-border-color`: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. - `--calcite-flow-header-action-background-color-hover`: Specifies the background color of the component's `calcite-action` items in the flow item header when hovered. - `--calcite-flow-header-action-background-color-press`: Specifies the background color of the component's `calcite-action` items in the flow item header when pressed. - `--calcite-flow-header-action-background-color`: Specifies the background color of the component's `calcite-action` items in the flow item header. - `--calcite-flow-header-action-indicator-color`: Specifies the color of the component's `calcite-action` items' indicator in the flow item header. - `--calcite-flow-header-action-text-color-press`: Specifies the text color of the component's `calcite-action` items in the flow item header when pressed. - `--calcite-flow-header-action-text-color`: Specifies the text color of the component's `calcite-action` items in the flow item header.
Esri · Feb 8, 2025 · a69460f · a69460f
1 parent a3558c0
commit a69460f
Show file tree

Hide file tree

Showing 8 changed files with 274 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
@@ -12,6 +12,7 @@ import {
   renders,
   slots,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { GlobalTestProps } from "../../tests/utils";
@@ -391,4 +392,79 @@ describe("calcite-flow-item", () => {
     const flowItem = await page.find("calcite-flow-item");
     expect(await flowItem.getProperty("closed")).toBe(false);
   });
+
+  describe("theme", () => {
+    themed(html`<calcite-flow-item show-back-button></calcite-flow-item>`, {
+      "--calcite-flow-corner-radius": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-corner-radius",
+      },
+      "--calcite-flow-heading-text-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-heading-text-color",
+      },
+      "--calcite-flow-description-text-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-description-text-color",
+      },
+      "--calcite-flow-border-color": [
+        {
+          shadowSelector: `.${CSS.backButton}`,
+          targetProp: "borderColor",
+        },
+        {
+          shadowSelector: "calcite-panel",
+          targetProp: "--calcite-panel-border-color",
+        },
+      ],
+      "--calcite-flow-background-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-background-color",
+      },
+      "--calcite-flow-header-background-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-background-color",
+      },
+      "--calcite-flow-footer-background-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-footer-background-color",
+      },
+      "--calcite-flow-space": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-space",
+      },
+      "--calcite-flow-header-content-space": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-content-space",
+      },
+      "--calcite-flow-footer-space": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-footer-space",
+      },
+      "--calcite-flow-header-action-background-color-hover": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-action-background-color-hover",
+      },
+      "--calcite-flow-header-action-background-color-press": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-action-background-color-press",
+      },
+      "--calcite-flow-header-action-background-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-action-background-color",
+      },
+      "--calcite-flow-header-action-indicator-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-action-indicator-color",
+      },
+      "--calcite-flow-header-action-text-color-press": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-action-text-color-press",
+      },
+      "--calcite-flow-header-action-text-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-header-action-text-color",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.scss b/packages/calcite-components/src/components/flow-item/flow-item.scss
@@ -3,8 +3,30 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-flow-item-footer-padding: Specifies the padding of the component's footer.
- * @prop --calcite-flow-item-header-border-block-end: Specifies the component header's block end border.
+ * @prop --calcite-flow-item-footer-padding: [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
+ * @prop --calcite-flow-item-header-border-block-end: [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
+ * @prop --calcite-flow-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-flow-heading-text-color: Specifies the text color of the component's `heading`.
+ * @prop --calcite-flow-description-text-color: Specifies the text color of the component's `description`.
+ * @prop --calcite-flow-border-color: Specifies the component's border color.
+ * @prop --calcite-flow-background-color: Specifies the component's background color.
+ * @prop --calcite-flow-header-background-color: Specifies the background color of the component's header.
+ * @prop --calcite-flow-footer-background-color: Specifies the background color of the component's footer.
+ * @prop --calcite-flow-space: Specifies the padding of the component's `"unnamed (default)"` slot.
+ * @prop --calcite-flow-header-content-space: Specifies the padding of the `"header-content"` slot.
+ * @prop --calcite-flow-footer-space: Specifies the padding of the component's footer.
+ * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
+ * @prop --calcite-flow-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items  in the flow item header when hovered.
+ * @prop --calcite-flow-header-action-background-color-press: Specifies the background color of the component's `calcite-action` items  in the flow item header when pressed.
+ * @prop --calcite-flow-header-action-background-color: Specifies the background color of the component's `calcite-action` items  in the flow item header.
+ * @prop --calcite-flow-header-action-indicator-color: Specifies the color of the component's `calcite-action` items' indicator in the flow item header.
+ * @prop --calcite-flow-header-action-text-color-press: Specifies the text color of the component's `calcite-action` items in the flow item header when pressed.
+ * @prop --calcite-flow-header-action-text-color: Specifies the text color of the component's `calcite-action` items in the flow item header.
  */
 
 :host {
@@ -19,15 +41,29 @@
 @include disabled();
 
 .back-button {
-  @apply border-color-3
-  border-0
+  @apply border-0
   border-solid;
   border-inline-end-width: theme("borderWidth.DEFAULT");
+  border-color: var(--calcite-flow-border-color, var(--calcite-color-border-3));
 }
 
 calcite-panel {
-  --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);
-  --calcite-panel-header-border-block-end: var(--calcite-flow-item-header-border-block-end);
+  --calcite-panel-background-color: var(--calcite-flow-background-color);
+  --calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));
+  --calcite-panel-corner-radius: var(--calcite-flow-corner-radius);
+  --calcite-panel-description-text-color: var(--calcite-flow-description-text-color);
+  --calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);
+  --calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));
+  --calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);
+  --calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);
+  --calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);
+  --calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);
+  --calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);
+  --calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);
+  --calcite-panel-header-background-color: var(--calcite-flow-header-background-color);
+  --calcite-panel-header-content-space: var(--calcite-flow-header-content-space);
+  --calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);
+  --calcite-panel-space: var(--calcite-flow-space);
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/flow/flow.e2e.ts b/packages/calcite-components/src/components/flow/flow.e2e.ts
@@ -2,7 +2,7 @@
 import { newE2EPage, E2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, vi } from "vitest";
 import { html } from "../../../support/formatting";
-import { accessible, focusable, hidden, renders } from "../../tests/commonTests";
+import { accessible, focusable, hidden, renders, themed } from "../../tests/commonTests";
 import { CSS as ITEM_CSS } from "../flow-item/resources";
 import { isElementFocused } from "../../tests/utils";
 import type { Action } from "../action/action";
@@ -558,4 +558,13 @@ describe("calcite-flow", () => {
     expect(await flow.getProperty("childElementCount")).toBe(3);
     expect(displayedItem.id).toBe("first");
   });
+
+  describe("theme", () => {
+    themed("calcite-flow", {
+      "--calcite-flow-background-color": {
+        shadowSelector: `.${CSS.frame}`,
+        targetProp: "backgroundColor",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/flow/flow.scss b/packages/calcite-components/src/components/flow/flow.scss
@@ -1,3 +1,11 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-flow-background-color: Specifies the component's background color.
+ */
+
 :host {
   @extend %component-host;
   @apply relative
@@ -19,6 +27,7 @@
       p-0;
     animation-name: none;
     animation-duration: var(--calcite-animation-timing);
+    background-color: var(--calcite-flow-background-color);
   }
 
   ::slotted(*) {

diff --git a/packages/calcite-components/src/components/flow/flow.stories.ts b/packages/calcite-components/src/components/flow/flow.stories.ts
@@ -48,7 +48,7 @@ const menuActionsHTML = html`
 
 const footerActionsHTML = html`
   <calcite-button slot="${SLOTS.footerActions}" width="half" appearance="outline">Cancel</calcite-button>
-  <calcite-button slot="${SLOTS.footerActions}" width="half">Save</button>
+  <calcite-button slot="${SLOTS.footerActions}" width="half">Save</calcite-button>
 `;
 
 function createItemHTML(content: string): string {

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -24,6 +24,7 @@ import { chips, chipTokens } from "./custom-theme/chips";
 import { comboboxItem } from "./custom-theme/combobox-item";
 import { datePicker } from "./custom-theme/date-picker";
 import { dropdown } from "./custom-theme/dropdown";
+import { flow, flowTokens } from "./custom-theme/flow";
 import { graph, graphTokens } from "./custom-theme/graph";
 import { handle, handleTokens } from "./custom-theme/handle";
 import { icon } from "./custom-theme/icon";
@@ -129,6 +130,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
         <div>${card}</div>
         ${cardThumbnail}
         <div>${dropdown} ${buttons}</div>
+        <div>${flow}</div>
         <div>${checkbox}</div>
         ${chips} ${pagination} ${slider}
       </div>
@@ -162,6 +164,7 @@ const componentTokens = {
   ...cardTokens,
   ...checkboxTokens,
   ...chipTokens,
+  ...flowTokens,
   ...handleTokens,
   ...graphTokens,
   ...inputTokens,

diff --git a/packages/calcite-components/src/custom-theme/flow.ts b/packages/calcite-components/src/custom-theme/flow.ts
@@ -0,0 +1,50 @@
+import { html } from "../../support/formatting";
+
+export const flowTokens = {
+  calciteFlowBackgroundColor: "",
+  calciteFlowHeaderBackgroundColor: "",
+  calciteFlowFooterBackgroundColor: "",
+  calciteFlowSpace: "",
+  calciteFlowHeaderContentSpace: "",
+  calciteFlowFooterSpace: "",
+  calciteActionBackgroundColor: "",
+  calciteActionBackgroundColorHover: "",
+  calciteActionBackgroundColorPressed: "",
+  calciteActionTextColorHover: "",
+  calciteActionTextColorPressed: "",
+  calcitePopoverBorderColor: "",
+  calciteFlowHeaderActionBackgroundColorHover: "",
+  calciteFlowHeaderActionBackgroundColorPress: "",
+  calciteFlowHeaderActionBackgroundColor: "",
+  calciteFlowHeaderActionIndicatorColor: "",
+  calciteFlowHeaderActionTextColorPress: "",
+  calciteFlowHeaderActionTextColor: "",
+};
+
+export const flow = html`
+  <calcite-flow>
+    <calcite-flow-item heading="flow-item-1" description="description"> </calcite-flow-item>
+    <calcite-flow-item selected heading="flow-item-2" description="description">
+      <calcite-button slot="footer-end" width="half" appearance="outline">Cancel</calcite-button>
+      <calcite-button slot="footer-start" width="half">Save</calcite-button>
+      <calcite-action slot="header-menu-actions" text-enabled text="Add" label="Add Item" icon="plus"></calcite-action>
+      <calcite-action
+        slot="header-menu-actions"
+        text-enabled
+        text="Save"
+        label="Save Item"
+        icon="save"
+      ></calcite-action>
+      <calcite-action
+        slot="header-menu-actions"
+        text-enabled
+        text="Layers"
+        label="View Layers"
+        icon="layers"
+      ></calcite-action>
+      <div slot="content-top">Slot for a content-top.</div>
+      Hello world!
+      <div slot="content-bottom">Content bottom!</div>
+    </calcite-flow-item>
+  </calcite-flow>
+`;
diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
@@ -27,6 +27,28 @@
         text-align: right;
         flex: 0 0 15%;
       }
+
+      .themed-flow {
+        --calcite-flow-corner-radius: 12px;
+        --calcite-flow-heading-text-color: darkgreen;
+        --calcite-flow-description-text-color: lightgreen;
+        --calcite-flow-background-color: yellow;
+        --calcite-flow-header-background-color: orange;
+        --calcite-flow-footer-background-color: red;
+
+        --calcite-flow-border-color: lime;
+
+        --calcite-flow-space: 2rem;
+        --calcite-flow-header-content-space: 0;
+        --calcite-flow-footer-space: 0;
+
+        --calcite-action-background-color: lime;
+        --calcite-action-background-color-hover: lime;
+        --calcite-action-background-color-pressed: lime;
+        --calcite-action-text-color: blue;
+        --calcite-action-text-color-pressed: blue;
+        --calcite-popover-border-color: blue;
+      }
     </style>
 
     <script src="./_assets/head.ts"></script>
@@ -170,6 +192,67 @@
           </script>
         </div>
       </div>
+
+      <div class="parent">
+        <div class="child right-aligned-text">themed</div>
+
+        <div class="child">
+          <calcite-flow class="themed-flow">
+            <calcite-flow-item heading="flow-item-1" description="description" scale="m">
+              <calcite-button slot="footer-end" width="half" appearance="outline">Cancel</calcite-button>
+              <calcite-button slot="footer-start" width="half">Save</calcite-button>
+              <calcite-action
+                slot="header-menu-actions"
+                text-enabled
+                text="Add"
+                label="Add Item"
+                icon="plus"
+              ></calcite-action>
+              <calcite-action
+                slot="header-menu-actions"
+                text-enabled
+                text="Save"
+                label="Save Item"
+                icon="save"
+              ></calcite-action>
+              <calcite-action
+                slot="header-menu-actions"
+                text-enabled
+                text="Layers"
+                label="View Layers"
+                icon="layers"
+              ></calcite-action>
+              <div slot="content-top">Slot for a content-top.</div>
+              <img alt="" width="250" height="250" src="./_assets/images/placeholder.svg" />
+              <div slot="content-bottom">Content bottom!</div>
+            </calcite-flow-item>
+            <calcite-flow-item selected heading="flow-item-2" description="description" scale="m">
+              <div slot="content-top">Slot for a content-top.</div>
+              <img alt="" width="250" height="250" src="./_assets/images/placeholder.svg" />
+              <div slot="content-bottom">Content bottom!</div>
+              <calcite-button
+                type="button"
+                slot="footer-start"
+                kind="neutral"
+                scale="s"
+                id="card-icon-test-1"
+                icon-start="check"
+              ></calcite-button>
+              <div slot="footer-end">
+                <calcite-dropdown type="hover">
+                  <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="neutral" icon-start="caret-down">
+                  </calcite-button>
+                  <calcite-dropdown-group selection-mode="none">
+                    <calcite-dropdown-item>View details</calcite-dropdown-item>
+                    <calcite-dropdown-item>Duplicate</calcite-dropdown-item>
+                    <calcite-dropdown-item>Delete</calcite-dropdown-item>
+                  </calcite-dropdown-group>
+                </calcite-dropdown>
+              </div>
+            </calcite-flow-item>
+          </calcite-flow>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>