feat: rework button slotted content so that empty spans are not outpu…

…t, remove 'is-empty' CSS
boltdesignsystem · Oct 25, 2019 · dd314d9 · dd314d9
1 parent 8bb7405
commit dd314d9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 58 deletions.
diff --git a/packages/components/bolt-button/src/button.js b/packages/components/bolt-button/src/button.js
@@ -71,57 +71,65 @@ class BoltButton extends BoltAction {
     let buttonElement = null;
 
     const innerSlots = () => {
-      const itemClasses = cx('c-bolt-button__item', {
-        'is-empty': 'default' in this.slots === false,
-      });
-      const beforeIconClasses = cx('c-bolt-button__icon', {
-        'is-empty': 'before' in this.slots === false,
-      });
-      const afterIconClasses = cx('c-bolt-button__icon', {
-        'is-empty': 'after' in this.slots === false,
-      });
+      const itemClasses = cx('c-bolt-button__item');
+      const iconClasses = cx('c-bolt-button__icon');
+      const sizerClasses = cx('c-bolt-button__icon-sizer');
 
       if (bolt.isServer) {
         return html`
-          <replace-with-grandchildren class="${beforeIconClasses}"
-            ><span class="${cx(`c-bolt-button__icon-sizer`)}"
-              >${'before' in this.slots ? this.slot('before') : ''}</span
-            ></replace-with-grandchildren
-          ><replace-with-children class="${itemClasses}"
-            >${'default' in this.slots
-              ? this.slot('default')
-              : ''}</replace-with-children
-          ><replace-with-grandchildren class="${afterIconClasses}"
-            ><span class="${cx(`c-bolt-button__icon-sizer`)}"
-              >${'after' in this.slots ? this.slot('after') : ''}</span
-            ></replace-with-grandchildren
-          >
+          ${'before' in this.slots
+            ? html`
+                <replace-with-grandchildren class="${iconClasses}"
+                  ><span class="${sizerClasses}"
+                    >${this.slot('before')}</span
+                  ></replace-with-grandchildren
+                >
+              `
+            : ''}${'default' in this.slots
+            ? html`
+                <replace-with-grandchildren class="${itemClasses}"
+                  >${this.slot('default')}</replace-with-grandchildren
+                >
+              `
+            : ''}${'after' in this.slots
+            ? html`
+                <replace-with-grandchildren class="${iconClasses}"
+                  ><span class="${sizerClasses}"
+                    >${this.slot('after')}</span
+                  ></replace-with-grandchildren
+                >
+              `
+            : ''}
         `;
       } else {
         return html`
-          <span class="${beforeIconClasses}"
-            ><span class="${cx(`c-bolt-button__icon-sizer`)}"
-              >${'before' in this.slots
-                ? this.slot('before')
-                : html`
-                    <slot name="before" />
-                  `}</span
-            ></span
-          ><span class="${itemClasses}"
-            >${'default' in this.slots
-              ? this.slot('default')
-              : html`
-                  <slot />
-                `}</span
-          ><span class="${afterIconClasses}"
-            ><span class="${cx(`c-bolt-button__icon-sizer`)}"
-              >${'after' in this.slots
-                ? this.slot('after')
-                : html`
-                    <slot name="after" />
-                  `}</span
-            ></span
-          >
+          ${'before' in this.slots
+            ? html`
+                <span class="${iconClasses}"
+                  ><span class="${sizerClasses}"
+                    >${this.slot('before')}</span
+                  ></span
+                >
+              `
+            : html`
+                <slot name="before" />
+              `}${'default' in this.slots
+            ? html`
+                <span class="${itemClasses}">${this.slot('default')}</span>
+              `
+            : html`
+                <slot />
+              `}${'after' in this.slots
+            ? html`
+                <span class="${iconClasses}"
+                  ><span class="${sizerClasses}"
+                    >${this.slot('after')}</span
+                  ></span
+                >
+              `
+            : html`
+                <slot name="after" />
+              `}
         `;
       }
     };

diff --git a/packages/components/bolt-button/src/button.scss b/packages/components/bolt-button/src/button.scss
@@ -245,11 +245,7 @@ bolt-button[width='full@small'],
 /**
  * Icon and text spacing and display
  */
-.c-bolt-button__icon.is-empty {
-  display: none;
-}
-
-.c-bolt-button__icon:not(.is-empty) {
+.c-bolt-button__icon {
   display: flex;
 }
 
@@ -259,19 +255,17 @@ bolt-button[width='full@small'],
   text-align: start;
 }
 
-.c-bolt-button__icon:not(.is-empty) {
-  .c-bolt-button__icon-sizer {
-    display: flex; // This fixes the spacing issue caused by bolt-icon defined as inline-block.
-  }
+.c-bolt-button__icon-sizer {
+  display: flex; // This fixes the spacing issue caused by bolt-icon defined as inline-block.
 }
 
 // Spacing only applies when there are BOTH text and icon
 .c-bolt-button:not(.c-bolt-button--icon-only) {
-  .c-bolt-button__item + .c-bolt-button__icon:not(.is-empty) {
+  .c-bolt-button__item + .c-bolt-button__icon {
     @include bolt-margin-left(xxsmall);
   }
 
-  .c-bolt-button__icon:not(.is-empty) + .c-bolt-button__item {
+  .c-bolt-button__icon + .c-bolt-button__item {
     @include bolt-margin-left(xxsmall);
   }
 }

diff --git a/packages/components/bolt-button/src/button.twig b/packages/components/bolt-button/src/button.twig
@@ -130,8 +130,6 @@ Sort classes passed in via attributes into two groups:
       }) %}
       {% include "@bolt-components-icon/icon.twig" with icon only %}
     </replace-with-children>
-  {% else %}
-    <replace-with-children class="c-bolt-button__icon is-empty"></replace-with-children>
   {% endif %}
 {% endmacro %}