fix(ld-button): remove implicit icon size

emdgroup-liquid · Mar 7, 2022 · 67a86a6 · 67a86a6
1 parent 3453edd
commit 67a86a6
Show file tree

Hide file tree

Showing 12 changed files with 16 additions and 154 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -4868,7 +4868,7 @@
     },
     {
       "id": "ca9066cc",
-      "image": "09f7fa27b7b500cc3f24235d7c366b15.png",
+      "image": "43cf8a51e169d42b8f315ccb156a3840.png",
       "userAgent": "default",
       "desc": "ld-header web component with burger menu button",
       "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts",
@@ -4881,7 +4881,7 @@
     },
     {
       "id": "1a616c12",
-      "image": "f9a08104d9e3b30020536be6a00a8f2c.png",
+      "image": "76dd65b5eced693eda0e0e035766f6e6.png",
       "userAgent": "default",
       "desc": "ld-header web component with buttons",
       "testPath": "./src/liquid/components/ld-header/test/ld-header.e2e.ts",

diff --git a/screenshot/images/09f7fa27b7b500cc3f24235d7c366b15.png b/screenshot/images/09f7fa27b7b500cc3f24235d7c366b15.png
diff --git a/screenshot/images/43cf8a51e169d42b8f315ccb156a3840.png b/screenshot/images/43cf8a51e169d42b8f315ccb156a3840.png
diff --git a/screenshot/images/76dd65b5eced693eda0e0e035766f6e6.png b/screenshot/images/76dd65b5eced693eda0e0e035766f6e6.png
diff --git a/screenshot/images/f9a08104d9e3b30020536be6a00a8f2c.png b/screenshot/images/f9a08104d9e3b30020536be6a00a8f2c.png
diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx
@@ -1,12 +1,4 @@
-import {
-  Component,
-  Element,
-  h,
-  Method,
-  Prop,
-  State,
-  Watch,
-} from '@stencil/core'
+import { Component, Element, h, Method, Prop, State } from '@stencil/core'
 import { getClassNames } from 'src/liquid/utils/getClassNames'
 import { cloneAttributes } from '../../utils/cloneAttributes'
 
@@ -175,25 +167,6 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
     }
   }
 
