Merge branch 'main' into 10670-sizes

carbon-design-system · Feb 18, 2022 · 5f0264c · 5f0264c
2 parents 8b9560f + 785c417
commit 5f0264c
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 42 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/Search/next/Search.js b/packages/react/src/components/Search/next/Search.js
@@ -32,8 +32,7 @@ function Search({
   placeholder = '',
   renderIcon,
   role = 'searchbox',
-  size = !small ? 'lg' : 'sm',
-  small,
+  size = 'md',
   type = 'text',
   value,
   ...rest
@@ -213,22 +212,9 @@ Search.propTypes = {
   role: PropTypes.string,
 
   /**
-   * Specify the search size
+   * Specify the size of the Search
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
-
-  /**
-   * Specify whether the Search should be a small variant
-   */
-
-  /**
-   * Specify whether the load was successful
-   */
-  small: deprecate(
-    PropTypes.bool,
-    `\nThe prop \`small\` for Search has been deprecated in favor of \`size\`. Please use \`size="sm"\` instead.`
-  ),
-
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /**
    * Optional prop to specify the type of the `<input>`
    */

diff --git a/packages/react/src/components/Search/next/Search.stories.js b/packages/react/src/components/Search/next/Search.stories.js
@@ -5,19 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Search, ExpandableSearch } from 'carbon-components-react';
+import { ExpandableSearch } from 'carbon-components-react';
+import Search from '../';
 import React from 'react';
 import { Layer } from '../../Layer';
 
 export default {
   title: 'Components/Search',
   component: Search,
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+  },
   subcomponents: {
     ExpandableSearch,
   },
 };
 
-export const Default = () => (
+export const Default = (args) => (
   <Search
     size="lg"
     defaultValue="A default value"
@@ -26,10 +33,11 @@ export const Default = () => (
     id="search-1"
     onChange={() => {}}
     onKeyDown={() => {}}
+    {...args}
   />
 );
 
-export const Disabled = () => (
+export const Disabled = (args) => (
   <Search
     disabled
     size="lg"
@@ -39,21 +47,23 @@ export const Disabled = () => (
     id="search-1"
     onChange={() => {}}
     onKeyDown={() => {}}
+    {...args}
   />
 );
 
-export const Expandable = () => (
+export const Expandable = (args) => (
   <ExpandableSearch
     size="lg"
     labelText="Search"
     closeButtonLabelText="Clear search input"
     id="search-expandable-1"
     onChange={() => {}}
     onKeyDown={() => {}}
+    {...args}
   />
 );
 
-export const WithLayer = () => {
+export const WithLayer = (args) => {
   return (
     <>
       <Search
@@ -64,6 +74,7 @@ export const WithLayer = () => {
         id="search-1"
         onChange={() => {}}
         onKeyDown={() => {}}
+        {...args}
       />
       <Layer>
         <Search
@@ -74,6 +85,7 @@ export const WithLayer = () => {
           id="search-1"
           onChange={() => {}}
           onKeyDown={() => {}}
+          {...args}
         />
         <Layer>
           <Search
@@ -84,14 +96,15 @@ export const WithLayer = () => {
             id="search-1"
             onChange={() => {}}
             onKeyDown={() => {}}
+            {...args}
           />
         </Layer>
       </Layer>
     </>
   );
 };
 
-export const ExpandableWithLayer = () => {
+export const ExpandableWithLayer = (args) => {
   return (
     <>
       <ExpandableSearch
@@ -101,6 +114,7 @@ export const ExpandableWithLayer = () => {
         id="search-expandable-1"
         onChange={() => {}}
         onKeyDown={() => {}}
+        {...args}
       />
       <Layer>
         <ExpandableSearch
@@ -110,6 +124,7 @@ export const ExpandableWithLayer = () => {
           id="search-expandable-1"
           onChange={() => {}}
           onKeyDown={() => {}}
+          {...args}
         />
         <Layer>
           <ExpandableSearch
@@ -119,6 +134,7 @@ export const ExpandableWithLayer = () => {
             id="search-expandable-1"
             onChange={() => {}}
             onKeyDown={() => {}}
+            {...args}
           />
         </Layer>
       </Layer>

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/search/_search.scss b/packages/styles/scss/components/search/_search.scss
@@ -99,24 +99,21 @@
     left: rem(8px);
   }
 
-  // Large styles
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-input,
-  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  // Medium styles
+  .#{$prefix}--search--md .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(40px);
     // 12px padding on either side of icon + 16px icon (40px)
     padding: 0 $spacing-08;
   }
-
-  // V11: change lg to md
-  .#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
+  .#{$prefix}--search--md .#{$prefix}--search-magnifier-icon {
     left: rem(12px);
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl .#{$prefix}--search-input,
-  .#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
+  // Large styles
+  .#{$prefix}--search--lg .#{$prefix}--search-input,
+  .#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
     .#{$prefix}--search-input {
     height: rem(48px);
     // 16px padding on either side of icon + 16px icon (48px)
@@ -245,6 +242,7 @@
     @include focus-outline('outline');
   }
 
+  // Small
   .#{$prefix}--search--sm {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
@@ -259,8 +257,8 @@
     }
   }
 
-  // V11: change lg to md
-  .#{$prefix}--search--lg {
+  // Medium
+  .#{$prefix}--search--md {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -274,8 +272,8 @@
     }
   }
 
-  // V11: change xl to lg
-  .#{$prefix}--search--xl {
+  // Large
+  .#{$prefix}--search--lg {
     .#{$prefix}--search-close,
     ~ .#{$prefix}--search-button,
     &.#{$prefix}--search--expandable,
@@ -294,9 +292,8 @@
     visibility: hidden;
   }
 
-  // V11: change xl to lg, lg to md
-  .#{$prefix}--search--xl.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--lg.#{$prefix}--skeleton .#{$prefix}--search-input,
+  .#{$prefix}--search--md.#{$prefix}--skeleton .#{$prefix}--search-input,
   .#{$prefix}--search--sm.#{$prefix}--skeleton .#{$prefix}--search-input {
     @include skeleton;
 

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;