feat(action-pad): add horizontal layout

* ActionPad. Added horizontal mode and added orientation to interfaces. (#967) * cool * Added e2e layout tests. (#967) * Removed layout from action-group and associated styles and e2e. (#967) * Added container and RTL stuff and updated related styles. (#967) * Removed unnecessary selector. (#967)
Esri · May 14, 2020 · faf319b · faf319b
1 parent 6a0c5db
commit faf319b
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 14 deletions.
diff --git a/src/components/calcite-action-group/calcite-action-group.e2e.ts b/src/components/calcite-action-group/calcite-action-group.e2e.ts
@@ -8,7 +8,7 @@ describe("calcite-action-group", () => {
   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>
     `));
 });
diff --git a/src/components/calcite-action-group/calcite-action-group.scss b/src/components/calcite-action-group/calcite-action-group.scss
@@ -2,7 +2,6 @@
   @extend %component-host;
   display: flex;
   flex-direction: column;
-  padding: 0;
   padding: var(--calcite-app-cap-spacing-half) 0;
 }
 

diff --git a/src/components/calcite-action-pad/calcite-action-pad.e2e.ts b/src/components/calcite-action-pad/calcite-action-pad.e2e.ts
@@ -15,6 +15,7 @@ describe("calcite-action-pad", () => {
     const element = await page.find("calcite-action-pad");
     expect(element.getAttribute("expand")).not.toBeNull();
     expect(element.getAttribute("expanded")).toBeNull();
+    expect(element.getAttribute("layout")).toBe("vertical");
   });
 
   describe("expand functionality", () => {

diff --git a/src/components/calcite-action-pad/calcite-action-pad.scss b/src/components/calcite-action-pad/calcite-action-pad.scss
@@ -1,10 +1,5 @@
 :host {
   @extend %component-host;
-  display: inline-flex;
-  flex-direction: column;
-  box-shadow: var(--calcite-app-shadow-2);
-  max-width: 15vw;
-  overflow-y: auto;
   animation: calcite-app-fade-in var(--calcite-app-animation-time-fast) var(--calcite-app-easing-function);
 }
 
@@ -20,12 +15,40 @@
   padding-top: 0;
 }
 
-::slotted(calcite-action-group:last-child) {
-  border-bottom: none;
+.container {
+  display: inline-flex;
+  flex-direction: column;
+  box-shadow: var(--calcite-app-shadow-2);
+  max-width: 15vw;
+  overflow-y: auto;
 }
 
 .action-group--bottom {
   padding-bottom: 0;
   flex-grow: 1;
   justify-content: flex-end;
 }
+
+:host([layout="horizontal"]) {
+  .container {
+    flex-direction: row;
+    max-width: unset;
+    .action-group--bottom {
+      padding: 0;
+    }
+    ::slotted(calcite-action-group) {
+      border-right: 1px solid var(--calcite-app-border);
+      border-bottom: none;
+      flex-direction: row;
+      padding: 0;
+    }
+  }
+  .container.calcite--rtl ::slotted(calcite-action-group) {
+    border-right: none;
+    border-left: 1px solid var(--calcite-app-border);
+  }
+}
+
+::slotted(calcite-action-group:last-child) {
+  border-bottom: none;
+}
diff --git a/src/components/calcite-action-pad/calcite-action-pad.tsx b/src/components/calcite-action-pad/calcite-action-pad.tsx
@@ -9,8 +9,10 @@ import {
   h,
   VNode
 } from "@stencil/core";
-import { CalcitePosition, CalciteTheme } from "../interfaces";
+import { CalciteLayout, CalcitePosition, CalciteTheme } from "../interfaces";
 import { CalciteExpandToggle, toggleChildActionText } from "../utils/CalciteExpandToggle";
+import { getElementDir } from "../utils/dom";
+import { CSS_UTILITY } from "../utils/resources";
 import { CSS, TEXT } from "./resources";
 
 /**
@@ -27,6 +29,11 @@ export class CalciteActionPad {
   //  Properties
   //
   // --------------------------------------------------------------------------
+  /**
+   * Indicates the horizontal or vertical layout of the component.
+   */
+  @Prop({ reflect: true }) layout: CalciteLayout = "vertical";
+
   /**
    * Indicates whether widget can be expanded.
    */
@@ -160,10 +167,18 @@ export class CalciteActionPad {
   }
 
   render(): VNode {
+    const rtl = getElementDir(this.el) === "rtl";
+    const containerClasses = {
+      [CSS.container]: true,
+      [CSS_UTILITY.rtl]: rtl
+    }
+
     return (
       <Host>
-        <slot />
-        {this.renderBottomActionGroup()}
+        <div class={containerClasses}>
+          <slot />
+          {this.renderBottomActionGroup()}
+        </div>
       </Host>
     );
   }

diff --git a/src/components/calcite-action-pad/resources.ts b/src/components/calcite-action-pad/resources.ts
@@ -1,5 +1,6 @@
 export const CSS = {
-  actionGroupBottom: "action-group--bottom"
+  actionGroupBottom: "action-group--bottom",
+  container: "container"
 };
 
 export const TEXT = {

diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts
@@ -1,5 +1,7 @@
 /* Note: using `.d.ts` file extension will exclude it from the output build */
 
+export type CalciteLayout = "horizontal" | "vertical";
+
 export type CalcitePosition = "start" | "end";
 
 export type CalciteTheme = "light" | "dark";

diff --git a/src/demos/action-pad/basic.html b/src/demos/action-pad/basic.html
@@ -37,6 +37,58 @@ <h3>Tooltip on expand toggle</h3>
           <calcite-tooltip id="tooltip">Hello world!</calcite-tooltip>
         </div>
       </section>
+
+      <section class="example-container">
+        <h1>calcite-action-pad horizontal</h1>
+
+        <div class="action-pad-container">
+          <calcite-action-pad layout="horizontal">
+            <calcite-action-group>
+              <calcite-action text="Undo" icon="undo"> </calcite-action>
+              <calcite-action text="Redo" icon="redo"> </calcite-action>
+            </calcite-action-group>
+            <calcite-action-group>
+              <calcite-action text="Title" icon="title"></calcite-action>
+              <calcite-action text="Text" icon="text"></calcite-action>
+              <calcite-action text="Bold" icon="bold"></calcite-action>
+              <calcite-action text="Italics" icon="italicize"></calcite-action>
+            </calcite-action-group>
+            <calcite-action-group>
+              <calcite-action text="Cut" icon="scissors"></calcite-action>
+              <calcite-action text="Add" icon="plus-square"></calcite-action>
+            </calcite-action-group>
+            <calcite-action-group>
+              <calcite-action text="Remove" icon="trash"> </calcite-action>
+            </calcite-action-group>
+          </calcite-action-pad>
+        </div>
+      </section>
+
+      <section class="example-container" >
+        <h1>RTL : calcite-action-pad horizontal</h1>
+
+        <div class="action-pad-container" dir="rtl">
+          <calcite-action-pad layout="horizontal">
+            <calcite-action-group>
+              <calcite-action text="Undo" icon="undo"> </calcite-action>
+              <calcite-action text="Redo" icon="redo"> </calcite-action>
+            </calcite-action-group>
+            <calcite-action-group>
+              <calcite-action text="Title" icon="title"></calcite-action>
+              <calcite-action text="Text" icon="text"></calcite-action>
+              <calcite-action text="Bold" icon="bold"></calcite-action>
+              <calcite-action text="Italics" icon="italicize"></calcite-action>
+            </calcite-action-group>
+            <calcite-action-group>
+              <calcite-action text="Cut" icon="scissors"></calcite-action>
+              <calcite-action text="Add" icon="plus-square"></calcite-action>
+            </calcite-action-group>
+            <calcite-action-group>
+              <calcite-action text="Remove" icon="trash"> </calcite-action>
+            </calcite-action-group>
+          </calcite-action-pad>
+        </div>
+      </section>
       <script>
         var actionPad = document.getElementById("action-pad-test");
         var tooltip = document.getElementById("tooltip");