refactor(alert, notice)!: Renamed properties and updated values (#6042)

BREAKING CHANGE: Renamed `color` properties and updated values. - Renamed the property `color`, use `kind` instead. - Updated the accepted values of `kind` to `brand`, `danger`, `info`, `success`, and `warning`.
Esri · Dec 15, 2022 · 132d243 · 132d243
1 parent c90745d
commit 132d243
Show file tree

Hide file tree

Showing 14 changed files with 482 additions and 208 deletions.
diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx
@@ -96,14 +96,14 @@ export const Template = () =>
             </calcite-tree>
           </calcite-accordion-item>
         </calcite-accordion>
-        <calcite-notice color="red" scale="s" open>
+        <calcite-notice kind="danger" scale="s" open>
           <div slot="title">Something failed</div>
           <div slot="message">
             There was an error while performing the task.
           </div>
           <calcite-link slot="link" title="my action">Retry</calcite-link>
         </calcite-notice>
-        <calcite-notice icon color="green" scale="s" open closable>
+        <calcite-notice icon kind="success" scale="s" open closable>
           <div slot="title">Something worked</div>
           <div slot="message">
             That thing you wanted to do worked as expected

diff --git a/src/components/alert/alert.e2e.ts b/src/components/alert/alert.e2e.ts
@@ -38,22 +38,22 @@ describe("calcite-alert", () => {
     const element = await page.find("calcite-alert");
     const close = await page.find("calcite-alert >>> .alert-close");
     const icon = await page.find("calcite-alert >>> .alert-icon");
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(close).not.toBeNull();
     expect(icon).toBeNull();
   });
 
   it("renders requested props when valid props are provided", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <calcite-alert color="yellow" auto-close-duration="fast" auto-close>
+    <calcite-alert kind="warning" auto-close-duration="fast" auto-close>
     ${alertContent}
     </calcite-alert>`);
 
     const element = await page.find("calcite-alert");
     const icon = await page.find("calcite-alert >>> .alert-icon");
 
-    expect(element).toEqualAttribute("color", "yellow");
+    expect(element).toEqualAttribute("kind", "warning");
     expect(element).toEqualAttribute("auto-close-duration", "fast");
     expect(icon).toBeNull();
   });
@@ -80,7 +80,7 @@ describe("calcite-alert", () => {
         <calcite-button id="button-2" onclick="document.querySelector('#alert-2').setAttribute('open', '')"
           >open alert-1</calcite-button
         >
-        <calcite-alert label="this is a success" id="alert-2" scale="s" color="green" auto-close icon>
+        <calcite-alert label="this is a success" id="alert-2" scale="s" kind="success" auto-close icon>
           <div slot="title">Hello there!</div>
           <div slot="message">Get success!</div>
           <calcite-link slot="link" title="my action"> Do thing </calcite-link>
@@ -200,7 +200,7 @@ describe("calcite-alert", () => {
         icon="i2DExplore"
         auto-close
         auto-close-duration="slow"
-        color="red"
+        kind="danger"
         open
       >
         <div slot="message">
@@ -379,7 +379,7 @@ describe("calcite-alert", () => {
           <calcite-button id="button" onclick="document.querySelector('#alert').setAttribute('open', '')"
             >open alert</calcite-button
           >
-          <calcite-alert label="this is a success" id="alert" auto-close icon color="green">
+          <calcite-alert label="this is a success" id="alert" auto-close icon kind="success">
             ${alertContent}</calcite-alert
           >
         </div>

diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
@@ -283,19 +283,19 @@
   @apply flex self-stretch;
 }
 
-$alertColors: "blue" var(--calcite-ui-info), "red" var(--calcite-ui-danger), "yellow" var(--calcite-ui-warning),
-  "green" var(--calcite-ui-success);
+$alertKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "danger" var(--calcite-ui-danger),
+  "success" var(--calcite-ui-success), "warning" var(--calcite-ui-warning);
 
-@each $alertColor in $alertColors {
-  $name: nth($alertColor, 1);
-  $color: nth($alertColor, 2);
+@each $alertKind in $alertKinds {
+  $name: nth($alertKind, 1);
+  $kind: nth($alertKind, 2);
 
-  :host([color="#{$name}"]) {
+  :host([kind="#{$name}"]) {
     .container {
-      border-block-start-color: $color;
+      border-block-start-color: $kind;
 
       & .alert-icon {
-        color: $color;
+        color: $kind;
       }
     }
   }

diff --git a/src/components/alert/alert.stories.ts b/src/components/alert/alert.stories.ts
@@ -23,7 +23,7 @@ auto-close-duration="${select("auto-close-duration", ["fast", "medium", "slow"],
 placement="${select("placement", ["bottom-start", "bottom", "bottom-end", "top-start", "top", "top-end"], "bottom")}"
 ${boolean("open", true)}
 scale="${select("scale", ["s", "m", "l"], "m")}"
-color="${select("color", ["green", "red", "yellow", "blue"], "blue")}">
+kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "brand")}">
 <div slot="title">Here's a general bit of information</div></div>
 <div slot="message">
   Some kind of contextually relevant content
@@ -46,7 +46,7 @@ export const titleMessage = (): string => html`
     )}"
     ${boolean("open", true)}
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+    kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "danger")}"
   >
     <div slot="title">Something failed</div>
     <div slot="message">That thing you wanted to do didn't work as expected</div>
