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 })