diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index b6cad3b1f575..5a61d9038388 100644 --- 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 index baa510c927c4..6a30283b2575 100644 --- 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 index ffa81bfe0c23..7d86e3b49795 100644 --- 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 index 5a2125c34a15..c9bd5fc818ca 100644 --- 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 index cf331a783146..69d880980175 100644 --- 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 index 0c13441daed0..b42bfa6c81be 100644 --- 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);