Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiCollapsibleNav] Fixed docked states on mobile and added more props #3330

Merged
merged 11 commits into from
Apr 16, 2020
Merged

[EuiCollapsibleNav] Fixed docked states on mobile and added more props #3330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a196831
[EuiCollapsibleNav] Enable collapsing on small screens when `isDocked…
Apr 14, 2020
5ae3d3d
[Breaking] Flip the name of `hideButtonIfDocked` to `showButtonIfDocked`
Apr 14, 2020
05fae02
Allowing customization of docking breakpoint
Apr 15, 2020
78df3d9
Added `showCloseButton` prop and fixed tests
Apr 15, 2020
de122a8
Undo unnecessary logic change
Apr 15, 2020
e9d3ed9
Put example back
Apr 15, 2020
974c003
Put example back pt. 2
Apr 15, 2020
d875a9a
cl
Apr 15, 2020
b7b352b
cl
Apr 15, 2020
48f907a
Move animation to only play when nav becomes visible
Apr 16, 2020
f11aaef
Merge branch 'master' into fix/collapse_nav_mobile
cchaos Apr 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Added `showCloseButton` and `dockedBreakpoint` flexibility to `EuiCollapsibleNav` ([#3330](https://github.com/elastic/eui/pull/3330))

**Bug Fixes**

- Fixed `EuiInMemoryTable` `isClearable` property to initiate reset ([#3328](https://github.com/elastic/eui/pull/3328))
- Fixed `EuiCollapsibleNav` docked states on mobile ([#3330](https://github.com/elastic/eui/pull/3330))

**Breaking changes**

- Upgraded `TypeScript` to 3.7.2 ([#3295](https://github.com/elastic/eui/pull/3295))
- Changed `EuiCollapsibleNav` prop name from `hideButtonIfDocked` to `showButtonIfDocked` and flipped default ([#3330](https://github.com/elastic/eui/pull/3330))

## [`22.6.0`](https://github.com/elastic/eui/tree/v22.6.0)

Expand Down
6 changes: 3 additions & 3 deletions src-docs/src/views/collapsible_nav/collapsible_nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ export default () => {
<>
<EuiCollapsibleNav
isOpen={navIsOpen}
isDocked={navIsDocked}
button={
<EuiButton onClick={() => setNavIsOpen(!navIsOpen)}>
Toggle nav
</EuiButton>
}
isDocked={navIsDocked}
onClose={() => setNavIsOpen(false)}>
<div style={{ padding: 16 }}>
<EuiTitle>
Expand All @@ -40,8 +40,8 @@ export default () => {
{navIsDocked && (
<EuiText size="s" color="subdued">
<p>
The button gets hidden by default when nav is docked unless you set{' '}
<EuiCode language="js">hideButtonIfDocked = false</EuiCode>.
The button gets hidden by default when the nav is docked unless you
set <EuiCode language="js">showButtonIfDocked = true</EuiCode>.
</p>
</EuiText>
)}
Expand Down
288 changes: 270 additions & 18 deletions src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,178 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiCollapsibleNav is rendered 1`] = `null`;
exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `null`;

exports[`EuiCollapsibleNav is rendered 1`] = `
Array [
<div />,
<div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="1"
/>
<div
data-focus-lock-disabled="false"
>
<nav
aria-label="aria-label"
class="euiCollapsibleNav testClass1 testClass2"
data-test-subj="test subject string"
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
</span>
</span>
</button>
</nav>
</div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
</div>,
]
`;

exports[`EuiCollapsibleNav props button 1`] = `
<button
aria-controls="id"
aria-expanded="false"
aria-pressed="false"
class="euiCollapsibleNav__toggle"
/>
Array [
<button
aria-controls="id"
aria-expanded="true"
aria-pressed="true"
class="euiCollapsibleNav__toggle"
/>,
<div />,
<div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="1"
/>
<div
data-focus-lock-disabled="false"
>
<nav
class="euiCollapsibleNav"
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
</span>
</span>
</button>
</nav>
</div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
</div>,
]
`;

exports[`EuiCollapsibleNav props hideButtonIfDocked 1`] = `
<button
aria-controls="id"
aria-expanded="false"
aria-pressed="false"
class="euiCollapsibleNav__toggle"
/>
exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
Array [
<div />,
<div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="1"
/>
<div
data-focus-lock-disabled="false"
>
<nav
class="euiCollapsibleNav"
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
</span>
</span>
</button>
</nav>
</div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
</div>,
]
`;

exports[`EuiCollapsibleNav props isDocked 1`] = `
Expand Down Expand Up @@ -54,7 +209,11 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
<span
class="euiButtonEmpty__text"
>
close
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
</span>
</span>
</button>
Expand All @@ -68,7 +227,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
</div>
`;

exports[`EuiCollapsibleNav props isOpen 1`] = `
exports[`EuiCollapsibleNav props onClose 1`] = `
Array [
<div />,
<div>
Expand Down Expand Up @@ -104,7 +263,11 @@ Array [
<span
class="euiButtonEmpty__text"
>
close
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
</span>
</span>
</button>
Expand All @@ -119,4 +282,93 @@ Array [
]
`;

exports[`EuiCollapsibleNav props onClose 1`] = `null`;
exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
Array [
<button
aria-controls="id"
aria-expanded="true"
aria-pressed="true"
class="euiCollapsibleNav__toggle"
/>,
<div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="-1"
/>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="-1"
/>
<div
data-focus-lock-disabled="disabled"
>
<nav
class="euiCollapsibleNav euiCollapsibleNav--isDocked"
id="id"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="cross"
/>
<span
class="euiButtonEmpty__text"
>
<span
class="euiCollapsibleNav__closeButtonLabel"
>
close
</span>
</span>
</span>
</button>
</nav>
</div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="-1"
/>
</div>,
]
`;

exports[`EuiCollapsibleNav props showCloseButton can be false 1`] = `
Array [
<div />,
<div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="1"
/>
<div
data-focus-lock-disabled="false"
>
<nav
class="euiCollapsibleNav"
id="id"
/>
</div>
<div
data-focus-guard="true"
style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
tabindex="0"
/>
</div>,
]
`;
Loading