feat: deprecate layout in favor of position (#812)

* deprecating work in progress * position changes * fix zee tests * wording * review fixes * review fixes
Esri · Feb 11, 2020 · 5e11467 · 5e11467
1 parent af07342
commit 5e11467
Show file tree

Hide file tree

Showing 24 changed files with 186 additions and 85 deletions.
diff --git a/.storybook/resources.ts b/.storybook/resources.ts
@@ -1,4 +1,4 @@
-import { CalciteAppearance, CalciteLayout, CalciteScale, CalciteTheme } from "../src/components/interfaces";
+import { CalciteAppearance, CalcitePosition, CalciteScale, CalciteTheme } from "../src/components/interfaces";
 
 type Direction = "ltr" | "rtl";
 
@@ -11,13 +11,13 @@ interface CommonAttributes {
   dir: AttributeMetadata<Direction>;
   theme: AttributeMetadata<CalciteTheme>;
   scale: AttributeMetadata<CalciteScale>;
-  layout: AttributeMetadata<CalciteLayout>;
+  position: AttributeMetadata<CalcitePosition>;
   appearance: AttributeMetadata<CalciteAppearance>;
 }
 
 const dirOptions: Direction[] = ["ltr", "rtl"];
 const themeOptions: CalciteTheme[] = ["light", "dark"];
-const layoutOptions: CalciteLayout[] = ["leading", "trailing"];
+const positionOptions: CalcitePosition[] = ["start", "end"];
 const scaleOptions: CalciteScale[] = ["s", "m", "l"];
 const appearanceOptions: CalciteAppearance[] = ["solid", "clear"];
 
@@ -34,9 +34,9 @@ export const ATTRIBUTES: CommonAttributes = {
     values: scaleOptions,
     defaultValue: scaleOptions[1]
   },
-  layout: {
-    values: layoutOptions,
-    defaultValue: layoutOptions[0]
+  position: {
+    values: positionOptions,
+    defaultValue: positionOptions[0]
   },
   appearance: {
     values: appearanceOptions,

diff --git a/src/components/calcite-action-bar/calcite-action-bar.stories.ts b/src/components/calcite-action-bar/calcite-action-bar.stories.ts
@@ -9,7 +9,7 @@ import {
 import readme from "./readme.md";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 import dedent from "dedent";
-const { dir, layout, theme } = ATTRIBUTES;
+const { dir, position, theme } = ATTRIBUTES;
 
 export default {
   title: "components|calcite-action-bar",
@@ -45,8 +45,8 @@ const createAttributes: () => Attributes = () => [
     value: text("textCollapse", "Collapse")
   },
   {
-    name: "layout",
-    value: select("layout", layout.values, layout.defaultValue)
+    name: "position",
+    value: select("position", position.values, position.defaultValue)
   },
   {
     name: "theme",

diff --git a/src/components/calcite-action-bar/calcite-action-bar.tsx b/src/components/calcite-action-bar/calcite-action-bar.tsx
@@ -1,10 +1,8 @@
 import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from "@stencil/core";
-
-import { CalciteLayout, CalciteTheme } from "../interfaces";
-
+import { CalciteLayout, CalcitePosition, CalciteTheme } from "../interfaces";
 import { CalciteExpandToggle, toggleChildActionText } from "../utils/CalciteExpandToggle";
-
 import { CSS, SLOTS } from "./resources";
+import { getCalcitePosition } from "../utils/dom";
 
 /**
  * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the action bar, above the collapse/expand button.
@@ -58,11 +56,17 @@ export class CalciteActionBar {
   @Prop() textCollapse = "Collapse";
 
   /**
+   * @deprecated since 5.3 - use "position" instead.
    * Arrangement of the component. Leading and trailing are different depending on if the direction is LTR or RTL. For example, "leading"
    * in a LTR app will appear on the left.
    */
   @Prop({ reflect: true }) layout: CalciteLayout;
 
+  /**
+   * Arranges the component depending on the elements 'dir' property.
+   */
+  @Prop({ reflect: true }) position: CalcitePosition;
+
   /**
    * Used to set the component's color scheme.
    */
@@ -119,15 +123,15 @@ export class CalciteActionBar {
   // --------------------------------------------------------------------------
 
   renderBottomActionGroup() {
-    const { expanded, expand, textExpand, textCollapse, el, layout, toggleExpand } = this;
+    const { expanded, expand, textExpand, textCollapse, el, layout, position, toggleExpand } = this;
 
     const expandToggleNode = expand ? (
       <CalciteExpandToggle
         expanded={expanded}
         textExpand={textExpand}
         textCollapse={textCollapse}
         el={el}
-        layout={layout}
+        position={getCalcitePosition(position, layout)}
         toggleExpand={toggleExpand}
       />
     ) : null;

diff --git a/src/components/calcite-action-pad/calcite-action-pad.stories.ts b/src/components/calcite-action-pad/calcite-action-pad.stories.ts
@@ -9,7 +9,7 @@ import {
 import readme from "./readme.md";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 import dedent from "dedent";
-const { dir, layout, theme } = ATTRIBUTES;
+const { dir, position, theme } = ATTRIBUTES;
 
 export default {
   title: "components|calcite-action-pad",
@@ -37,8 +37,8 @@ const createAttributes: () => Attributes = () => [
     value: boolean("expanded", false)
   },
   {
-    name: "layout",
-    value: select("layout", layout.values, layout.defaultValue)
+    name: "position",
+    value: select("position", position.values, position.defaultValue)
   },
   {
     name: "text-expand",

diff --git a/src/components/calcite-action-pad/calcite-action-pad.tsx b/src/components/calcite-action-pad/calcite-action-pad.tsx
@@ -1,10 +1,8 @@
 import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from "@stencil/core";
-
-import { CalciteLayout, CalciteTheme } from "../interfaces";
-
+import { CalciteLayout, CalcitePosition, CalciteTheme } from "../interfaces";
 import { CalciteExpandToggle, toggleChildActionText } from "../utils/CalciteExpandToggle";
-
 import { CSS } from "./resources";
+import { getCalcitePosition } from "../utils/dom";
 
 /**
  * @slot - A slot for adding `calcite-action`s to the action pad.
@@ -57,10 +55,16 @@ export class CalciteActionPad {
   @Prop() textCollapse = "Collapse";
 
   /**
+   * @deprecated since 5.3 - use "position" instead.
    * Arrangement of the component.
    */
   @Prop({ reflect: true }) layout: CalciteLayout;
 
+  /**
+   * Arranges the component depending on the elements 'dir' property.
+   */
+  @Prop({ reflect: true }) position: CalcitePosition;
+
   /**
    * Used to set the component's color scheme.
    */
@@ -116,15 +120,15 @@ export class CalciteActionPad {
   // --------------------------------------------------------------------------
 
   renderBottomActionGroup() {
-    const { expanded, expand, textExpand, textCollapse, el, layout, toggleExpand } = this;
+    const { expanded, expand, textExpand, textCollapse, el, layout, position, toggleExpand } = this;
 
     const expandToggleNode = expand ? (
       <CalciteExpandToggle
         expanded={expanded}
         textExpand={textExpand}
         textCollapse={textCollapse}
         el={el}
-        layout={layout}
+        position={getCalcitePosition(position, layout)}
         toggleExpand={toggleExpand}
       />
     ) : null;

diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts b/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts
@@ -10,10 +10,6 @@ describe("calcite-shell-panel", () => {
 
   it("defaults", async () =>
     defaults("calcite-shell-panel", [
-      {
-        propertyName: "layout",
-        defaultValue: "leading"
-      },
       {
         propertyName: "collapsed",
         defaultValue: false
@@ -78,7 +74,7 @@ describe("calcite-shell-panel", () => {
     expect(eventSpy).toHaveReceivedEvent();
   });
 
-  it("leading layout property should have action slot first ", async () => {
+  it("deprecated: leading layout property should have action slot first", async () => {
     const page = await newE2EPage();
 
     await page.setContent(
@@ -92,7 +88,21 @@ describe("calcite-shell-panel", () => {
     expect(element.shadowRoot.firstElementChild.tagName).toBe("SLOT");
   });
 
-  it("trailing layout property should have DIV first ", async () => {
+  it("start position property should have action slot first", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      '<calcite-shell-panel position="start"><div slot="action-bar">bar</div><div>content</div></calcite-shell-panel>'
+    );
+
+    const element = await page.find("calcite-shell-panel");
+
+    await page.waitForChanges();
+
+    expect(element.shadowRoot.firstElementChild.tagName).toBe("SLOT");
+  });
+
+  it("deprecated: trailing layout property should have DIV first", async () => {
     const page = await newE2EPage();
 
     await page.setContent(
@@ -106,9 +116,23 @@ describe("calcite-shell-panel", () => {
     expect(element.shadowRoot.firstElementChild.tagName).toBe("DIV");
   });
 
+  it("trailing position property should have DIV first", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      '<calcite-shell-panel position="end"><div slot="action-bar">bar</div><div>content</div></calcite-shell-panel>'
+    );
+
+    const element = await page.find("calcite-shell-panel");
+
+    await page.waitForChanges();
+
+    expect(element.shadowRoot.firstElementChild.tagName).toBe("DIV");
+  });
+
   it("should be accessible", async () =>
     accessible(`
-    <calcite-shell-panel slot="primary-panel" layout="leading">
+    <calcite-shell-panel slot="primary-panel" position="start">
       <calcite-action-bar slot="action-bar">
         <calcite-action-group>
           <calcite-action text="Add">

diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.scss b/src/components/calcite-shell-panel/calcite-shell-panel.scss
@@ -53,9 +53,9 @@
   display: none;
 }
 
-:host([layout="leading"]) slot[name="action-bar"]::slotted(calcite-action-bar) {
+:host([position="start"]) slot[name="action-bar"]::slotted(calcite-action-bar) {
   border-right: 1px solid var(--calcite-app-border);
 }
-:host([layout="trailing"]) slot[name="action-bar"]::slotted(calcite-action-bar) {
+:host([position="end"]) slot[name="action-bar"]::slotted(calcite-action-bar) {
   border-left: 1px solid var(--calcite-app-border);
 }
diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.tsx b/src/components/calcite-shell-panel/calcite-shell-panel.tsx
@@ -1,7 +1,8 @@
 import classnames from "classnames";
 import { Component, Event, EventEmitter, Host, Prop, Watch, h } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { CalciteLayout, CalciteScale } from "../interfaces";
+import { CalciteLayout, CalcitePosition, CalciteScale } from "../interfaces";
+import { getCalcitePosition } from "../utils/dom";
 
 /**
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
@@ -40,9 +41,15 @@ export class CalciteShellPanel {
   @Prop({ reflect: false }) detachedScale: CalciteScale = "m";
 
   /**
+   * @deprecated since 5.3 - use "position" instead.
    * Arrangement of the component.
    */
-  @Prop({ reflect: true }) layout: CalciteLayout = "leading";
+  @Prop({ reflect: true }) layout: CalciteLayout;
+
+  /**
+   * Arranges the component depending on the elements 'dir' property.
+   */
+  @Prop({ reflect: true }) position: CalcitePosition;
 
   // --------------------------------------------------------------------------
   //
@@ -62,7 +69,7 @@ export class CalciteShellPanel {
   // --------------------------------------------------------------------------
 
   render() {
-    const { collapsed, detached, layout } = this;
+    const { collapsed, detached, layout, position } = this;
 
     const contentNode = (
       <div class={classnames(CSS.content, { [CSS.contentDetached]: detached })} hidden={collapsed}>
@@ -74,7 +81,7 @@ export class CalciteShellPanel {
 
     const mainNodes = [actionBarNode, contentNode];
 
-    if (layout === "trailing") {
+    if (getCalcitePosition(position, layout) === "end") {
       mainNodes.reverse();
     }
 

diff --git a/src/components/calcite-shell/calcite-shell.e2e.ts b/src/components/calcite-shell/calcite-shell.e2e.ts
@@ -42,23 +42,42 @@ describe("calcite-shell", () => {
   it("should be accessible", async () =>
     accessible(`
     <calcite-shell>
-      <calcite-shell-panel slot="${SLOTS.primaryPanel}" layout="leading">
+      <calcite-shell-panel slot="${SLOTS.primaryPanel}" position="start">
         <p>Primary Content</p>
       </calcite-shell-panel>
-      <calcite-shell-panel slot="${SLOTS.contextualPanel}" layout="trailing">
+      <calcite-shell-panel slot="${SLOTS.contextualPanel}" position="end">
         <p>Primary Content</p>
       </calcite-shell-panel>
     </calcite-shell>
     `));
 
+  it("deprecated: flex row should not be reversed", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`<calcite-shell>
+      <calcite-shell-panel slot="${SLOTS.primaryPanel}" layout="leading">
+        <p>Primary Content</p>
+      </calcite-shell-panel>
+      <calcite-shell-panel slot="${SLOTS.contextualPanel}" layout="trailing">
+        <p>Primary Content</p>
+      </calcite-shell-panel>
+    </calcite-shell>`);
+
+    await page.waitForChanges();
+
+    const mainReversed = await page.find(`calcite-shell >>> .${CSS.mainReversed}`);
+
+    expect(mainReversed).toBeNull();
+  });
+
   it("flex row should not be reversed", async () => {
     const page = await newE2EPage();
 
     await page.setContent(`<calcite-shell>
-    <calcite-shell-panel slot="${SLOTS.primaryPanel}" layout="leading">
+    <calcite-shell-panel slot="${SLOTS.primaryPanel}" position="start">
       <p>Primary Content</p>
     </calcite-shell-panel>
-    <calcite-shell-panel slot="${SLOTS.contextualPanel}" layout="trailing">
+    <calcite-shell-panel slot="${SLOTS.contextualPanel}" position="end">
       <p>Primary Content</p>
     </calcite-shell-panel>
   </calcite-shell>`);
@@ -70,7 +89,7 @@ describe("calcite-shell", () => {
     expect(mainReversed).toBeNull();
   });
 
-  it("flex row should be reversed", async () => {
+  it("deprecated: flex row should be reversed", async () => {
     const page = await newE2EPage();
 
     await page.setContent(`<calcite-shell>
@@ -88,4 +107,23 @@ describe("calcite-shell", () => {
 
     expect(mainReversed).not.toBeNull();
   });
+
+  it("flex row should be reversed", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(`<calcite-shell>
+    <calcite-shell-panel slot="${SLOTS.primaryPanel}" position="end">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <calcite-shell-panel slot="${SLOTS.contextualPanel}" position="start">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+  </calcite-shell>`);
+
+    await page.waitForChanges();
+
+    const mainReversed = await page.find(`calcite-shell >>> .${CSS.mainReversed}`);
+
+    expect(mainReversed).not.toBeNull();
+  });
 });