feat(flow-item): added slot that hydrates header-leading-content of c…

…alcite-panel * preliminary addition * Updated slot name. (#958) * Added test for leading-actions slot. (#958) * added new slot example to demo * added overloaded slot example * Moved class to CSS const. (#958) * Added e2e for empty leading-actions. (#958) * Added additional e2e test. (#958)
Esri · May 12, 2020 · e894d55 · e894d55
1 parent 713b8b9
commit e894d55
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 2 deletions.
diff --git a/src/components/calcite-flow-item/calcite-flow-item.e2e.ts b/src/components/calcite-flow-item/calcite-flow-item.e2e.ts
@@ -21,6 +21,31 @@ describe("calcite-flow-item", () => {
     expect(singleActionContainer).toBeNull();
   });
 
+  it("should not render leading actions container when there are no leading actions", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent("<calcite-flow-item></calcite-flow-item>");
+
+    const actionsContainer = await page.find(`calcite-flow-item >>> .${CSS.leadingActions}`);
+
+    expect(actionsContainer).toBeNull();
+  });
+
+  it("should render leading actions container when there are leading actions", async () => {
+    const page = await newE2EPage();
+
+    const pageContent = `
+    <calcite-flow-item>
+      <calcite-action slot="${SLOTS.leadingActions}" text="hello"></calcite-action>
+    </calcite-flow-item>`;
+
+    await page.setContent(pageContent);
+
+    const actionsContainer = await page.find(`calcite-flow-item >>> .${CSS.leadingActions}`);
+
+    expect(actionsContainer).not.toBeNull();
+  });
+
   it("should not show menu button when actions are inside blacklisted component", async () => {
     const page = await newE2EPage();
 

diff --git a/src/components/calcite-flow-item/calcite-flow-item.scss b/src/components/calcite-flow-item/calcite-flow-item.scss
@@ -13,6 +13,10 @@ calcite-panel {
   height: 100%;
 }
 
+.leading-actions {
+  display: flex;
+}
+
 .header-content {
   display: block;
   .heading {

diff --git a/src/components/calcite-flow-item/calcite-flow-item.tsx b/src/components/calcite-flow-item/calcite-flow-item.tsx
@@ -295,6 +295,15 @@ export class CalciteFlowItem {
     );
   }
 
+  renderHeaderLeadingContent(): VNode {
+    const hasLeadingActions = getSlotted(this.el, SLOTS.leadingActions);
+    return hasLeadingActions ? (
+      <div slot={PANEL_SLOTS.headerLeadingContent} class={CSS.leadingActions}>
+        <slot name={SLOTS.leadingActions}></slot>
+      </div>
+    ) : null;
+  }
+
   renderHeaderActions(): VNode {
     const menuActions = getSlotted(this.el, SLOTS.menuActions, { all: true });
 
@@ -368,6 +377,7 @@ export class CalciteFlowItem {
           dir={dir}
         >
           {this.renderBackButton(dir === "rtl")}
+          {this.renderHeaderLeadingContent()}
           {this.renderHeader()}
           {this.renderHeaderActions()}
           <slot />

diff --git a/src/components/calcite-flow-item/resources.ts b/src/components/calcite-flow-item/resources.ts
@@ -7,6 +7,7 @@ export const CSS = {
   backButton: "back-button",
   footerActions: "footer-actions",
   headerActions: "header-actions",
+  leadingActions: "leading-actions",
   singleActionContainer: "single-action-container",
   menuContainer: "menu-container",
   menuButton: "menu-button",
@@ -16,6 +17,7 @@ export const CSS = {
 };
 
 export const SLOTS = {
+  leadingActions: "leading-actions",
   menuActions: "menu-actions",
   fab: "fab",
   footerActions: "footer-actions"

diff --git a/src/demos/flow/basic.html b/src/demos/flow/basic.html
@@ -18,11 +18,19 @@ <h1>calcite-flow</h1>
         <h2>Basic</h2>
         <calcite-flow>
           <calcite-flow-item heading="Item One">
+            <calcite-action icon="caret-down" slot="leading-actions"></calcite-action>
             <button slot="menu-actions">Reset</button>
             <button slot="menu-actions">Rename</button>
             <img src="https://via.placeholder.com/300x200" alt="placeholder" />
           </calcite-flow-item>
           <calcite-flow-item heading="Item Two">
+            <img src="http://www.fillmurray.com/100/100" height="40" slot="leading-actions" />
+            <button slot="menu-actions">Reset</button>
+            <button slot="menu-actions">Rename</button>
+            <img src="https://via.placeholder.com/400x300" alt="placeholder" />
+            <calcite-fab slot="fab"></calcite-fab>
+          </calcite-flow-item>
+          <calcite-flow-item heading="Item Three">
             <button slot="menu-actions">Reset</button>
             <button slot="menu-actions">Rename</button>
             <img src="https://via.placeholder.com/400x300" alt="placeholder" />
@@ -47,16 +55,23 @@ <h2>Flow RTL</h2>
           <h3>Basic</h3>
           <calcite-flow>
             <calcite-flow-item heading="Item One">
+              <calcite-action icon="caret-down" slot="leading-actions"></calcite-action>
               <button slot="menu-actions">Reset</button>
               <button slot="menu-actions">Rename</button>
-
               <img src="https://via.placeholder.com/300x200" alt="placeholder" />
             </calcite-flow-item>
             <calcite-flow-item heading="Item Two">
+              <img src="http://www.fillmurray.com/100/100" height="40" slot="leading-actions" />
+              <button slot="menu-actions">Reset</button>
+              <button slot="menu-actions">Rename</button>
+              <img src="https://via.placeholder.com/400x300" alt="placeholder" />
+              <calcite-fab slot="fab"></calcite-fab>
+            </calcite-flow-item>
+            <calcite-flow-item heading="Item Three">
               <button slot="menu-actions">Reset</button>
               <button slot="menu-actions">Rename</button>
-
               <img src="https://via.placeholder.com/400x300" alt="placeholder" />
+              <calcite-fab slot="fab"></calcite-fab>
             </calcite-flow-item>
           </calcite-flow>