Merge branch 'master' into bigger-caret

carbon-design-system · Feb 25, 2020 · 8b7db5a · 8b7db5a
2 parents 0a9f60b + c4c0da0
commit 8b7db5a
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 13 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -14604,10 +14604,12 @@ Data table action styles
 
   .#{$prefix}--action-list .#{$prefix}--btn {
     color: $text-04;
+    padding: $button-padding-ghost;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon {
     fill: $icon-03;
+    position: static;
     margin-left: $spacing-03;
   }
 
@@ -18000,7 +18002,7 @@ List box styles
   .#{$prefix}--list-box__selection {
     position: absolute;
     right: rem(33px); // to preserve .5rem space between icons according to spec
-    // top/transform used to center invalid icon in IE11
+    // top/transform used to center the combobox clear selection icon in IE11
     top: 50%;
     transform: translateY(-50%);
     display: flex;
@@ -18017,6 +18019,12 @@ List box styles
     }
   }
 
+  // reset multiselect selection counter positioning
+  .#{$prefix}--list-box__selection--multi {
+    top: auto;
+    transform: none;
+  }
+
   .#{$prefix}--list-box__selection > svg {
     fill: $icon-02;
   }

diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -390,10 +390,12 @@
 
   .#{$prefix}--action-list .#{$prefix}--btn {
     color: $text-04;
+    padding: $button-padding-ghost;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon {
     fill: $icon-03;
+    position: static;
     margin-left: $spacing-03;
   }
 

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -343,7 +343,7 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__selection {
     position: absolute;
     right: rem(33px); // to preserve .5rem space between icons according to spec
-    // top/transform used to center invalid icon in IE11
+    // top/transform used to center the combobox clear selection icon in IE11
     top: 50%;
     transform: translateY(-50%);
     display: flex;
@@ -360,6 +360,12 @@ $list-box-menu-width: rem(300px);
     }
   }
 
+  // reset multiselect selection counter positioning
+  .#{$prefix}--list-box__selection--multi {
+    top: auto;
+    transform: none;
+  }
+
   .#{$prefix}--list-box__selection > svg {
     fill: $icon-02;
   }

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -187,6 +187,10 @@ export default class ComboBox extends React.Component {
     light: false,
   };
 
+  static getDerivedStateFromProps(nextProps, state) {
+    return { inputValue: getInputValue(nextProps, state) };
+  }
+
   constructor(props) {
     super(props);
 
@@ -199,12 +203,6 @@ export default class ComboBox extends React.Component {
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState(state => ({
-      inputValue: getInputValue(nextProps, state),
-    }));
-  }
-
   filterItems = (items, itemToString, inputValue) =>
     items.filter(item =>
       this.props.shouldFilterItem({

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
@@ -9,7 +9,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import uid from '../../tools/uniqueId';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
 
@@ -95,6 +95,8 @@ export class StructuredListHead extends Component {
   }
 }
 
+const getInstanceId = setupGetInstanceId();
+
 export class StructuredListInput extends Component {
   static propTypes = {
     /**
@@ -139,8 +141,9 @@ export class StructuredListInput extends Component {
     title: 'title',
   };
 
-  UNSAFE_componentWillMount() {
-    this.uid = this.props.id || uid();
+  constructor(props) {
+    super(props);
+    this.uid = this.props.id || getInstanceId();
   }
 
   render() {

diff --git a/packages/react/src/tools/withState.js b/packages/react/src/tools/withState.js
@@ -13,8 +13,9 @@ export default class WithState extends React.PureComponent {
     initialState: PropTypes.object,
   };
 
-  UNSAFE_componentWillMount() {
-    this.setState(this.props.initialState);
+  constructor(props) {
+    super(props);
+    this.state = this.props.initialState;
   }
 
   boundSetState = (...args) => this.setState(...args);