feat(ld-button, ld-input): manipulate size attributes of slotted comp…

…onents
emdgroup-liquid · Oct 27, 2021 · ccc0271 · ccc0271
1 parent 91fa753
commit ccc0271
Show file tree

Hide file tree

Showing 6 changed files with 316 additions and 2 deletions.
diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx
@@ -117,14 +117,25 @@ export class LdButton implements InnerFocusable {
   }
 
   componentWillLoad() {
-    // TODO: manipulate css component, as well, as soon as icon has shadow DOM.
     this.el.querySelectorAll('ld-icon').forEach((icon) => {
       if (this.size !== undefined) {
         icon.setAttribute('size', this.size)
       } else {
         icon.removeAttribute('size')
       }
     })
+    this.el.querySelectorAll('.ld-icon').forEach((icon) => {
+      icon.classList.remove('ld-icon--sm', 'ld-icon--lg')
+      if (this.size === 'sm') {
+        icon.classList.remove('ld-icon--lg')
+        icon.classList.add('ld-icon--sm')
+      } else if (this.size === 'lg') {
+        icon.classList.remove('ld-icon--sm')
+        icon.classList.add('ld-icon--lg')
+      } else {
+        icon.classList.remove('ld-icon--sm', 'ld-icon--lg')
+      }
+    })
   }
 
   render() {

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
@@ -112,6 +112,30 @@ exports[`ld-button on-brand-color 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" 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" part="button focusable">
+      <slot></slot>
+    </button>
+  </mock:shadow-root>
+  <ld-icon name="placeholder"></ld-icon>
+  <ld-icon name="placeholder"></ld-icon>
+</ld-button>
+`;
+
 exports[`ld-button renders 1`] = `
 <ld-button>
   <mock:shadow-root>
@@ -145,6 +169,30 @@ exports[`ld-button secondary-on-brand-color 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--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--sm" part="button focusable">
+      <slot></slot>
+    </button>
+  </mock:shadow-root>
+  <ld-icon name="placeholder" size="sm"></ld-icon>
+  <ld-icon name="placeholder" size="sm"></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.spec.ts b/src/liquid/components/ld-button/test/ld-button.spec.ts
@@ -290,4 +290,48 @@ describe('ld-button', () => {
       expect(resetHandler).toHaveBeenCalled()
     })
   })
+
+  it('removes size from ld-icon web component', async () => {
+    const page = await newSpecPage({
+      components: [LdButton],
+      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],
+      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()
+  })
 })
diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -83,14 +83,25 @@ export class LdInput implements InnerFocusable {
         button.classList.remove('ld-button--sm', 'ld-button--lg')
       }
     })
-    // TODO: manipulate css component, as well, as soon as icon has shadow DOM.
     this.el.querySelectorAll('ld-icon').forEach((icon) => {
       if (this.size !== undefined) {
         icon.setAttribute('size', this.size)
       } else {
         icon.removeAttribute('size')
       }
     })
