refactor: update side-nav and side-nav-item base styles (#10096)

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: web-padawan

dev/side-nav.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Side nav</title>
+    <title>Side Nav</title>
     <script type="module" src="./common.js"></script>
     <script type="module">
       import '@vaadin/icon';

packages/side-nav/src/styles/vaadin-side-nav-base-styles.js

@@ -26,17 +26,35 @@ const sideNav = css`
     line-height: var(--vaadin-side-nav-label-line-height, inherit);
     border-radius: var(--vaadin-side-nav-item-border-radius, var(--vaadin-radius-m));
     touch-action: manipulation;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  ::slotted([slot='label']) {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
   }
 `;
 
 export const sideNavStyles = [sharedStyles, sideNav];
 
 export const sideNavSlotStyles = css`
-  :where(vaadin-side-nav:has(vaadin-icon[slot='prefix'])) {
-    --_has-prefix-icon: '';
+  :where(vaadin-side-nav:has(> vaadin-side-nav-item > vaadin-icon[slot='prefix']))::part(children),
+  :where(vaadin-side-nav-item:has(> vaadin-side-nav-item[slot='children'] > vaadin-icon[slot='prefix']))::part(
+    children
+  ) {
+    --_icon-indent: calc(var(--_icon-indent-2, 0) + 1);
+  }
+
+  :where(vaadin-side-nav-item:has(> vaadin-icon[slot='prefix']))::part(content) {
+    --_icon-indent: calc(var(--_icon-indent-2) - 1);
   }
 
-  :where(vaadin-side-nav-item:has(> vaadin-icon[slot='prefix']))::part(link) {
-    --_has-prefix-icon:;
+  :where(
+    vaadin-side-nav-item:has(> vaadin-icon[slot='prefix']):has(> vaadin-side-nav-item > vaadin-icon[slot='prefix'])
+  )::part(children) {
+    --_level: var(--_level-2, 0);
   }
 `;

packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js

@@ -12,8 +12,11 @@ const sideNavItem = css`
   [part='content'] {
     display: flex;
     align-items: center;
+    min-width: 0;
+    max-width: 100%;
     padding: var(--vaadin-side-nav-item-padding, var(--vaadin-padding-container));
-    gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s));
+    --_gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s));
+    gap: var(--_gap);
     font-size: var(--vaadin-side-nav-item-font-size, 1em);
     font-weight: var(--vaadin-side-nav-item-font-weight, 500);
     line-height: var(--vaadin-side-nav-item-line-height, inherit);
@@ -69,14 +72,6 @@ const sideNavItem = css`
     flex: none;
   }
 
-  /* Reserved space for icon */
-  slot[name='prefix']::before {
-    content: var(--_has-prefix-icon);
-    display: block;
-    width: var(--vaadin-icon-size, 1lh);
-    flex: none;
-  }
-
   [part='content']:not(:has([href])):has([part='toggle-button']:focus-visible),
   [part='content']:has(:not([part='toggle-button']):focus-visible),
   [part='content']:has([href]) [part='toggle-button']:focus-visible {
@@ -90,18 +85,19 @@ const sideNavItem = css`
   /* Hierarchy indentation */
   [part='content']::before {
     content: '';
-    --_hierarchy-indent: calc(var(--_level, 0) * var(--vaadin-side-nav-child-indent, var(--vaadin-icon-size, 1lh)));
-    --_icon-indent: calc(var(--_level, 0) * var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s)));
-    width: calc(var(--_hierarchy-indent) + var(--_icon-indent));
+    width: calc(
+      var(--vaadin-side-nav-child-indent, 1em) * var(--_level, 0) + var(--_icon-indent, 0) *
+        (var(--vaadin-icon-size, 1lh) + var(--_gap))
+    );
     flex: none;
-    margin-inline-start: calc(var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s)) * -1);
+    margin-inline-start: calc(var(--_gap) * -1);
   }
 
-  slot[name='children'] {
+  [part='children'] {
     --_level: calc(var(--_level-2, 0) + 1);
   }
 
-  slot[name='children']::slotted(*) {
+  [part='children'] ::slotted(*) {
     --_level-2: var(--_level);
   }
 

packages/side-nav/src/styles/vaadin-side-nav-shared-base-styles.js

@@ -10,6 +10,8 @@ export const sharedStyles = css`
   :host {
     display: flex;
     flex-direction: column;
+    min-width: 0;
+    max-width: 100%;
     gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-s));
     cursor: default;
     -webkit-tap-highlight-color: transparent;
@@ -79,6 +81,10 @@ export const sharedStyles = css`
     gap: var(--vaadin-side-nav-items-gap, var(--vaadin-gap-s));
   }
 
+  [part='children'] slot {
+    --_icon-indent-2: var(--_icon-indent);
+  }
+
   :focus-visible {
     outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
   }