[EuiCollapsibleNavBeta] Minor design enhancements

packages/eui/changelogs/upcoming/8332.md

@@ -0,0 +1,4 @@
+- Minor design updates to `EuiCollapsibleNavBeta`
+  - Allow section without a title
+  - Second-level icons should be horizontally aligned with the top-level icon
+  - Turn off text truncation for nav items

packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap

@@ -168,7 +168,7 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher 1`] = `
       class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
     >
       <span
-        class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+        class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
       >
         Some navigation link
       </span>

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx

@@ -26,6 +26,7 @@ import {
   EuiCollapsibleNavBetaProps,
   EuiCollapsibleNavItemProps,
 } from './';
+import { EuiSpacer } from '../spacer';
 
 const meta: Meta<EuiCollapsibleNavBetaProps> = {
   title: 'Navigation/EuiCollapsibleNav (beta)/EuiCollapsibleNavBeta',
@@ -71,13 +72,15 @@ const renderGroup = (
   groupItems: EuiCollapsibleNavItemProps[]
 ) => {
   return [
+    {
+      renderItem: () => <EuiSpacer size="m" />,
+    },
     {
       renderItem: () => (
         <EuiTitle
           size="xxxs"
           className="eui-textTruncate"
           css={({ euiTheme }) => ({
-            marginTop: euiTheme.size.base,
             paddingBlock: euiTheme.size.xs,
             paddingInline: euiTheme.size.s,
           })}
@@ -90,6 +93,15 @@ const renderGroup = (
   ];
 };
 
+const renderSection = (groupItems: EuiCollapsibleNavItemProps[]) => {
+  return [
+    {
+      renderItem: () => <EuiSpacer size="m" />,
+    },
+    ...groupItems,
+  ];
+};
+
 export const Playground: Story = {
   render: ({ ...args }) => (
     <StatefulCollapsibleNav {...args}>
@@ -99,17 +111,19 @@ export const Playground: Story = {
           icon="logoElasticsearch"
           isCollapsible={false}
           items={[
-            { title: 'Get started', href: '#' },
+            { title: 'Get started', href: '#', icon: 'launch' },
             ...renderGroup('Explore', [
               {
                 title: 'Discover',
                 onClick: () => action('Discover')('clicked!'),
+                icon: 'iInCircle',
               },
-              { title: 'Dashboards', href: '#' },
-              { title: 'Visualize library', href: '#' },
+              { title: 'Dashboards', href: '#', icon: 'iInCircle' },
+              { title: 'Visualize library', href: '#', icon: 'iInCircle' },
             ]),
             {
               title: 'Machine learning',
+              icon: 'iInCircle',
               items: [
                 { title: 'Anomaly detection', href: '#' },
                 { title: 'Data frame analytics', href: '#' },
@@ -129,63 +143,68 @@ export const Playground: Story = {
                 </EuiButtonEmpty>
               ),
             },
+            ...renderSection([
+              {
+                title: 'Standalone item with long name',
+                href: '#',
+                icon: 'iInCircle',
+              },
+            ]),
             ...renderGroup('Content', [
-              { title: 'Indices', href: '#' },
-              { title: 'Transforms', href: '#' },
-              { title: 'Indexing API', href: '#' },
+              { title: 'Indices', href: '#', icon: 'iInCircle' },
+              { title: 'Transforms', href: '#', icon: 'iInCircle' },
+              { title: 'Indexing API', href: '#', icon: 'iInCircle' },
+            ]),
+            ...renderGroup('Security', [
+              { title: 'API keys', href: '#', icon: 'gear' },
             ]),
-            ...renderGroup('Security', [{ title: 'API keys', href: '#' }]),
           ]}
         />
       </EuiCollapsibleNavBeta.Body>
       <EuiCollapsibleNavBeta.Footer>
         <EuiCollapsibleNavBeta.Item
-          title="Recent"
-          icon="clock"
-          items={[
-            { title: 'Lorem ipsum', icon: 'visMapRegion', href: '#' },
-            { title: 'Consectetur cursus', icon: 'visPie', href: '#' },
-            { title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
-          ]}
-        />
-        <EuiCollapsibleNavBeta.Item
-          title="Developer tools"
-          icon="editorCodeBlock"
-          items={[
-            { title: 'Console', href: '#' },
-            { title: 'Search profiler', href: '#' },
-            { title: 'Grok debugger', href: '#' },
-            { title: 'Painless lab', href: '#' },
-          ]}
-        />
-        <EuiCollapsibleNavBeta.Item
-          title="Project settings"
-          icon="gear"
+          isCollapsible={false}
           items={[
             {
-              title: 'Management',
+              title: 'Recent',
+              icon: 'clock',
               items: [
-                { title: 'Integrations', href: '#' },
-                { title: 'Fleet', href: '#' },
-                { title: 'Osquery', href: '#' },
-                { title: 'Stack monitoring', href: '#' },
-                { title: 'Stack management', href: '#' },
+                { title: 'Lorem ipsum', icon: 'visMapRegion', href: '#' },
+                { title: 'Consectetur cursus', icon: 'visPie', href: '#' },
+                { title: 'Ultricies tellus', icon: 'visMetric', href: '#' },
               ],
             },
+            { title: 'Developer tools', icon: 'editorCodeBlock', href: '#' },
             {
-              title: 'Users and roles',
-              href: '#',
-              linkProps: { target: '_blank' },
-            },
-            {
-              title: 'Performance',
-              href: '#',
-              linkProps: { target: '_blank' },
-            },
-            {
-              title: 'Billing and subscription',
-              href: '#',
-              linkProps: { target: '_blank' },
+              title: 'Project settings',
+              icon: 'gear',
+              items: [
+                {
+                  title: 'Management',
+                  items: [
+                    { title: 'Integrations', href: '#' },
+                    { title: 'Fleet', href: '#' },
+                    { title: 'Osquery', href: '#' },
+                    { title: 'Stack monitoring', href: '#' },
+                    { title: 'Stack management', href: '#' },
+                  ],
+                },
+                {
+                  title: 'Users and roles',
+                  href: '#',
+                  linkProps: { target: '_blank' },
+                },
+                {
+                  title: 'Performance',
+                  href: '#',
+                  linkProps: { target: '_blank' },
+                },
+                {
+                  title: 'Billing and subscription',
+                  href: '#',
+                  linkProps: { target: '_blank' },
+                },
+              ],
             },
           ]}
         />

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap

@@ -58,7 +58,7 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
           class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
         >
           <span
-            class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+            class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
           >
             sub item
           </span>
@@ -129,7 +129,7 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
           class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
         >
           <span
-            class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+            class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
           >
             sub item
           </span>

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_group.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`EuiCollapsibleNavGroup renders as a sub item 1`] = `
       class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
     >
       <span
-        class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+        class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
       >
         sub item
       </span>
@@ -49,7 +49,7 @@ exports[`EuiCollapsibleNavGroup renders as a top level item 1`] = `
       class="euiCollapsibleNavLink euiCollapsibleNavSubItem emotion-euiCollapsibleNavLink-isSubItem"
     >
       <span
-        class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+        class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
       >
         sub item
       </span>

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`]
           class="euiCollapsibleNavLink emotion-euiCollapsibleNavLink-isTopItem"
         >
           <span
-            class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+            class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
           >
             Item
           </span>
@@ -88,7 +88,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`]
           data-test-subj="test subject string"
         >
           <span
-            class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+            class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
           >
             Sub-item
           </span>
@@ -110,7 +110,7 @@ exports[`EuiCollapsibleNavItem renders a top level group if items exist and \`is
     id="generated-id"
   >
     <span
-      class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+      class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
     >
       Item
     </span>
@@ -126,7 +126,7 @@ exports[`EuiCollapsibleNavItem renders a top level group if items exist and \`is
       data-test-subj="test subject string"
     >
       <span
-        class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+        class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
       >
         Sub-item
       </span>

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/__snapshots__/collapsed_nav_popover.test.tsx.snap

@@ -81,7 +81,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
               rel="noreferrer"
             >
               <span
-                class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+                class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
               >
                 Sub-item A
               </span>
@@ -93,7 +93,7 @@ exports[`EuiCollapsedNavPopover renders 1`] = `
               rel="noreferrer"
             >
               <span
-                class="euiCollapsibleNavItem__title eui-textTruncate emotion-euiCollapsibleNavItem__title"
+                class="euiCollapsibleNavItem__title emotion-euiCollapsibleNavItem__title"
               >
                 Sub-item B
               </span>

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx

@@ -23,7 +23,7 @@ import { EuiCollapsibleNavLink } from './collapsible_nav_link';
 type EuiCollapsibleNavGroupProps = _SharedEuiCollapsibleNavItemProps &
   _EuiCollapsibleNavItemDisplayProps &
   Required<Pick<EuiCollapsibleNavItemProps, 'items'>> & {
-    header: ReactNode;
+    header?: ReactNode;
   };
 
 /**
@@ -61,14 +61,16 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
 
   return (
     <div className={classes} {...cssStyles} {...rest}>
-      <EuiCollapsibleNavLink
-        id={labelledById}
-        isSelected={isSelected}
-        isSubItem={isSubItem}
-        isInteractive={false}
-      >
-        {header}
-      </EuiCollapsibleNavLink>
+      {header ? (
+        <EuiCollapsibleNavLink
+          id={labelledById}
+          isSelected={isSelected}
+          isSubItem={isSubItem}
+          isInteractive={false}
+        >
+          {header}
+        </EuiCollapsibleNavLink>
+      ) : null}
       <EuiCollapsibleNavSubItems
         items={items}
         isSubItem={isSubItem}

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts

@@ -61,8 +61,11 @@ export const euiCollapsibleNavSubItemsStyles = ({ euiTheme }: UseEuiTheme) => {
     `,
     isSubItem: css`
       ${logicalCSS('border-left', euiTheme.border.thin)}
-      ${logicalCSS('margin-left', euiTheme.size.s)}
-        ${logicalCSS(
+      ${logicalCSS(
+        'margin-left',
+        mathWithUnits([euiTheme.size.xs], (x) => x * 4)
+      )}
+      ${logicalCSS(
         'padding-left',
         mathWithUnits(
           [euiTheme.size.s, euiTheme.border.width.thin],
@@ -77,14 +80,16 @@ export const euiCollapsibleNavSubItemsStyles = ({ euiTheme }: UseEuiTheme) => {
  * Top-level item only styles
  */
 
-export const euiCollapsibleNavTopItemStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiCollapsibleNavTopItemStyles = ({
+  euiTheme: _euiTheme,
+}: UseEuiTheme) => {
   return {
-    // If this is the only top-level item in the list, assume it's a solution nav and
-    // reduce its default left padding + increase its relative icon size
+    // If this is the only top-level item in the list, assume the nav is showing a single solution and
+    // use no left padding + increase its relative icon size
     euiCollapsibleNavTopItem: css`
       &:only-child {
         .euiCollapsibleNavItem__items {
-          ${logicalCSS('padding-left', euiTheme.size.s)}
+          ${logicalCSS('padding-left', 0)}
         }
 
         .euiCollapsibleNavItem__icon {