@@ -67,7 +67,7 @@ export const messageLink = (): string => html`
     )}"
     ${boolean("open", true)}
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+    kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "success")}"
   >
     <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
     <calcite-link slot="link" title="my action">View layer</calcite-link>
@@ -88,7 +88,7 @@ export const message = (): string => html`
     )}"
     ${boolean("open", true)}
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "yellow")}"
+    kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "warning")}"
   >
     <div slot="message">Network connection interruption detected</div>
   </calcite-alert>
@@ -106,7 +106,7 @@ export const customIcon = (): string => html`
     )}"
     ${boolean("open", true)}
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "green")}"
+    kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "success")}"
   >
     <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
     <calcite-link slot="link" title="my action">View layer</calcite-link>
@@ -124,26 +124,30 @@ export const queue_NoTest = (): string => html`
     <br />
     <br />
     <h5>Close or remove from queue</h5>
-    <calcite-button color="red" onclick='document.querySelector("#one").removeAttribute("open")'
+    <calcite-button kind="danger" onclick='document.querySelector("#one").removeAttribute("open")'
       >Close Alert 1</calcite-button
     >
-    <calcite-button color="red" onclick='document.querySelector("#two").removeAttribute("open")'
+    <calcite-button kind="danger" onclick='document.querySelector("#two").removeAttribute("open")'
       >Close Alert 2</calcite-button
     >
-    <calcite-button color="red" onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("open")'
+    <calcite-button kind="danger" onclick='document.querySelector("[data-custom-id=my-id]").removeAttribute("open")'
       >Close Alert 3</calcite-button
     >
-    <calcite-alert id="one" icon color="${select("color", ["green", "red", "yellow", "blue"], "green")}">
+    <calcite-alert id="one" icon kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "success")}">
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
       <calcite-link slot="link" title="my action">View layer</calcite-link>
     </calcite-alert>
-    <calcite-alert id="two" icon color="${select("color-2", ["green", "red", "yellow", "blue"], "blue")}">
+    <calcite-alert id="two" icon kind="${select("kind-2", ["brand", "info", "danger", "success", "warning"], "info")}">
       <div slot="title">Your great thing happened</div>
       <div slot="message">Successfully duplicated <strong>2019 Sales Demographics by County</strong> layer</div>
       <calcite-link slot="link" title="my action">View layer</calcite-link>
     </calcite-alert>
-    <calcite-alert data-custom-id="my-id" icon color="${select("color-3", ["green", "red", "yellow", "blue"], "red")}">
+    <calcite-alert
+      data-custom-id="my-id"
+      icon
+      kind="${select("kind-3", ["brand", "info", "danger", "success", "warning"], "danger")}"
+    >
       <div slot="title">That didn't work out</div>
       <div slot="message">That thing you wanted to do didn't work</div>
       <calcite-link slot="link" title="my action">View layer</calcite-link>
