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 b11afdf4a08..5ab4d2a3967 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
@@ -75,6 +75,37 @@ describe("calcite-action-bar", () => {
);
});
+ describe("messageOverrides", () => {
+ it("should honor expandLabel and collapseLabel", async () => {
+ const page = await newE2EPage();
+
+ await page.setContent("");
+ await page.waitForChanges();
+
+ const actionBar = await page.find("calcite-action-bar");
+
+ const expandLabel = "Open me up";
+ const collapseLabel = "Close me down";
+
+ actionBar.setProperty("messageOverrides", {
+ expandLabel,
+ collapseLabel,
+ });
+ await page.waitForChanges();
+
+ const expandAction = await page.find("calcite-action-bar >>> #expand-toggle");
+
+ expect(expandAction).not.toBeNull();
+
+ expect(await expandAction.getProperty("label")).toBe(expandLabel);
+
+ actionBar.setProperty("expanded", true);
+ await page.waitForChanges();
+
+ expect(await expandAction.getProperty("label")).toBe(collapseLabel);
+ });
+ });
+
describe("expand functionality", () => {
it("should not modify actions within an action-menu", async () => {
const page = await newE2EPage({
@@ -109,7 +140,7 @@ describe("calcite-action-bar", () => {
await page.waitForChanges();
- const expandAction = await page.find("calcite-action-bar >>> calcite-action");
+ const expandAction = await page.find("calcite-action-bar >>> #expand-toggle");
expect(expandAction).not.toBeNull();
});
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 0a19f4225b8..21e37492fb7 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -407,8 +407,10 @@ export class ActionBar
const expandToggleNode = !expandDisabled ? (
{
);
});
+ describe("messageOverrides", () => {
+ it("should honor expandLabel and collapseLabel", async () => {
+ const page = await newE2EPage();
+
+ await page.setContent("");
+ await page.waitForChanges();
+
+ const actionPad = await page.find("calcite-action-pad");
+
+ const expandLabel = "Open me up";
+ const collapseLabel = "Close me down";
+
+ actionPad.setProperty("messageOverrides", {
+ expandLabel,
+ collapseLabel,
+ });
+ await page.waitForChanges();
+
+ const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
+
+ expect(expandAction).not.toBeNull();
+
+ expect(await expandAction.getProperty("label")).toBe(expandLabel);
+
+ actionPad.setProperty("expanded", true);
+ await page.waitForChanges();
+
+ expect(await expandAction.getProperty("label")).toBe(collapseLabel);
+ });
+ });
+
describe("expand functionality", () => {
it("should be expandable by default", async () => {
const page = await newE2EPage();
@@ -85,7 +116,7 @@ describe("calcite-action-pad", () => {
await page.waitForChanges();
- const expandAction = await page.find("calcite-action-pad >>> calcite-action");
+ const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
expect(expandAction).not.toBeNull();
});
@@ -97,7 +128,7 @@ describe("calcite-action-pad", () => {
await page.waitForChanges();
- const expandAction = await page.find("calcite-action-pad >>> calcite-action");
+ const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
expect(expandAction).toBeNull();
});
@@ -187,7 +218,7 @@ describe("calcite-action-pad", () => {
`,
);
- const expandAction = await page.find("calcite-action-pad >>> calcite-action");
+ const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
const action = await page.find("calcite-action");
const actionPad = await page.find("calcite-action-pad");
const group = await page.find("calcite-action-group");
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 e36df2f271e..dae5b7570ba 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -281,8 +281,10 @@ export class ActionPad
const expandToggleNode = !expandDisabled ? (
= ({
expanded,
expandText,
collapseText,
+ expandLabel,
+ collapseLabel,
toggle,
el,
position,
@@ -76,6 +80,7 @@ export const ExpandToggle: FunctionalComponent = ({
const rtl = getElementDir(el) === "rtl";
const text = expanded ? collapseText : expandText;
+ const label = expanded ? collapseLabel : expandLabel;
const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
if (rtl) {
@@ -89,6 +94,8 @@ export const ExpandToggle: FunctionalComponent = ({
const actionNode = (
setTooltipReference({ tooltip, referenceElement, expanded, ref })