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 (
+
+
+
+
{expandToggleNode}
- ) : 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 (
-
- {this.renderTooltip()}
+
+
- ) : 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;