fix(shell-center-row): fix rendering tied to named-slot content (#10451)

**Related Issue:** #6059 ## Summary - remove use of `getSlotted` utility - replace with `slotchange` event and `@State` variables to update the display of elements. - existing tests should suffice
Esri · Oct 1, 2024 · aa1e9da · aa1e9da
1 parent 7abe7d4
commit aa1e9da
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 29 deletions.
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts b/packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts
@@ -39,7 +39,7 @@ describe("calcite-shell-center-row", () => {
 
     const actionBarContainer = await page.find(`calcite-shell-center-row >>> .${CSS.actionBarContainer}`);
 
-    expect(actionBarContainer).toBeNull();
+    expect(await actionBarContainer.isVisible()).toBe(false);
   });
 
   it("should render action bar container first when action bar has start position", async () => {
@@ -59,6 +59,10 @@ describe("calcite-shell-center-row", () => {
 
     await page.waitForChanges();
     expect(element).toHaveClass(CSS.actionBarContainer);
+
+    const actionBarContainer = await page.find(`calcite-shell-center-row >>> .${CSS.actionBarContainer}`);
+
+    expect(await actionBarContainer.isVisible()).toBe(true);
   });
 
   it("should render action bar container last when action bar has end position", async () => {

diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -1,11 +1,6 @@
-import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
-import {
-  ConditionalSlotComponent,
-  connectConditionalSlotComponent,
-  disconnectConditionalSlotComponent,
-} from "../../utils/conditionalSlot";
-import { getSlotted } from "../../utils/dom";
+import { Component, Element, Fragment, h, Prop, State, VNode } from "@stencil/core";
 import { Position, Scale } from "../interfaces";
+import { slotChangeGetAssignedElements } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
 
 /**
@@ -17,7 +12,7 @@ import { CSS, SLOTS } from "./resources";
   styleUrl: "shell-center-row.scss",
   shadow: true,
 })
-export class ShellCenterRow implements ConditionalSlotComponent {
+export class ShellCenterRow {
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -47,19 +42,7 @@ export class ShellCenterRow implements ConditionalSlotComponent {
 
   @Element() el: HTMLCalciteShellCenterRowElement;
 
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-
-  connectedCallback(): void {
-    connectConditionalSlotComponent(this);
-  }
-
-  disconnectedCallback(): void {
-    disconnectConditionalSlotComponent(this);
-  }
+  @State() actionBar: HTMLCalciteActionBarElement;
 
   // --------------------------------------------------------------------------
   //
@@ -68,21 +51,19 @@ export class ShellCenterRow implements ConditionalSlotComponent {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { el } = this;
+    const { actionBar } = this;
 
     const contentNode = (
       <div class={CSS.content}>
         <slot />
       </div>
     );
 
-    const actionBar = getSlotted<HTMLCalciteActionBarElement>(el, SLOTS.actionBar);
-
-    const actionBarNode = actionBar ? (
-      <div class={CSS.actionBarContainer} key="action-bar">
-        <slot name={SLOTS.actionBar} />
+    const actionBarNode = (
+      <div class={CSS.actionBarContainer} hidden={!this.actionBar} key="action-bar">
+        <slot name={SLOTS.actionBar} onSlotchange={this.handleActionBarSlotChange} />
       </div>
-    ) : null;
+    );
 
     const children: VNode[] = [actionBarNode, contentNode];
 
@@ -92,4 +73,10 @@ export class ShellCenterRow implements ConditionalSlotComponent {
 
     return <Fragment>{children}</Fragment>;
   }
+
+  private handleActionBarSlotChange = (event: Event): void => {
+    this.actionBar = slotChangeGetAssignedElements(event).filter(
+      (el): el is HTMLCalciteActionBarElement => el.matches("calcite-action-bar"),
+    )[0];
+  };
 }