fix(icon-button): icon not showing when using ripple (#516)

* fix(icon-button): icon not showing when using ripple Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
IgniteUI · Sep 29, 2022 · 5b7e106 · 5b7e106
1 parent 5e73bc5
commit 5b7e106
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 64 deletions.
diff --git a/src/components/button/icon-button.spec.ts b/src/components/button/icon-button.spec.ts
@@ -25,42 +25,36 @@ describe('IconButton component', () => {
 
     it('renders a button element internally', async () => {
       await expect(el).shadowDom.to.be.accessible();
-      expect(el).shadowDom.to.equal(
-        `<button><slot><igc-icon></igc-icon></slot></button>`,
-        {
-          ignoreAttributes: [
-            'variant',
-            'aria-label',
-            'aria-disabled',
-            'aria-hidden',
-            'part',
-            'role',
-            'size',
-          ],
-        }
-      );
+      expect(el).shadowDom.to.equal(`<button><slot></slot></button>`, {
+        ignoreAttributes: [
+          'variant',
+          'aria-label',
+          'aria-disabled',
+          'aria-hidden',
+          'part',
+          'role',
+          'size',
+        ],
+      });
     });
 
     it('renders an anchor element internally', async () => {
       el.href = 'https://test.com';
       await elementUpdated(el);
 
       await expect(el).shadowDom.to.be.accessible();
-      expect(el).shadowDom.to.equal(
-        `<a><slot><igc-icon></igc-icon></slot></a>`,
-        {
-          ignoreAttributes: [
-            'variant',
-            'aria-label',
-            'aria-disabled',
-            'aria-hidden',
-            'part',
-            'role',
-            'size',
-            'href',
-          ],
-        }
-      );
+      expect(el).shadowDom.to.equal(`<a><slot></slot></a>`, {
+        ignoreAttributes: [
+          'variant',
+          'aria-label',
+          'aria-disabled',
+          'aria-hidden',
+          'part',
+          'role',
+          'size',
+          'href',
+        ],
+      });
     });
 
     it('is created with the proper default values', async () => {
@@ -82,9 +76,8 @@ describe('IconButton component', () => {
 
       expect(el).shadowDom.to.equal(
         `<button>
-          <slot>
-            <igc-icon name="${el.name}" collection="${el.collection}"></igc-icon>
-          </slot>
+          <igc-icon name="${el.name}" collection="${el.collection}"></igc-icon>
+          <slot></slot>
         </button>`,
         {
           ignoreAttributes: [
@@ -106,9 +99,8 @@ describe('IconButton component', () => {
 
       expect(el).shadowDom.to.equal(
         `<button>
-          <slot>
-            <igc-icon mirrored></igc-icon>
-          </slot>
+          <igc-icon mirrored></igc-icon>
+          <slot></slot>
         </button>`,
         {
           ignoreAttributes: [
@@ -171,7 +163,6 @@ describe('IconButton component', () => {
       expect(el).shadowDom.to.equal(
         `<button disabled>
           <slot>
-            <igc-icon></igc-icon>
           </slot>
         </button>`,
         {
@@ -204,9 +195,7 @@ describe('IconButton component', () => {
     );
     expect(el).shadowDom.to.equal(
       `<a href="https://test.com" target="_blank" download="test" rel="test">
-        <slot>
-          <igc-icon name="biking" collection="default"></igc-icon>
-        </slot>
+        <igc-icon name="biking" collection="default"></igc-icon>
       </a>`,
       DIFF_OPTIONS
     );

diff --git a/src/components/button/icon-button.ts b/src/components/button/icon-button.ts
@@ -50,16 +50,19 @@ export default class IgcIconButtonComponent extends IgcButtonBaseComponent {
 
   protected renderContent() {
     return html`
-      <slot>
-        <igc-icon
-          part="icon"
-          name=${ifDefined(this.name)}
-          collection=${ifDefined(this.collection)}
-          .mirrored=${this.mirrored}
-          size=${ifDefined(this.size)}
-          aria-hidden="true"
-        ></igc-icon>
-      </slot>
+      ${this.name || this.mirrored
+        ? html`
+            <igc-icon
+              part="icon"
+              name=${ifDefined(this.name)}
+              collection=${ifDefined(this.collection)}
+              .mirrored=${this.mirrored}
+              size=${ifDefined(this.size)}
+              aria-hidden="true"
+            ></igc-icon>
+            <slot></slot>
+          `
+        : html`<slot></slot>`}
     `;
   }
 

diff --git a/src/components/button/themes/icon-button/light/icon-button.base.scss b/src/components/button/themes/icon-button/light/icon-button.base.scss
@@ -6,15 +6,17 @@
     vertical-align: middle;
 }
 
-::slotted(*) {
+::slotted(:not(igc-ripple)) {
     font-size: var(--size) !important;
     vertical-align: middle;
-}
-
-slot {
     pointer-events: none;
 }
 
+// This prevents the igc-ripple from working.
+// slot {
+//     pointer-events: none;
+// }
+
 [part='base'] {
     @include border-radius(50%);
 

diff --git a/stories/icon-button.stories.ts b/stories/icon-button.stories.ts
@@ -153,7 +153,9 @@ const Template: Story<ArgTypes, Context> = (
       variant=${ifDefined(variant)}
       .size=${size}
       .disabled=${ifDefined(disabled)}
-    ></igc-icon-button>
+    >
+      <igc-ripple></igc-ripple>
+    </igc-icon-button>
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
@@ -163,9 +165,6 @@ const Template: Story<ArgTypes, Context> = (
       rel="stylesheet"
     />
     <igc-icon-button
-      .name=${name}
-      .collection=${collection}
-      .mirrored=${mirrored}
       href=${ifDefined(href)}
       target=${ifDefined(target)}
       rel=${ifDefined(rel)}
@@ -174,12 +173,11 @@ const Template: Story<ArgTypes, Context> = (
       variant=${ifDefined(variant)}
       .size=${size}
       .disabled=${ifDefined(disabled)}
-      >💙</igc-icon-button
     >
+      <igc-ripple></igc-ripple>
+      💙
+    </igc-icon-button>
     <igc-icon-button
-      .name=${name}
-      .collection=${collection}
-      .mirrored=${mirrored}
       href=${ifDefined(href)}
       target=${ifDefined(target)}
       rel=${ifDefined(rel)}
@@ -192,9 +190,6 @@ const Template: Story<ArgTypes, Context> = (
       <span class="material-icons">favorite</span>
     </igc-icon-button>
     <igc-icon-button
-      .name=${name}
-      .collection=${collection}
-      .mirrored=${mirrored}
       href=${ifDefined(href)}
       target=${ifDefined(target)}
       rel=${ifDefined(rel)}