[storybook] Improve default story to show off more styles/states

+ fix nested caret alignment
elastic · Feb 9, 2024 · 661b18d · 661b18d
1 parent 7c9916b
commit 661b18d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 11 deletions.
diff --git a/src/components/side_nav/side_nav.stories.tsx b/src/components/side_nav/side_nav.stories.tsx
@@ -51,11 +51,17 @@ const sharedSideNavItems = [
         id: 'child_1',
         items: [
           {
-            name: 'Selected item',
-            id: 'selected_item',
-            onClick: () => {},
-            isSelected: true,
-            items: [],
+            name: 'Emphasized item',
+            id: 'emphasized_item',
+            emphasize: true,
+            items: [
+              {
+                name: 'Selected item',
+                id: 'selected_item',
+                onClick: () => {},
+                isSelected: true,
+              },
+            ],
           },
         ],
       },
@@ -64,22 +70,36 @@ const sharedSideNavItems = [
   {
     name: 'Has forceOpen: true',
     id: 'force_open',
-    forceOpen: true,
     items: [
       {
-        name: 'Child 3',
-        id: 'child_3',
+        name: 'Child 2',
+        id: 'child_2',
+        onClick: () => {},
+        forceOpen: true,
+        items: [
+          {
+            name: 'Disabled item',
+            id: 'disabled_item',
+            href: '#',
+            disabled: true,
+          },
+        ],
       },
     ],
   },
   {
-    name: 'Children only without link',
+    name: 'Children only without links',
     id: 'children_only',
     onClick: undefined,
     items: [
       {
-        name: 'Child 4',
-        id: 'child_4',
+        name: 'Very very long text, truncated by default',
+        id: 'truncated',
+      },
+      {
+        name: 'Very very long text, truncate set to false',
+        id: 'truncateFalse',
+        truncate: false,
       },
     ],
   },

diff --git a/src/components/side_nav/side_nav_item.styles.ts b/src/components/side_nav/side_nav_item.styles.ts
@@ -75,6 +75,7 @@ export const euiSideNavItemStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('margin-left', euiTheme.size.l)}
       `,
       trunk: css`
+        ${logicalCSS('width', '100%')} /* Needed for trunks with carets */
         ${logicalCSS('margin-left', euiTheme.size.s)}
       `,
       branch: css`