feat(select): add height variations to select (#5311)

Co-authored-by: Anna Gonzales <[email protected]> Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Feb 20, 2020 · 6d23a70 · 6d23a70
1 parent 3f30243
commit 6d23a70
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
@@ -88,6 +88,16 @@
     }
   }
 
+  .#{$prefix}--select-input--sm {
+    height: rem(32px);
+    max-height: rem(32px);
+  }
+
+  .#{$prefix}--select-input--xl {
+    height: rem(48px);
+    max-height: rem(48px);
+  }
+
   .#{$prefix}--select--disabled .#{$prefix}--label,
   .#{$prefix}--select--disabled .#{$prefix}--form__helper-text {
     color: $disabled-02;

diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js
@@ -9,12 +9,18 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
 import Select from '../Select';
 import SelectItem from '../SelectItem';
 import SelectItemGroup from '../SelectItemGroup';
 import SelectSkeleton from '../Select/Select.Skeleton';
 
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Regular size (lg)': '',
+  'Small size (sm)': 'sm',
+};
+
 const props = {
   select: () => ({
     className: 'some-class',
@@ -23,6 +29,7 @@ const props = {
       'Put control in-line with label (inline in <Select>)',
       false
     ),
+    size: select('Field size (size)', sizes, '') || undefined,
     disabled: boolean('Disabled (disabled in <Select>)', false),
     hideLabel: boolean('No label (hideLabel in <Select>)', false),
     invalid: boolean('Show form validation UI (invalid in <Select>)', false),

diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
@@ -31,6 +31,7 @@ const Select = React.forwardRef(function Select(
     invalidText,
     helperText,
     light,
+    size,
     ...other
   },
   ref
@@ -47,6 +48,10 @@ const Select = React.forwardRef(function Select(
     [`${prefix}--visually-hidden`]: hideLabel,
     [`${prefix}--label--disabled`]: disabled,
   });
+  const inputClasses = classNames({
+    [`${prefix}--select-input`]: true,
+    [`${prefix}--select-input--${size}`]: size,
+  });
   const errorId = `${id}-error-msg`;
   const error = invalid ? (
     <div className={`${prefix}--form-requirement`} id={errorId}>
@@ -70,7 +75,7 @@ const Select = React.forwardRef(function Select(
           {...other}
           {...ariaProps}
           id={id}
-          className={`${prefix}--select-input`}
+          className={inputClasses}
           disabled={disabled || undefined}
           aria-invalid={invalid || undefined}
           ref={ref}>
@@ -202,6 +207,11 @@ Select.propTypes = {
    * select since Pagination renders one for us.
    */
   noLabel: PropTypes.bool,
+
+  /**
+   * Specify the size of the Text Input. Currently supports either `sm` or `xl` as an option.
+   */
+  size: PropTypes.oneOf(['sm', 'xl']),
 };
 
 Select.defaultProps = {
@@ -212,6 +222,7 @@ Select.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
+  size: '',
 };
 
 export default Select;