fix(action-bar): overflow actions when overflowActionsDisabled is set…

… to false (#7873) **Related Issue:** #7891 ## Summary - When overflowActionsDisabled is set to `false` from `true`, actions should be overflowed again. - Adds test
Esri · Sep 27, 2023 · 3dcceb0 · 3dcceb0
1 parent 5188b21
commit 3dcceb0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 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
@@ -368,6 +368,42 @@ describe("calcite-action-bar", () => {
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
     });
 
+    it("should slot 'menu-actions' on sublist changes after being enabled", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<div style="width:500px; height:500px;">
+        <calcite-action-bar style="height: 290px" overflow-actions-disabled>
+          <calcite-action-group id="dynamic-group"
+            ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
+            <calcite-action text="Styles" icon="shapes"></calcite-action>
+            <calcite-action text="Styles" icon="shapes"></calcite-action>
+            <calcite-action text="Filter" icon="layer-filter"></calcite-action>
+            <calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
+            <calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
+            <calcite-action text="Labels" icon="label" active></calcite-action>
+            <calcite-action text="Table" icon="table"></calcite-action
+          ></calcite-action-group>
+          <calcite-action-group>
+            <calcite-action text="Save" icon="save" disabled></calcite-action>
+            <calcite-action icon="layers" text="Layers"></calcite-action>
+          </calcite-action-group>
+          <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
+        </calcite-action-bar>
+      </div>`);
+      await page.waitForChanges();
+      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+
+      expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
+      expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
+
+      const actionBar = await page.find("calcite-action-bar");
+      actionBar.setProperty("overflowActionsDisabled", false);
+      await page.waitForChanges();
+      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+
+      expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
+      expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
+    });
+
     it.skip("should slot 'menu-actions' on resize of component", async () => {
       const page = await newE2EPage({
         html: html`<div style="width:500px; height:500px;">

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -114,9 +114,13 @@ export class ActionBar
 
   @Watch("overflowActionsDisabled")
   overflowDisabledHandler(overflowActionsDisabled: boolean): void {
-    overflowActionsDisabled
-      ? this.resizeObserver.disconnect()
-      : this.resizeObserver.observe(this.el);
+    if (overflowActionsDisabled) {
+      this.resizeObserver?.disconnect();
+      return;
+    }
+
+    this.resizeObserver?.observe(this.el);
+    this.overflowActions();
   }
 
   /**