From 6d23a704443d82894420c60931045f2578cd28a0 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 20 Feb 2020 17:07:20 +0100
Subject: [PATCH] feat(select): add height variations to select (#5311)

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>
Co-authored-by: Josh Black <josh@josh.black>
---
 .../components/src/components/select/_select.scss   | 10 ++++++++++
 .../react/src/components/Select/Select-story.js     |  9 ++++++++-
 packages/react/src/components/Select/Select.js      | 13 ++++++++++++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss
index 26ee0b3d34f2..e0a467f2797c 100644
--- 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
index a9bc969d34a4..19a8494ddfa4 100644
--- 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
index a99a6874022a..27e19e717ffe 100644
--- 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;