-  @Watch('size')
-  private updateIconSize() {
-    this.el.querySelectorAll('ld-icon').forEach((icon) => {
-      icon.size = this.size
-    })
-
-    this.el.querySelectorAll('.ld-icon').forEach((icon) => {
-      if (this.size === 'lg') {
-        icon.classList.remove('ld-icon--sm')
-        icon.classList.add('ld-icon--lg')
-      } else if (this.size === 'sm') {
-        icon.classList.remove('ld-icon--lg')
-        icon.classList.add('ld-icon--sm')
-      } else {
-        icon.classList.remove('ld-icon--sm', 'ld-icon--lg')
-      }
-    })
-  }
-
   componentWillLoad() {
     this.attributesObserver = cloneAttributes.call(this, [
       'align-text',
@@ -211,8 +184,6 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
     if (!textInButton) {
       this.iconOnly = true
     }
-
-    this.updateIconSize()
   }
 
   render() {

diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
@@ -187,19 +187,19 @@ Although `aria-disabled="true"` is not necessary on a `button` element (or any o
 
 {% example %}
 <ld-button size="sm">
-  <ld-icon name="placeholder" aria-label="Text"></ld-icon>
+  <ld-icon name="placeholder" size="sm" aria-label="Text"></ld-icon>
 </ld-button>
 
 <ld-button>
   <ld-icon name="placeholder" aria-label="Text"></ld-icon>
 </ld-button>
 
 <ld-button size="lg">
-  <ld-icon name="placeholder" aria-label="Text"></ld-icon>
+  <ld-icon name="placeholder" size="lg" aria-label="Text"></ld-icon>
 </ld-button>
 
 <ld-button mode="highlight" size="sm">
-  <ld-icon name="placeholder"></ld-icon>
+  <ld-icon name="placeholder" size="sm"></ld-icon>
   Text
 </ld-button>
 
@@ -209,7 +209,7 @@ Although `aria-disabled="true"` is not necessary on a `button` element (or any o
 </ld-button>
 
 <ld-button mode="secondary" size="lg">
-  <ld-icon name="placeholder"></ld-icon>
+  <ld-icon name="placeholder" size="lg"></ld-icon>
   Text
 </ld-button>
 

diff --git a/src/liquid/components/ld-button/test/__snapshots__/ld-button.spec.ts.snap b/src/liquid/components/ld-button/test/__snapshots__/ld-button.spec.ts.snap
@@ -155,38 +155,6 @@ exports[`ld-button justify content 1`] = `
 </ld-button>
 `;
 
-exports[`ld-button removes size from ld-icon css component 1`] = `
-<ld-button>
-  <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--icon-only" part="button focusable">
-      <slot></slot>
-    </button>
-  </mock:shadow-root>
-  <svg class="ld-icon"></svg>
-  <svg class="ld-icon"></svg>
-</ld-button>
-`;
-
-exports[`ld-button removes size from ld-icon web component 1`] = `
-<ld-button>
-  <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--icon-only" part="button focusable">
-      <slot></slot>
-    </button>
-  </mock:shadow-root>
-  <ld-icon class="ld-icon" name="placeholder" role="presentation" size="sm">
-    <mock:shadow-root>
-      Not Found
-    </mock:shadow-root>
-  </ld-icon>
-  <ld-icon class="ld-icon" name="placeholder" role="presentation" size="lg">
-    <mock:shadow-root>
-      Not Found
-    </mock:shadow-root>
-  </ld-icon>
-</ld-button>
-`;
-
 exports[`ld-button renders 1`] = `
 <ld-button>
   <mock:shadow-root>
@@ -209,38 +177,6 @@ exports[`ld-button secondary 1`] = `
 </ld-button>
 `;
 
-exports[`ld-button sets size on ld-icon css component 1`] = `
-<ld-button size="sm">
-  <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--icon-only ld-button--sm" part="button focusable">
-      <slot></slot>
-    </button>
-  </mock:shadow-root>
-  <svg class="ld-icon ld-icon--sm"></svg>
-  <svg class="ld-icon ld-icon--sm"></svg>
-</ld-button>
-`;
-
-exports[`ld-button sets size on ld-icon web component 1`] = `
-<ld-button size="sm">
-  <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--icon-only ld-button--sm" part="button focusable">
-      <slot></slot>
-    </button>
-  </mock:shadow-root>
-  <ld-icon class="ld-icon ld-icon--sm" name="placeholder" role="presentation">
-    <mock:shadow-root>
-      Not Found
-    </mock:shadow-root>
-  </ld-icon>
-  <ld-icon class="ld-icon ld-icon--sm" name="placeholder" role="presentation" size="lg">
-    <mock:shadow-root>
-      Not Found
-    </mock:shadow-root>
-  </ld-icon>
-</ld-button>
-`;
-
 exports[`ld-button size 1`] = `
 <ld-button size="sm">
   <mock:shadow-root>

diff --git a/src/liquid/components/ld-button/test/ld-button.e2e.ts b/src/liquid/components/ld-button/test/ld-button.e2e.ts
@@ -516,7 +516,7 @@ describe('ld-button', () => {
   describe('sizes', () => {
     it('sm', async () => {
       const page = await getPageWithContent(
-        '<ld-button size="sm">Text<ld-icon name="placeholder"></ld-icon></ld-button>'
+        '<ld-button size="sm">Text<ld-icon name="placeholder" size="sm"></ld-icon></ld-button>'
       )
       const results = await page.compareScreenshot()
       expect(results).toMatchScreenshot()
@@ -526,7 +526,7 @@ describe('ld-button', () => {
     })
     it('lg', async () => {
       const page = await getPageWithContent(
-        '<ld-button size="lg">Text<ld-icon name="placeholder"></ld-icon></ld-button>'
+        '<ld-button size="lg">Text<ld-icon name="placeholder" size="lg"></ld-icon></ld-button>'
       )
       const results = await page.compareScreenshot()
       expect(results).toMatchScreenshot()
@@ -543,7 +543,7 @@ describe('ld-button', () => {
     })
     it('icon button sm', async () => {
       const page = await getPageWithContent(
-        '<ld-button size="sm"><ld-icon name="placeholder"></ld-icon><ld-sr-only>Text</ld-sr-only></ld-button>'
+        '<ld-button size="sm"><ld-icon name="placeholder" size="sm"></ld-icon><ld-sr-only>Text</ld-sr-only></ld-button>'
       )
       const results = await page.compareScreenshot()
       expect(results).toMatchScreenshot()
@@ -553,7 +553,7 @@ describe('ld-button', () => {
     })
     it('icon button lg', async () => {
       const page = await getPageWithContent(
-        '<ld-button size="lg"><ld-sr-only>Text</ld-sr-only><ld-icon name="placeholder"></ld-icon></ld-button>'
+        '<ld-button size="lg"><ld-sr-only>Text</ld-sr-only><ld-icon name="placeholder" size="lg"></ld-icon></ld-button>'
       )
       const results = await page.compareScreenshot()
       expect(results).toMatchScreenshot()
@@ -572,7 +572,7 @@ describe('ld-button', () => {
       })
       it('sm', async () => {
         const page = await getPageWithContent(
-          '<ld-button mode="ghost" size="sm"><ld-icon name="placeholder"></ld-icon></ld-button>'
+          '<ld-button mode="ghost" size="sm"><ld-icon name="placeholder" size="sm"></ld-icon></ld-button>'
         )
         await page.keyboard.press('Tab')
         await page.keyboard.down('Space')
@@ -582,7 +582,7 @@ describe('ld-button', () => {
       })
       it('lg', async () => {
         const page = await getPageWithContent(
-          '<ld-button mode="ghost" size="lg"><ld-icon name="placeholder"></ld-icon></ld-button>'
+          '<ld-button mode="ghost" size="lg"><ld-icon name="placeholder" size="lg"></ld-icon></ld-button>'
         )
         await page.keyboard.press('Tab')
         await page.keyboard.down('Space')

diff --git a/src/liquid/components/ld-button/test/ld-button.spec.ts b/src/liquid/components/ld-button/test/ld-button.spec.ts
@@ -1,6 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing'
 import { LdButton } from '../ld-button'
-import { LdIcon } from '../../ld-icon/ld-icon'
 import '../../../utils/mutationObserver'
 
 const mockClickHiddenButton = (
@@ -309,50 +308,6 @@ describe('ld-button', () => {
     })
   })
 
-  it('removes size from ld-icon web component', async () => {
-    const page = await newSpecPage({
-      components: [LdButton, LdIcon],
-      html: `<ld-button>
-        <ld-icon name="placeholder" size="sm"></ld-icon>
-        <ld-icon name="placeholder" size="lg"></ld-icon>
-      </ld-button>`,
-    })
-    expect(page.root).toMatchSnapshot()
-  })
-
-  it('removes size from ld-icon css component', async () => {
-    const page = await newSpecPage({
-      components: [LdButton],
-      html: `<ld-button>
-        <svg class="ld-icon ld-icon--sm"></svg>
-        <svg class="ld-icon ld-icon--lg"></svg>
-      </ld-button>`,
-    })
-    expect(page.root).toMatchSnapshot()
-  })
-
-  it('sets size on ld-icon web component', async () => {
-    const page = await newSpecPage({
-      components: [LdButton, LdIcon],
-      html: `<ld-button size="sm">
-        <ld-icon name="placeholder"></ld-icon>
-        <ld-icon name="placeholder" size="lg"></ld-icon>
-      </ld-button>`,
-    })
-    expect(page.root).toMatchSnapshot()
-  })
-
-  it('sets size on ld-icon css component', async () => {
-    const page = await newSpecPage({
-      components: [LdButton],
-      html: `<ld-button size="sm">
-        <svg class="ld-icon"></svg>
-        <svg class="ld-icon ld-icon--lg"></svg>
-      </ld-button>`,
-    })
-    expect(page.root).toMatchSnapshot()
-  })
-
   it('clones attributes to inner button', async () => {
     const page = await newSpecPage({
       components: [LdButton],

diff --git a/src/liquid/components/ld-header/readme.md b/src/liquid/components/ld-header/readme.md
@@ -82,14 +82,14 @@ You can easily make the header sticky and make it hide when the user is scrollin
     Liquid<span class="hide-on-sm"> Oxygen</span>
   </ld-typo>
   <ld-button id="register" slot="end" type="button">
-    <ld-icon name="pen"></ld-icon>
+    <ld-icon name="pen" size="sm"></ld-icon>
     Register
   </ld-button>
   <ld-button id="login-sm" mode="ghost" slot="end" title="Login" type="button">
     <ld-icon aria-label="Login" name="user" size="lg"></ld-icon>
   </ld-button>
   <ld-button id="login-lg" mode="secondary" slot="end" type="button">
-    <ld-icon name="user"></ld-icon>
+    <ld-icon name="user" size="sm"></ld-icon>
     Login
   </ld-button>
 </ld-header>

diff --git a/src/liquid/components/ld-header/test/ld-header.e2e.ts b/src/liquid/components/ld-header/test/ld-header.e2e.ts
@@ -61,7 +61,7 @@ describe('ld-header', () => {
       const page = await getPageWithContent(`
         <ld-header site-name="Liquid Oxygen">
           <ld-button slot="end" type="button">
-            <ld-icon name="pen"></ld-icon>
+            <ld-icon name="pen" size="sm"></ld-icon>
             Register
           </ld-button>
           <ld-button mode="ghost" slot="end" title="Login" type="button">