[polish] Hide vertical scrollbar in docked/collapsed icon mode

- scrollbars that take up width (e.g. windows, mac setting) will cut too much into icon visibility otherwise. This CSS visually hides the scrollbars for all supported browsers while still allowing the containers to remain scrollable
elastic · Aug 4, 2023 · f9838a3 · f9838a3
1 parent 17b8c62
commit f9838a3
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 146 deletions.
diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <nav
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isDesktopCollapsed"
         data-autofocus="true"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { logicalCSS } from '../../global_styling';
+import { logicalCSS, euiYScroll } from '../../global_styling';
 
 export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -19,6 +19,14 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
          space to render with the right anchorPosition */
       ${logicalCSS('padding-bottom', euiTheme.size.xs)}
 
+      /* Allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter */
+      ${euiYScroll(euiThemeContext)}
+
+      /* In case things get really dire responsively, ensure the footer doesn't overtake the body */
+      .euiFlyoutBody {
+        ${logicalCSS('min-height', '50%')}
+      }
+
       .euiFlyoutFooter {
         background-color: ${euiTheme.colors.emptyShade};
         ${logicalCSS('border-top', euiTheme.border.thin)}
@@ -30,6 +38,18 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
     right: css`
       ${logicalCSS('border-left', euiTheme.border.thin)}
     `,
+    isDesktopCollapsed: css`
+      /* Hide the scrollbar for docked mode (while still keeping the nav scrollable) 
+         Otherwise if scrollbars are visible, button icon visibility suffers */
+      &,
+      .euiFlyoutBody__overflow {
+        scrollbar-width: none; /* Firefox */
+
+        &::-webkit-scrollbar {
+          display: none; /* Chrome, Edge, & Safari */
+        }
+      }
+    `,
     isSmallestScreen: css`
       /* Override EuiFlyout's max-width */
       &.euiFlyout {

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -175,6 +175,7 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
   const cssStyles = [
     styles.euiCollapsibleNavBeta,
     styles[side],
+    isCollapsed && !isSmallScreen && styles.isDesktopCollapsed,
     isSmallestScreen && styles.isSmallestScreen,
   ];
 

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx
@@ -48,150 +48,148 @@ export const Playground: Story = {
 export const EdgeCaseTesting: Story = {
   render: ({ ...args }) => (
     <EuiCollapsibleNavBeta>
-      <div className="eui-yScroll">
-        <EuiCollapsibleNavItem {...args} href="#" title="Link with no icon" />
-        <EuiCollapsibleNavItem
-          {...args}
-          href="#"
-          title="Link with icon"
-          icon="home"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="External link with icon"
-          icon="link"
-          href="#"
-          linkProps={{ target: '_blank' }}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          onClick={() => {}}
-          title="Button with no icon"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          linkProps={{ onClick: () => {} }}
-          title="Button with icon"
-          icon="home"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with no icon"
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with icon"
-          icon="clock"
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with nested accordions"
-          accordionProps={{ initialIsOpen: true }}
-          items={[
-            { ...args, title: 'Link', href: '#', isSelected: true },
-            { ...args, title: 'Button', onClick: () => {} },
-            { ...args, title: 'Span', href: '#' },
-            {
-              title: 'Section 2',
-              isGroupTitle: true,
-            },
-            {
-              ...args,
-              title: 'Test 2',
-              href: '#',
-              linkProps: { target: '_blank' },
-            },
-            { ...args, title: 'Not a link' },
-            {
-              ...args,
-              title: 'Nested accordion - span',
-              items: [{ title: 'grandchild' }, { title: 'grandchild 2' }],
-            },
-            {
-              ...args,
-              title: 'Nested accordion - link',
-              href: '#',
-              items: [
-                { title: 'grandchild', href: '#' },
-                { title: 'grandchild 2', href: '#' },
-              ],
-            },
-            {
-              title: 'Section 3',
-              titleElement: 'h3',
-              isGroupTitle: true,
-            },
-            {
-              ...args,
-              title: 'Nested accordion with grandchildren',
-              accordionProps: { initialIsOpen: true },
-              items: [
-                { title: 'grandchild' },
-                { title: 'grandchild 2', isSelected: true },
-                {
-                  title: 'Nested nested accordion',
-                  accordionProps: { initialIsOpen: true },
-                  items: [
-                    {
-                      title: 'greatgrandchild truncation testing',
-                      href: '#',
-                      linkProps: { target: '_blank' },
-                      isSelected: true,
-                    },
-                  ],
-                },
-              ],
-            },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with icon and link"
-          href="#"
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with icon and external link"
-          href="#"
-          linkProps={{ target: '_blank' }} // hmm
-          items={[
-            { ...args, title: 'Link with no icon', href: '#' },
-            { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
-          ]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with no items"
-          href="#"
-          items={[]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="Accordion with no items and no link"
-          items={[]}
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="No link or accordion, very very long truncated text"
-          icon="home"
-        />
-        <EuiCollapsibleNavItem
-          {...args}
-          title="No icon, very very long truncated text"
-        />
-      </div>
+      <EuiCollapsibleNavItem {...args} href="#" title="Link with no icon" />
+      <EuiCollapsibleNavItem
+        {...args}
+        href="#"
+        title="Link with icon"
+        icon="home"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="External link with icon"
+        icon="link"
+        href="#"
+        linkProps={{ target: '_blank' }}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        onClick={() => {}}
+        title="Button with no icon"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        linkProps={{ onClick: () => {} }}
+        title="Button with icon"
+        icon="home"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with no icon"
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with icon"
+        icon="clock"
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with nested accordions"
+        accordionProps={{ initialIsOpen: true }}
+        items={[
+          { ...args, title: 'Link', href: '#', isSelected: true },
+          { ...args, title: 'Button', onClick: () => {} },
+          { ...args, title: 'Span', href: '#' },
+          {
+            title: 'Section 2',
+            isGroupTitle: true,
+          },
+          {
+            ...args,
+            title: 'Test 2',
+            href: '#',
+            linkProps: { target: '_blank' },
+          },
+          { ...args, title: 'Not a link' },
+          {
+            ...args,
+            title: 'Nested accordion - span',
+            items: [{ title: 'grandchild' }, { title: 'grandchild 2' }],
+          },
+          {
+            ...args,
+            title: 'Nested accordion - link',
+            href: '#',
+            items: [
+              { title: 'grandchild', href: '#' },
+              { title: 'grandchild 2', href: '#' },
+            ],
+          },
+          {
+            title: 'Section 3',
+            titleElement: 'h3',
+            isGroupTitle: true,
+          },
+          {
+            ...args,
+            title: 'Nested accordion with grandchildren',
+            accordionProps: { initialIsOpen: true },
+            items: [
+              { title: 'grandchild' },
+              { title: 'grandchild 2', isSelected: true },
+              {
+                title: 'Nested nested accordion',
+                accordionProps: { initialIsOpen: true },
+                items: [
+                  {
+                    title: 'greatgrandchild truncation testing',
+                    href: '#',
+                    linkProps: { target: '_blank' },
+                    isSelected: true,
+                  },
+                ],
+              },
+            ],
+          },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with icon and link"
+        href="#"
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with icon and external link"
+        href="#"
+        linkProps={{ target: '_blank' }} // hmm
+        items={[
+          { ...args, title: 'Link with no icon', href: '#' },
+          { ...args, title: 'Link with icon', href: '#', icon: 'alert' },
+        ]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with no items"
+        href="#"
+        items={[]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="Accordion with no items and no link"
+        items={[]}
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="No link or accordion, very very long truncated text"
+        icon="home"
+      />
+      <EuiCollapsibleNavItem
+        {...args}
+        title="No icon, very very long truncated text"
+      />
     </EuiCollapsibleNavBeta>
   ),
 };