Skip to content

Commit f9838a3

Browse files
cee-chencee-chen
committed
[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
1 parent 17b8c62 commit f9838a3

4 files changed

Lines changed: 165 additions & 146 deletions

File tree

‎src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
9191
data-focus-lock-disabled="disabled"
9292
>
9393
<nav
94-
class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left"
94+
class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isDesktopCollapsed"
9595
data-autofocus="true"
9696
data-test-subj="nav"
9797
id="generated-id_euiCollapsibleNav"

‎src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import { css } from '@emotion/react';
1010
import { UseEuiTheme } from '../../services';
11-
import { logicalCSS } from '../../global_styling';
11+
import { logicalCSS, euiYScroll } from '../../global_styling';
1212

1313
export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
1414
const { euiTheme } = euiThemeContext;
@@ -19,6 +19,14 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
1919
space to render with the right anchorPosition */
2020
${logicalCSS('padding-bottom', euiTheme.size.xs)}
2121
22+
/* Allow the nav to scroll, in case consumers don't use EuiFlyoutBody/EuiFyoutFooter */
23+
${euiYScroll(euiThemeContext)}
24+
25+
/* In case things get really dire responsively, ensure the footer doesn't overtake the body */
26+
.euiFlyoutBody {
27+
${logicalCSS('min-height', '50%')}
28+
}
29+
2230
.euiFlyoutFooter {
2331
background-color: ${euiTheme.colors.emptyShade};
2432
${logicalCSS('border-top', euiTheme.border.thin)}
@@ -30,6 +38,18 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
3038
right: css`
3139
${logicalCSS('border-left', euiTheme.border.thin)}
3240
`,
41+
isDesktopCollapsed: css`
42+
/* Hide the scrollbar for docked mode (while still keeping the nav scrollable)
43+
Otherwise if scrollbars are visible, button icon visibility suffers */
44+
&,
45+
.euiFlyoutBody__overflow {
46+
scrollbar-width: none; /* Firefox */
47+
48+
&::-webkit-scrollbar {
49+
display: none; /* Chrome, Edge, & Safari */
50+
}
51+
}
52+
`,
3353
isSmallestScreen: css`
3454
/* Override EuiFlyout's max-width */
3555
&.euiFlyout {

‎src/components/collapsible_nav_beta/collapsible_nav_beta.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ export const EuiCollapsibleNavBeta: FunctionComponent<
175175
const cssStyles = [
176176
styles.euiCollapsibleNavBeta,
177177
styles[side],
178+
isCollapsed && !isSmallScreen && styles.isDesktopCollapsed,
178179
isSmallestScreen && styles.isSmallestScreen,
179180
];
180181

‎src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx‎

Lines changed: 142 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -48,150 +48,148 @@ export const Playground: Story = {
4848
export const EdgeCaseTesting: Story = {
4949
render: ({ ...args }) => (
5050
<EuiCollapsibleNavBeta>
51-
<div className="eui-yScroll">
52-
<EuiCollapsibleNavItem {...args} href="#" title="Link with no icon" />
53-
<EuiCollapsibleNavItem
54-
{...args}
55-
href="#"
56-
title="Link with icon"
57-
icon="home"
58-
/>
59-
<EuiCollapsibleNavItem
60-
{...args}
61-
title="External link with icon"
62-
icon="link"
63-
href="#"
64-
linkProps={{ target: '_blank' }}
65-
/>
66-
<EuiCollapsibleNavItem
67-
{...args}
68-
onClick={() => {}}
69-
title="Button with no icon"
70-
/>
71-
<EuiCollapsibleNavItem
72-
{...args}
73-
linkProps={{ onClick: () => {} }}
74-
title="Button with icon"
75-
icon="home"
76-
/>
77-
<EuiCollapsibleNavItem
78-
{...args}
79-
title="Accordion with no icon"
80-
items={[
81-
{ ...args, title: 'Link with no icon', href: '#' },
82-
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
83-
]}
84-
/>
85-
<EuiCollapsibleNavItem
86-
{...args}
87-
title="Accordion with icon"
88-
icon="clock"
89-
items={[
90-
{ ...args, title: 'Link with no icon', href: '#' },
91-
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
92-
]}
93-
/>
94-
<EuiCollapsibleNavItem
95-
{...args}
96-
title="Accordion with nested accordions"
97-
accordionProps={{ initialIsOpen: true }}
98-
items={[
99-
{ ...args, title: 'Link', href: '#', isSelected: true },
100-
{ ...args, title: 'Button', onClick: () => {} },
101-
{ ...args, title: 'Span', href: '#' },
102-
{
103-
title: 'Section 2',
104-
isGroupTitle: true,
105-
},
106-
{
107-
...args,
108-
title: 'Test 2',
109-
href: '#',
110-
linkProps: { target: '_blank' },
111-
},
112-
{ ...args, title: 'Not a link' },
113-
{
114-
...args,
115-
title: 'Nested accordion - span',
116-
items: [{ title: 'grandchild' }, { title: 'grandchild 2' }],
117-
},
118-
{
119-
...args,
120-
title: 'Nested accordion - link',
121-
href: '#',
122-
items: [
123-
{ title: 'grandchild', href: '#' },
124-
{ title: 'grandchild 2', href: '#' },
125-
],
126-
},
127-
{
128-
title: 'Section 3',
129-
titleElement: 'h3',
130-
isGroupTitle: true,
131-
},
132-
{
133-
...args,
134-
title: 'Nested accordion with grandchildren',
135-
accordionProps: { initialIsOpen: true },
136-
items: [
137-
{ title: 'grandchild' },
138-
{ title: 'grandchild 2', isSelected: true },
139-
{
140-
title: 'Nested nested accordion',
141-
accordionProps: { initialIsOpen: true },
142-
items: [
143-
{
144-
title: 'greatgrandchild truncation testing',
145-
href: '#',
146-
linkProps: { target: '_blank' },
147-
isSelected: true,
148-
},
149-
],
150-
},
151-
],
152-
},
153-
]}
154-
/>
155-
<EuiCollapsibleNavItem
156-
{...args}
157-
title="Accordion with icon and link"
158-
href="#"
159-
items={[
160-
{ ...args, title: 'Link with no icon', href: '#' },
161-
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
162-
]}
163-
/>
164-
<EuiCollapsibleNavItem
165-
{...args}
166-
title="Accordion with icon and external link"
167-
href="#"
168-
linkProps={{ target: '_blank' }} // hmm
169-
items={[
170-
{ ...args, title: 'Link with no icon', href: '#' },
171-
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
172-
]}
173-
/>
174-
<EuiCollapsibleNavItem
175-
{...args}
176-
title="Accordion with no items"
177-
href="#"
178-
items={[]}
179-
/>
180-
<EuiCollapsibleNavItem
181-
{...args}
182-
title="Accordion with no items and no link"
183-
items={[]}
184-
/>
185-
<EuiCollapsibleNavItem
186-
{...args}
187-
title="No link or accordion, very very long truncated text"
188-
icon="home"
189-
/>
190-
<EuiCollapsibleNavItem
191-
{...args}
192-
title="No icon, very very long truncated text"
193-
/>
194-
</div>
51+
<EuiCollapsibleNavItem {...args} href="#" title="Link with no icon" />
52+
<EuiCollapsibleNavItem
53+
{...args}
54+
href="#"
55+
title="Link with icon"
56+
icon="home"
57+
/>
58+
<EuiCollapsibleNavItem
59+
{...args}
60+
title="External link with icon"
61+
icon="link"
62+
href="#"
63+
linkProps={{ target: '_blank' }}
64+
/>
65+
<EuiCollapsibleNavItem
66+
{...args}
67+
onClick={() => {}}
68+
title="Button with no icon"
69+
/>
70+
<EuiCollapsibleNavItem
71+
{...args}
72+
linkProps={{ onClick: () => {} }}
73+
title="Button with icon"
74+
icon="home"
75+
/>
76+
<EuiCollapsibleNavItem
77+
{...args}
78+
title="Accordion with no icon"
79+
items={[
80+
{ ...args, title: 'Link with no icon', href: '#' },
81+
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
82+
]}
83+
/>
84+
<EuiCollapsibleNavItem
85+
{...args}
86+
title="Accordion with icon"
87+
icon="clock"
88+
items={[
89+
{ ...args, title: 'Link with no icon', href: '#' },
90+
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
91+
]}
92+
/>
93+
<EuiCollapsibleNavItem
94+
{...args}
95+
title="Accordion with nested accordions"
96+
accordionProps={{ initialIsOpen: true }}
97+
items={[
98+
{ ...args, title: 'Link', href: '#', isSelected: true },
99+
{ ...args, title: 'Button', onClick: () => {} },
100+
{ ...args, title: 'Span', href: '#' },
101+
{
102+
title: 'Section 2',
103+
isGroupTitle: true,
104+
},
105+
{
106+
...args,
107+
title: 'Test 2',
108+
href: '#',
109+
linkProps: { target: '_blank' },
110+
},
111+
{ ...args, title: 'Not a link' },
112+
{
113+
...args,
114+
title: 'Nested accordion - span',
115+
items: [{ title: 'grandchild' }, { title: 'grandchild 2' }],
116+
},
117+
{
118+
...args,
119+
title: 'Nested accordion - link',
120+
href: '#',
121+
items: [
122+
{ title: 'grandchild', href: '#' },
123+
{ title: 'grandchild 2', href: '#' },
124+
],
125+
},
126+
{
127+
title: 'Section 3',
128+
titleElement: 'h3',
129+
isGroupTitle: true,
130+
},
131+
{
132+
...args,
133+
title: 'Nested accordion with grandchildren',
134+
accordionProps: { initialIsOpen: true },
135+
items: [
136+
{ title: 'grandchild' },
137+
{ title: 'grandchild 2', isSelected: true },
138+
{
139+
title: 'Nested nested accordion',
140+
accordionProps: { initialIsOpen: true },
141+
items: [
142+
{
143+
title: 'greatgrandchild truncation testing',
144+
href: '#',
145+
linkProps: { target: '_blank' },
146+
isSelected: true,
147+
},
148+
],
149+
},
150+
],
151+
},
152+
]}
153+
/>
154+
<EuiCollapsibleNavItem
155+
{...args}
156+
title="Accordion with icon and link"
157+
href="#"
158+
items={[
159+
{ ...args, title: 'Link with no icon', href: '#' },
160+
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
161+
]}
162+
/>
163+
<EuiCollapsibleNavItem
164+
{...args}
165+
title="Accordion with icon and external link"
166+
href="#"
167+
linkProps={{ target: '_blank' }} // hmm
168+
items={[
169+
{ ...args, title: 'Link with no icon', href: '#' },
170+
{ ...args, title: 'Link with icon', href: '#', icon: 'alert' },
171+
]}
172+
/>
173+
<EuiCollapsibleNavItem
174+
{...args}
175+
title="Accordion with no items"
176+
href="#"
177+
items={[]}
178+
/>
179+
<EuiCollapsibleNavItem
180+
{...args}
181+
title="Accordion with no items and no link"
182+
items={[]}
183+
/>
184+
<EuiCollapsibleNavItem
185+
{...args}
186+
title="No link or accordion, very very long truncated text"
187+
icon="home"
188+
/>
189+
<EuiCollapsibleNavItem
190+
{...args}
191+
title="No icon, very very long truncated text"
192+
/>
195193
</EuiCollapsibleNavBeta>
196194
),
197195
};

0 commit comments

Comments
 (0)