+    this.el.querySelectorAll('.ld-icon').forEach((icon) => {
+      icon.classList.remove('ld-icon--sm', 'ld-icon--lg')
+      if (this.size === 'sm') {
+        icon.classList.remove('ld-icon--lg')
+        icon.classList.add('ld-icon--sm')
+      } else if (this.size === 'lg') {
+        icon.classList.remove('ld-icon--sm')
+        icon.classList.add('ld-icon--lg')
+      } else {
+        icon.classList.remove('ld-icon--sm', 'ld-icon--lg')
+      }
+    })
   }
 
   private handleBlur = (ev: FocusEvent) => {

diff --git a/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap b/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap
@@ -1,5 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ld-input removes size from ld-button css component 1`] = `
+<ld-input class="ld-input">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <button class="ld-button" slot="start">
+    X
+  </button>
+  <button class="ld-button" slot="end">
+    Y
+  </button>
+</ld-input>
+`;
+
+exports[`ld-input removes size from ld-button web component 1`] = `
+<ld-input class="ld-input">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <ld-button slot="start">
+    X
+  </ld-button>
+  <ld-button slot="end">
+    Y
+  </ld-button>
+</ld-input>
+`;
+
+exports[`ld-input removes size from ld-icon css component 1`] = `
+<ld-input class="ld-input">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <svg class="ld-icon" slot="start"></svg>
+  <svg class="ld-icon" slot="end"></svg>
+</ld-input>
+`;
+
+exports[`ld-input removes size from ld-icon web component 1`] = `
+<ld-input class="ld-input">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <ld-icon name="placeholder" slot="start"></ld-icon>
+  <ld-icon name="placeholder" slot="end"></ld-icon>
+</ld-input>
+`;
+
 exports[`ld-input renders 1`] = `
 <ld-input class="ld-input">
   <mock:shadow-root>
@@ -91,6 +147,62 @@ exports[`ld-input renders with value 1`] = `
 </ld-input>
 `;
 
+exports[`ld-input sets size on ld-button css component 1`] = `
+<ld-input class="ld-input ld-input--sm" size="sm">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <button class="ld-button ld-button--sm" slot="start">
+    X
+  </button>
+  <button class="ld-button ld-button--sm" slot="end">
+    Y
+  </button>
+</ld-input>
+`;
+
+exports[`ld-input sets size on ld-button web component 1`] = `
+<ld-input class="ld-input ld-input--sm" size="sm">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <ld-button size="sm" slot="start">
+    X
+  </ld-button>
+  <ld-button size="sm" slot="end">
+    Y
+  </ld-button>
+</ld-input>
+`;
+
+exports[`ld-input sets size on ld-icon css component 1`] = `
+<ld-input class="ld-input ld-input--sm" size="sm">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <svg class="ld-icon ld-icon--sm" slot="start"></svg>
+  <svg class="ld-icon ld-icon--sm" slot="end"></svg>
+</ld-input>
+`;
+
+exports[`ld-input sets size on ld-icon web component 1`] = `
+<ld-input class="ld-input ld-input--sm" size="sm">
+  <mock:shadow-root>
+    <slot name="start"></slot>
+    <input part="input focusable">
+    <slot name="end"></slot>
+  </mock:shadow-root>
+  <ld-icon name="placeholder" size="sm" slot="start"></ld-icon>
+  <ld-icon name="placeholder" size="sm" slot="end"></ld-icon>
+</ld-input>
+`;
+
 exports[`ld-input updates value prop on value change 1`] = `
 <ld-input class="ld-input" value="yoda-yoda">
   <mock:shadow-root>

diff --git a/src/liquid/components/ld-input/test/ld-input.spec.ts b/src/liquid/components/ld-input/test/ld-input.spec.ts
@@ -187,4 +187,92 @@ describe('ld-input', () => {
 
     expect(textarea.focus).toHaveBeenCalled()
   })
+
+  it('removes size from ld-icon web component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input>
+        <ld-icon name="placeholder" size="sm" slot="start"></ld-icon>
+        <ld-icon name="placeholder" size="lg" slot="end"></ld-icon>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('removes size from ld-icon css component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input>
+        <svg class="ld-icon ld-icon--sm" slot="start"></svg>
+        <svg class="ld-icon ld-icon--lg" slot="end"></svg>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('sets size on ld-icon web component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input size="sm">
+        <ld-icon name="placeholder" slot="start"></ld-icon>
+        <ld-icon name="placeholder" size="lg" slot="end"></ld-icon>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('sets size on ld-icon css component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input size="sm">
+        <svg class="ld-icon" slot="start"></svg>
+        <svg class="ld-icon ld-icon--lg" slot="end"></svg>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('removes size from ld-button web component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input>
+        <ld-button size="sm" slot="start">X</ld-button>
+        <ld-button size="lg" slot="end">Y</ld-button>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('removes size from ld-button css component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input>
+        <button class="ld-button ld-button--sm" slot="start">X</button>
+        <button class="ld-button ld-button--lg" slot="end">Y</button>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('sets size on ld-button web component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input size="sm">
+        <ld-button slot="start">X</ld-button>
+        <ld-button size="lg" slot="end">Y</ld-button>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
+
+  it('sets size on ld-button css component', async () => {
+    const page = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input size="sm">
+        <button class="ld-button" slot="start">X</button>
+        <button class="ld-button ld-button--lg" slot="end">Y</button>
+      </ld-input>`,
+    })
+    expect(page.root).toMatchSnapshot()
+  })
 })