fix(block): Remove extra padding applied to slotted icon content (#793)

* Update component story to exclude invalid use cases.

.storybook/utils.ts

@@ -50,7 +50,8 @@ export interface SimpleAttribute {
   value: string | boolean | number;
 }
 
-export type Attributes = (KnobbedAttribute | SimpleAttribute)[];
+export type Attribute = KnobbedAttribute | SimpleAttribute;
+export type Attributes = Attribute[];
 
 export const createComponentHTML = (tagName: string, attributes: Attributes, contentHTML?: string) =>
   `<${tagName} ${attributes.map(({ name, value }) => `${name}="${value}"`).join(" ")}>${contentHTML}</${tagName}>`;

src/components/calcite-block/calcite-block.scss

@@ -80,15 +80,11 @@ calcite-loader[inline] {
 }
 
 .content {
-  position: relative;
-}
-
-::slotted(*) {
   padding: 0 var(--calcite-app-side-spacing-three-quarters) var(--calcite-app-cap-spacing-half);
+  position: relative;
 }
 
 ::slotted([slot="control"]) {
-  padding: unset;
   position: absolute;
   margin: auto;
   right: var(--calcite-app-side-spacing-three-quarters);

src/components/calcite-block/calcite-block.stories.ts

@@ -1,5 +1,6 @@
 import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
 import {
+  Attribute,
   Attributes,
   createComponentHTML as create,
   darkBackground,
@@ -26,52 +27,99 @@ export default {
   }
 };
 
-const createBlockAttributes: () => Attributes = () => {
+const createBlockAttributes: (options?: { except: string[] }) => Attributes = ({ except } = { except: [] }) => {
   const group = "block";
   const { dir, theme } = ATTRIBUTES;
 
-  return [
+  interface DeferredAttribute {
+    name: string;
+    commit: () => Attribute;
+  }
+
+  return ([
     {
       name: "heading",
-      value: text("heading", "Heading", group)
+      commit() {
+        this.value = text("heading", "Heading", group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "dir",
-      value: select("dir", dir.values, dir.defaultValue, group)
+      commit() {
+        this.value = select("dir", dir.values, dir.defaultValue, group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "summary",
-      value: text("summary", "summary", group)
+      commit() {
+        this.value = text("summary", "summary", group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "open",
-      value: boolean("open", true, group)
+      commit() {
+        this.value = boolean("open", true, group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "collapsible",
-      value: boolean("collapsible", true, group)
+      commit() {
+        this.value = boolean("collapsible", true, group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "loading",
-      value: boolean("loading", false, group)
+      commit() {
+        this.value = boolean("loading", false, group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "disabled",
-      value: boolean("disabled", false, group)
+      commit() {
+        this.value = boolean("disabled", false, group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "theme",
-      value: select("theme", theme.values, theme.defaultValue, group)
+      commit() {
+        this.value = select("theme", theme.values, theme.defaultValue, group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "text-collapse",
-      value: text("textCollapse", "Collapse", group)
+      commit() {
+        this.value = text("textCollapse", "Collapse", group);
+        delete this.build;
+        return this;
+      }
     },
     {
       name: "text-expand",
-      value: text("textExpand", "Expand", group)
+      commit() {
+        this.value = text("textExpand", "Expand", group);
+        delete this.build;
+        return this;
+      }
     }
-  ];
+  ] as DeferredAttribute[])
+    .filter((attr) => !except.find((excluded) => excluded === attr.name))
+    .map((attr) => attr.commit());
 };
 
 const createSectionAttributes: () => Attributes = () => {
@@ -122,8 +170,9 @@ export const basic = () =>
 export const withHeaderControl = () =>
   create(
     "calcite-block",
-    createBlockAttributes(),
+    createBlockAttributes({ except: ["open", "collapsible"] }),
     `<label slot="control">test <input placeholder="I'm a header control"/></label>`
   );
 
-export const withIconAndHeader = () => create("calcite-block", createBlockAttributes(), `<div slot="icon">✅</div>`);
+export const withIconAndHeader = () =>
+  create("calcite-block", createBlockAttributes({ except: ["open", "collapsible"] }), `<div slot="icon">✅</div>`);