feat(block): ensure chevron is always displayed (#8014)

**Related Issue:** #4935 ## Summary Toggle icon is now always visible.
Esri · Oct 17, 2023 · 95fecb2 · 95fecb2
1 parent 3971c32
commit 95fecb2
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 34 deletions.
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -231,17 +231,6 @@ describe("calcite-block", () => {
       expect(blockCloseSpy).toHaveReceivedEventTimes(1);
     });
 
-    it("does not render collapsible icon when a control is added to the header", async () => {
-      const page = await newE2EPage();
-      await page.setContent(
-        `<calcite-block heading="test-heading" collapsible>
-          <calcite-action text="test" icon="banana" slot="${SLOTS.control}"></calcite-action>
-        </calcite-block>`
-      );
-      const collapsibleIcon = await page.find(`calcite-block >>> .${CSS.toggleIcon}`);
-      expect(collapsibleIcon).toBeNull();
-    });
-
     it("displays a status icon instead of a header icon when `status` is an accepted value", async () => {
       const page = await newE2EPage();
       await page.setContent(
@@ -289,17 +278,6 @@ describe("calcite-block", () => {
       const actionAssignedSlot = await page.$eval("calcite-action", (action) => action.assignedSlot.name);
       expect(actionAssignedSlot).toBe(SLOTS.headerMenuActions);
     });
-
-    it("does not render collapsible icon when actions are added to the header menu", async () => {
-      const page = await newE2EPage();
-      await page.setContent(
-        `<calcite-block heading="test-heading" collapsible>
-          <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
-        </calcite-block>`
-      );
-      const collapsibleIcon = await page.find(`calcite-block >>> .${CSS.toggleIcon}`);
-      expect(collapsibleIcon).toBeNull();
-    });
   });
 
   it("should allow the CSS custom property to be overridden when applied to :root", async () => {

diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss
@@ -126,7 +126,7 @@ calcite-handle {
   justify-self-end
   duration-150
   ease-in-out;
-  margin-inline-end: theme("spacing.4");
+  margin-inline-end: theme("spacing.3");
   margin-inline-start: auto;
 }
 

diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
@@ -131,12 +131,12 @@ export const simple = (): string =>
 export const withHeaderControl = (): string =>
   create(
     "calcite-block",
-    createBlockAttributes({ exceptions: ["open", "collapsible"] }),
-    `<label slot="control">test <input placeholder="I'm a header control"/></label>`
+    createBlockAttributes({ exceptions: ["open"] }),
+    html`<label slot="control">test <input placeholder="I'm a header control" /></label>`
   );
 
 export const withIconAndHeader = (): string =>
-  create("calcite-block", createBlockAttributes({ exceptions: ["open", "collapsible"] }), `<div slot="icon">✅</div>`);
+  create("calcite-block", createBlockAttributes({ exceptions: ["open"] }), html`<div slot="icon">✅</div>`);
 
 export const disabled_TestOnly = (): string => html`<calcite-block
   heading="heading"

diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
@@ -352,14 +352,7 @@ export class Block
             title={toggleLabel}
           >
             {headerContent}
-            {!hasControl && !hasMenuActions ? (
-              <calcite-icon
-                aria-hidden="true"
-                class={CSS.toggleIcon}
-                icon={collapseIcon}
-                scale="s"
-              />
-            ) : null}
+            <calcite-icon aria-hidden="true" class={CSS.toggleIcon} icon={collapseIcon} scale="s" />
           </button>
         ) : (
           headerContent