From cae9a743519863300a84ddd9190c30e5c06e04c5 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 30 Sep 2024 14:40:53 -0700 Subject: [PATCH 1/4] fix(shell-center-row): properly handle slotted elements #6059 --- .../shell-center-row/shell-center-row.tsx | 44 +++++++------------ 1 file changed, 16 insertions(+), 28 deletions(-) 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 index 6c526f8ea27..d714c9a6909 100644 --- 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,7 +51,7 @@ export class ShellCenterRow implements ConditionalSlotComponent { // -------------------------------------------------------------------------- render(): VNode { - const { el } = this; + const { actionBar } = this; const contentNode = (
@@ -76,20 +59,25 @@ export class ShellCenterRow implements ConditionalSlotComponent {
); - const actionBar = getSlotted(el, SLOTS.actionBar); - - const actionBarNode = actionBar ? ( -
- + const actionBarNode = ( + - ) : null; + ); const children: VNode[] = [actionBarNode, contentNode]; + // todo: if actionBar position changes, this will not update. if (actionBar?.position === "end") { children.reverse(); } return {children}; } + + private handleActionBarSlotChange = (event: Event): void => { + this.actionBar = slotChangeGetAssignedElements(event).filter( + (el): el is HTMLCalciteActionBarElement => el.matches("calcite-action-bar"), + )[0]; + }; } From 148373690ccd077ab4d070d774868b2dc7c9f55e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 30 Sep 2024 15:16:52 -0700 Subject: [PATCH 2/4] test fix --- .../components/shell-center-row/shell-center-row.e2e.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 index eecce95910c..6d8cbe8036c 100644 --- 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 @@ -36,10 +36,11 @@ describe("calcite-shell-center-row", () => { const page = await newE2EPage(); await page.setContent(""); + 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 () => { From 7ca552e8d6e0c1120af109b6fbe9f928d3a9e951 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 1 Oct 2024 09:50:02 -0700 Subject: [PATCH 3/4] remove comment --- .../src/components/shell-center-row/shell-center-row.tsx | 1 - 1 file changed, 1 deletion(-) 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 index d714c9a6909..8d6b7d17de0 100644 --- 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 @@ -67,7 +67,6 @@ export class ShellCenterRow { const children: VNode[] = [actionBarNode, contentNode]; - // todo: if actionBar position changes, this will not update. if (actionBar?.position === "end") { children.reverse(); } From 20294bfe7e1749f04aae0ac5bdaad5fc1c501928 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 1 Oct 2024 09:51:04 -0700 Subject: [PATCH 4/4] cleanup --- .../src/components/shell-center-row/shell-center-row.e2e.ts | 1 - 1 file changed, 1 deletion(-) 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 index 6d8cbe8036c..5b6beef2233 100644 --- 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 @@ -36,7 +36,6 @@ describe("calcite-shell-center-row", () => { const page = await newE2EPage(); await page.setContent(""); - await page.waitForChanges(); const actionBarContainer = await page.find(`calcite-shell-center-row >>> .${CSS.actionBarContainer}`);