fix(ld-sidenav): change and centralize icon size (#287)

screenshot/builds/master.json

@@ -8417,7 +8417,7 @@
     },
     {
       "id": "0dcb75e6",
-      "image": "9ce5dcb06de540ea2f8e450221dc9b48.png",
+      "image": "7fa9c3bc3326db553cd511c03e0e66ef.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item has a custom background color",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8430,7 +8430,7 @@
     },
     {
       "id": "5dd9d6a2",
-      "image": "8447908ec582c237689930d827644d66.png",
+      "image": "d83fb21f7ed4eeaf90d5a02f9d6bc67d.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item has a rounded active state",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8443,7 +8443,7 @@
     },
     {
       "id": "8b2c1e54",
-      "image": "1c8884435b5cb14c5c3dc5f2b49a0d92.png",
+      "image": "814e589188f65d9d24ab39569717f813.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item has a rounded focus state",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8456,7 +8456,7 @@
     },
     {
       "id": "ff6a9a9b",
-      "image": "3a6d82b972c591c00bac47252d84b16c.png",
+      "image": "c582078131ae101c7ce3d7c0693e049e.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item has a rounded hover state",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8469,7 +8469,7 @@
     },
     {
       "id": "eb3477e0",
-      "image": "e2a60b130c14d36c48d9bcbaf178848b.png",
+      "image": "aa2fef5b081c98803f4c754cbcc32d2a.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item is active",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8482,7 +8482,7 @@
     },
     {
       "id": "3036928e",
-      "image": "46b09ba25b621267cb0891ef80bd9934.png",
+      "image": "550ecbf585fa5961fd6ee144496dd9d3.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item is active and has active state",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8495,7 +8495,7 @@
     },
     {
       "id": "830e66b1",
-      "image": "ad551809504ac4a9613cd91dff9dca17.png",
+      "image": "fae58521f727880c0c3bffe06569bba6.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item is active and has focus state",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8508,7 +8508,7 @@
     },
     {
       "id": "3ccb1799",
-      "image": "9918c539ce65b4cd1efb68f995513935.png",
+      "image": "8df14c0b2816753b75a2372822203018.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item is active and has hover state",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8521,7 +8521,7 @@
     },
     {
       "id": "9f11495e",
-      "image": "fff3bdfc872239dd866dbcf736f167ca.png",
+      "image": "6bc676cce6cdacf43d1cd72588310502.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item is rounded",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8534,7 +8534,7 @@
     },
     {
       "id": "83af979a",
-      "image": "c1266289818b9179ed8864a6a099f91d.png",
+      "image": "c43a4d5e85913ed757e1d9084f9439d5.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item uses a custom icon",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8547,7 +8547,7 @@
     },
     {
       "id": "514167fb",
-      "image": "9aecd86e13edc9da9980cb49b9196080.png",
+      "image": "394255dd541a4d74ad2312b892c458c5.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item uses a custom image",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8560,7 +8560,7 @@
     },
     {
       "id": "7d009fa9",
-      "image": "e3d6334626dafefd989398a748383362.png",
+      "image": "e43713b4dffe63fbf6e52af9187292e5.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item uses an icon fallback",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8573,7 +8573,7 @@
     },
     {
       "id": "651a4032",
-      "image": "991700a7d0943673a80f2ef93b20a2c5.png",
+      "image": "82ee747b95d36e1216dc94d6602e6289.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item uses secondary mode",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8586,7 +8586,7 @@
     },
     {
       "id": "e019b519",
-      "image": "c4783a0423269e813cb40399b16ba629.png",
+      "image": "0d00eea111ae9e68a945e077df8b4313.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item uses tertiary mode",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8599,7 +8599,7 @@
     },
     {
       "id": "d69ca70f",
-      "image": "2aba9138113f5092749e6f58c0619ee0.png",
+      "image": "4f1de1fb25963f7ab6dee02992284573.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation aligned to the right collapses fully in narrow mode",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8612,7 +8612,7 @@
     },
     {
       "id": "3efde85c",
-      "image": "037ed069bd35f45d84dbcd44bc05b977.png",
+      "image": "6880c9a2187d6119421ee5bd1fb514af.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation aligned to the right collapses to the right",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8625,7 +8625,7 @@
     },
     {
       "id": "6d322e75",
-      "image": "99710628b48743242e6c8fe4965ff606.png",
+      "image": "c7fe682254aae8fb1b388653fb594b00.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation aligned to the right is expanded on the right",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8638,7 +8638,7 @@
     },
     {
       "id": "feb5e844",
-      "image": "8b18710991c3b0d168eb84dfe2596266.png",
+      "image": "7c24267f36a20f60cfc12b47c8f848c2.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation in subnavigation with back button shows shadow separator line at the top and bottom",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8651,7 +8651,7 @@
     },
     {
       "id": "13515603",
-      "image": "e7542daac88932e30ea3ae40191ceb27.png",
+      "image": "54895aaba261204baac30214c7ab6e95.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation narrow mode collapses to narrow mode",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8664,7 +8664,7 @@
     },
     {
       "id": "5fae3b76",
-      "image": "8f6ba2f19ba4ef1899f0ea69725694ae.png",
+      "image": "0fb03a4dcd4c09c73dd4fdab8c84780b.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation neutral mode uses neutral background color",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8677,7 +8677,7 @@
     },
     {
       "id": "9e87791c",
-      "image": "a67f8d63ff0b390550051c6726726726.png",
+      "image": "8cd70e953308a04ebbd19d88b04d0501.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation shows shadows shows shadow at the bottom and separator line at the top",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8690,7 +8690,7 @@
     },
     {
       "id": "1525503c",
-      "image": "b3ac8553a656433a27128ca70aa9f42f.png",
+      "image": "bb9df3391c021393371e00f9a965bc5c.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation shows shadows shows shadow at the top and bottom when scrolling down",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8703,7 +8703,7 @@
     },
     {
       "id": "e91a437e",
-      "image": "2e6aa651f5479b2700ac0308a18660d7.png",
+      "image": "9c4d1a33f16f3209aeb95eeac7a3cdf9.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation shows shadows shows shadow at the top and separator line at the bottom when scrolled to the bottom",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8716,7 +8716,7 @@
     },
     {
       "id": "497f5f7d",
-      "image": "4b8044422dd5d85d3e443b6938a17e4a.png",
+      "image": "64d099d58ec476d6014b92d762a4c65b.png",
       "userAgent": "default",
       "desc": "ld-sidenav without subnavigation is alignable collapses to the right",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8742,7 +8742,7 @@
     },
     {
       "id": "33ef593d",
-      "image": "fd285d053a581d64c5c0a3a56ba2e63a.png",
+      "image": "9d0f7c997020150ccfddd016dd5e122b.png",
       "userAgent": "default",
       "desc": "ld-sidenav without subnavigation is collapsible should be fully collapsed",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8755,7 +8755,7 @@
     },
     {
       "id": "b2512f84",
-      "image": "9067657a684cce4abb35c3b574026d6f.png",
+      "image": "1f7d4e9fcf7e99d811dab79d26da4217.png",
       "userAgent": "default",
       "desc": "ld-sidenav without subnavigation is collapsible should have a toggle button",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8768,7 +8768,7 @@
     },
     {
       "id": "e1ab3ec0",
-      "image": "9880d42da9c1d756bd294962c1af0666.png",
+      "image": "881b979a544119013eec638d977f8452.png",
       "userAgent": "default",
       "desc": "ld-sidenav without subnavigation shows shadows shows shadow at the bottom and separator line at the top",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",

src/liquid/components/ld-sidenav/ld-sidenav-back/ld-sidenav-back.css

@@ -2,7 +2,7 @@
   /* layout */
   --ld-sidenav-back-bg-inset: var(--ld-sp-6);
   --ld-sidenav-back-border-radius: var(--ld-br-l);
-  --ld-sidenav-back-icon-size: var(--ld-sp-40);
+  --ld-sidenav-back-icon-size: var(--ld-sp-24);
 
   /* colors */
   --ld-sidenav-back-col: var(--ld-col-neutral-800);
@@ -107,7 +107,7 @@ That's why we set z-index 0 on the following elements.
 
 .ld-sidenav-back__bg-left,
 .ld-sidenav-back__bg-right {
-  width: calc(0.5 * var(--ld-sidenav-back-icon-size) + var(--ld-sp-6));
+  width: calc(0.5 * var(--ld-sidenav-navitem-icon-size) + var(--ld-sp-6));
 }
 
 .ld-sidenav-back__bg-left {
@@ -135,8 +135,8 @@ That's why we set z-index 0 on the following elements.
 }
 
 .ld-sidenav-back__bg-center {
-  left: calc(0.5 * var(--ld-sidenav-back-icon-size) + var(--ld-sp-6));
-  right: calc(0.5 * var(--ld-sidenav-back-icon-size) + var(--ld-sp-6));
+  left: calc(0.5 * var(--ld-sidenav-navitem-icon-size) + var(--ld-sp-6));
+  right: calc(0.5 * var(--ld-sidenav-navitem-icon-size) + var(--ld-sp-6));
   transform-origin: left;
 
   .ld-sidenav-back--collapsed & {
@@ -154,7 +154,7 @@ That's why we set z-index 0 on the following elements.
 }
 
 .ld-sidenav-back__icon {
-  width: var(--ld-sidenav-back-icon-size);
+  width: var(--ld-sidenav-navitem-icon-size);
   aspect-ratio: 1;
   display: flex;
   align-items: center;
@@ -168,12 +168,13 @@ That's why we set z-index 0 on the following elements.
 
   &::before {
     content: '';
-    position: absolute;
-    inset: var(--ld-sp-8);
     background-color: var(--ld-thm-primary-active);
-    z-index: -1;
     border-radius: var(--ld-br-full);
+    height: var(--ld-sidenav-back-icon-size);
     overflow: hidden;
+    position: absolute;
+    width: var(--ld-sidenav-back-icon-size);
+    z-index: -1;
   }
 }
 

src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.css

@@ -4,7 +4,6 @@
 
 .ld-sidenav-navitem {
   /* layout */
-  --ld-sidenav-navitem-icon-size: var(--ld-sp-40);
   --ld-sidenav-navitem-icon-font-size: 1rem;
   --ld-sidenav-navitem-bg-inset: var(--ld-sp-6);
   --ld-sidenav-navitem-border-radius: var(--ld-br-l);

src/liquid/components/ld-sidenav/ld-sidenav-separator/ld-sidenav-separator.tsx

@@ -50,20 +50,17 @@ export class LdSidenavSeparator {
         .getComputedStyle(this.sidenav)
         .getPropertyValue('--ld-sidenav-width')
     )
-    const sidenavPaddingY = parseFloat(
+    const sidenavPaddingX = parseFloat(
       window
         .getComputedStyle(this.sidenav)
-        .getPropertyValue('--ld-sidenav-padding-y')
+        .getPropertyValue('--ld-sidenav-padding-x')
     )
-    const sidenavWidthCollapsed = parseFloat(
+    const sidenavNavitemIconSize = parseFloat(
       window
         .getComputedStyle(this.sidenav)
-        .getPropertyValue('--ld-sidenav-width-collapsed')
-    )
-    return (
-      (sidenavWidthCollapsed - 2 * sidenavPaddingY) /
-      (sidenavWidth - 2 * sidenavPaddingY)
+        .getPropertyValue('--ld-sidenav-navitem-icon-size')
     )
+    return sidenavNavitemIconSize / (sidenavWidth - 2 * sidenavPaddingX)
   }
 
   componentWillLoad() {

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

@@ -4,12 +4,20 @@
   --ld-sidenav-padding-x: 1rem;
   --ld-sidenav-padding-y: 1rem;
   --ld-sidenav-padding: var(--ld-sidenav-padding-y) var(--ld-sidenav-padding-x);
-  --ld-sidenav-toggle-top: 3.5rem;
+  --ld-sidenav-toggle-top: calc(
+    var(--ld-sidenav-padding-y) + var(--ld-sidenav-navitem-icon-size)
+  );
+
+  /* layout ld-navitem */
+  --ld-sidenav-navitem-icon-size: var(--ld-sp-32);
+
   /* Not using 0s here because we rely on the transition end event. */
   --ld-sidenav-transition-duration: 0.001s;
   --ld-sidenav-transition-delay: 0s;
   --ld-sidenav-width: 15.625rem;
-  --ld-sidenav-width-collapsed: 4.5rem;
+  --ld-sidenav-width-collapsed: calc(
+    2 * var(--ld-sidenav-padding-x) + var(--ld-sidenav-navitem-icon-size)
+  );
   --ld-sidenav-width-fully-collapsed: 1rem;
   --ld-sidenav-translate-x-direction: 1;
   --ld-sidenav-translate-x-delta: calc(

src/liquid/components/ld-sidenav/ld-sidenav.tsx

@@ -317,7 +317,7 @@ export class LdSidenav {
     if (!this.closable || !this.open) return
 
     // Do not trap the focus if the trap focus prop is not set.
-    if (typeof this.trapFocus === 'undefined') return
+    if (this.trapFocus === undefined) return
 
     // Do not trap the focus as long as the focus remains within the sidenav.
     if (isFocusInSidenav) return