@@ -173,7 +177,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
     )}"
     ${boolean("open", true)}
     scale="${select("scale", ["s", "m", "l"], "m")}"
-    color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+    kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "danger")}"
   >
     <div slot="title">Something failed</div>
     <div slot="message">That thing you wanted to do didn't work as expected</div>
@@ -189,7 +193,7 @@ export const actionsEndNoQueue_TestOnly = (): string => html`
       --calcite-duration-factor: 0;
     }
   </style>
-  <calcite-alert label="this is a default danger with icon and link" scale="l" color="red" icon open>
+  <calcite-alert label="this is a default danger with icon and link" scale="l" kind="danger" icon open>
     <div slot="title">Hello there!</div>
     <div slot="message">Do you really want to proceed?</div>
     <calcite-action scale="l" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
@@ -203,13 +207,13 @@ export const actionsEndQueued_TestOnly = (): string => html`
       --calcite-duration-factor: 0;
     }
   </style>
-  <calcite-alert id="one" label="One" scale="l" color="red" icon open>
+  <calcite-alert id="one" label="One" scale="l" kind="danger" icon open>
     <div slot="title">Hello there, alert one!</div>
     <div slot="message">Do you really want to proceed?</div>
     <calcite-action scale="l" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
     <calcite-action scale="l" slot="actions-end" title="Get info" icon="attachment"></calcite-action>
   </calcite-alert>
-  <calcite-alert id="two" label="Two" scale="l" color="red" icon>
+  <calcite-alert id="two" label="Two" scale="l" kind="danger" icon>
     <div slot="title">Hello there, alert two!</div>
     <div slot="message">Do you really want to proceed?</div>
     <calcite-action scale="l" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
@@ -228,7 +232,7 @@ export const autoClosableeRetainsCloseButton_TestOnly = (): string => html`
       --calcite-duration-factor: 0;
     }
   </style>
-  <calcite-alert auto-close auto-close-duration="medium" open scale="m" color="blue">
+  <calcite-alert auto-close auto-close-duration="medium" open scale="m" kind="info">
     <div slot="title">Here's a general bit of information</div>
     <div slot="message">Some kind of contextually relevant content</div>
     <calcite-link slot="link" title="my action" role="presentation"> Take action </calcite-link>

diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
@@ -19,8 +19,9 @@ import {
   slotChangeHasAssignedElement
 } from "../../utils/dom";
 import { CSS, DURATIONS, SLOTS } from "./resources";
-import { Scale } from "../interfaces";
-import { AlertDuration, AlertPlacement, StatusColor, StatusIcons, Sync } from "./interfaces";
+import { Kind, Scale } from "../interfaces";
+import { KindIcons } from "../resources";
+import { AlertDuration, Sync } from "./interfaces";
 import {
   OpenCloseComponent,
   connectOpenCloseComponent,
@@ -46,6 +47,7 @@ import {
   LoadableComponent,
   componentLoaded
 } from "../../utils/loadable";
+import { MenuPlacement } from "../../utils/floating-ui";
 
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
@@ -100,8 +102,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   /** Specifies the duration before the component automatically closes (only use with `autoClose`). */
   @Prop({ reflect: true }) autoCloseDuration: AlertDuration = this.autoClose ? "medium" : null;
 
-  /** Specifies the color for the component (will apply to top border and icon). */
-  @Prop({ reflect: true }) color: StatusColor = "blue";
+  /** Specifies the kind of the component (will apply to top border and icon). */
+  @Prop({ reflect: true }) kind: Kind = "brand";
 
   /**
    * When `true`, shows a default recommended icon. Alternatively,
@@ -118,7 +120,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   @Prop({ reflect: true }) numberingSystem: NumberingSystem;
 
   /** Specifies the placement of the component */
-  @Prop({ reflect: true }) placement: AlertPlacement = "bottom";
+  @Prop({ reflect: true }) placement: MenuPlacement = "bottom";
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
@@ -141,9 +143,9 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   }
 
   @Watch("icon")
-  @Watch("color")
+  @Watch("kind")
   updateRequestedIcon(): void {
-    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
   }
 
   @Watch("autoCloseDuration")
@@ -176,7 +178,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
-    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
     await setUpMessages(this);
   }
 

diff --git a/src/components/alert/interfaces.ts b/src/components/alert/interfaces.ts
@@ -1,12 +1,4 @@
-export type StatusColor = "blue" | "green" | "red" | "yellow";
 export type AlertDuration = "fast" | "medium" | "slow";
-export type AlertPlacement = "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
-export enum StatusIcons {
-  green = "checkCircle",
-  yellow = "exclamationMarkTriangle",
-  red = "exclamationMarkTriangle",
-  blue = "lightbulb"
-}
 export interface Sync {
   queue: HTMLCalciteAlertElement[];
 }
diff --git a/src/components/notice/notice.e2e.ts b/src/components/notice/notice.e2e.ts
@@ -35,23 +35,23 @@ describe("calcite-notice", () => {
     const element = await page.find("calcite-notice");
     const close = await page.find(`calcite-notice >>> .${CSS.close}`);
     const icon = await page.find(`calcite-notice >>> .${CSS.icon}`);
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(close).toBeNull();
     expect(icon).toBeNull();
   });
 
   it("renders requested props when valid props are provided", async () => {
     const page = await newE2EPage();
     await page.setContent(`
