diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index 487ce669b2d7..1aa2ab527c80 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -207,7 +207,10 @@ $list-box-menu-width: rem(300px); border-width: 0; } - .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover, + .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover { + background-color: transparent; + } + .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded:hover { background-color: $field-02; } @@ -263,39 +266,39 @@ $list-box-menu-width: rem(300px); } // populated input field - .#{$prefix}--list-box__field .#{$prefix}--text-input[value] { + .#{$prefix}--list-box__field .#{$prefix}--text-input { padding-right: carbon--mini-units(9); } // invalid && populated input field .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field - .#{$prefix}--text-input[value] { + .#{$prefix}--text-input { padding-right: rem(98px); // to account for clear input button outline } .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field - .#{$prefix}--text-input[value] + .#{$prefix}--text-input + .#{$prefix}--list-box__invalid-icon { right: rem(66px); // to account for clear input button outline } // empty input field - .#{$prefix}--list-box__field .#{$prefix}--text-input[value=''] { + .#{$prefix}--list-box__field .#{$prefix}--text-input--empty { padding-right: $carbon--spacing-09; } // invalid && empty input field .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field - .#{$prefix}--text-input[value=''] { + .#{$prefix}--text-input--empty { padding-right: carbon--mini-units(9); } .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field - .#{$prefix}--text-input[value=''] + .#{$prefix}--text-input--empty + .#{$prefix}--list-box__invalid-icon { right: rem(40px); // to account for clear input button outline } diff --git a/packages/components/src/globals/scss/_css--reset.scss b/packages/components/src/globals/scss/_css--reset.scss index 65933cd510d8..d2e91732e7d3 100644 --- a/packages/components/src/globals/scss/_css--reset.scss +++ b/packages/components/src/globals/scss/_css--reset.scss @@ -125,12 +125,7 @@ // Chrome 62 fix button, select, - input[type='button'], - input[type='submit'], - input[type='reset'], - input[type='file'], - input[type='text'], - input[type='password'], + input, textarea { border-radius: 0; font-family: inherit; diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js index 6e7aba9d5617..1f4ce7603b60 100644 --- a/packages/react/src/components/ComboBox/ComboBox.js +++ b/packages/react/src/components/ComboBox/ComboBox.js @@ -275,6 +275,10 @@ export default class ComboBox extends React.Component { ) : null; const wrapperClasses = cx(`${prefix}--list-box__wrapper`); const comboBoxA11yId = `combobox-a11y-${this.comboBoxInstanceId}`; + const inputClasses = cx(`${prefix}--text-input`, { + [`${prefix}--text-input--empty`]: !this.state.inputValue, + }); + // needs to be Capitalized for react to render it correctly const ItemToElement = itemToElement; const input = ( @@ -316,7 +320,7 @@ export default class ComboBox extends React.Component { onClick: this.onToggleClick(isOpen), })}>