fix(ld-icon): apply styles on slotted svg

screenshot/builds/master.json

@@ -4008,6 +4008,84 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "50d5f6cb",
+      "image": "680ff195fb7055b3c3cc98c33ca97f5f.png",
+      "userAgent": "default",
+      "desc": "ld-icon renders with name prop",
+      "testPath": "./src/liquid/components/ld-icon/test/ld-icon.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "b1642b4e",
+      "image": "d2f7c99f69639e2ed071c09ebd41b5f8.png",
+      "userAgent": "default",
+      "desc": "ld-icon renders with slot",
+      "testPath": "./src/liquid/components/ld-icon/test/ld-icon.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "652a1171",
+      "image": "42c7b717e212fe83baa6bb0f35629284.png",
+      "userAgent": "default",
+      "desc": "ld-icon sizes lg",
+      "testPath": "./src/liquid/components/ld-icon/test/ld-icon.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "e8ee7001",
+      "image": "d7f5e16eb57a379a2de2c1969445ba69.png",
+      "userAgent": "default",
+      "desc": "ld-icon sizes lg with custom svg",
+      "testPath": "./src/liquid/components/ld-icon/test/ld-icon.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "6e3677da",
+      "image": "bd73c9dbafd62678b577f0a2606643e9.png",
+      "userAgent": "default",
+      "desc": "ld-icon sizes sm",
+      "testPath": "./src/liquid/components/ld-icon/test/ld-icon.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "ac4ca458",
+      "image": "9bbc4369ab5eedbafe59efad7d749e23.png",
+      "userAgent": "default",
+      "desc": "ld-icon sizes sm with custom svg",
+      "testPath": "./src/liquid/components/ld-icon/test/ld-icon.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "3c125161",
       "image": "b87bcefc17e63eaeac008503dc09bcd2.png",

src/docs/components/docs-edit-on-github/docs-edit-on-github.css

@@ -1,5 +1,5 @@
 @define-mixin docs-edit-on-github-ui-light {
-  .docs-edit-on-github .ld-button {
+  .docs-edit-on-github ld-button::part(button) {
     background-color: var(--ld-col-wht);
     color: var(--ld-col-neutral);
     box-shadow: 0 0 0 2px var(--ld-col-neutral-100);
@@ -25,7 +25,7 @@
   }
 }
 @define-mixin docs-edit-on-github-ui-dark {
-  .docs-edit-on-github .ld-button {
+  .docs-edit-on-github ld-button::part(button) {
     background-color: var(--ld-col-neutral-800);
     color: var(--ld-col-wht);
     box-shadow: 0 0 0 2px var(--ld-col-neutral-600);

src/liquid/components/ld-icon/ld-icon.css

@@ -9,6 +9,7 @@
   width: var(--ld-icon-size-md);
   height: var(--ld-icon-size-md);
 
+  ::slotted(svg),
   :where(svg) {
     width: var(--ld-icon-size-md);
     height: var(--ld-icon-size-md);
@@ -19,6 +20,7 @@
 :host(.ld-icon--sm),
 :where(.ld-icon--sm) {
   &,
+  ::slotted(svg),
   :where(svg) {
     width: var(--ld-icon-size-sm);
     height: var(--ld-icon-size-sm);
@@ -27,6 +29,7 @@
 :host(.ld-icon--lg),
 :where(.ld-icon--lg) {
   &,
+  ::slotted(svg),
   :where(svg) {
     width: var(--ld-icon-size-lg);
     height: var(--ld-icon-size-lg);

src/liquid/components/ld-icon/test/ld-icon.e2e.ts

@@ -1,22 +1,25 @@
-import { newE2EPage } from '@stencil/core/testing'
+import { getPageWithContent } from '../../../utils/e2e-tests'
 
 jest.useRealTimers()
 
+const svg = `
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
+  <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
+</svg>
+`
+
 describe('ld-icon', () => {
   it('renders with name prop', async () => {
-    const page = await newE2EPage()
-    await page.setContent('<ld-icon name="add"></ld-icon>')
-
-    const element = await page.find('ld-icon')
-    expect(element).toHaveClass('hydrated')
-
-    const svg = await element.find('svg')
-    expect(svg).toBeDefined()
+    const page = await getPageWithContent('<ld-icon name="add"></ld-icon>')
+    const results = await page.compareScreenshot()
+    expect(results).toMatchScreenshot()
   })
 
   it('does not render with invalid name prop', async () => {
-    const page = await newE2EPage()
-    await page.setContent('<ld-icon name="asdfasdfasdf"></ld-icon>')
+    const page = await getPageWithContent(
+      '<ld-icon name="asdfasdfasdf"></ld-icon>'
+    )
 
     const element = await page.find('ld-icon')
     expect(element).toHaveClass('hydrated')
@@ -26,18 +29,39 @@ describe('ld-icon', () => {
   })
 
   it('renders with slot', async () => {
-    const page = await newE2EPage()
-    await page.setContent(`<ld-icon>
-      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
-        <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
-      </svg>
-    </ld-icon>`)
-
-    const element = await page.find('ld-icon')
-    expect(element).toHaveClass('hydrated')
+    const page = await getPageWithContent(`<ld-icon>${svg}</ld-icon>`)
+    const results = await page.compareScreenshot()
+    expect(results).toMatchScreenshot()
+  })
 
-    const svg = await element.find('svg')
-    expect(svg).toBeDefined()
+  describe('sizes', () => {
+    it('sm', async () => {
+      const page = await getPageWithContent(
+        '<ld-icon name="add" size="sm"></ld-icon>'
+      )
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+    it('lg', async () => {
+      const page = await getPageWithContent(
+        '<ld-icon name="add" size="lg"></ld-icon>'
+      )
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+    it('sm with custom svg', async () => {
+      const page = await getPageWithContent(
+        `<ld-icon size="sm">${svg}</ld-icon>`
+      )
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
+    it('lg with custom svg', async () => {
+      const page = await getPageWithContent(
+        `<ld-icon size="lg">${svg}</ld-icon>`
+      )
+      const results = await page.compareScreenshot()
+      expect(results).toMatchScreenshot()
+    })
   })
 })