fix: only modify textEnabled when expand functionality is enabled (#766)

* only modify textEnabled when expand functionality is enabled

* review fixes

* add tests

src/components/calcite-action-bar/calcite-action-bar.e2e.ts

@@ -89,6 +89,30 @@ describe("calcite-action-bar", () => {
 
       expect(textEnabled).toBe(true);
     });
+
+    it("should not have bottomGroup when expand is false", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent(`<calcite-action-bar expand="false"></calcite-action-bar>`);
+
+      const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+
+      expect(buttonGroup).toBeNull();
+    });
+
+    it("should not modify textEnabled on actions when expand is false", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent(
+        `<calcite-action-bar expand="false" expanded><calcite-action text="hello"></calcite-action></calcite-action-bar>`
+      );
+
+      const action = await page.find("calcite-action");
+
+      const textEnabled = await action.getProperty("textEnabled");
+
+      expect(textEnabled).toBe(false);
+    });
   });
 
   it("should be accessible", async () =>

src/components/calcite-action-bar/calcite-action-bar.tsx

@@ -26,14 +26,23 @@ export class CalciteActionBar {
    */
   @Prop({ reflect: true }) expand = true;
 
+  @Watch("expand")
+  expandHandler(expand: boolean) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
+    }
+  }
+
   /**
    * Indicates whether widget is expanded.
    */
   @Prop({ reflect: true }) expanded = false;
 
   @Watch("expanded")
   expandedHandler(expanded: boolean) {
-    toggleChildActionText({ parent: this.el, expanded });
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
+    }
 
     this.calciteActionBarToggle.emit();
   }
@@ -86,8 +95,11 @@ export class CalciteActionBar {
   // --------------------------------------------------------------------------
 
   componentWillLoad() {
-    const { el, expanded } = this;
-    toggleChildActionText({ parent: el, expanded });
+    const { el, expand, expanded } = this;
+
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
   }
 
   // --------------------------------------------------------------------------

src/components/calcite-action-pad/calcite-action-pad.e2e.ts

@@ -91,6 +91,30 @@ describe("calcite-action-pad", () => {
     });
   });
 
+  it("should not have bottomGroup when expand is false", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`<calcite-action-bar expand="false"></calcite-action-bar>`);
+
+    const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+
+    expect(buttonGroup).toBeNull();
+  });
+
+  it("should not modify textEnabled on actions when expand is false", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      `<calcite-action-bar expand="false" expanded><calcite-action text="hello"></calcite-action></calcite-action-bar>`
+    );
+
+    const action = await page.find("calcite-action");
+
+    const textEnabled = await action.getProperty("textEnabled");
+
+    expect(textEnabled).toBe(false);
+  });
+
   it("should be accessible", async () =>
     accessible(`
     <calcite-action-pad>

src/components/calcite-action-pad/calcite-action-pad.tsx

@@ -25,14 +25,23 @@ export class CalciteActionPad {
    */
   @Prop({ reflect: true }) expand = true;
 
+  @Watch("expand")
+  expandHandler(expand: boolean) {
+    if (expand) {
+      toggleChildActionText({ parent: this.el, expanded: this.expanded });
+    }
+  }
+
   /**
    * Indicates whether widget is expanded.
    */
   @Prop({ reflect: true }) expanded = false;
 
   @Watch("expanded")
   expandedHandler(expanded: boolean) {
-    toggleChildActionText({ parent: this.el, expanded });
+    if (this.expand) {
+      toggleChildActionText({ parent: this.el, expanded });
+    }
 
     this.calciteActionPadToggle.emit();
   }
@@ -83,8 +92,11 @@ export class CalciteActionPad {
   // --------------------------------------------------------------------------
 
   componentWillLoad() {
-    const { el, expanded } = this;
-    toggleChildActionText({ parent: el, expanded });
+    const { el, expand, expanded } = this;
+
+    if (expand) {
+      toggleChildActionText({ parent: el, expanded });
+    }
   }
 
   // --------------------------------------------------------------------------