feat(alert): add component tokens (#10218)

**Related Issue:** [#7180](#7180) ## Summary Add `alert` component tokens. `--calcite-alert-background-color`: Specifies the component's background color. `--calcite-alert-corner-radius`: Specifies the component's border radius. `--calcite-alert-shadow`: Specifies the component's shadow.
Esri · Sep 24, 2024 · 550427b · 550427b
1 parent 99a7148
commit 550427b
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 59 deletions.
diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -2,7 +2,7 @@ import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import { accessible, defaults, hidden, HYDRATED_ATTR, reflects, renders, t9n } from "../../tests/commonTests";
 import { getElementXY, skipAnimations } from "../../tests/utils";
-import { openClose } from "../../tests/commonTests";
+import { openClose, themed } from "../../tests/commonTests";
 import { CSS, DURATIONS } from "./resources";
 import { alertQueueTimeoutMs } from "./AlertManager";
 
@@ -346,17 +346,6 @@ describe("calcite-alert", () => {
     let alertDismissProgressBar;
     let progressBarStyles;
 
-    it("should have defined CSS custom properties", async () => {
-      page = await newE2EPage();
-      await page.setContent(alertSnippet);
-      progressBarStyles = await page.evaluate(() => {
-        const alert = document.querySelector("calcite-alert");
-        alert.style.setProperty("--calcite-alert-dismiss-progress-background", "white");
-        return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-progress-background");
-      });
-      expect(progressBarStyles).toEqual("white");
-    });
-
     describe("when mode attribute is not provided", () => {
       it("should render alert dismiss progress bar with default value tied to light mode", async () => {
         page = await newE2EPage();
@@ -594,4 +583,25 @@ describe("calcite-alert", () => {
   describe("translation support", () => {
     t9n("calcite-alert");
   });
+
+  describe("theme", () => {
+    themed(html`<calcite-alert label="this is a default alert"> </calcite-alert>`, {
+      "--calcite-alert-width": {
+        selector: `calcite-alert`,
+        targetProp: "inlineSize",
+      },
+      "--calcite-alert-background-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-alert-corner-radius": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "borderRadius",
+      },
+      "--calcite-alert-shadow": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "boxShadow",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
@@ -4,19 +4,22 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-alert-width: Specifies the width of the component.
+ * @prop --calcite-alert-background-color: Specifies the component's background color.
+ * @prop --calcite-alert-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-alert-shadow: Specifies the component's shadow.
  */
 
 $border-style: 1px solid var(--calcite-color-border-3);
 
 :host {
-  --calcite-alert-edge-distance: theme("spacing.8");
-  --calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);
+  --calcite-internal-alert-edge-distance: theme("spacing.8");
   @apply block;
+
+  inline-size: var(--calcite-alert-width);
 }
 
 .container {
-  @apply bg-foreground-1
-  box-border
+  @apply box-border
   fixed
   flex
   items-center
@@ -26,17 +29,22 @@ $border-style: 1px solid var(--calcite-color-border-3);
   my-0
   opacity-0
   pointer-events-none
-  shadow-2
   text-start
   w-full
   z-toast;
 
-  border-radius: var(--calcite-border-radius);
+  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
+  box-shadow: var(
+    --calcite-alert-shadow,
+    (var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow))
+  );
+  background-color: var(--calcite-alert-background-color, var(--calcite-color-foreground-1));
+  border-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
   border-block-start: 0 solid transparent;
   border-inline: $border-style;
   border-block-end: $border-style;
-  inline-size: var(--calcite-alert-width);
-  max-inline-size: calc(100% - (var(--calcite-alert-edge-distance) * 2));
+  max-inline-size: calc(100% - (var(--calcite-internal-alert-edge-distance) * 2));
   transition:
     opacity var(--calcite-internal-animation-timing-slow) $easing-function,
     all var(--calcite-animation-timing) ease-in-out;
@@ -47,19 +55,19 @@ $border-style: 1px solid var(--calcite-color-border-3);
     inset-inline-start: 0;
   }
   &[class*="bottom"] {
-    transform: translate3d(0, var(--calcite-alert-edge-distance), 0);
-    inset-block-end: var(--calcite-alert-edge-distance);
+    transform: translate3d(0, var(--calcite-internal-alert-edge-distance), 0);
+    inset-block-end: var(--calcite-internal-alert-edge-distance);
   }
   &[class*="top"] {
-    transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);
-    inset-block-start: var(--calcite-alert-edge-distance);
+    transform: translate3d(0, calc(-1 * var(--calcite-internal-alert-edge-distance)), 0);
+    inset-block-start: var(--calcite-internal-alert-edge-distance);
   }
   &[class*="start"] {
-    inset-inline-start: var(--calcite-alert-edge-distance);
+    inset-inline-start: var(--calcite-internal-alert-edge-distance);
     inset-inline-end: auto;
   }
   &[class*="end"] {
-    inset-inline-end: var(--calcite-alert-edge-distance);
+    inset-inline-end: var(--calcite-internal-alert-edge-distance);
     inset-inline-start: auto;
   }
 }
@@ -68,13 +76,11 @@ $border-style: 1px solid var(--calcite-color-border-3);
   @apply flex flex-col items-center justify-center p-0;
   margin-block: auto;
   margin-inline-end: auto;
-  padding-inline-start: var(--calcite-alert-spacing-token-large);
 }
 
 .close {
   @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
-  padding: var(--calcite-alert-spacing-token-large);
 
   @apply focus-base;
   &:focus {
@@ -83,11 +89,12 @@ $border-style: 1px solid var(--calcite-color-border-3);
 
   &:hover,
   &:focus {
-    @apply bg-foreground-2 text-color-1;
+    @apply text-color-1;
+    background-color: var(--calcite-color-foreground-2);
   }
 
   &:active {
-    @apply bg-foreground-3;
+    background-color: var(--calcite-color-foreground-3);
   }
 }
 
@@ -129,7 +136,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
     block;
     block-size: 2px;
     content: "";
-    background-color: var(--calcite-alert-dismiss-progress-background);
+    background-color: var(--calcite-color-transparent-tint);
     inset-inline-end: 0;
   }
 }
@@ -140,8 +147,6 @@ $border-style: 1px solid var(--calcite-color-border-3);
 
 .text-container {
   @apply box-border flex flex-auto min-w-0 flex-col break-words;
-  padding-block: var(--calcite-alert-spacing-token-small);
-  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
 }
 
 .footer {
@@ -151,12 +156,6 @@ $border-style: 1px solid var(--calcite-color-border-3);
 
 // scale variables
 :host([scale="s"]) {
-  --calcite-alert-width: 40em;
-  --calcite-alert-spacing-token-small: theme("spacing.2");
-  --calcite-alert-spacing-token-large: theme("spacing.3");
-  --calcite-alert-footer-height: theme("height.8");
-  --calcite-alert-footer-divider-gap: theme("spacing[0.5]");
-
   @include slotted("title", "*") {
     @apply text-n1-wrap;
   }
@@ -170,17 +169,22 @@ $border-style: 1px solid var(--calcite-color-border-3);
     @apply mx-2;
   }
   .container {
-    --calcite-alert-min-height: 3.5rem;
+    --calcite-internal-alert-min-height: 3.5rem;
+    inline-size: var(--calcite-alert-width, 40em);
+  }
+  .close {
+    padding: theme("spacing.3");
+  }
+  .icon {
+    padding-inline-start: theme("spacing.3");
+  }
+  .text-container {
+    padding-block: theme("spacing.2");
+    padding-inline: theme("spacing.3") theme("spacing.2");
   }
 }
 
 :host([scale="m"]) {
-  --calcite-alert-width: 50em;
-  --calcite-alert-spacing-token-small: theme("spacing.3");
-  --calcite-alert-spacing-token-large: theme("spacing.4");
-  --calcite-alert-footer-height: theme("height.12");
-  --calcite-alert-footer-divider-gap: theme("spacing.1");
-
   @include slotted("title", "*") {
     @apply text-0-wrap;
   }
@@ -194,17 +198,22 @@ $border-style: 1px solid var(--calcite-color-border-3);
     @apply mx-3;
   }
   .container {
-    --calcite-alert-min-height: 4.1875rem;
+    --calcite-internal-alert-min-height: 4.1875rem;
+    inline-size: var(--calcite-alert-width, 50em);
+  }
+  .close {
+    padding: theme("spacing.4");
+  }
+  .icon {
+    padding-inline-start: theme("spacing.4");
+  }
+  .text-container {
+    padding-block: theme("spacing.3");
+    padding-inline: theme("spacing.4") theme("spacing.3");
   }
 }
 
 :host([scale="l"]) {
-  --calcite-alert-width: 60em;
-  --calcite-alert-spacing-token-small: theme("spacing.4");
-  --calcite-alert-spacing-token-large: theme("spacing.5");
-  --calcite-alert-footer-height: theme("height.16");
-  --calcite-alert-footer-divider-gap: theme("spacing.2");
-
   @include slotted("title", "*") {
     @apply text-1-wrap mb-1;
   }
@@ -218,7 +227,18 @@ $border-style: 1px solid var(--calcite-color-border-3);
     @apply mx-4;
   }
   .container {
-    --calcite-alert-min-height: 5.625rem;
+    --calcite-internal-alert-min-height: 5.625rem;
+    inline-size: var(--calcite-alert-width, 60em);
+  }
+  .close {
+    padding: theme("spacing.5");
+  }
+  .icon {
+    padding-inline-start: theme("spacing.5");
+  }
+  .text-container {
+    padding-block: theme("spacing.4");
+    padding-inline: theme("spacing.5") theme("spacing.4");
   }
 }
 
@@ -227,10 +247,10 @@ $border-style: 1px solid var(--calcite-color-border-3);
     @apply border-t-2 opacity-100;
     pointer-events: initial;
     &[class*="bottom"] {
-      transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);
+      transform: translate3d(0, calc(-1 * var(--calcite-internal-alert-edge-distance)), inherit);
     }
     &[class*="top"] {
-      transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);
+      transform: translate3d(0, var(--calcite-internal-alert-edge-distance), inherit);
     }
   }
 }
@@ -241,17 +261,18 @@ $border-style: 1px solid var(--calcite-color-border-3);
 
 @include slotted("title", "*") {
   @apply text-0-wrap
-    text-color-1
     font-medium;
+
+  color: var(--calcite-color-text-1);
 }
 
 @include slotted("message", "*") {
   @apply text-n1-wrap
-    text-color-2
     m-0
     inline
     font-normal;
   margin-inline-end: theme("margin.2");
+  color: var(--calcite-color-text-2);
 }
 
 @include slotted("link", "*") {

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -10,8 +10,9 @@ import {
   actionPadTokens,
   actionGroupTokens,
 } from "./custom-theme/action";
-import { accordion, accordionTokens } from "./custom-theme/accordion";
+import { alertTokens, alert } from "./custom-theme/alert";
 import { accordionItemTokens } from "./custom-theme/accordion-item";
+import { accordion, accordionTokens } from "./custom-theme/accordion";
 import { buttons } from "./custom-theme/button";
 import { calciteSwitch } from "./custom-theme/switch";
 import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
@@ -115,6 +116,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           ${chips} ${pagination} ${slider}
         </div>
         <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}</div>
+        ${alert}
       </div>
     </div>
   </div>`;
@@ -132,6 +134,7 @@ export default {
     ...actionPadTokens,
     ...avatarTokens,
     ...cardTokens,
+    ...alertTokens,
     ...chipTokens,
     ...checkboxTokens,
     ...handleTokens,
@@ -158,6 +161,7 @@ export const theming = (): string => {
       ...actionPadTokens,
       ...avatarTokens,
       ...cardTokens,
+      ...alertTokens,
       ...chipTokens,
       ...checkboxTokens,
       ...handleTokens,

diff --git a/packages/calcite-components/src/custom-theme/alert.ts b/packages/calcite-components/src/custom-theme/alert.ts
@@ -0,0 +1,14 @@
+import { html } from "../../support/formatting";
+import { SLOTS } from "../components/alert/resources";
+
+export const alertTokens = {
+  calciteAlertWidth: "",
+  calciteAlertBackgroundColor: "",
+  calciteAlertCornerRadius: "",
+  calciteAlertShadow: "",
+};
+
+export const alert = html`<calcite-alert label="this is a default alert" scale="s" open>
+  <div slot="${SLOTS.title}">Test title</div>
+  <div slot="${SLOTS.message}">Test message</div>
+</calcite-alert>`;