feat(notice): add component tokens (#11042)

**Related Issue:** #7180 ## Summary Adds the following subcomponent tokens (CSS props): - `--calcite-notice-background-color` - `--calcite-notice-close-background-color-focus` - `--calcite-notice-close-background-color-press` - `--calcite-notice-close-text-color-hover` - `--calcite-notice-close-text-color` - `--calcite-notice-content-text-color`
Esri · Jan 4, 2025 · a61c15a · a61c15a
1 parent dc55d75
commit a61c15a
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 27 deletions.
diff --git a/packages/calcite-components/src/components/notice/notice.e2e.ts b/packages/calcite-components/src/components/notice/notice.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it } from "vitest";
-import { accessible, focusable, renders, slots, hidden, t9n } from "../../tests/commonTests";
+import { accessible, focusable, renders, slots, hidden, themed, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
@@ -129,4 +129,57 @@ describe("calcite-notice", () => {
   describe("translation support", () => {
     t9n("calcite-notice");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-notice kind="danger" open closable>
+            <div slot="title">Title</div>
+            <div slot="message">Message</div>
+            <calcite-link slot="link" title="my action">Retry</calcite-link>
+          </calcite-notice>
+        `,
+        {
+          "--calcite-notice-background-color": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-notice-close-text-color": {
+            shadowSelector: `.${CSS.close}`,
+            targetProp: "color",
+          },
+          "--calcite-notice-close-text-color-hover": [
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "color",
+              state: "focus",
+            },
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "color",
+              state: "hover",
+            },
+          ],
+          "--calcite-notice-close-background-color-focus": [
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "backgroundColor",
+              state: "focus",
+            },
+            {
+              shadowSelector: `.${CSS.close}`,
+              targetProp: "backgroundColor",
+              state: "hover",
+            },
+          ],
+          "--calcite-notice-close-background-color-press": {
+            shadowSelector: `.${CSS.close}`,
+            targetProp: "backgroundColor",
+            state: { press: { attribute: "class", value: CSS.close } },
+          },
+        },
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/notice/notice.scss b/packages/calcite-components/src/components/notice/notice.scss
@@ -3,7 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-notice-width: The width of the component.
+ * @prop --calcite-notice-background-color: Specifies the background color of the component.
+ * @prop --calcite-notice-close-background-color-focus: Specifies the background color of the component when focused.
+ * @prop --calcite-notice-close-background-color-press: Specifies the background color of the component when active.
+ * @prop --calcite-notice-close-text-color-hover: Specifies the background color of component's close button when hovered.
+ * @prop --calcite-notice-close-text-color: Specifies the text color of component's close button.
+ * @prop --calcite-notice-content-text-color: Specifies the content text color of the component.
+ * @prop --calcite-notice-width: Specifies the width of the component.
  */
 
 // scale variables
@@ -71,20 +77,21 @@
 }
 
 .container {
-  @apply bg-foreground-1
-    pointer-events-none
+  @apply pointer-events-none
     my-0
     box-border
     flex
     w-full
     opacity-0;
+
   overflow: hidden;
   max-block-size: 0;
   transition-property: opacity, max-block-size;
   transition-duration: var(--calcite-animation-timing);
   text-align: start;
   border-inline-start: var(--calcite-border-width-md) solid;
   box-shadow: 0 0 0 0 transparent;
+  background-color: var(--calcite-notice-background-color, var(--calcite-color-foreground-1));
 }
 
 // focus styles
@@ -109,12 +116,16 @@
 }
 
 @include slotted("title", "*", ".container") {
-  @apply text-color-1 m-0 font-medium;
+  @apply m-0 font-medium;
+
+  color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
 }
 
 @include slotted("message", "*", ".container") {
-  @apply text-color-2 m-0 inline font-normal;
+  @apply m-0 inline font-normal;
+
   margin-inline-end: var(--calcite-notice-spacing-token-small);
+  color: var(--calcite-notice-content-text-color, var(--calcite-color-text-2));
 }
 
 @mixin notice-element-base() {
@@ -146,17 +157,20 @@
 }
 
 .notice-close {
-  @apply text-color-3 flex cursor-pointer items-center self-stretch border-none bg-transparent outline-none;
+  @apply flex cursor-pointer items-center self-stretch border-none bg-transparent outline-none;
   @include notice-element-base;
   -webkit-appearance: none;
 
+  color: var(--calcite-notice-close-text-color, var(--calcite-color-text-3));
+
   &:hover,
   &:focus {
-    @apply bg-foreground-2 text-color-1;
+    background-color: var(--calcite-notice-close-background-color-focus, var(--calcite-color-foreground-2));
+    color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
   }
 
   &:active {
-    @apply bg-foreground-3;
+    background-color: var(--calcite-notice-close-background-color-press, var(--calcite-color-foreground-3));
   }
 }
 

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -33,7 +33,7 @@ import { label, labelTokens } from "./custom-theme/label";
 import { link, linkTokens } from "./custom-theme/link";
 import { list, listTokens } from "./custom-theme/list";
 import { loader, loaderTokens } from "./custom-theme/loader";
-import { notices } from "./custom-theme/notice";
+import { notice, noticeTokens } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
 import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
@@ -113,7 +113,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
     </style>
     <div class="demo">
       <div class="demo-column">
-        ${accordion} ${actionBar} ${autocomplete} ${notices} ${segmentedControl}
+        ${accordion} ${actionBar} ${autocomplete} ${notice} ${segmentedControl}
         <div style="display: flex">
           ${actionPad}
           <div style="width: 40px; height: 40px;">${actionMenu}</div>
@@ -164,6 +164,7 @@ const componentTokens = {
   ...navigationLogoTokens,
   ...navigationTokens,
   ...navigationUserTokens,
+  ...noticeTokens,
   ...popoverTokens,
   ...progressTokens,
   ...sliderTokens,

diff --git a/packages/calcite-components/src/custom-theme/notice.ts b/packages/calcite-components/src/custom-theme/notice.ts
@@ -1,19 +1,15 @@
 import { html } from "../../support/formatting";
 
-export const notice = ({ kind, message, title }: { kind: string; message: string; title: string }): string =>
-  html`<calcite-notice kind=${kind} scale="s" open closable>
-    <div slot="title">${title}</div>
-    <div slot="message">${message}</div>
-    ${kind === "danger" ? html`<calcite-link slot="link" title="my action">Retry</calcite-link>` : null}
-  </calcite-notice>`;
+export const noticeTokens = {
+  calciteNoticeBackgroundColor: "",
+  calciteNoticeCloseBackgroundColorFocus: "",
+  calciteNoticeCloseBackgroundColorPress: "",
+  calciteNoticeCloseTextColorHover: "",
+  calciteNoticeCloseTextColor: "",
+  calciteNoticeContentTextColor: "",
+};
 
-export const notices = html`${notice({
-  kind: "danger",
-  message: "There was an error while performing the task.",
-  title: "Something failed",
-})}
-${notice({
-  kind: "success",
-  message: "That thing you wanted to do worked as expected",
-  title: "Something worked",
-})}`;
+export const notice = html`<calcite-notice kind="success" scale="s" open closable>
+  <div slot="title">Something worked</div>
+  <div slot="message">That thing you wanted to do worked as expected</div>
+</calcite-notice>`;