feat(flow, flow-item)!: add selected property to flow-item instead of…

… removing them from the DOM. #5072
Esri · May 21, 2024 · a25851a · a25851a
1 parent a5c3e68
commit a25851a
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 143 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -1831,6 +1831,7 @@ export namespace Components {
     interface CalciteFlow {
         /**
           * Removes the currently active `calcite-flow-item`.
+          * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>
          */
         "back": () => Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>;
         /**
@@ -1839,6 +1840,7 @@ export namespace Components {
         "customItemSelectors": string;
         /**
           * Sets focus on the component.
+          * @returns Promise<void>
          */
         "setFocus": () => Promise<void>;
     }
@@ -1910,6 +1912,10 @@ export namespace Components {
           * @returns - promise that resolves once the content is scrolled to.
          */
         "scrollContentTo": (options?: ScrollToOptions) => Promise<void>;
+        /**
+          * When true, flow-item is displayed within a parent flow.
+         */
+        "selected": boolean;
         /**
           * Sets focus on the component.
           * @returns promise.
@@ -6580,6 +6586,7 @@ declare global {
         "calciteFlowItemScroll": void;
         "calciteFlowItemClose": void;
         "calciteFlowItemToggle": void;
+        "calciteInternalFlowItemChange": void;
     }
     interface HTMLCalciteFlowItemElement extends Components.CalciteFlowItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteFlowItemElementEventMap>(type: K, listener: (this: HTMLCalciteFlowItemElement, ev: CalciteFlowItemCustomEvent<HTMLCalciteFlowItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -9709,10 +9716,15 @@ declare namespace LocalJSX {
           * Fires when the collapse button is clicked.
          */
         "onCalciteFlowItemToggle"?: (event: CalciteFlowItemCustomEvent<void>) => void;
+        "onCalciteInternalFlowItemChange"?: (event: CalciteFlowItemCustomEvent<void>) => void;
         /**
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * When true, flow-item is displayed within a parent flow.
+         */
+        "selected"?: boolean;
         /**
           * When `true`, displays a back button in the component's header.
          */

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
@@ -16,7 +16,7 @@ import { CSS, SLOTS } from "./resources";
 
 describe("calcite-flow-item", () => {
   describe("renders", () => {
-    renders("calcite-flow-item", { display: "flex" });
+    renders("<calcite-flow-item selected></calcite-flow-item>", { display: "flex" });
   });
 
   describe("honors hidden attribute", () => {
@@ -57,6 +57,10 @@ describe("calcite-flow-item", () => {
         propertyName: "menuOpen",
         defaultValue: false,
       },
+      {
+        propertyName: "selected",
+        defaultValue: false,
+      },
       {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
@@ -110,7 +114,7 @@ describe("calcite-flow-item", () => {
   });
 
   describe("disabled", () => {
-    disabled(`<calcite-flow-item closable>scrolling content</calcite-flow-item>`);
+    disabled(`<calcite-flow-item closable selected>scrolling content</calcite-flow-item>`);
   });
 
   describe("accessible", () => {
@@ -138,7 +142,7 @@ describe("calcite-flow-item", () => {
   });
 
   describe("should focus on back button", () => {
-    focusable(`<calcite-flow-item show-back-button>test</calcite-flow-item>`, {
+    focusable(`<calcite-flow-item show-back-button selected>test</calcite-flow-item>`, {
       shadowFocusTargetSelector: "calcite-action",
     });
   });

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.scss b/packages/calcite-components/src/components/flow-item/flow-item.scss
@@ -9,7 +9,11 @@
 
 :host {
   @extend %component-host;
-  @apply relative flex w-full flex-auto overflow-hidden;
+  @apply relative hidden w-full flex-auto overflow-hidden;
+}
+
+:host([selected]) {
+  @apply flex;
 }
 
 @include disabled();

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -142,6 +142,16 @@ export class FlowItem
   // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
   @Prop({ mutable: true }) messages: FlowItemMessages;
 
+  /**
+   * When true, flow-item is displayed within a parent flow.
+   */
+  @Prop({ reflect: true }) selected = false;
+
+  @Watch("selected")
+  selectedHandler(): void {
+    this.calciteInternalFlowItemChange.emit();
+  }
+
   /**
    * Determines the type of positioning to use for the overlaid content.
    *
@@ -216,6 +226,11 @@ export class FlowItem
    */
   @Event({ cancelable: false }) calciteFlowItemToggle: EventEmitter<void>;
 
+  /**
+   * @internal
+   */
+  @Event({ cancelable: false }) calciteInternalFlowItemChange: EventEmitter<void>;
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties