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

packages/calcite-components/src/components/shell-center-row/shell-center-row.e2e.ts

@@ -36,10 +36,11 @@ describe("calcite-shell-center-row", () => {
     const page = await newE2EPage();
 
     await page.setContent("<calcite-shell-center-row></calcite-shell-center-row>");
+    await page.waitForChanges();
 
     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 +60,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 () => {

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,28 +51,33 @@ 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];
 
+    // todo: if actionBar position changes, this will not update.
     if (actionBar?.position === "end") {
       children.reverse();
     }
 
     return <Fragment>{children}</Fragment>;
   }
+
+  private handleActionBarSlotChange = (event: Event): void => {
+    this.actionBar = slotChangeGetAssignedElements(event).filter(
+      (el): el is HTMLCalciteActionBarElement => el.matches("calcite-action-bar"),
+    )[0];
+  };
 }