fix: alert component should reference the transparent-tint color for …

…it’s dismiss-progress bg
Esri · Dec 1, 2023 · 20b592e · 20b592e
1 parent 0391c19
commit 20b592e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 26 deletions.
diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -239,8 +239,8 @@ describe("calcite-alert", () => {
       page = await newE2EPage({ html: alertSnippet });
       progressBarStyles = await page.evaluate(() => {
         const alert = document.querySelector("calcite-alert");
-        alert.style.setProperty("--calcite-alert-dismiss-background", "white");
-        return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-background");
+        alert.style.setProperty("--calcite-alert-dismiss-progress-background", "white");
+        return window.getComputedStyle(alert).getPropertyValue("--calcite-alert-dismiss-progress-background");
       });
       expect(progressBarStyles).toEqual("white");
     });
@@ -270,30 +270,15 @@ describe("calcite-alert", () => {
     it("should allow the CSS custom property to be overridden", async () => {
       const overrideStyle = "rgba(255, 0, 0, 0.5)";
       page = await newE2EPage({
-        html: `<calcite-alert
-        style="--calcite-alert-dismiss-background: ${overrideStyle}"
-        icon="i2DExplore"
-        auto-close
-        auto-close-duration="slow"
-        kind="danger"
-        open
-      >
-        <div slot="message">
-          Successfully duplicated
-          <strong>2019 Sales Demographics by County</strong>
-          layer
-        </div>
-        <calcite-link
-          slot="link"
-          title="my action"
-          role="presentation"
-        >
-          View layer
-        </calcite-link>
-      </calcite-alert>`,
+        html: `
+        <style>
+          :root {
+            --calcite-color-transparent-tint: ${overrideStyle};
+          }
+        </style>
+        <div>${alertSnippet}</div>`,
       });
       await page.waitForTimeout(animationDurationInMs);
-
       alertDismissProgressBar = await page.find(`calcite-alert[open] >>> .${CSS.dismissProgress}`);
       progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
       expect(await progressBarStyles.getPropertyValue("background-color")).toEqual(overrideStyle);

diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
@@ -10,7 +10,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
 
 :host {
   --calcite-alert-edge-distance: theme("spacing.8");
-  --calcite-alert-dismiss-background: #rgba(var(--calcite-color-foreground-1), 0.8);
+  --calcite-alert-dismiss-progress-background: var(--calcite-color-transparent-tint);
   @apply block;
 }
 
@@ -130,7 +130,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
     block;
     block-size: 2px;
     content: "";
-    background-color: var(--calcite-alert-dismiss-background);
+    background-color: var(--calcite-alert-dismiss-progress-background);
     inset-inline-end: 0;
   }
 }