style(Select): sync v10 and v11 styles (#10679)

* style(Select): sync v10 and v11 styles * style(Select): fix background misalignment in v10 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 18, 2022 · e248c06 · e248c06
1 parent cdacbe8
commit e248c06
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
@@ -105,6 +105,20 @@ $css--helpers: true;
     background: $hover-ui;
   }
 
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus,
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    option,
+  .#{$prefix}--pagination
+    .#{$prefix}--select--inline
+    .#{$prefix}--select-input:focus
+    optgroup {
+    background-color: $layer;
+  }
+
   .#{$prefix}--pagination .#{$prefix}--select__arrow {
     top: 50%;
     transform: translate(-0.5rem, -50%);

diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
@@ -52,6 +52,7 @@
     border-radius: 0;
     color: $text-01;
     cursor: pointer;
+    font-family: inherit;
     // reset disabled <select> opacity
     opacity: 1;
 
@@ -212,10 +213,16 @@
     padding-right: $spacing-07;
     padding-left: $carbon--spacing-03;
     border-bottom: none;
-    background-color: $background;
+    background-color: transparent;
     color: $text-01;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
+    background-color: $background;
+  }
+
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
     background-color: $disabled-01;

diff --git a/packages/react/src/components/Select/next/Select.stories.js b/packages/react/src/components/Select/next/Select.stories.js
@@ -56,7 +56,7 @@ export const Inline = () => {
         inline
         id="select-1"
         defaultValue="placeholder-item"
-        labelText=""
+        labelText="Select"
         helperText="Optional helper text">
         <SelectItem
           disabled

diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss
@@ -175,10 +175,15 @@
     opacity: 1;
   }
 
-  .#{$prefix}--select-optgroup,
+  optgroup.#{$prefix}--select-optgroup,
   .#{$prefix}--select-option {
     // For the options to show in IE11
+    background-color: $background-hover;
     color: $text-primary;
+
+    &:disabled {
+      color: $text-disabled;
+    }
   }
 
   .#{$prefix}--select--inline {
@@ -214,6 +219,7 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
   .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
     background-color: $background;