From a22e96ed5a8f4880376ba70f0ad2b66adde23ed8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 20 Aug 2019 15:59:11 -0400 Subject: [PATCH 01/15] Added a locked state of EuiNavDrawer --- src-docs/src/views/nav_drawer/nav_drawer.js | 2 +- src/components/nav_drawer/_nav_drawer.scss | 23 +++++++++++ src/components/nav_drawer/nav_drawer.js | 45 ++++++++++++++++++--- 3 files changed, 64 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 04df1470330..5561be16627 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -36,7 +36,7 @@ export default class extends Component { super(props); this.state = { - isFullScreen: false, + isFullScreen: true, }; const faveExtraAction = { diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index f3b5d301adf..d5562c805db 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -118,3 +118,26 @@ margin-left: 0; } } + +@include euiBreakpoint('xl') { + .euiNavDrawer-isLocked { + + .euiNavDrawerPage .euiNavDrawerPage__pageBody { + // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS) + margin-left: $euiNavDrawerWidthExpanded !important; // sass-lint:disable-line no-important + transition: margin $euiAnimSpeedFast $euiAnimSlightResistance; + } + + &.euiNavDrawer-flyoutIsExpanded { + // Instead of one collapsed and one expanded, they're now both expanded + // Double the width of expanded sidebars + width: $euiNavDrawerWidthExpanded * 2 !important; // sass-lint:disable-line no-important + } + } + + // In case they unlock while the flyout is expanded, + // the nav drawer doesn't actually get collapsed until an interaction + .euiNavDrawer-isExpanded.euiNavDrawer-flyoutIsExpanded { + width: $euiNavDrawerWidthExpanded * 2 !important; // sass-lint:disable-line no-important + } + +} diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 8b6468b492b..88192d92d30 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -18,11 +18,20 @@ export class EuiNavDrawer extends Component { outsideClickDisabled: true, isManagingFocus: false, toolTipsEnabled: true, + isLocked: false, }; } timeoutID; + sideNavLockClicked = () => { + this.setState({ + isLocked: !this.state.isLocked, + isCollapsed: false, + outsideClickDisabled: true, + }); + }; + toggleOpen = () => { this.setState({ isCollapsed: !this.state.isCollapsed, @@ -54,6 +63,7 @@ export class EuiNavDrawer extends Component { isCollapsed: true, outsideClickDisabled: this.state.flyoutIsCollapsed ? true : false, toolTipsEnabled: true, + isLocked: false, }); // Scrolls the menu and flyout back to top when the nav drawer collapses @@ -103,7 +113,7 @@ export class EuiNavDrawer extends Component { flyoutIsCollapsed: false, navFlyoutTitle: title, navFlyoutContent: content, - isCollapsed: true, + isCollapsed: this.state.isLocked ? false : true, toolTipsEnabled: false, outsideClickDisabled: false, }); @@ -115,12 +125,12 @@ export class EuiNavDrawer extends Component { flyoutIsCollapsed: true, navFlyoutTitle: null, navFlyoutContent: null, - toolTipsEnabled: true, + toolTipsEnabled: this.state.isLocked ? false : true, }); }; closeBoth = () => { - this.collapseDrawer(); + if (!this.state.isLocked) this.collapseDrawer(); this.collapseFlyout(); }; @@ -158,6 +168,7 @@ export class EuiNavDrawer extends Component { { 'euiNavDrawer-isCollapsed': this.state.isCollapsed, 'euiNavDrawer-isExpanded': !this.state.isCollapsed, + 'euiNavDrawer-isLocked': this.state.isLocked, 'euiNavDrawer-flyoutIsCollapsed': this.state.flyoutIsCollapsed, 'euiNavDrawer-flyoutIsExpanded': !this.state.flyoutIsCollapsed, }, @@ -172,14 +183,38 @@ export class EuiNavDrawer extends Component { tokens={[ 'euiNavDrawer.sideNavCollapse', 'euiNavDrawer.sideNavExpand', + 'euiNavDrawer.sideNavLockExpanded', + 'euiNavDrawer.sideNavLockCollapsed', ]} - defaults={['Collapse', 'Expand']}> - {([sideNavCollapse, sideNavExpand]) => ( + defaults={[ + 'Collapse', + 'Expand', + 'Lock expanded', + 'Unlock expanded', + ]}> + {([ + sideNavCollapse, + sideNavExpand, + sideNavLockExpanded, + sideNavLockCollapsed, + ]) => ( { From 8c0b566173676b6594651baa2c57a2f626337769 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 21 Aug 2019 17:49:39 -0400 Subject: [PATCH 02/15] Auto-collapses at smaller window sizes --- src/components/nav_drawer/_nav_drawer.scss | 1 - src/components/nav_drawer/nav_drawer.js | 25 ++++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index d5562c805db..f3101f055a1 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -139,5 +139,4 @@ .euiNavDrawer-isExpanded.euiNavDrawer-flyoutIsExpanded { width: $euiNavDrawerWidthExpanded * 2 !important; // sass-lint:disable-line no-important } - } diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 88192d92d30..03e457e17ef 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -7,6 +7,7 @@ import { EuiNavDrawerGroup } from './nav_drawer_group'; import { EuiOutsideClickDetector } from '../outside_click_detector'; import { EuiI18n } from '../i18n'; import { EuiFlexItem } from '../flex'; +import { throttle } from '../color_picker/utils'; export class EuiNavDrawer extends Component { constructor(props) { @@ -22,9 +23,33 @@ export class EuiNavDrawer extends Component { }; } + componentDidMount() { + if (this.props.isLocked) { + window.addEventListener('resize', this.functionToCallOnWindowResize); + } + } + + componentWillUnmount() { + window.removeEventListener('resize', this.functionToCallOnWindowResize); + } + + functionToCallOnWindowResize = throttle(() => { + if (window.innerWidth < 1200) { + this.collapseDrawer(); + this.collapseFlyout(); + } + // reacts every 50ms to resize changes and always gets the final update + }, 50); + timeoutID; sideNavLockClicked = () => { + if (this.state.isLocked) { + window.removeEventListener('resize', this.functionToCallOnWindowResize); + } else { + window.addEventListener('resize', this.functionToCallOnWindowResize); + } + this.setState({ isLocked: !this.state.isLocked, isCollapsed: false, From d1a3855fb1a15d83c62553d6539eb3d021c3cd70 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 21 Aug 2019 19:39:47 -0400 Subject: [PATCH 03/15] Collapse all when collapse button is clicked and hide extra action button on smaller screens --- src/components/nav_drawer/_nav_drawer.scss | 6 ++++++ src/components/nav_drawer/nav_drawer.js | 20 ++++++++++++-------- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index f3101f055a1..64511bd4669 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -119,6 +119,12 @@ } } +@include euiBreakpoint('xs', 's', 'm', 'l') { + .euiNavDrawer__expandButtonLockAction { + display: none; + } +} + @include euiBreakpoint('xl') { .euiNavDrawer-isLocked { + .euiNavDrawerPage .euiNavDrawerPage__pageBody { diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 03e457e17ef..a80705d2dad 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -70,6 +70,16 @@ export class EuiNavDrawer extends Component { }, 150); }; + collapseButtonClick = () => { + if (this.state.isCollapsed) { + this.expandDrawer(); + } else { + this.collapseDrawer(); + } + + this.collapseFlyout(); + }; + expandDrawer = () => { this.setState({ isCollapsed: false, @@ -229,6 +239,7 @@ export class EuiNavDrawer extends Component { size="s" showToolTip={this.state.isCollapsed} extraAction={{ + className: 'euiNavDrawer__expandButtonLockAction', color: 'text', onClick: this.sideNavLockClicked, iconType: this.state.isLocked ? 'lockOpen' : 'lock', @@ -240,14 +251,7 @@ export class EuiNavDrawer extends Component { ? sideNavLockCollapsed : sideNavLockExpanded, }} - onClick={ - this.state.isCollapsed - ? () => { - this.expandDrawer(); - this.collapseFlyout(); - } - : () => this.collapseDrawer() - } + onClick={this.collapseButtonClick} data-test-subj={ this.state.isCollapsed ? 'navDrawerExpandButton-isCollapsed' From c129119e40c9310f4d9b3652bffbc627ddf0d9ef Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 21 Aug 2019 19:45:45 -0400 Subject: [PATCH 04/15] Fix passing classname to extra action --- src/components/list_group/list_group_item.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx index 9600cfeea64..6f17d0cb6a0 100644 --- a/src/components/list_group/list_group_item.tsx +++ b/src/components/list_group/list_group_item.tsx @@ -156,11 +156,15 @@ export const EuiListGroupItem: FunctionComponent = ({ let extraActionNode; if (extraAction) { - const { iconType, alwaysShow, ...rest } = extraAction; - - const extraActionClasses = classNames('euiListGroupItem__extraAction', { - 'euiListGroupItem__extraAction-alwaysShow': alwaysShow, - }); + const { iconType, alwaysShow, className, ...rest } = extraAction; + + const extraActionClasses = classNames( + 'euiListGroupItem__extraAction', + { + 'euiListGroupItem__extraAction-alwaysShow': alwaysShow, + }, + className + ); extraActionNode = ( Date: Wed, 21 Aug 2019 19:52:53 -0400 Subject: [PATCH 05/15] Allow passing `isLocked` as prop --- src-docs/src/views/nav_drawer/nav_drawer.js | 2 +- src/components/nav_drawer/nav_drawer.js | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 5561be16627..5099f73c88e 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -380,7 +380,7 @@ export default class extends Component { - + diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index a80705d2dad..ea673159c92 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -14,12 +14,12 @@ export class EuiNavDrawer extends Component { super(props); this.state = { - isCollapsed: true, + isLocked: props.isLocked, + isCollapsed: !props.isLocked, flyoutIsCollapsed: true, outsideClickDisabled: true, isManagingFocus: false, toolTipsEnabled: true, - isLocked: false, }; } @@ -337,6 +337,11 @@ EuiNavDrawer.propTypes = { * Display tooltips on side nav items */ showToolTips: PropTypes.bool, + + /** + * Keep drawer open at all times by default + */ + isLocked: PropTypes.bool, }; EuiNavDrawer.defaultProps = { From a4b44d3668764d23e0915e2eb2b8acc0d983d297 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 09:34:27 -0400 Subject: [PATCH 06/15] cleanup --- src-docs/src/views/nav_drawer/nav_drawer.js | 2 +- src/components/nav_drawer/nav_drawer.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 5099f73c88e..1e1831b2322 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -36,7 +36,7 @@ export default class extends Component { super(props); this.state = { - isFullScreen: true, + isFullScreen: false, }; const faveExtraAction = { diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index ea673159c92..d604ff5bb8a 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -339,7 +339,7 @@ EuiNavDrawer.propTypes = { showToolTips: PropTypes.bool, /** - * Keep drawer open at all times by default + * Keep drawer locked open by default */ isLocked: PropTypes.bool, }; From 80c545733389ba3a404c7d82b65a4f1d1178862a Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 09:45:29 -0400 Subject: [PATCH 07/15] Remove default --- src-docs/src/views/nav_drawer/nav_drawer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 1e1831b2322..04df1470330 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -380,7 +380,7 @@ export default class extends Component { - + From b14bbe905e42f1438b7633c501d87e61c4a98575 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 09:49:03 -0400 Subject: [PATCH 08/15] Better labels --- src/components/nav_drawer/nav_drawer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index d604ff5bb8a..4aa1e96461c 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -224,8 +224,8 @@ export class EuiNavDrawer extends Component { defaults={[ 'Collapse', 'Expand', - 'Lock expanded', - 'Unlock expanded', + 'Lock navigation open', + 'Unlock navigation', ]}> {([ sideNavCollapse, From 797e931701b8ad8510cad0761bec4cc70df47566 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 10:20:07 -0400 Subject: [PATCH 09/15] Fix a11y --- src/components/nav_drawer/nav_drawer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 4aa1e96461c..912b64cad34 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -244,12 +244,12 @@ export class EuiNavDrawer extends Component { onClick: this.sideNavLockClicked, iconType: this.state.isLocked ? 'lockOpen' : 'lock', iconSize: 's', - 'aria-label': this.state.isLocked - ? sideNavLockCollapsed - : sideNavLockExpanded, + 'aria-label': sideNavLockExpanded, title: this.state.isLocked ? sideNavLockCollapsed : sideNavLockExpanded, + 'aria-checked': this.state.isLocked ? true : false, + role: 'switch', }} onClick={this.collapseButtonClick} data-test-subj={ From 6dcd1584605188bbad2337f4a5f094ea1e398212 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 13:17:40 -0400 Subject: [PATCH 10/15] PR fixes Unpack isCollapsed, isLocked Remove resize listener on collapse --- src/components/nav_drawer/nav_drawer.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 912b64cad34..605df8bdb81 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -105,6 +105,9 @@ export class EuiNavDrawer extends Component { setTimeout(() => { document.getElementById('navDrawerMenu').scrollTop = 0; }, 50); + + // In case it was locked before, remove the window resize listener + window.removeEventListener('resize', this.functionToCallOnWindowResize); }; manageFocus = () => { @@ -195,6 +198,8 @@ export class EuiNavDrawer extends Component { className, showExpandButton, showToolTips, + isCollapsed, + isLocked, ...rest } = this.props; From 7d0c5ab1daad7a682a416145372bafb9f9a88585 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 13:31:27 -0400 Subject: [PATCH 11/15] Added is `onIsLockedUpdate` callback --- src/components/nav_drawer/nav_drawer.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 605df8bdb81..139f957c58d 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -50,6 +50,8 @@ export class EuiNavDrawer extends Component { window.addEventListener('resize', this.functionToCallOnWindowResize); } + this.props.onIsLockedUpdate(!this.state.isLocked); + this.setState({ isLocked: !this.state.isLocked, isCollapsed: false, @@ -101,6 +103,8 @@ export class EuiNavDrawer extends Component { isLocked: false, }); + this.props.onIsLockedUpdate(false); + // Scrolls the menu and flyout back to top when the nav drawer collapses setTimeout(() => { document.getElementById('navDrawerMenu').scrollTop = 0; @@ -200,6 +204,7 @@ export class EuiNavDrawer extends Component { showToolTips, isCollapsed, isLocked, + onIsLockedUpdate, ...rest } = this.props; @@ -347,6 +352,11 @@ EuiNavDrawer.propTypes = { * Keep drawer locked open by default */ isLocked: PropTypes.bool, + + /** + * Returns the current state of isLocked + */ + onIsLockedUpdate: PropTypes.func, }; EuiNavDrawer.defaultProps = { From 37ec5c19a581934f5bd786b1c24be4ce3f609283 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 13:36:23 -0400 Subject: [PATCH 12/15] cl --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 356880702c2..1ecbd1dfa43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `13.4.1`. +- Added locking behavior of `EuiNavDrawer` expanded state inluding the following props `isLocked`, `onIsLockedUpdate` ([#2247](https://github.com/elastic/eui/pull/2247)) ## [`13.4.1`](https://github.com/elastic/eui/tree/v13.4.1) From 819e51dab46775c0ff7aef4b478830970b57267c Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 22 Aug 2019 14:10:33 -0400 Subject: [PATCH 13/15] Check if callback extists first --- src/components/nav_drawer/nav_drawer.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 139f957c58d..0cccfe7ab91 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -33,6 +33,12 @@ export class EuiNavDrawer extends Component { window.removeEventListener('resize', this.functionToCallOnWindowResize); } + returnOnIsLockedUpdate = isLockedState => { + if (this.props.onIsLockedUpdate) { + this.props.onIsLockedUpdate(isLockedState); + } + }; + functionToCallOnWindowResize = throttle(() => { if (window.innerWidth < 1200) { this.collapseDrawer(); @@ -50,7 +56,7 @@ export class EuiNavDrawer extends Component { window.addEventListener('resize', this.functionToCallOnWindowResize); } - this.props.onIsLockedUpdate(!this.state.isLocked); + this.returnOnIsLockedUpdate(!this.state.isLocked); this.setState({ isLocked: !this.state.isLocked, @@ -103,7 +109,7 @@ export class EuiNavDrawer extends Component { isLocked: false, }); - this.props.onIsLockedUpdate(false); + this.returnOnIsLockedUpdate(false); // Scrolls the menu and flyout back to top when the nav drawer collapses setTimeout(() => { @@ -246,6 +252,7 @@ export class EuiNavDrawer extends Component { Date: Thu, 22 Aug 2019 14:17:47 -0400 Subject: [PATCH 14/15] =?UTF-8?q?Role=20doesn=E2=80=99t=20work=20on=20the?= =?UTF-8?q?=20expand=20button=20itself?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/nav_drawer/nav_drawer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 0cccfe7ab91..3a7656a2382 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -252,7 +252,6 @@ export class EuiNavDrawer extends Component { Date: Thu, 22 Aug 2019 17:59:04 -0400 Subject: [PATCH 15/15] Reverse icon and fix aria-label/title --- src/components/nav_drawer/nav_drawer.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 3a7656a2382..3380b10ee57 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -234,18 +234,21 @@ export class EuiNavDrawer extends Component { tokens={[ 'euiNavDrawer.sideNavCollapse', 'euiNavDrawer.sideNavExpand', + 'euiNavDrawer.sideNavLockAriaLabel', 'euiNavDrawer.sideNavLockExpanded', 'euiNavDrawer.sideNavLockCollapsed', ]} defaults={[ 'Collapse', 'Expand', - 'Lock navigation open', - 'Unlock navigation', + 'Dock navigation', + 'Navigation is docked', + 'Navigation is undocked', ]}> {([ sideNavCollapse, sideNavExpand, + sideNavLockAriaLabel, sideNavLockExpanded, sideNavLockCollapsed, ]) => ( @@ -258,9 +261,9 @@ export class EuiNavDrawer extends Component { className: 'euiNavDrawer__expandButtonLockAction', color: 'text', onClick: this.sideNavLockClicked, - iconType: this.state.isLocked ? 'lockOpen' : 'lock', + iconType: this.state.isLocked ? 'lock' : 'lockOpen', iconSize: 's', - 'aria-label': sideNavLockExpanded, + 'aria-label': sideNavLockAriaLabel, title: this.state.isLocked ? sideNavLockCollapsed : sideNavLockExpanded,