feat(dialog): Add component tokens

packages/calcite-components/src/components/dialog/dialog.e2e.ts

@@ -1180,7 +1180,26 @@ describe("calcite-dialog", () => {
     });
   });
 
-  describe("theme", () => {
+  describe("slotted", () => {
+    it("should not close when slotted panels are closed", async () => {
+      const page = await newE2EPage({
+        html: html`<calcite-dialog open>
+          <calcite-panel closable heading="test"></calcite-panel>
+        </calcite-dialog>`,
+      });
+      await page.waitForChanges();
+
+      const closeButton = await page.find(`calcite-panel >>> #${PanelIDS.close}`);
+
+      await closeButton.click();
+      await page.waitForChanges();
+
+      const dialog = await page.find("calcite-dialog");
+      expect(await dialog.getProperty("open")).toBe(true);
+    });
+  });
+
+  describe("theme sizing", () => {
     themed(
       async () => {
         const page = await newE2EPage();
@@ -1193,10 +1212,6 @@ describe("calcite-dialog", () => {
         return { page, tag: "calcite-dialog" };
       },
       {
-        "--calcite-dialog-scrim-background-color": {
-          shadowSelector: `.${CSS.scrim}`,
-          targetProp: "--calcite-scrim-background-color",
-        },
         "--calcite-dialog-size-x": {
           shadowSelector: `.${CSS.dialog}`,
           targetProp: "inlineSize",
@@ -1221,14 +1236,6 @@ describe("calcite-dialog", () => {
           shadowSelector: `.${CSS.dialog}`,
           targetProp: "maxBlockSize",
         },
-        "--calcite-dialog-content-space": {
-          shadowSelector: `.${CSS.panel}`,
-          targetProp: "--calcite-internal-dialog-content-padding",
-        },
-        "--calcite-dialog-footer-space": {
-          shadowSelector: `.${CSS.panel}`,
-          targetProp: "--calcite-panel-footer-space",
-        },
         "--calcite-dialog-offset-x": {
           shadowSelector: `.${CSS.dialog}`,
           targetProp: "insetInlineStart",
@@ -1237,6 +1244,50 @@ describe("calcite-dialog", () => {
           shadowSelector: `.${CSS.dialog}`,
           targetProp: "insetBlockStart",
         },
+      },
+    );
+  });
+
+  describe("theme appearance", () => {
+    themed(
+      async () => {
+        const page = await newE2EPage();
+        await page.setContent(
+          html`<calcite-dialog heading="Information" description="Themed" kind="info" scale="s" modal open>
+            <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+            <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+            <div slot="content-top">To continue, you must agree to the terms</div>
+            <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+              <calcite-checkbox></calcite-checkbox>I agree to the terms
+            </calcite-label>
+            <p>
+              Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam
+              fringilla viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros.
+              Aenean sodales sollicitudin dui in fermentum.
+            </p>
+
+            <calcite-button slot="footer-end" width="auto" scale="s">Add members now</calcite-button>
+          </calcite-dialog>`,
+        );
+        // set large page to ensure test dialog isn't becoming fullscreen
+        await page.setViewport({ width: 1440, height: 1440 });
+        await skipAnimations(page);
+        return { page, tag: "calcite-dialog" };
+      },
+      {
+        "--calcite-dialog-scrim-background-color": {
+          shadowSelector: `.${CSS.scrim}`,
+          targetProp: "--calcite-scrim-background-color",
+        },
+        "--calcite-dialog-content-space": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-content-space",
+        },
+        "--calcite-dialog-footer-space": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-footer-space",
+        },
         "--calcite-dialog-background-color": {
           shadowSelector: `.${CSS.panel}`,
           targetProp: "--calcite-panel-background-color",
@@ -1245,25 +1296,58 @@ describe("calcite-dialog", () => {
           shadowSelector: `.${CSS.panel}`,
           targetProp: "--calcite-panel-icon-color",
         },
+        "--calcite-dialog-heading-text-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-heading-text-color",
+        },
+        "--calcite-dialog-description-text-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-description-text-color",
+        },
+        "--calcite-dialog-header-action-background-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-header-action-background-color",
+        },
+        "--calcite-dialog-header-action-text-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-header-action-text-color",
+        },
+        "--calcite-dialog-header-background-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-header-background-color",
+        },
+        "--calcite-dialog-footer-background-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-footer-background-color",
+        },
+        "--calcite-dialog-border-color": [
+          {
+            shadowSelector: `.${CSS.panel}`,
+            targetProp: "--calcite-panel-border-color",
+          },
+          {
+            shadowSelector: `.${CSS.panel}`,
+            targetProp: "--calcite-panel-border-color",
+          },
+          {
+            shadowSelector: `.${CSS.panel}`,
+            targetProp: "--calcite-panel-border-color",
+          },
+          {
+            shadowSelector: `.${CSS.panel}`,
+            targetProp: "--calcite-panel-border-color",
+          },
+        ],
+        "--calcite-dialog-accent-color": {
+          shadowSelector: `.${CSS.dialog}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-dialog-space": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-space",
+        },
       },
     );
-
-    it("should not close when slotted panels are closed", async () => {
-      const page = await newE2EPage({
-        html: html`<calcite-dialog open>
-          <calcite-panel closable heading="test"></calcite-panel>
-        </calcite-dialog>`,
-      });
-      await page.waitForChanges();
-
-      const closeButton = await page.find(`calcite-panel >>> #${PanelIDS.close}`);
-
-      await closeButton.click();
-      await page.waitForChanges();
-
-      const dialog = await page.find("calcite-dialog");
-      expect(await dialog.getProperty("open")).toBe(true);
-    });
   });
 
   describe.each([{ modal: true }, { modal: false }])("focusTrap behavior", ({ modal }) => {

packages/calcite-components/src/components/dialog/dialog.scss

@@ -17,8 +17,35 @@
  * @prop --calcite-dialog-offset-y: Specifies the vertical offset of the component.
  * @prop --calcite-dialog-background-color: Specifies the background color of the component.
  * @prop --calcite-dialog-icon-color: Specifies the color of the component's icon.
+ * @prop --calcite-dialog-accent-color: Specifies the component's accent color when `kind` is specified.
+ * @prop --calcite-dialog-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-dialog-heading-text-color: Specifies the text color of the component's `heading`.
+ * @prop --calcite-dialog-description-text-color: Specifies the text color of the component's `description`.
+ * @prop --calcite-dialog-border-color: Specifies the component's border color.
+ * @prop --calcite-dialog-header-background-color: Specifies the background color of the component's header.
+ * @prop --calcite-dialog-header-action-background-color: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
+ * @prop --calcite-dialog-header-action-background-color-hover: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
+ * @prop --calcite-dialog-header-action-background-color-press: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
+ * @prop --calcite-dialog-header-action-text-color: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
+ * @prop --calcite-dialog-header-action-text-color-press: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered.
+ * @prop --calcite-dialog-footer-background-color: Specifies the background color of the component's footer.
+ * @prop --calcite-dialog-space: Specifies the padding of the component's `"unnamed (default)"` slot.
+ * @prop --calcite-dialog-header-content-space: Specifies the padding of the `"header-content"` slot.
+ * @prop --calcite-dialog-footer-space: Specifies the padding of the component's footer.
+ * @prop --calcite-dialog-action-menu-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.
  */
 
+// AUTO-GENERATED — do not modify. Changes will be overwritten.
+//
+// Internal CSS custom properties for component use only. Overwriting is not recommended.
+//
+// --calcite-internal-dialog-animation-offset
+// --calcite-internal-dialog-content-padding
+// --calcite-internal-dialog-hidden-position
+// --calcite-internal-dialog-min-size-x
+// --calcite-internal-dialog-min-size-y
+// --calcite-internal-dialog-shown-position
+
 :host {
   // the dialog should always use a dark scrim, regardless of light / dark mode - matches value in global.scss
   --calcite-dialog-scrim-background-color: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};
@@ -121,6 +148,19 @@ calcite-panel {
   --calcite-panel-border-color: var(--calcite-dialog-border-color);
   --calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));
   --calcite-panel-icon-color: var(--calcite-dialog-icon-color);
+  --calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);
+  --calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);
+  --calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);
+  --calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);
+  --calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);
+  --calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);
+  --calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);
+  --calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);
+  --calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);
+  --calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));
+  --calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));
+  --calcite-panel-footer-space: var(--calcite-dialog-footer-space);
+  --calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));
 }
 
 :host([kind="brand"]) calcite-panel {
@@ -291,19 +331,19 @@ calcite-panel {
 }
 
 :host([kind="danger"]) .dialog {
-  @apply border-color-danger;
+  border-color: var(--calcite-dialog-accent-color, var(--calcite-color-status-danger));
 }
 
 :host([kind="info"]) .dialog {
-  @apply border-color-info;
+  border-color: var(--calcite-dialog-accent-color, var(--calcite-color-status-info));
 }
 
 :host([kind="success"]) .dialog {
-  @apply border-color-success;
+  border-color: var(--calcite-dialog-accent-color, var(--calcite-color-status-success));
 }
 
 :host([kind="warning"]) .dialog {
-  @apply border-color-warning;
+  border-color: var(--calcite-dialog-accent-color, var(--calcite-color-status-warning));
 }
 
 :host([kind="brand"][open]),

packages/calcite-components/src/custom-theme.stories.ts

@@ -88,6 +88,7 @@ import { shellPanel, shellPanelTokens } from "./custom-theme/shell-panel";
 import { meter, meterTokens } from "./custom-theme/meter";
 import { table, tableTokens } from "./custom-theme/table";
 import { carousel, carouselTokens } from "./custom-theme/carousel";
+import { dialog, dialogTokens } from "./custom-theme/dialog";
 
 const globalTokens = {
   calciteColorBrand: "#007ac2",
@@ -223,6 +224,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     <div class="demo-row">
       <div class="demo-column">${carousel}</div>
     </div>
+    <div class="demo-row">
+      <div class="demo-column">${dialog}</div>
+    </div>
   </div>`;
 
 const componentTokens = {
@@ -290,6 +294,7 @@ const componentTokens = {
   ...stepperTokens,
   ...tableTokens,
   ...carouselTokens,
+  ...dialogTokens,
 };
 
 export default {

packages/calcite-components/src/custom-theme/dialog.ts

@@ -0,0 +1,61 @@
+import { html } from "../../support/formatting";
+
+export const dialogTokens = {
+  calciteDialogScrimBackgroundColor: "",
+  calciteDialogSizeX: "",
+  calciteDialogMinSizeX: "",
+  calciteDialogMaxSizeX: "",
+  calciteDialogSizeY: "",
+  calciteDialogMinSizeY: "",
+  calciteDialogMaxSizeY: "",
+  calciteDialogOffsetX: "",
+  calciteDialogOffsetY: "",
+  calciteDialogBackgroundColor: "",
+  calciteDialogIconColor: "",
+  calciteDialogAccentColor: "",
+  calciteDialogCornerRadius: "",
+  calciteDialogHeadingTextColor: "",
+  calciteDialogDescriptionTextColor: "",
+  calciteDialogBorderColor: "",
+  calciteDialogHeaderBackgroundColor: "",
+  calciteDialogHeaderActionBackgroundColor: "",
+  calciteDialogHeaderActionBackgroundColorHover: "",
+  calciteDialogHeaderActionBackgroundColorPress: "",
+  calciteDialogHeaderActionTextColor: "",
+  calciteDialogHeaderActionTextColorPress: "",
+  calciteDialogFooterBackgroundColor: "",
+  calciteDialogSpace: "",
+  calciteDialogHeaderContentSpace: "",
+  calciteDialogFooterSpace: "",
+  calciteDialogActionMenuBorderColor: "",
+};
+
+export const dialog = html`
+  <calcite-shell style="position:relative; height: 500px; width: 500px">
+    <calcite-dialog
+      heading="Information"
+      description="Themed"
+      kind="info"
+      scale="s"
+      modal
+      open
+      width="s"
+      slot="dialogs"
+    >
+      <calcite-action text="banana" text-enabled icon="banana" slot="header-menu-actions"></calcite-action>
+      <calcite-action text="measure" text-enabled icon="measure" slot="header-menu-actions"></calcite-action>
+      <calcite-action text="Layers" icon="question" slot="header-actions-end"></calcite-action>
+      <div slot="content-top">To continue, you must agree to the terms</div>
+      <calcite-label slot="content-bottom" layout="inline-space-between" style="--calcite-label-margin-bottom: 0">
+        <calcite-checkbox></calcite-checkbox>I agree to the terms
+      </calcite-label>
+      <p>
+        Curabitur mauris quam, tempor sit amet massa sed, mattis blandit diam. Proin dignissim leo vitae quam fringilla
+        viverra. Ut eget gravida magna, et tincidunt dui. Nullam a finibus ante, eu dignissim eros. Aenean sodales
+        sollicitudin dui in fermentum.
+      </p>
+
+      <calcite-button slot="footer-end" width="auto" scale="s">Add members now</calcite-button>
+    </calcite-dialog>
+  </calcite-shell>
+`;