Added container and RTL stuff and updated related styles. (#967)

Esri · May 13, 2020 · 57f326a · 57f326a
1 parent f5956fb
commit 57f326a
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 20 deletions.
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,6 +15,14 @@
   padding-top: 0;
 }
 
+.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;
@@ -28,16 +31,22 @@
 
 :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;
+  .container {
     flex-direction: row;
-    padding: 0;
+    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;
+    }
   }
-  .action-group--bottom {
-    padding: 0;
+  .container.calcite--rtl ::slotted(calcite-action-group) {
+    border-right: none;
+    border-left: 1px solid var(--calcite-app-border);
   }
 }
 

diff --git a/src/components/calcite-action-pad/calcite-action-pad.tsx b/src/components/calcite-action-pad/calcite-action-pad.tsx
@@ -11,6 +11,8 @@ import {
 } from "@stencil/core";
 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";
 
 /**
@@ -165,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/demos/action-pad/basic.html b/src/demos/action-pad/basic.html
@@ -43,21 +43,47 @@ <h1>calcite-action-pad horizontal</h1>
 
         <div class="action-pad-container">
           <calcite-action-pad layout="horizontal">
-            <calcite-action-group 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 layout="horizontal">
+            <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 layout="horizontal">
+            <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 layout="horizontal">
+            <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>