-    <calcite-notice color="yellow" closable>
+    <calcite-notice kind="warning" closable>
     ${noticeContent}
     </calcite-notice>`);
 
     const element = await page.find("calcite-notice");
     const close = await page.find(`calcite-notice >>> .${CSS.close}`);
     const icon = await page.find(`calcite-notice >>> .${CSS.icon}`);
 
-    expect(element).toEqualAttribute("color", "yellow");
+    expect(element).toEqualAttribute("kind", "warning");
     expect(close).not.toBeNull();
     expect(icon).toBeNull();
   });

diff --git a/src/components/notice/notice.scss b/src/components/notice/notice.scss
@@ -163,17 +163,17 @@
   @apply flex self-stretch;
 }
 
-$noticeColors: "blue" var(--calcite-ui-brand), "red" var(--calcite-ui-danger), "yellow" var(--calcite-ui-warning),
-  "green" var(--calcite-ui-success);
+$noticeKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "danger" var(--calcite-ui-danger),
+  "success" var(--calcite-ui-success), "warning" var(--calcite-ui-warning);
 
-@each $noticeColor in $noticeColors {
-  $name: nth($noticeColor, 1);
-  $color: nth($noticeColor, 2);
+@each $noticeKind in $noticeKinds {
+  $name: nth($noticeKind, 1);
+  $kind: nth($noticeKind, 2);
 
-  :host([color="#{$name}"]) .container {
-    border-color: $color;
+  :host([kind="#{$name}"]) .container {
+    border-color: $kind;
     & .notice-icon {
-      color: $color;
+      color: $kind;
     }
   }
 }
diff --git a/src/components/notice/notice.stories.ts b/src/components/notice/notice.stories.ts
@@ -20,7 +20,7 @@ export const simple = (): string => html`
       ${boolean("closable", true)}
       scale="${select("scale", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
+      kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "brand")}"
       icon="${select("icon", iconNames, iconNames[0])}"
     >
       <div slot="title">Your settings area has changed</div>
@@ -44,7 +44,7 @@ export const customIcon = (): string => html`
       ${boolean("closable", true)}
       scale="${select("scale", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "blue")}"
+      kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "brand")}"
     >
       <div slot="title">Your settings area has changed</div>
       <div slot="message">Look around and let us know what you think</div>
@@ -61,7 +61,7 @@ export const withAction = (): string => html`
       ${boolean("closable", false)}
       scale="${select("scale", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+      kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "danger")}"
     >
       <div slot="title">Notice with action</div>
       <div slot="message">This shows a notice with a custom action</div>
@@ -85,7 +85,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
       ${boolean("closable", false)}
       scale="${select("scale", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
-      color="${select("color", ["green", "red", "yellow", "blue"], "red")}"
+      kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "danger")}"
     >
       <div slot="title">This is a destructive action</div>
       <div slot="message">Be sure you know what you are doin, folks.</div>