feat(action-bar, action-pad): add expandLabel and collapseLabel to me…

…ssages (#9497) **Related Issue:** #5539 ## Summary - add expandLabel and collapseLabel to messages
Esri · Jun 6, 2024 · 12407eb · 12407eb
1 parent 8b232ca
commit 12407eb
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 8 deletions.
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
@@ -75,6 +75,37 @@ describe("calcite-action-bar", () => {
     );
   });
 
+  describe("messageOverrides", () => {
+    it("should honor expandLabel and collapseLabel", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent("<calcite-action-bar></calcite-action-bar>");
+      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
@@ -407,8 +407,10 @@ export class ActionBar
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
+        collapseLabel={messages.collapseLabel}
         collapseText={messages.collapse}
         el={el}
+        expandLabel={messages.expandLabel}
         expandText={messages.expand}
         expanded={expanded}
         position={position}

diff --git a/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages.json b/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages_en.json b/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages_en.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -77,6 +77,37 @@ describe("calcite-action-pad", () => {
     );
   });
 
+  describe("messageOverrides", () => {
+    it("should honor expandLabel and collapseLabel", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent("<calcite-action-pad></calcite-action-pad>");
+      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", () => {
       </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
@@ -281,8 +281,10 @@ export class ActionPad
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
+        collapseLabel={messages.collapseLabel}
         collapseText={messages.collapse}
         el={el}
+        expandLabel={messages.expandLabel}
         expandText={messages.expand}
         expanded={expanded}
         position={position}

diff --git a/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages.json b/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages_en.json b/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages_en.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
@@ -8,6 +8,8 @@ interface ExpandToggleProps {
   expanded: boolean;
   expandText: string;
   collapseText: string;
+  expandLabel: string;
+  collapseLabel: string;
   el: HTMLElement;
   position: Position;
   tooltip?: HTMLCalciteTooltipElement;
@@ -66,6 +68,8 @@ export const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({
   expanded,
   expandText,
   collapseText,
+  expandLabel,
+  collapseLabel,
   toggle,
   el,
   position,
@@ -76,6 +80,7 @@ export const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({
   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<ExpandToggleProps> = ({
   const actionNode = (
     <calcite-action
       icon={expanded ? expandIcon : collapseIcon}
+      id="expand-toggle"
+      label={label}
       onClick={toggle}
       ref={(referenceElement): HTMLCalciteActionElement =>
         setTooltipReference({ tooltip, referenceElement, expanded, ref })