diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index efa739debf3..20c48c7aaef 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts @@ -165,10 +165,12 @@ describe("calcite-action-bar", () => { const page = await newE2EPage(); await page.setContent(html``); + await page.waitForChanges(); const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`); - expect(buttonGroup).toBeNull(); + expect(await buttonGroup.getProperty("hidden")).toBe(true); + expect(await buttonGroup.isVisible()).toBe(false); }); it("should modify textEnabled on actions when expanded and expandDisabled", async () => { diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 3a8dc4dddd1..b0ab3d5a355 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -17,7 +17,11 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; -import { focusFirstTabbable, getSlotted, slotChangeGetAssignedElements } from "../../utils/dom"; +import { + focusFirstTabbable, + slotChangeGetAssignedElements, + slotChangeHasAssignedElement, +} from "../../utils/dom"; import { componentFocusable, LoadableComponent, @@ -176,6 +180,10 @@ export class ActionBar @State() effectiveLocale: string; + @State() hasActionsEnd = false; + + @State() expandTooltip: HTMLCalciteTooltipElement; + @Watch("effectiveLocale") effectiveLocaleChange(): void { updateMessages(this, this.effectiveLocale); @@ -297,9 +305,7 @@ export class ActionBar this.setGroupLayout(actionGroups); const groupCount = - getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled - ? actionGroups.length + 1 - : actionGroups.length; + this.hasActionsEnd || !expandDisabled ? actionGroups.length + 1 : actionGroups.length; const { actionHeight, actionWidth } = geActionDimensions(actions); @@ -339,12 +345,24 @@ export class ActionBar handleDefaultSlotChange = (event: Event): void => { const groups = slotChangeGetAssignedElements(event).filter((el) => - el?.matches("calcite-action-group") + el.matches("calcite-action-group") ) as HTMLCalciteActionGroupElement[]; this.setGroupLayout(groups); }; + handleActionsEndSlotChange = (event: Event): void => { + this.hasActionsEnd = slotChangeHasAssignedElement(event); + }; + + handleTooltipSlotChange = (event: Event): void => { + const tooltips = slotChangeGetAssignedElements(event).filter((el) => + el?.matches("calcite-tooltip") + ) as HTMLCalciteTooltipElement[]; + + this.expandTooltip = tooltips[0]; + }; + // -------------------------------------------------------------------------- // // Render Methods @@ -354,8 +372,6 @@ export class ActionBar renderBottomActionGroup(): VNode { const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this; - const tooltip = getSlotted(el, SLOTS.expandTooltip) as HTMLCalciteTooltipElement; - const expandToggleNode = !expandDisabled ? ( ) : null; - return getSlotted(el, SLOTS.actionsEnd) || - getSlotted(el, SLOTS.bottomActions) || - expandToggleNode ? ( - - - - + return ( + - ) : null; + ); } render(): VNode { diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index cffa97c179c..2e971d74c53 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -5,7 +5,6 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; -import { getSlotted } from "../../utils/dom"; import { componentFocusable, LoadableComponent, @@ -25,6 +24,7 @@ import { Columns, Layout, Scale } from "../interfaces"; import { ActionGroupMessages } from "./assets/action-group/t9n"; import { ICONS, SLOTS } from "./resources"; import { OverlayPositioning } from "../../utils/floating-ui"; +import { slotChangeHasAssignedElement } from "../../utils/dom"; /** * @slot - A slot for adding a group of `calcite-action`s. @@ -124,6 +124,8 @@ export class ActionGroup @State() defaultMessages: ActionGroupMessages; + @State() hasMenuActions = false; + //-------------------------------------------------------------------------- // // Public Methods @@ -169,22 +171,15 @@ export class ActionGroup // // -------------------------------------------------------------------------- - renderTooltip(): VNode { - const { el } = this; - const hasTooltip = getSlotted(el, SLOTS.menuTooltip); - - return hasTooltip ? : null; - } - renderMenu(): VNode { - const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this; - - const hasMenuItems = getSlotted(el, SLOTS.menuActions); + const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } = + this; - return hasMenuItems ? ( + return ( - ) : null; + ); } render(): VNode { @@ -223,4 +218,8 @@ export class ActionGroup setMenuOpen = (event: CalciteActionMenuCustomEvent): void => { this.menuOpen = !!(event.target as HTMLCalciteActionMenuElement).open; }; + + handleMenuActionsSlotChange = (event: Event): void => { + this.hasMenuActions = slotChangeHasAssignedElement(event); + }; } diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index dff569ee12e..eb7c11c9cb3 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -16,7 +16,7 @@ import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; -import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom"; +import { slotChangeGetAssignedElements } from "../../utils/dom"; import { componentFocusable, LoadableComponent, @@ -131,6 +131,8 @@ export class ActionPad @Element() el: HTMLCalciteActionPadElement; + @State() expandTooltip: HTMLCalciteTooltipElement; + mutationObserver = createObserver("mutation", () => this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group"))) ); @@ -233,6 +235,14 @@ export class ActionPad this.setGroupLayout(groups); }; + handleTooltipSlotChange = (event: Event): void => { + const tooltips = slotChangeGetAssignedElements(event).filter((el) => + el?.matches("calcite-tooltip") + ) as HTMLCalciteTooltipElement[]; + + this.expandTooltip = tooltips[0]; + }; + // -------------------------------------------------------------------------- // // Component Methods @@ -242,8 +252,6 @@ export class ActionPad renderBottomActionGroup(): VNode { const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this; - const tooltip = getSlotted(el, SLOTS.expandTooltip) as HTMLCalciteTooltipElement; - const expandToggleNode = !expandDisabled ? ( @@ -261,7 +269,7 @@ export class ActionPad return expandToggleNode ? ( - + {expandToggleNode} ) : null;