From a66cfe2f695aa14a860ded8e8cf5fdce9271a285 Mon Sep 17 00:00:00 2001
From: Boris Diakur <borisdiakur@gmail.com>
Date: Wed, 22 Jun 2022 21:55:24 +0200
Subject: [PATCH] fix(ld-sidenav-navitem): keep secondary icon visible on hover

---
 screenshot/builds/master.json                 |  13 +++++++++++
 .../e9cbd35eb0d429c17fd76e29f88cc9c9.png      | Bin 0 -> 6962 bytes
 .../ld-sidenav-navitem.shadow.css             |   1 +
 .../ld-sidenav/test/ld-sidenav.e2e.ts         |  22 ++++++++++++++++++
 4 files changed, 36 insertions(+)
 create mode 100644 screenshot/images/e9cbd35eb0d429c17fd76e29f88cc9c9.png

diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
index 5158674d68..f26a8020b6 100644
--- a/screenshot/builds/master.json
+++ b/screenshot/builds/master.json
@@ -12575,6 +12575,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "f24496e3",
+      "image": "e9cbd35eb0d429c17fd76e29f88cc9c9.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav nav item has a secondary icon when hovering",
+      "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "eb3477e0",
       "image": "e703c15788449e352723bed104aa62a8.png",
diff --git a/screenshot/images/e9cbd35eb0d429c17fd76e29f88cc9c9.png b/screenshot/images/e9cbd35eb0d429c17fd76e29f88cc9c9.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fe7e7aec25c2d85f67f9f2cc80731a714c6d6d3
GIT binary patch
literal 6962
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
VXV5W5^M?uGcl`9R+M{7v{{okR(DMKQ

literal 0
HcmV?d00001

diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css b/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css
index 3ff038159e..3f42039e64 100644
--- a/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css
+++ b/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css
@@ -415,6 +415,7 @@ That's why we set z-index 0 on the following elements.
 }
 
 .ld-sidenav-navitem__slot-icon-secondary-container {
+  position: relative;
   display: flex;
   flex-shrink: 0;
   margin-right: var(--ld-sp-12);
diff --git a/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts b/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts
index 9540de82cf..c757c82cbe 100644
--- a/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts
+++ b/src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts
@@ -739,6 +739,28 @@ describe('ld-sidenav', () => {
       const result = await page.compareScreenshot()
       expect(result).toMatchScreenshot()
     })
+
+    it('has a secondary icon when hovering', async () => {
+      const page = await getPageWithContent(
+        `
+        <ld-sidenav open>
+          <ld-sidenav-slider label="Outline of CS">
+            <ld-sidenav-navitem>
+              Liquid Oxygen
+              <ld-icon slot="icon-secondary" name="bottle" size="sm" />
+            </ld-sidenav-navitem>
+          </ld-sidenav-slider>
+        </ld-sidenav>`
+      )
+      await page.emulateMediaFeatures([
+        { name: 'prefers-reduced-motion', value: 'reduce' },
+      ])
+      await page.hover('ld-sidenav-navitem')
+      await page.waitForChanges()
+
+      const result = await page.compareScreenshot()
+      expect(result).toMatchScreenshot()
+    })
   })
 
   describe('with accordion', () => {