Skip to content

Commit

Permalink
[EuiCollapsibleNav] Fixed docked states on mobile and added more props (
Browse files Browse the repository at this point in the history 
#3330)

* [EuiCollapsibleNav] Enable collapsing on small screens when `isDocked` is true

* [Breaking] Flip the name of `hideButtonIfDocked` to `showButtonIfDocked`

* Allowing customization of docking breakpoint

* Added `showCloseButton` prop and fixed tests

* Move animation to only play when nav becomes visible
  • Loading branch information
@cchaos
cchaos authored Apr 16, 2020
1 parent 6a3045d commit 68080d2
Show file tree
Hide file tree
Showing 6 changed files with 382 additions and 81 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
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
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
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

0 comments on commit 68080d2

Please sign in to comment.