feat(dialog, panel, flow-item): add icon and iconFlipRtl properties

packages/calcite-components/src/components/dialog/dialog.e2e.ts

@@ -94,6 +94,14 @@ describe("calcite-dialog", () => {
         propertyName: "kind",
         value: "brand",
       },
+      {
+        propertyName: "icon",
+        value: "x",
+      },
+      {
+        propertyName: "iconFlipRtl",
+        value: true,
+      },
       {
         propertyName: "loading",
         value: true,
@@ -171,6 +179,14 @@ describe("calcite-dialog", () => {
         propertyName: "headingLevel",
         defaultValue: undefined,
       },
+      {
+        propertyName: "icon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "iconFlipRtl",
+        defaultValue: false,
+      },
       {
         propertyName: "kind",
         defaultValue: undefined,
@@ -269,6 +285,8 @@ describe("calcite-dialog", () => {
     dialog.setProperty("heading", "My Heading");
     dialog.setProperty("description", "My Description");
     dialog.setProperty("scale", "l");
+    dialog.setProperty("icon", "x");
+    dialog.setProperty("iconFlipRtl", true);
     dialog.setProperty("messageOverrides", messageOverrides);
     await page.waitForChanges();
 
@@ -280,6 +298,8 @@ describe("calcite-dialog", () => {
     expect(await panel.getProperty("heading")).toBe("My Heading");
     expect(await panel.getProperty("description")).toBe("My Description");
     expect(await panel.getProperty("scale")).toBe("l");
+    expect(await panel.getProperty("icon")).toBe("x");
+    expect(await panel.getProperty("iconFlipRtl")).toBe(true);
     expect((await panel.getProperty("messageOverrides")).close).toBe(messageOverrides.close);
     expect(await panel.getProperty("beforeClose")).toBeDefined();
   });
@@ -1110,7 +1130,9 @@ describe("calcite-dialog", () => {
     themed(
       async () => {
         const page = await newE2EPage();
-        await page.setContent(html`<calcite-dialog width-scale="s" modal open><p>Hello world!</p></calcite-dialog>`);
+        await page.setContent(
+          html`<calcite-dialog icon="banana" width-scale="s" modal open><p>Hello world!</p></calcite-dialog>`,
+        );
         // set large page to ensure test dialog isn't becoming fullscreen
         await page.setViewport({ width: 1440, height: 1440 });
         await skipAnimations(page);
@@ -1165,6 +1187,10 @@ describe("calcite-dialog", () => {
           shadowSelector: `.${CSS.panel}`,
           targetProp: "--calcite-panel-background-color",
         },
+        "--calcite-dialog-icon-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-icon-color",
+        },
       },
     );
 

packages/calcite-components/src/components/dialog/dialog.scss

@@ -16,6 +16,7 @@
  * @prop --calcite-dialog-offset-x: Specifies the horizontal offset of the component.
  * @prop --calcite-dialog-offset-y: Specifies the vertical offset of the component.
  * @prop --calcite-dialog-background-color: Specifies the background color of the component.
+ * @prop --calcite-dialog-icon-color: Specifies the color of the component's icon.
  */
 
 :host {
@@ -119,6 +120,27 @@ calcite-panel {
   --calcite-panel-footer-space: var(--calcite-dialog-footer-space);
   --calcite-panel-border-color: var(--calcite-dialog-border-color);
   --calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));
+  --calcite-panel-icon-color: var(--calcite-dialog-icon-color);
+}
+
+:host([kind="brand"]) calcite-panel {
+  --calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand));
+}
+
+:host([kind="danger"]) calcite-panel {
+  --calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger));
+}
+
+:host([kind="info"]) calcite-panel {
+  --calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info));
+}
+
+:host([kind="success"]) calcite-panel {
+  --calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success));
+}
+
+:host([kind="warning"]) calcite-panel {
+  --calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning));
 }
 
 ::slotted(*) {

packages/calcite-components/src/components/dialog/dialog.stories.ts

@@ -17,6 +17,8 @@ type DialogStoryArgs = Pick<
   | "closeDisabled"
   | "placement"
   | "loading"
+  | "icon"
+  | "iconFlipRtl"
   | "menuOpen"
   | "modal"
   | "overlayPositioning"
@@ -38,6 +40,8 @@ export default {
     description: "My description!",
     closeDisabled: false,
     loading: false,
+    icon: "",
+    iconFlipRtl: false,
     menuOpen: false,
     modal: false,
     dragEnabled: false,
@@ -107,6 +111,8 @@ export const simple = (args: DialogStoryArgs): string => html`
     width-scale="${args.widthScale}"
     placement="${args.placement}"
     heading="${args.heading}"
+    icon="${args.icon}"
+    icon-flip-rtl="${args.iconFlipRtl}"
     description="${args.description}"
     overlay-positioning="${args.overlayPositioning}"
   >
@@ -191,6 +197,87 @@ export const customContentSlot = (): string => html`
   <calcite-dialog heading="Custom content slot dialog" open placement="cover"> ${customContent} </calcite-dialog>
 `;
 
+export const withIcon = (): string => html`
+  <calcite-dialog icon="banana" heading="Banana" description="This is bananas" open scale="m" width-scale="s" modal>
+    Hello world!
+  </calcite-dialog>
+`;
+
+export const withKindBrandIcon = (): string => html`
+  <calcite-dialog
+    kind="brand"
+    icon="banana"
+    heading="Banana"
+    description="This is bananas"
+    open
+    scale="m"
+    width-scale="s"
+    modal
+  >
+    Hello world!
+  </calcite-dialog>
+`;
+
+export const withKindDangerIcon = (): string => html`
+  <calcite-dialog
+    kind="danger"
+    icon="banana"
+    heading="Banana"
+    description="This is bananas"
+    open
+    scale="m"
+    width-scale="s"
+    modal
+  >
+    Hello world!
+  </calcite-dialog>
+`;
+
+export const withKindInfoIcon = (): string => html`
+  <calcite-dialog
+    kind="info"
+    icon="banana"
+    heading="Banana"
+    description="This is bananas"
+    open
+    scale="m"
+    width-scale="s"
+    modal
+  >
+    Hello world!
+  </calcite-dialog>
+`;
+
+export const withKindSuccessIcon = (): string => html`
+  <calcite-dialog
+    kind="success"
+    icon="banana"
+    heading="Banana"
+    description="This is bananas"
+    open
+    scale="m"
+    width-scale="s"
+    modal
+  >
+    Hello world!
+  </calcite-dialog>
+`;
+
+export const withKindWarningIcon = (): string => html`
+  <calcite-dialog
+    kind="warning"
+    icon="banana"
+    description="This is bananas"
+    heading="Banana"
+    open
+    scale="m"
+    width-scale="s"
+    modal
+  >
+    Hello world!
+  </calcite-dialog>
+`;
+
 export const darkModeRTLCustomSizeCSSVars = (): string => html`
   <calcite-dialog
     heading="My Dialog"

packages/calcite-components/src/components/dialog/dialog.tsx

@@ -18,6 +18,7 @@ import type { Panel } from "../panel/panel";
 import { FocusTrapOptions, useFocusTrap } from "../../controllers/useFocusTrap";
 import { usePreventDocumentScroll } from "../../controllers/usePreventDocumentScroll";
 import { resizeShiftStep } from "../../utils/resources";
+import { IconNameOrString } from "../icon/interfaces";
 import T9nStrings from "./assets/t9n/messages.en.json";
 import { CSS, initialDragPosition, initialResizePosition, SLOTS } from "./resources";
 import { DialogDragPosition, DialogPlacement, DialogResizePosition } from "./interfaces";
@@ -175,6 +176,12 @@ export class Dialog extends LitElement implements OpenCloseComponent {
     Kind
   >;
 
+  /** Specifies an icon to display. */
+  @property({ reflect: true }) icon: IconNameOrString;
+
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  @property({ reflect: true }) iconFlipRtl = false;
+
   /** When `true`, a busy indicator is displayed. */
   @property({ reflect: true }) loading = false;
 
@@ -740,7 +747,7 @@ export class Dialog extends LitElement implements OpenCloseComponent {
   //#region Rendering
 
   override render(): JsxNode {
-    const { assistiveText, description, heading, opened } = this;
+    const { assistiveText, description, heading, opened, icon, iconFlipRtl } = this;
     return (
       <div
         class={{
@@ -779,6 +786,8 @@ export class Dialog extends LitElement implements OpenCloseComponent {
                 description={description}
                 heading={heading}
                 headingLevel={this.headingLevel}
+                icon={icon}
+                iconFlipRtl={iconFlipRtl}
                 loading={this.loading}
                 menuOpen={this.menuOpen}
                 messageOverrides={this.messageOverrides}

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts

@@ -65,6 +65,14 @@ describe("calcite-flow-item", () => {
         propertyName: "disabled",
         defaultValue: false,
       },
+      {
+        propertyName: "icon",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "iconFlipRtl",
+        defaultValue: false,
+      },
       {
         propertyName: "loading",
         defaultValue: false,
@@ -118,6 +126,14 @@ describe("calcite-flow-item", () => {
         propertyName: "loading",
         value: true,
       },
+      {
+        propertyName: "icon",
+        value: "x",
+      },
+      {
+        propertyName: "iconFlipRtl",
+        value: true,
+      },
       {
         propertyName: "menuOpen",
         value: true,
@@ -276,6 +292,17 @@ describe("calcite-flow-item", () => {
     expect(await flowItem.getProperty("collapsed")).toBe(false);
   });
 
+  it("sets icon on internal panel", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-flow-item icon="x" icon-flip-rtl></calcite-flow-item>`);
+    await page.waitForChanges();
+
+    const panel = await page.find(`calcite-flow-item >>> calcite-panel`);
+
+    expect(await panel.getProperty("icon")).toBe("x");
+    expect(await panel.getProperty("iconFlipRtl")).toBe(true);
+  });
+
   it("allows scrolling content", async () => {
     const page = await newE2EPage();
     await page.setContent(html`
@@ -394,7 +421,7 @@ describe("calcite-flow-item", () => {
   });
 
   describe("theme", () => {
-    themed(html`<calcite-flow-item show-back-button></calcite-flow-item>`, {
+    themed(html`<calcite-flow-item show-back-button icon="banana"></calcite-flow-item>`, {
       "--calcite-flow-corner-radius": {
         shadowSelector: "calcite-panel",
         targetProp: "--calcite-panel-corner-radius",
@@ -403,6 +430,10 @@ describe("calcite-flow-item", () => {
         shadowSelector: "calcite-panel",
         targetProp: "--calcite-panel-heading-text-color",
       },
+      "--calcite-flow-icon-color": {
+        shadowSelector: "calcite-panel",
+        targetProp: "--calcite-panel-icon-color",
+      },
       "--calcite-flow-description-text-color": {
         shadowSelector: "calcite-panel",
         targetProp: "--calcite-panel-description-text-color",

packages/calcite-components/src/components/flow-item/flow-item.scss

@@ -7,6 +7,7 @@
  * @prop --calcite-flow-item-header-border-block-end: [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
  * @prop --calcite-flow-corner-radius: Specifies the component's corner radius.
  * @prop --calcite-flow-heading-text-color: Specifies the text color of the component's `heading`.
+ * @prop --calcite-flow-icon-color: Specifies the color of the component's icon.
  * @prop --calcite-flow-description-text-color: Specifies the text color of the component's `description`.
  * @prop --calcite-flow-border-color: Specifies the component's border color.
  * @prop --calcite-flow-background-color: Specifies the component's background color.
@@ -63,6 +64,7 @@ calcite-panel {
   --calcite-panel-header-background-color: var(--calcite-flow-header-background-color);
   --calcite-panel-header-content-space: var(--calcite-flow-header-content-space);
   --calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);
+  --calcite-panel-icon-color: var(--calcite-flow-icon-color);
   --calcite-panel-space: var(--calcite-flow-space);
 }
 

packages/calcite-components/src/components/flow-item/flow-item.stories.ts

@@ -16,6 +16,8 @@ interface FlowItemStoryArgs
     | "collapsed"
     | "collapseDirection"
     | "loading"
+    | "icon"
+    | "iconFlipRtl"
     | "scale"
     | "selected"
   > {
@@ -32,6 +34,8 @@ export default {
     collapsed: false,
     collapseDirection: collapseDirection.defaultValue,
     heightScale: scale.defaultValue,
+    icon: "",
+    iconFlipRtl: false,
     scale: scale.defaultValue,
     loading: false,
     selected: true,
@@ -105,6 +109,8 @@ export const simple = (args: FlowItemStoryArgs): string => html`
     ${boolean("loading", args.loading)}
     ${boolean("selected", args.selected)}
     heading="Heading"
+    icon="${args.icon}"
+    icon-flip-rtl="${args.iconFlipRtl}"
     description="A wonderful flow item description"
   >
     <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
@@ -128,6 +134,10 @@ export const onlyProps = (): string => html`
   </div>
 `;
 
+export const withIcon = (): string => html`
+  <calcite-flow-item icon="banana" selected heading="Banana"> Hello World! </calcite-flow-item>
+`;
+
 export const collapsed_TestOnly = (): string => html`
   <calcite-flow-item selected collapsed collapsible closable> Hello World! </calcite-flow-item>
 `;