fix(combo-box): outline/hover issues (#10940)

carbon-design-system · Sep 15, 2023 · 51dfa1e · 51dfa1e
1 parent 191457f
commit 51dfa1e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts b/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
@@ -74,7 +74,7 @@ export const Default = () => {
 export const WithLayer = () => {
   return html`
     <sb-template-layers>
-      <div style="width:400px">
+      <div style="width:300px">
         <cds-combo-box
           title-text="ComboBox label"
           helper-text="Combobox helper text"
@@ -178,7 +178,7 @@ export default {
   },
   decorators: [
     (story, { name }) => {
-      const width = !name.toLowerCase().includes('layer') ? `width:400px` : ``;
+      const width = !name.toLowerCase().includes('layer') ? `width:300px` : ``;
       return html` <div style="${width}">${story()}</div> `;
     },
   ],

diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.scss b/packages/carbon-web-components/src/components/combo-box/combo-box.scss
@@ -11,13 +11,15 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
-@use '@carbon/styles/scss/components/combo-box/combo-box';
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/components/combo-box' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/text-input/text-input';
 @use '../dropdown/dropdown.scss';
 
 :host(#{$prefix}-combo-box) {
   @extend :host(#{$prefix}-dropdown);
+  @include emit-layout-tokens();
 
   outline: none;
 
@@ -27,6 +29,10 @@ $css--plex: true !default;
     top: -100%;
   }
 
+  .#{$prefix}--list-box__field {
+    padding: 0;
+  }
+
   .#{$prefix}--list-box__menu {
     outline: none;
     top: 100%;
@@ -47,6 +53,12 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-combo-box[invalid]) {
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
+}
+
 :host(#{$prefix}-combo-box[read-only]) {
   .#{$prefix}--list-box__selection svg {
     fill: $icon-disabled;
@@ -61,6 +73,10 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu-item__option {
     height: auto;
   }
+
+  &:hover {
+    background-color: $layer-hover;
+  }
 }
 
 :host(#{$prefix}-combo-box-item[disabled]) {