diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a77e853ceb1..1933a3a3ac29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ No public interface changes since `0.0.27`. - New icons for `logoGithub` and `logoSketch` ([#494](https://github.com/elastic/eui/pull/494)) - `EuiCard` now has an `href` and `isClickable` prop for better handling hover animations. ([#494](https://github.com/elastic/eui/pull/494)) - Added `calculateContrast` and `rgbToHex` to services ([#494](https://github.com/elastic/eui/pull/494)) +- Add ability to force `EuiSideNav` items open by setting `item.forceOpen`. ([#497](https://github.com/elastic/eui/pull/515)) **Bug fixes** diff --git a/src-docs/src/views/side_nav/side_nav.js b/src-docs/src/views/side_nav/side_nav.js index 902b21743836..fce8d11ff5ce 100644 --- a/src-docs/src/views/side_nav/side_nav.js +++ b/src-docs/src/views/side_nav/side_nav.js @@ -37,7 +37,7 @@ export default class extends Component { name: 'Saved Objects', id: 3, onClick: () => { window.alert('Saved Objects'); }, - isSelected: true, + isSelected: false, }, { name: 'Reporting', id: 4, 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..bbf1e3599a1d 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: [{ @@ -34,12 +38,12 @@ 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. + 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..528b2d64c9a5 --- /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: 'Lion stuff', + }; + } + + 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`] = ` +