feat(block): hide collapsible icon when a control is provided.

Esri · Oct 29, 2019 · 57b22f0 · 57b22f0
2 parents 33dc43d + 843aef1
commit 57b22f0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 17 deletions.
diff --git a/src/components/calcite-block/calcite-block.e2e.ts b/src/components/calcite-block/calcite-block.e2e.ts
@@ -104,24 +104,29 @@ describe("calcite-block", () => {
       expect(summary.innerText).toBe("test-summary");
     });
 
-    it("supports a nested control", async () => {
+    it("allows users to add a control in a collapsible block", async () => {
       const page = await newE2EPage();
       await page.setContent(
         `<calcite-block heading="test-heading" collapsible><input class="nested-control" slot=${SLOTS.control} /></calcite-block>`
       );
-      const element = await page.find("calcite-block");
-      const elementToggleSpy = await element.spyOnEvent("calciteBlockToggle");
-
-      const control = await element.find(".nested-control");
+      const control = await page.find(".nested-control");
       expect(await control.isVisible()).toBe(true);
-      expect(await control.getProperty("slot")).toEqual(SLOTS.control);
+
+      const controlSlot = await page.find(`calcite-block >>> slot[name=${SLOTS.control}]`);
+      expect(await controlSlot.isVisible()).toBe(true);
+
+      const collapsibleIcon = await page.find(`calcite-block >>> .${CSS.toggleIcon}`);
+      expect(collapsibleIcon).toBeNull();
+
+      const block = await page.find("calcite-block");
+      const blockToggleSpy = await block.spyOnEvent("calciteBlockToggle");
 
       await control.click();
-      expect(elementToggleSpy).toHaveReceivedEventTimes(0);
+      expect(blockToggleSpy).toHaveReceivedEventTimes(0);
 
-      await element.click();
-      await element.click();
-      expect(elementToggleSpy).toHaveReceivedEventTimes(2);
+      await block.click();
+      await block.click();
+      expect(blockToggleSpy).toHaveReceivedEventTimes(2);
     });
 
     it("supports a header icon", async () => {

diff --git a/src/components/calcite-block/calcite-block.tsx b/src/components/calcite-block/calcite-block.tsx
@@ -152,6 +152,15 @@ export class CalciteBlock {
       </header>
     );
 
+    let hasControl = false;
+    let hasContent = false;
+
+    for (let i = 0; i < el.children.length; i++) {
+      const isControl = el.children[i].slot === SLOTS.control;
+      hasControl = hasControl || isControl;
+      hasContent = hasContent || !isControl;
+    }
+
     const headerNode = (
       <div class={CSS.headerContainer}>
         {collapsible ? (
@@ -162,20 +171,20 @@ export class CalciteBlock {
             title={toggleLabel}
           >
             {headerContent}
-            <CalciteIcon
-              size="16"
-              path={open ? chevronUp16 : chevronDown16}
-              svgAttributes={{ class: CSS.toggleIcon }}
-            />
+            {hasControl ? null : (
+              <CalciteIcon
+                size="16"
+                path={open ? chevronUp16 : chevronDown16}
+                svgAttributes={{ class: CSS.toggleIcon }}
+              />
+            )}
           </button>
         ) : (
           headerContent
         )}
       </div>
     );
 
-    const hasContent = !!Array.from(el.children).some((child) => child.slot !== SLOTS.control);
-
     return (
       <Host>
         <article aria-expanded={collapsible ? (open ? "true" : "false") : null} aria-busy={loading}>

diff --git a/src/demos/calcite-block.html b/src/demos/calcite-block.html
@@ -52,6 +52,12 @@ <h2>Icon + Header</h2>
           <div slot="icon">✅</div>
         </calcite-block>
 
+        <h2>Header + content (always open)</h2>
+
+        <calcite-block heading="Header" open>
+          <div>Some content</div>
+        </calcite-block>
+
         <h2>Header + content (collapsible)</h2>
 
         <calcite-block heading="All the king's buff horses couldn't fix the turbo." summary="summary" open collapsible>
@@ -141,6 +147,13 @@ <h2>Header + content (collapsible)</h2>
           </calcite-block-section>
         </calcite-block>
 
+        <h2>Header + collapsible + control = no collapsible icon</h2>
+
+        <calcite-block heading="no toggle icon when there is a control" collapsible>
+          <label slot="control">test</label>
+          <div>Some content</div>
+        </calcite-block>
+
         <h2>RTL</h2>
 
         <calcite-block dir="rtl" heading="Heading" summary="summary" open collapsible>