From 15a86ff160bd613148c913ad5e6dcf686212bb0e Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 14 Dec 2022 15:19:36 -0800 Subject: [PATCH 1/4] refactor(alert, notice)!: Renamed properties and updated values BREAKING CHANGE: Renamed `color` properties and updated values. - Removed the property `color`, use `kind` instead. - Updated the accepted values for `kind` to `brand`, `danger`, `info`, `success`, and `warning`. --- src/components/alert/alert.e2e.ts | 12 +- src/components/alert/alert.scss | 16 +- src/components/alert/alert.stories.ts | 36 +- src/components/alert/alert.tsx | 17 +- src/components/alert/interfaces.ts | 8 - src/components/interfaces.ts | 9 + src/components/notice/notice.e2e.ts | 6 +- src/components/notice/notice.scss | 16 +- src/components/notice/notice.stories.ts | 8 +- src/components/notice/notice.tsx | 13 +- src/demos/alert.html | 419 +++++++++++++++++++----- src/demos/notice.html | 124 +++---- 12 files changed, 479 insertions(+), 205 deletions(-) diff --git a/src/components/alert/alert.e2e.ts b/src/components/alert/alert.e2e.ts index 440fdb3920e..c0a0adc2c5a 100644 --- a/src/components/alert/alert.e2e.ts +++ b/src/components/alert/alert.e2e.ts @@ -38,7 +38,7 @@ 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(); }); @@ -46,14 +46,14 @@ describe("calcite-alert", () => { it("renders requested props when valid props are provided", async () => { const page = await newE2EPage(); await page.setContent(` - + ${alertContent} `); 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", () => { open alert-1 - +
Hello there!
Get success!
Do thing @@ -200,7 +200,7 @@ describe("calcite-alert", () => { icon="i2DExplore" auto-close auto-close-duration="slow" - color="red" + kind="danger" open >
@@ -379,7 +379,7 @@ describe("calcite-alert", () => { open alert - + ${alertContent}
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 6931251f01a..fcf7d74fc38 100644 --- 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 index 3230b97a415..ea094035133 100644 --- 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")}">
Here's a general bit of information
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")}" >
Something failed
That thing you wanted to do didn't work as expected
@@ -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")}" >
Successfully duplicated 2019 Sales Demographics by County layer
View layer @@ -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")}" >
Network connection interruption detected
@@ -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")}" >
Successfully duplicated 2019 Sales Demographics by County layer
View layer @@ -124,26 +124,30 @@ export const queue_NoTest = (): string => html`

Close or remove from queue
- Close Alert 1 - Close Alert 2 - Close Alert 3 - +
Your great thing happened
Successfully duplicated 2019 Sales Demographics by County layer
View layer - +
Your great thing happened
Successfully duplicated 2019 Sales Demographics by County layer
View layer - +
That didn't work out
That thing you wanted to do didn't work
View layer @@ -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"], "red")}" >
Something failed
That thing you wanted to do didn't work as expected
@@ -189,7 +193,7 @@ export const actionsEndNoQueue_TestOnly = (): string => html` --calcite-duration-factor: 0; } - +
Hello there!
Do you really want to proceed?
@@ -203,13 +207,13 @@ export const actionsEndQueued_TestOnly = (): string => html` --calcite-duration-factor: 0; } - +
Hello there, alert one!
Do you really want to proceed?
 - +
Hello there, alert two!
Do you really want to proceed?
@@ -228,7 +232,7 @@ export const autoClosableeRetainsCloseButton_TestOnly = (): string => html` --calcite-duration-factor: 0; } - +
Here's a general bit of information
Some kind of contextually relevant content
Take action diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index 5145d146943..fac870d0f78 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -19,8 +19,8 @@ import { slotChangeHasAssignedElement } from "../../utils/dom"; import { CSS, DURATIONS, SLOTS, TEXT } from "./resources"; -import { Scale } from "../interfaces"; -import { AlertDuration, AlertPlacement, StatusColor, StatusIcons, Sync } from "./interfaces"; +import { Kind, KindIcons, Scale } from "../interfaces"; +import { AlertDuration, Sync } from "./interfaces"; import { OpenCloseComponent, connectOpenCloseComponent, @@ -39,6 +39,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 @@ -92,8 +93,8 @@ export class Alert implements OpenCloseComponent, LocalizedComponent, LoadableCo /** 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, @@ -117,15 +118,15 @@ export class Alert implements OpenCloseComponent, LocalizedComponent, LoadableCo @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"; @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") @@ -157,7 +158,7 @@ export class Alert implements OpenCloseComponent, LocalizedComponent, LoadableCo componentWillLoad(): void { setUpLoadableComponent(this); - this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color); + this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind); } componentDidLoad(): void { diff --git a/src/components/alert/interfaces.ts b/src/components/alert/interfaces.ts index 6f2d01f4d8a..0ffe0b27966 100644 --- 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/interfaces.ts b/src/components/interfaces.ts index 0d612d648c0..7918382402f 100644 --- a/src/components/interfaces.ts +++ b/src/components/interfaces.ts @@ -4,6 +4,7 @@ export type Alignment = "start" | "center" | "end"; export type Appearance = "solid" | "clear" | "outline" | "transparent" | "minimal"; export type Columns = 1 | 2 | 3 | 4 | 5 | 6; export type FlipContext = "both" | "start" | "end"; +export type Kind = "brand" | "danger" | "info" | "warning" | "success"; export type Layout = "horizontal" | "vertical" | "grid"; export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end"; export type Position = "start" | "end"; @@ -16,3 +17,11 @@ export type Width = "auto" | "half" | "full"; // used to help track of event payloads to remove at 1.0.0 – see https://github.com/Esri/calcite-components/issues/3781 /* Note : should be removed before `1.0 */ export type DeprecatedEventPayload = any; + +export enum KindIcons { + brand = "lightbulb", + danger = "exclamationMarkTriangle", + info = "information", + success = "checkCircle", + warning = "exclamationMarkTriangle" +} diff --git a/src/components/notice/notice.e2e.ts b/src/components/notice/notice.e2e.ts index e25553e8ee6..323a6de3b83 100644 --- a/src/components/notice/notice.e2e.ts +++ b/src/components/notice/notice.e2e.ts @@ -35,7 +35,7 @@ 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(); }); @@ -43,7 +43,7 @@ describe("calcite-notice", () => { it("renders requested props when valid props are provided", async () => { const page = await newE2EPage(); await page.setContent(` - + ${noticeContent} `); @@ -51,7 +51,7 @@ describe("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 index 425591e2436..b18760c3164 100644 --- 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 index f646e733747..dc3d35cf4c8 100644 --- 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])}" >
Your settings area has changed
@@ -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")}" >
Your settings area has changed
Look around and let us know what you think
@@ -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")}" >
Notice with action
This shows a notice with a custom action
@@ -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")}" >
This is a destructive action
Be sure you know what you are doin, folks.
diff --git a/src/components/notice/notice.tsx b/src/components/notice/notice.tsx index 86c170f25ff..c4228459d87 100644 --- a/src/components/notice/notice.tsx +++ b/src/components/notice/notice.tsx @@ -11,8 +11,7 @@ import { } from "@stencil/core"; import { CSS, SLOTS, TEXT } from "./resources"; -import { Scale, Width } from "../interfaces"; -import { StatusColor, StatusIcons } from "../alert/interfaces"; +import { Kind, KindIcons, Scale, Width } from "../interfaces"; import { getSlotted, setRequestedIcon } from "../../utils/dom"; import { ConditionalSlotComponent, @@ -80,8 +79,8 @@ export class Notice implements ConditionalSlotComponent, LoadableComponent { this.active = value; } - /** The color for the component's 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`, a close button is added to the component. @@ -122,9 +121,9 @@ export class Notice implements ConditionalSlotComponent, LoadableComponent { @Prop({ reflect: true }) width: Width = "auto"; @Watch("icon") - @Watch("color") + @Watch("kind") updateRequestedIcon(): void { - this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color); + this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind); } //-------------------------------------------------------------------------- @@ -155,7 +154,7 @@ export class Notice implements ConditionalSlotComponent, LoadableComponent { componentWillLoad(): void { setUpLoadableComponent(this); - this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color); + this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind); } componentDidLoad(): void { diff --git a/src/demos/alert.html b/src/demos/alert.html index 7223b8b19c2..d1b79b5a210 100644 --- a/src/demos/alert.html +++ b/src/demos/alert.html @@ -21,6 +21,7 @@ .small, .medium, .large, + .brand, .info, .success, .warning, @@ -43,6 +44,7 @@ grid-template-columns: repeat(2, 1fr); } + .brand, .info, .success, .warning, @@ -74,7 +76,7 @@ // example for alerts appended to dom function createExampleAlert(id) { const exampleAlert = [ - "", + "", "
Something failed
", "
" + id + " That thing you wanted to do didn't work as expected
", "Take action", @@ -106,9 +108,9 @@

Alert

Small
- -
-
Info
+ +
+
Brand
Alert
+ +
+
Info
+ +
+ + Default + +
+ +
+ + autoclose + +
+ +
+ + Default, icon + +
+ +
+ + Default, icon, link + +
+
+
Success
@@ -173,7 +224,7 @@

Alert

@@ -184,7 +235,7 @@

Alert

@@ -195,7 +246,7 @@

Alert

@@ -222,7 +273,7 @@

Alert

@@ -233,7 +284,7 @@

Alert

@@ -244,7 +295,7 @@

Alert

@@ -271,7 +322,7 @@

Alert

@@ -282,7 +333,7 @@

Alert

@@ -293,7 +344,7 @@

Alert

@@ -312,6 +363,55 @@

Alert

Medium
+ +
+
Brand
+ +
+ + Default + +
+ +
+ + autoclose + +
+ +
+ + Default, icon + +
+ +
+ + Default, icon, link + +
+
+
Info
@@ -321,7 +421,7 @@

Alert

appearance="clear" title="medium default" scale="s" - onclick="document.querySelector('#default-m').setAttribute('open', '')" + onclick="document.querySelector('#default-m-info').setAttribute('open', '')" > Default @@ -332,7 +432,7 @@

Alert

appearance="clear" title="default, medium, autoclose, icon, title" scale="s" - onclick="document.querySelector('#default-m-autoclose').setAttribute('open', '')" + onclick="document.querySelector('#default-m-info-autoclose').setAttribute('open', '')" > autoclose @@ -343,7 +443,7 @@

Alert

appearance="clear" title="default, medium, default, icon, title" scale="s" - onclick="document.querySelector('#default-m-icon').setAttribute('open', '')" + onclick="document.querySelector('#default-m-info-icon').setAttribute('open', '')" > Default, icon @@ -354,7 +454,7 @@

Alert

appearance="clear" title="default, medium, autoclose, icon, title" scale="s" - onclick="document.querySelector('#default-m-icon-link').setAttribute('open', '')" + onclick="document.querySelector('#default-m-info-icon-link').setAttribute('open', '')" > Default, icon, link @@ -379,7 +479,7 @@

Alert

@@ -390,7 +490,7 @@

Alert

@@ -401,7 +501,7 @@

Alert

@@ -428,7 +528,7 @@

Alert

@@ -439,7 +539,7 @@

Alert

@@ -450,7 +550,7 @@

Alert

@@ -477,7 +577,7 @@

Alert

@@ -488,7 +588,7 @@

Alert

@@ -499,7 +599,7 @@

Alert

@@ -518,6 +618,55 @@

Alert

Large
+ +
+
Brand
+ +
+ + Default + +
+ +
+ + autoclose + +
+ +
+ + Default, icon + +
+ +
+ + Default, icon, link + +
+
+
Info
@@ -527,7 +676,7 @@

Alert

appearance="clear" title="large default" scale="s" - onclick="document.querySelector('#default-l').setAttribute('open', '')" + onclick="document.querySelector('#default-l-info').setAttribute('open', '')" > Default @@ -538,7 +687,7 @@

Alert

appearance="clear" title="default, large, autoclose, icon, title" scale="s" - onclick="document.querySelector('#default-l-autoclose').setAttribute('open', '')" + onclick="document.querySelector('#default-l-info-autoclose').setAttribute('open', '')" > autoclose @@ -549,7 +698,7 @@

Alert

appearance="clear" title="default, large, default, icon, title" scale="s" - onclick="document.querySelector('#default-l-icon').setAttribute('open', '')" + onclick="document.querySelector('#default-l-info-icon').setAttribute('open', '')" > Default, icon @@ -560,7 +709,7 @@

Alert

appearance="clear" title="default, large, autoclose, icon, title" scale="s" - onclick="document.querySelector('#default-l-icon-link').setAttribute('open', '')" + onclick="document.querySelector('#default-l-info-icon-link').setAttribute('open', '')" > Default, icon, link @@ -585,7 +734,7 @@

Alert

@@ -596,7 +745,7 @@

Alert

@@ -607,7 +756,7 @@

Alert

@@ -634,7 +783,7 @@

Alert

@@ -645,7 +794,7 @@

Alert

@@ -656,7 +805,7 @@

Alert

@@ -683,7 +832,7 @@

Alert

@@ -694,7 +843,7 @@

Alert

@@ -705,7 +854,7 @@

Alert

@@ -725,7 +874,7 @@

Alert

Alert * SMALL SCALE ****************************************************************************************************** --> - +
Hello there!
@@ -861,9 +1010,40 @@

Alert
+ +
+ +
Hello there!
+
This is an alert with a general piece of information. Cool, innit?
+ + + +
Hello there!
+
This is an auto-close message
+ Do thing + + + +
Hello there!
+
This is a default alert message with an alert.
+ + + +
Hello there!
+
This is a default alert message with an an icon and link.
+ Do thing + +
+
- +
Hello there!
Success, let's goo!!
 @@ -872,7 +1052,7 @@

Alert

label="this is a success" id="default-s-success-autoclose" scale="s" - color="green" + kind="success" auto-close icon > @@ -885,7 +1065,7 @@

Alert

label="this is a default success with icon" id="default-s-success-icon" scale="s" - color="green" + kind="success" icon >
Hello there!
@@ -896,7 +1076,7 @@

Alert

label="this is a default success with icon and link" id="default-s-success-icon-link" scale="s" - color="green" + kind="success" icon >
Hello there!
@@ -907,7 +1087,7 @@

Alert

- +
Hello there!
This is a warning!
 @@ -916,7 +1096,7 @@

Alert

label="this is a warning" id="default-s-warning-autoclose" scale="s" - color="yellow" + kind="warning" auto-close icon > @@ -929,7 +1109,7 @@

Alert

label="this is a default warning with icon" id="default-s-warning-icon" scale="s" - color="yellow" + kind="warning" icon >
Hello there!
@@ -940,7 +1120,7 @@

Alert

label="this is a default warning with icon and link" id="default-s-warning-icon-link" scale="s" - color="yellow" + kind="warning" icon >
Hello there!
@@ -951,18 +1131,24 @@

Alert

- +
Hello there!
This is a danger area.
 - +
Hello there!
You can not enter here.
Do thing - +
Hello there!
Access denied.
 @@ -971,7 +1157,7 @@

Alert

label="this is a default danger with icon and link" id="default-s-danger-icon-link" scale="s" - color="red" + kind="danger" icon >
Hello there!
@@ -985,7 +1171,7 @@

Alert

* MEDIUM SCALE ****************************************************** --> - +
Hello there!
@@ -1010,9 +1196,40 @@

Alert
+ +
+ +
Hello there!
+
This is an alert with a general piece of information. Cool, innit?
+ + + +
Hello there!
+
This is an auto-close message
+ Do thing + + + +
Hello there!
+
This is a default alert message with an alert.
+ + + +
Hello there!
+
This is a default alert message with an an icon and link.
+ Do thing + +
+
- +
Hello there!
Success, let's goo!!
 @@ -1021,7 +1238,7 @@

Alert

label="this is a success" id="default-m-success-autoclose" scale="m" - color="green" + kind="success" auto-close icon > @@ -1034,7 +1251,7 @@

Alert

label="this is a default success with icon" id="default-m-success-icon" scale="m" - color="green" + kind="success" icon >
Hello there!
@@ -1045,7 +1262,7 @@

Alert

label="this is a default success with icon and link" id="default-m-success-icon-link" scale="m" - color="green" + kind="success" icon >
Hello there!
@@ -1056,7 +1273,7 @@

Alert

- +
Hello there!
This is a warning!
 @@ -1065,7 +1282,7 @@

Alert

label="this is a warning" id="default-m-warning-autoclose" scale="m" - color="yellow" + kind="warning" auto-close icon > @@ -1078,7 +1295,7 @@

Alert

label="this is a default warning with icon" id="default-m-warning-icon" scale="m" - color="yellow" + kind="warning" icon >
Hello there!
@@ -1089,7 +1306,7 @@

Alert

label="this is a default warning with icon and link" id="default-m-warning-icon-link" scale="m" - color="yellow" + kind="warning" icon >
Hello there!
@@ -1100,18 +1317,24 @@

Alert

- +
Hello there!
This is a danger area.
 - +
Hello there!
You can not enter here.
Do thing - +
Hello there!
Access denied.
 @@ -1120,7 +1343,7 @@

Alert

label="this is a default danger with icon and link" id="default-m-danger-icon-link" scale="m" - color="red" + kind="danger" icon >
Hello there!
@@ -1134,7 +1357,8 @@

Alert

* LARGE SCALE ****************************************************** --> - + +
Hello there!
@@ -1159,9 +1383,40 @@

Alert
+ +
+ +
Hello there!
+
This is an alert with a general piece of information. Cool, innit?
+ + + +
Hello there!
+
This is an auto-close message
+ Do thing + + + +
Hello there!
+
This is a default alert message with an alert.
+ + + +
Hello there!
+
This is a default alert message with an an icon and link.
+ Do thing + +
+
- +
Hello there!
Success, let's goo!!
 @@ -1170,7 +1425,7 @@

Alert

label="this is a success" id="default-l-success-autoclose" scale="l" - color="green" + kind="success" auto-close icon > @@ -1183,7 +1438,7 @@

Alert

label="this is a default success with icon" id="default-l-success-icon" scale="l" - color="green" + kind="success" icon >
Hello there!
@@ -1194,7 +1449,7 @@

Alert

label="this is a default success with icon and link" id="default-l-success-icon-link" scale="l" - color="green" + kind="success" icon >
Hello there!
@@ -1205,7 +1460,7 @@

Alert

- +
Hello there!
This is a warning!
 @@ -1214,7 +1469,7 @@

Alert

label="this is a warning" id="default-l-warning-autoclose" scale="l" - color="yellow" + kind="warning" auto-close icon > @@ -1227,7 +1482,7 @@

Alert

label="this is a default warning with icon" id="default-l-warning-icon" scale="l" - color="yellow" + kind="warning" icon >
Hello there!
@@ -1238,7 +1493,7 @@

Alert

label="this is a default warning with icon and link" id="default-l-warning-icon-link" scale="l" - color="yellow" + kind="warning" icon >
Hello there!
@@ -1249,18 +1504,24 @@

Alert

- +
Hello there!
This is a danger area.
 - +
Hello there!
You can not enter here.
Do thing - +
Hello there!
Access denied.
 @@ -1269,7 +1530,7 @@

Alert

label="this is a default danger with icon and link" id="default-l-danger-icon-link" scale="l" - color="red" + kind="danger" icon >
Hello there!
diff --git a/src/demos/notice.html b/src/demos/notice.html index b7a849cc10c..aec870b410f 100644 --- a/src/demos/notice.html +++ b/src/demos/notice.html @@ -48,13 +48,24 @@

Notice

Small
+ +
+
Brand
+ +
+ +
Title lorem ispum
+
Body lorem ispum
+ +
+
Info
- +
Title lorem ispum
Body lorem ispum
 @@ -66,7 +77,7 @@

Notice

Success
- +
Title lorem ispum
Body lorem ispum
 @@ -78,14 +89,7 @@

Notice

Warning
- +
Title lorem ispum
Body lorem ispum
 @@ -97,7 +101,7 @@

Notice

Danger
- +
Title lorem ispum
Body lorem ispum
 @@ -109,7 +113,7 @@

Notice

close-disabled
- +
Title lorem ispum
Body lorem ispum
 @@ -121,7 +125,7 @@

Notice

Custom Icon
- +
Title lorem ispum
Body lorem ispum
 @@ -133,7 +137,7 @@

Notice

With link
- +
Title lorem ispum
Body lorem ispum
Link ispum @@ -146,7 +150,7 @@

Notice

No icon
- +
Title lorem ispum
Body lorem ispum
 @@ -158,7 +162,7 @@

Notice

With actions and tooltip
- +
Title lorem ispum
Body lorem ispum
Notice
With wrapping text
- +
Leverage agile frameworks to provide a robust synopsis lorem ipsum
Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. @@ -199,17 +203,30 @@

Notice

* MEDIUM ************************************************** --> +
Medium
+ +
+
Brand
+ +
+ +
Title lorem ispum
+
Body lorem ispum
+ +
+
+
Info
- +
Title lorem ispum
Body lorem ispum
 @@ -221,7 +238,7 @@

Notice

Success
- +
Title lorem ispum
Body lorem ispum
 @@ -233,14 +250,7 @@

Notice

Warning
- +
Title lorem ispum
Body lorem ispum
 @@ -252,14 +262,7 @@

Notice

Danger
- +
Title lorem ispum
Body lorem ispum
 @@ -271,7 +274,7 @@

Notice

close-disabled
- +
Title lorem ispum
Body lorem ispum
 @@ -283,7 +286,7 @@

Notice

Custom Icon
- +
Title lorem ispum
Body lorem ispum
 @@ -295,7 +298,7 @@

Notice

With link
- +
Title lorem ispum
Body lorem ispum
Link ispum @@ -308,7 +311,7 @@

Notice

No icon
- +
Title lorem ispum
Body lorem ispum
 @@ -320,7 +323,7 @@

Notice

With actions and tooltip
- +
Title lorem ispum
Body lorem ispum
Notice
With wrapping text
- +
Leverage agile frameworks to provide a robust synopsis lorem ipsum
Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. @@ -366,12 +369,24 @@

Notice

Large
+ +
+
Brand
+ +
+ +
Title lorem ispum
+
Body lorem ispum
+ +
+
+
Info
- +
Title lorem ispum
Body lorem ispum
 @@ -383,7 +398,7 @@

Notice

Success
- +
Title lorem ispum
Body lorem ispum
 @@ -395,14 +410,7 @@

Notice

Warning
- +
Title lorem ispum
Body lorem ispum
 @@ -414,7 +422,7 @@

Notice

Danger
- +
Title lorem ispum
Body lorem ispum
 @@ -426,7 +434,7 @@

Notice

close-disabled
- +
Title lorem ispum
Body lorem ispum
 @@ -438,7 +446,7 @@

Notice

Custom Icon
- +
Title lorem ispum
Body lorem ispum
 @@ -450,7 +458,7 @@

Notice

With link
- +
Title lorem ispum
Body lorem ispum
Link ispum @@ -463,7 +471,7 @@

Notice

No icon
- +
Title lorem ispum
Body lorem ispum
 @@ -475,7 +483,7 @@

Notice

With actions and tooltip
- +
Title lorem ispum
Body lorem ispum
Notice
With wrapping text
- +
Leverage agile frameworks to provide a robust synopsis lorem ipsum
Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. From 50e85afa516ae80ed1f47f80f74cc01b801952ae Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 14 Dec 2022 15:54:18 -0800 Subject: [PATCH 2/4] Clean up --- src/components/alert/alert.stories.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/alert/alert.stories.ts b/src/components/alert/alert.stories.ts index ea094035133..ae6b74accd8 100644 --- a/src/components/alert/alert.stories.ts +++ b/src/components/alert/alert.stories.ts @@ -177,7 +177,7 @@ export const darkThemeRTL_TestOnly = (): string => html` )}" ${boolean("open", true)} scale="${select("scale", ["s", "m", "l"], "m")}" - kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "red")}" + kind="${select("kind", ["brand", "info", "danger", "success", "warning"], "danger")}" >
Something failed
That thing you wanted to do didn't work as expected
@@ -193,7 +193,7 @@ export const actionsEndNoQueue_TestOnly = (): string => html` --calcite-duration-factor: 0; } - +
Hello there!
Do you really want to proceed?
@@ -207,13 +207,13 @@ export const actionsEndQueued_TestOnly = (): string => html` --calcite-duration-factor: 0; } - +
Hello there, alert one!
Do you really want to proceed?
 - +
Hello there, alert two!
Do you really want to proceed?
From 400c7a06f3d8cc48c75188649dd5d5c2cd8ab82b Mon Sep 17 00:00:00 2001 From: Adam Date: Wed, 14 Dec 2022 16:03:03 -0800 Subject: [PATCH 3/4] Clean up --- src/05-custom-theme.stories.mdx | 4 ++-- src/components/alert/alert.stories.ts | 2 +- src/components/notice/usage/Basic.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx index 2ea38d362d1..280a772f7b0 100644 --- a/src/05-custom-theme.stories.mdx +++ b/src/05-custom-theme.stories.mdx @@ -96,14 +96,14 @@ export const Template = () => - +
Something failed
There was an error while performing the task.
Retry - +
Something worked
That thing you wanted to do worked as expected diff --git a/src/components/alert/alert.stories.ts b/src/components/alert/alert.stories.ts index ae6b74accd8..1564d9a422e 100644 --- a/src/components/alert/alert.stories.ts +++ b/src/components/alert/alert.stories.ts @@ -232,7 +232,7 @@ export const autoClosableeRetainsCloseButton_TestOnly = (): string => html` --calcite-duration-factor: 0; } - +
Here's a general bit of information
Some kind of contextually relevant content
Take action diff --git a/src/components/notice/usage/Basic.md b/src/components/notice/usage/Basic.md index 46da42ddc17..d629c1821ae 100644 --- a/src/components/notice/usage/Basic.md +++ b/src/components/notice/usage/Basic.md @@ -1,5 +1,5 @@ ```html - +
Something failed
That thing you wanted to do didn't work as expected
View details From 617691698dbf3875fb1c9f20759c056182280f06 Mon Sep 17 00:00:00 2001 From: Adam Date: Thu, 15 Dec 2022 12:09:31 -0800 Subject: [PATCH 4/4] Pr feedback --- src/components/alert/alert.tsx | 3 ++- src/components/interfaces.ts | 8 -------- src/components/notice/notice.tsx | 3 ++- src/components/resources.ts | 7 +++++++ 4 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 src/components/resources.ts diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index ff3888fefe4..146e1d465f9 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -19,7 +19,8 @@ import { slotChangeHasAssignedElement } from "../../utils/dom"; import { CSS, DURATIONS, SLOTS } from "./resources"; -import { Kind, KindIcons, Scale } from "../interfaces"; +import { Kind, Scale } from "../interfaces"; +import { KindIcons } from "../resources"; import { AlertDuration, Sync } from "./interfaces"; import { OpenCloseComponent, diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts index 7918382402f..26f29222962 100644 --- a/src/components/interfaces.ts +++ b/src/components/interfaces.ts @@ -17,11 +17,3 @@ export type Width = "auto" | "half" | "full"; // used to help track of event payloads to remove at 1.0.0 – see https://github.com/Esri/calcite-components/issues/3781 /* Note : should be removed before `1.0 */ export type DeprecatedEventPayload = any; - -export enum KindIcons { - brand = "lightbulb", - danger = "exclamationMarkTriangle", - info = "information", - success = "checkCircle", - warning = "exclamationMarkTriangle" -} diff --git a/src/components/notice/notice.tsx b/src/components/notice/notice.tsx index a84354dca02..053046180ae 100644 --- a/src/components/notice/notice.tsx +++ b/src/components/notice/notice.tsx @@ -11,7 +11,8 @@ import { Watch } from "@stencil/core"; import { CSS, SLOTS } from "./resources"; -import { Kind, KindIcons, Scale, Width } from "../interfaces"; +import { Kind, Scale, Width } from "../interfaces"; +import { KindIcons } from "../resources"; import { getSlotted, setRequestedIcon } from "../../utils/dom"; import { ConditionalSlotComponent, diff --git a/src/components/resources.ts b/src/components/resources.ts new file mode 100644 index 00000000000..53ea7bc01cf --- /dev/null +++ b/src/components/resources.ts @@ -0,0 +1,7 @@ +export enum KindIcons { + brand = "lightbulb", + danger = "exclamationMarkTriangle", + info = "information", + success = "checkCircle", + warning = "exclamationMarkTriangle" +}