Removed layout from action-group and associated styles and e2e. (#967)

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

@@ -1,30 +1,14 @@
 import { accessible, hidden, renders } from "../../tests/commonTests";
-import { newE2EPage } from "@stencil/core/testing";
 
 describe("calcite-action-group", () => {
   it("renders", async () => renders("calcite-action-group"));
 
   it("honors hidden attribute", async () => hidden("calcite-action-group"));
 
-  it("defaults", async () => {
-    const page = await newE2EPage();
-
-    await page.setContent(`
-      <calcite-action-pad>
-        <calcite-action-group>
-          <calcite-action text="hello"></calcite-action>
-        </calcite-action-group>
-      </calcite-action-pad>
-      `);
-    const element = await page.find("calcite-action-group");
-    expect(element.getAttribute("layout")).toBe("vertical");
-    expect(element.getAttribute("layout")).not.toBe("horizontal");
-  });
-
   it("should be accessible", async () =>
     accessible(`
     <calcite-action-group>
-        <calcite-action text="Add" icon="plus"></calcite-action>
-      </calcite-action-group>
+      <calcite-action text="Add" icon="plus"></calcite-action>
+    </calcite-action-group>
     `));
 });

src/components/calcite-action-group/calcite-action-group.scss

@@ -11,11 +11,6 @@
   padding-top: 0;
 }
 
-:host([layout="horizontal"]) {
-  flex-direction: row;
-  padding: 0;
-}
-
 ::slotted(calcite-action) {
   display: flex;
   width: 100%;

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

@@ -1,5 +1,4 @@
-import { Component, Host, h, VNode, Prop } from "@stencil/core";
-import { CalciteLayout } from "../interfaces";
+import { Component, Host, h, VNode } from "@stencil/core";
 
 @Component({
   tag: "calcite-action-group",
@@ -10,16 +9,6 @@ import { CalciteLayout } from "../interfaces";
  * @slot - A slot for adding a group of `calcite-action`s.
  */
 export class CalciteActionGroup {
-  // --------------------------------------------------------------------------
-  //
-  //  Properties
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Indicates the horizontal or vertical layout of the component.
-   */
-  @Prop({ reflect: true }) layout: CalciteLayout = "vertical";
-
   // --------------------------------------------------------------------------
   //
   //  Component Methods

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

@@ -16,7 +16,6 @@ describe("calcite-action-pad", () => {
     expect(element.getAttribute("expand")).not.toBeNull();
     expect(element.getAttribute("expanded")).toBeNull();
     expect(element.getAttribute("layout")).toBe("vertical");
-    expect(element.getAttribute("layout")).not.toBe("horizontal");
   });
 
   describe("expand functionality", () => {

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

@@ -28,20 +28,19 @@
 
 :host([layout="horizontal"], [expanded]),
 :host([layout="horizontal"]) {
+  flex-direction: row;
   max-width: unset;
   ::slotted(calcite-action-group) {
     border-right: 1px solid var(--calcite-app-border);
     border-bottom: none;
+    flex-direction: row;
+    padding: 0;
   }
   .action-group--bottom {
-    padding-bottom: 0;
+    padding: 0;
   }
 }
 
-:host([layout="horizontal"]) {
-  flex-direction: row;
-}
-
 ::slotted(calcite-action-group:last-child) {
   border-bottom: none;
 }

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

@@ -28,14 +28,14 @@ export class CalciteActionPad {
   //
   // --------------------------------------------------------------------------
   /**
-   * Indicates whether widget can be expanded.
+   * Indicates the horizontal or vertical layout of the component.
    */
-  @Prop({ reflect: true }) expand = true;
+  @Prop({ reflect: true }) layout: CalciteLayout = "vertical";
 
   /**
-   * Indicates the horizontal or vertical layout of the component.
+   * Indicates whether widget can be expanded.
    */
-  @Prop({ reflect: true }) layout: CalciteLayout = "vertical";
+  @Prop({ reflect: true }) expand = true;
 
   @Watch("expand")
   expandHandler(expand: boolean): void {
@@ -139,7 +139,6 @@ export class CalciteActionPad {
       intlExpand,
       intlCollapse,
       el,
-      layout,
       position,
       toggleExpand,
       tooltipExpand
@@ -161,9 +160,7 @@ export class CalciteActionPad {
     ) : null;
 
     return expandToggleNode ? (
-      <calcite-action-group class={CSS.actionGroupBottom} layout={layout}>
-        {expandToggleNode}
-      </calcite-action-group>
+      <calcite-action-group class={CSS.actionGroupBottom}>{expandToggleNode}</calcite-action-group>
     ) : null;
   }