fix(ld-sidenav): navitem margins in slot top and bottom

emdgroup-liquid · May 6, 2022 · 9d27cc0 · 9d27cc0
1 parent d4a749b
commit 9d27cc0
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 1 deletion.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -10287,6 +10287,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "c4da0739",
+      "image": "2e6b2a451a32825b37e81f506ba8c34e.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav with subnavigation allows setting multiple navitems in top and bottom slots",
+      "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "feb5e844",
       "image": "b7812b9f2cf76bcd3cab51d166da840d.png",

diff --git a/screenshot/images/2e6b2a451a32825b37e81f506ba8c34e.png b/screenshot/images/2e6b2a451a32825b37e81f506ba8c34e.png
diff --git a/src/liquid/components/ld-sidenav/ld-sidenav.shadow.css b/src/liquid/components/ld-sidenav/ld-sidenav.shadow.css
@@ -163,7 +163,8 @@
     margin-bottom: var(--ld-sidenav-padding-y);
   }
 
-  ::slotted(ld-sidenav-navitem:first-of-type) {
+  ::slotted(ld-sidenav-navitem[slot='top']),
+  ::slotted(ld-sidenav-navitem[slot='bottom']) {
     margin-top: var(--ld-sidenav-padding-y);
   }
 

diff --git a/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts b/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts
@@ -317,6 +317,31 @@ describe('ld-sidenav', () => {
         expect(result).toMatchScreenshot()
       })
     })
+
+    fit('allows setting multiple navitems in top and bottom slots', async () => {
+      const page = await getPageWithContent(`
+        <ld-sidenav open>
+          <ld-sidenav-back slot="top">
+            <ld-sidenav-navitem>Foo</ld-sidenav-navitem>
+          </ld-sidenav-back>
+          <ld-sidenav-navitem slot="top">Bar</ld-sidenav-navitem>
+          <ld-sidenav-slider label="Outline of Computer Science">
+            <ld-sidenav-heading>Baz</ld-sidenav-heading>
+            <ld-sidenav-navitem>Qux</ld-sidenav-navitem>
+          </ld-sidenav-slider>
+          <ld-sidenav-navitem slot="bottom" rounded>Corge</ld-sidenav-navitem>
+          <ld-sidenav-navitem slot="bottom" rounded>Grault</ld-sidenav-navitem>
+        </ld-sidenav>
+      `)
+      await page.emulateMediaFeatures([
+        { name: 'prefers-reduced-motion', value: 'reduce' },
+      ])
+      page.waitForChanges()
+      await new Promise((resolve) => setTimeout(resolve, 100))
+
+      const result = await page.compareScreenshot()
+      expect(result).toMatchScreenshot()
+    })
   })
 
   describe('with subnavigation aligned to the right', () => {