Merge branch 'master' into form-spacing

carbon-design-system · Nov 6, 2019 · c97cce7 · c97cce7
2 parents 302756a + 2152c39
commit c97cce7
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 8 deletions.
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -166,7 +166,7 @@
     word-break: break-word;
   }
 
-  .#{$prefix}--inline-notification__action-button {
+  .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
     height: rem(32px);
     margin: $carbon--spacing-03 0;
 
@@ -177,6 +177,12 @@
       color: $inverse-link;
     }
 
+    &:focus {
+      border-color: transparent;
+      outline: 2px solid $inverse-focus-ui;
+      outline-offset: -2px;
+    }
+
     &:hover {
       background-color: $inverse-hover-ui;
     }
@@ -199,6 +205,11 @@
     transition: outline $duration--fast-02 motion(standard, productive),
       background-color $duration--fast-02 motion(standard, productive);
 
+    &:focus {
+      outline: 2px solid $inverse-focus-ui;
+      outline-offset: -2px;
+    }
+
     .#{$prefix}--inline-notification__close-icon {
       fill: $inverse-01;
     }

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -111,6 +111,10 @@
 
   .#{$prefix}--toast-notification__close-button {
     @include focus-outline('reset');
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     background-color: transparent;
     border: none;
     cursor: pointer;
@@ -123,7 +127,8 @@
     transition: outline $transition--base, background-color $transition--base;
 
     &:focus {
-      @include focus-outline('outline');
+      outline: 2px solid $inverse-focus-ui;
+      outline-offset: -2px;
     }
 
     .#{$prefix}--toast-notification__close-icon {
@@ -140,7 +145,7 @@
   .#{$prefix}--toast-notification__title {
     @include type-style('productive-heading-01');
     font-weight: 600;
-    margin-top: $carbon--spacing-04;
+    margin-top: $carbon--spacing-05;
     word-break: break-word;
   }
 

diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
@@ -77,6 +77,7 @@
   .#{$prefix}--number__input-wrapper {
     display: flex;
     align-items: center;
+    position: relative;
 
     ~ .#{$prefix}--form-requirement {
       color: $support-01;
@@ -98,6 +99,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    // vertically center controls within parent container on IE11
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   .#{$prefix}--number__control-btn {

diff --git a/packages/react/src/components/ComposedModal/ComposedModal-test.js b/packages/react/src/components/ComposedModal/ComposedModal-test.js
@@ -168,10 +168,14 @@ describe('<ComposedModal />', () => {
   });
 
   it('should change class of <body> upon open state', () => {
-    mount(<ComposedModal open />);
+    const wrapper = mount(<ComposedModal open />);
     expect(
       document.body.classList.contains('bx--body--with-modal-open')
     ).toEqual(true);
+    wrapper.unmount();
+    expect(
+      document.body.classList.contains('bx--body--with-modal-open')
+    ).toEqual(false);
     mount(<ComposedModal open={false} />);
     expect(
       document.body.classList.contains('bx--body--with-modal-open')

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -122,16 +122,16 @@ export default class ComposedModal extends Component {
     }
   };
 
-  componentDidUpdate(prevProps) {
-    if (!prevProps.open && this.props.open) {
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.open && this.state.open) {
       this.beingOpen = true;
-    } else if (prevProps.open && !this.props.open) {
+    } else if (prevState.open && !this.state.open) {
       this.beingOpen = false;
     }
     toggleClass(
       document.body,
       `${prefix}--body--with-modal-open`,
-      this.props.open
+      this.state.open
     );
   }
 
@@ -148,6 +148,10 @@ export default class ComposedModal extends Component {
     }
   };
 
+  componentWillUnmount() {
+    toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
+  }
+
   componentDidMount() {
     toggleClass(
       document.body,

diff --git a/packages/react/src/components/NumberInput/NumberInput-story.js b/packages/react/src/components/NumberInput/NumberInput-story.js
@@ -50,6 +50,8 @@ const props = () => ({
   ),
 });
 
+NumberInput.displayName = 'NumberInput';
+
 storiesOf('NumberInput', module)
   .addDecorator(withKnobs)
   .add(

diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
@@ -119,6 +119,8 @@ const Select = React.forwardRef(function Select(
   );
 });
 
+Select.displayName = 'Select';
+
 Select.propTypes = {
   /**
    * Provide the contents of your Select