From 7c325c310b385a771da3892ddf5bcfd4b018f3b1 Mon Sep 17 00:00:00 2001 From: arkwright <1445684+arkwright@users.noreply.github.com> Date: Wed, 14 Mar 2018 13:21:20 -0400 Subject: [PATCH] Add ability to force open EuiSideNav items. --- CHANGELOG.md | 2 +- .../src/views/side_nav/side_nav_example.js | 25 +- .../src/views/side_nav/side_nav_force_open.js | 94 +++++++ .../__snapshots__/side_nav.test.js.snap | 164 +++++++++++- src/components/side_nav/_side_nav_item.scss | 14 +- src/components/side_nav/side_nav.js | 36 +++ src/components/side_nav/side_nav.test.js | 248 ++++++++++-------- src/components/side_nav/side_nav_item.js | 3 +- 8 files changed, 453 insertions(+), 133 deletions(-) create mode 100644 src-docs/src/views/side_nav/side_nav_force_open.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 95ad47c7adf9..afb1669e2fd8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `0.0.29`. +- Add ability to force `EuiSideNav` items open by setting `item.forceOpen`. ([#515](https://github.com/elastic/eui/pull/515)) # [`0.0.29`](https://github.com/elastic/eui/tree/v0.0.29) diff --git a/src-docs/src/views/side_nav/side_nav_example.js b/src-docs/src/views/side_nav/side_nav_example.js index 0496fb5949ac..ad269d8e6502 100644 --- a/src-docs/src/views/side_nav/side_nav_example.js +++ b/src-docs/src/views/side_nav/side_nav_example.js @@ -19,6 +19,10 @@ import SideNavComplex from './side_nav_complex'; const sideNavComplexSource = require('!!raw-loader!./side_nav_complex'); const sideNavComplexHtml = renderToHtml(SideNavComplex); +import SideNavForceOpen from './side_nav_force_open'; +const sideNavForceOpenSource = require('!!raw-loader!./side_nav_force_open'); +const sideNavForceOpenHtml = renderToHtml(SideNavForceOpen); + export const SideNavExample = { title: 'Side Nav', sections: [{ @@ -33,13 +37,13 @@ export const SideNavExample = {

SideNav is a responsive menu system that usually sits on the left side of a page layout. - It will exapand to the width of its container. This is the menu that is used on the left side of the - page you are looking at. + It will expand to the width of its container. This is the menu that is used on the left side of the + page you are currently looking at.

Configure the content of a SideNav by passing in an items prop. - Referring to the source code for an example of this data structure’s anatomy. + Refer to the source code for an example of this data structure’s anatomy.

), @@ -60,5 +64,20 @@ export const SideNavExample = {

), demo: , + }, { + title: 'Forced open side nav', + source: [{ + type: GuideSectionTypes.JS, + code: sideNavForceOpenSource, + }, { + type: GuideSectionTypes.HTML, + code: sideNavForceOpenHtml, + }], + text: ( +

+ SideNav items can be forced open by setting items[n].forceOpen = true +

+ ), + demo: , }], }; diff --git a/src-docs/src/views/side_nav/side_nav_force_open.js b/src-docs/src/views/side_nav/side_nav_force_open.js new file mode 100644 index 000000000000..e9b799027dbe --- /dev/null +++ b/src-docs/src/views/side_nav/side_nav_force_open.js @@ -0,0 +1,94 @@ +import React, { + Component, +} from 'react'; + +import { + EuiIcon, + EuiSideNav, +} from '../../../../src/components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isSideNavOpenOnMobile: false, + selectedItemName: null, + }; + } + + toggleOpenOnMobile = () => { + this.setState({ + isSideNavOpenOnMobile: !this.state.isSideNavOpenOnMobile, + }); + }; + + selectItem = name => { + this.setState({ + selectedItemName: name, + }); + }; + + createItem = (name, data = {}) => { + // NOTE: Duplicate `name` values will cause `id` collisions. + return { + ...data, + id: name, + name, + isSelected: this.state.selectedItemName === name, + onClick: () => this.selectItem(name), + }; + }; + + render() { + const sideNav = [ + this.createItem('Kibana', { + icon: , + items: [ + this.createItem('Has normal children', { + items: [ + this.createItem('Without forceOpen', { + items: [ + this.createItem('Child 1'), + this.createItem('Child 2'), + ], + }), + ], + }), + this.createItem('Normally not open', { + items: [ + this.createItem('Has forceOpen:true', { + forceOpen: true, + items: [ + this.createItem('Child 3'), + this.createItem('Child 4'), + ], + }), + ], + }), + this.createItem('With forceOpen:true', { + forceOpen: true, + items: [ + this.createItem('Normal child', { + items: [ + this.createItem('Child 5'), + this.createItem('Child 6'), + ], + }), + ], + }), + ], + }), + ]; + + return ( + + ); + } +} diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.js.snap index 98e0432d8a07..d37414970925 100644 --- a/src/components/side_nav/__snapshots__/side_nav.test.js.snap +++ b/src/components/side_nav/__snapshots__/side_nav.test.js.snap @@ -43,7 +43,7 @@ exports[`EuiSideNav is rendered 1`] = ` `; -exports[`EuiSideNav isOpenOnMobile defaults to false 1`] = ` +exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = ` `; -exports[`EuiSideNav isOpenOnMobile is rendered when specified as true 1`] = ` +exports[`EuiSideNav props isOpenOnMobile is rendered when specified as true 1`] = ` `; -exports[`EuiSideNav items is rendered 1`] = ` +exports[`EuiSideNav props items is rendered 1`] = ` +`; + +exports[`EuiSideNav props items renders items using a specified callback 1`] = ` +