Merge branch 'master' into icon-button-fix

carbon-design-system · Jan 29, 2020 · 6e55e58 · 6e55e58
2 parents ad26905 + 0853d38
commit 6e55e58
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -3386,7 +3386,6 @@ $carbon--spacing-04: 0.75rem;
   - [file-uploader [mixin]](#file-uploader-mixin)
   - [lists [mixin]](#lists-mixin)
   - [inline-notifications [mixin]](#inline-notifications-mixin)
-  - [toast-notifications [mixin]](#toast-notifications-mixin)
   - [text-area [mixin]](#text-area-mixin)
   - [tooltip--definition--legacy [mixin]](#tooltip--definition--legacy-mixin)
 
@@ -18964,10 +18963,6 @@ Inline notification styles
     }
   }
 
-  .#{$prefix}--inline-notification--info .bx--inline-notification__icon {
-    display: none;
-  }
-
   .#{$prefix}--inline-notification--warning {
     @include notification--experimental($inverse-support-03, $inverse-02);
   }
@@ -19199,7 +19194,7 @@ Toast notification styles
     display: flex;
     width: rem(288px);
     height: auto;
-    padding-left: $carbon--spacing-05;
+    padding-left: rem(14px);
     color: $inverse-01;
     margin-top: $carbon--spacing-03;
     margin-bottom: $carbon--spacing-03;
@@ -19295,8 +19290,8 @@ Toast notification styles
 
   .#{$prefix}--toast-notification__icon {
     flex-shrink: 0;
-    margin-right: $carbon--spacing-05;
-    margin-top: $carbon--spacing-04;
+    margin-right: rem(14px);
+    margin-top: rem(14px);
   }
 
   .#{$prefix}--toast-notification__details {
@@ -19380,9 +19375,9 @@ Toast notification styles
   - [carbon--breakpoint [mixin]](#carbon--breakpoint-mixin)
   - [notification--experimental [mixin]](#notification--experimental-mixin)
   - [prefix [variable]](#prefix-variable)
-  - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [inverse-01 [variable]](#inverse-01-variable)
   - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable)
+  - [carbon--spacing-05 [variable]](#carbon--spacing-05-variable)
   - [inverse-link [variable]](#inverse-link-variable)
   - [inverse-support-01 [variable]](#inverse-support-01-variable)
   - [inverse-02 [variable]](#inverse-02-variable)
@@ -19393,7 +19388,6 @@ Toast notification styles
   - [support-04 [variable]](#support-04-variable)
   - [inverse-support-03 [variable]](#inverse-support-03-variable)
   - [support-03 [variable]](#support-03-variable)
-  - [carbon--spacing-04 [variable]](#carbon--spacing-04-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [carbon--spacing-06 [variable]](#carbon--spacing-06-variable)
 

diff --git a/packages/react/src/components/UIShell/SideNavMenu.js b/packages/react/src/components/UIShell/SideNavMenu.js
@@ -11,6 +11,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import SideNavIcon from './SideNavIcon';
+import { keys, match } from '../../internal/keyboard';
 
 const { prefix } = settings;
 
@@ -100,6 +101,12 @@ export class SideNavMenu extends React.Component {
     this.setState(state => ({ isExpanded: !state.isExpanded }));
   };
 
+  handleKeyDown = event => {
+    if (match(event, keys.Escape)) {
+      this.setState(() => ({ isExpanded: false }));
+    }
+  };
+
   render() {
     const {
       buttonRef,
@@ -138,7 +145,8 @@ export class SideNavMenu extends React.Component {
       [customClassName]: !!customClassName,
     });
     return (
-      <li className={className}>
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      <li className={className} onKeyDown={this.handleKeyDown}>
         <button
           aria-haspopup="true"
           aria-expanded={isExpanded}

diff --git a/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js b/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
@@ -43,6 +43,17 @@ describe('SideNavMenu', () => {
     expect(wrapper.state('isExpanded')).toBe(true);
   });
 
+  it('should collapse the menu when the Esc key is pressed', () => {
+    wrapper = mount(<SideNavMenu {...mockProps} defaultExpanded={true} />);
+    expect(wrapper.state('isExpanded')).toBe(true);
+    wrapper.simulate('keydown', {
+      key: 'Escape',
+      keyCode: 27,
+      which: 27,
+    });
+    expect(wrapper.state('isExpanded')).toBe(false);
+  });
+
   it('should reset expanded state if the isSideNavExpanded prop is false', () => {
     wrapper = mount(<SideNavMenu {...mockProps} />);
     expect(wrapper.state('isExpanded')).toBe(false);

diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavMenu-test.js.snap
@@ -62,6 +62,7 @@ exports[`SideNavMenu should render 1`] = `
 >
   <li
     className="bx--side-nav__item bx--side-nav__item--icon custom-classname"
+    onKeyDown={[Function]}
   >
     <button
       aria-expanded={false}