UIDS-48 Make select heights consistent with other input controls

Author: Rachel Roppolo

.eslintrc

@@ -11,7 +11,8 @@
     },
     {
       "files": [
-        "src/**/*.{js,jsx}"
+        "src/**/*.{js,jsx}",
+        "spec/**/*.{js,jsx}"
       ],
       "env": {
         "browser": true

spec/Select/AsyncSelect.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Async from 'react-select/async';
+import { create } from 'react-test-renderer';
+
+import { AsyncSelect, SELECT_SIZES } from 'src/Select';
+
+const renderAsync = (props) => create(
+  <AsyncSelect loadOptions={jest.fn()} {...props} />,
+);
+
+const getContentStyles = ({ styles }) => styles.control({}, { isDisabled: false });
+
+describe('AsyncSelect', () => {
+  test('size prop set to small will set height of select', () => {
+    const { root } = renderAsync({ size: SELECT_SIZES.small });
+    const { props } = root.findByType(Async);
+    const contentStyles = getContentStyles(props);
+
+    expect(contentStyles.height).toBe('2.25rem');
+    expect(contentStyles.minHeight).toBe('2.25rem');
+  });
+
+  test('size prop set to null will not set height of select', () => {
+    const { root } = renderAsync({ size: null });
+    const { props } = root.findByType(Async);
+    const contentStyles = getContentStyles(props);
+
+    expect(contentStyles).not.toContain('height');
+    expect(contentStyles).not.toContain('minHeight');
+  });
+});

spec/Select/SingleSelect.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Select from 'react-select';
+import { create } from 'react-test-renderer';
+
+import { SingleSelect, SELECT_SIZES } from 'src/Select';
+
+const renderSelect = (props) => create(
+  <SingleSelect options={[]} onChange={jest.fn()} {...props} />,
+);
+
+const getContentStyles = ({ styles }) => styles.control({}, { isDisabled: false });
+
+describe('SingleSelect', () => {
+  test('size prop set to small will set height of select', () => {
+    const { root } = renderSelect({ size: SELECT_SIZES.small });
+    const { props } = root.findByType(Select);
+    const contentStyles = getContentStyles(props);
+
+    expect(contentStyles.height).toBe('2.25rem');
+    expect(contentStyles.minHeight).toBe('2.25rem');
+  });
+
+  test('size prop set to null will not set height of select', () => {
+    const { root } = renderSelect({ size: null });
+    const { props } = root.findByType(Select);
+    const contentStyles = getContentStyles(props);
+
+    expect(contentStyles).not.toContain('height');
+    expect(contentStyles).not.toContain('minHeight');
+  });
+});

spec/__snapshots__/Storyshots.test.js.snap

@@ -782,7 +782,7 @@ exports[`Storyshots Design System/Selects/Async Default 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className=" css-ou4jig-control"
+      className=" css-qv254q-control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
@@ -904,7 +904,7 @@ exports[`Storyshots Design System/Selects/Async Labeled 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className=" css-ou4jig-control"
+      className=" css-qv254q-control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
@@ -1019,7 +1019,7 @@ exports[`Storyshots Design System/Selects/Single Default 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className=" css-ou4jig-control"
+      className=" css-qv254q-control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
@@ -1096,7 +1096,7 @@ exports[`Storyshots Design System/Selects/Single Labeled 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className=" css-ou4jig-control"
+      className=" css-qv254q-control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
@@ -1166,7 +1166,7 @@ exports[`Storyshots Design System/Selects/Single Loading 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className=" css-ekx51g-control"
+      className=" css-1wkj6wz-control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >
@@ -1236,7 +1236,7 @@ exports[`Storyshots Design System/Selects/Single Searchable 1`] = `
     onKeyDown={[Function]}
   >
     <div
-      className=" css-ou4jig-control"
+      className=" css-qv254q-control"
       onMouseDown={[Function]}
       onTouchEnd={[Function]}
     >

src/FormGroup/FormGroup.scss

@@ -22,4 +22,8 @@
       @include ui-remove-list-styles();
     }
   }
+
+  .form-control {
+    height: 2.25rem;
+  }
 }

src/Select/AsyncSelect.jsx

@@ -4,7 +4,7 @@ import Async from 'react-select/async';
 
 import zStack from 'src/Styles/zStack';
 
-import { defaultStyles, defaultTheme } from './styles';
+import { defaultStyles, defaultTheme, SELECT_SIZES } from './styles';
 
 const AsyncSelect = ({
   'aria-label': ariaLabel,
@@ -24,6 +24,7 @@ const AsyncSelect = ({
   name,
   noOptionsMessage,
   placeholder,
+  size,
   value,
 
   onChange,
@@ -50,7 +51,7 @@ const AsyncSelect = ({
     placeholder={placeholder}
     shouldShowValue
     styles={{
-      ...defaultStyles,
+      ...defaultStyles({ size }),
       menuPortal: (base) => (
         modal ?
           base :
@@ -84,6 +85,7 @@ AsyncSelect.propTypes = {
   name: propTypes.string,
   noOptionsMessage: propTypes.func,
   placeholder: propTypes.string,
+  size: propTypes.oneOf(Object.values(SELECT_SIZES)),
   value: propTypes.object,
 
   onChange: propTypes.func,
@@ -106,6 +108,7 @@ AsyncSelect.defaultProps = {
   name: undefined,
   noOptionsMessage: undefined,
   placeholder: undefined,
+  size: SELECT_SIZES.SMALL,
   value: undefined,
 
   onChange: undefined,

src/Select/SingleSelect.jsx

@@ -4,7 +4,7 @@ import propTypes from 'prop-types';
 
 import zStack from 'src/Styles/zStack';
 
-import { defaultTheme, defaultStyles } from './styles';
+import { defaultTheme, defaultStyles, SELECT_SIZES } from './styles';
 
 const SingleSelect = ({
   'aria-label': ariaLabel,
@@ -22,6 +22,7 @@ const SingleSelect = ({
   name,
   options,
   placeholder,
+  size,
   value,
 
   onChange,
@@ -44,7 +45,7 @@ const SingleSelect = ({
     options={options}
     placeholder={placeholder}
     styles={{
-      ...defaultStyles,
+      ...defaultStyles({ size }),
       menuPortal: (base) => (
         modal ?
           base :
@@ -74,6 +75,7 @@ SingleSelect.propTypes = {
   name: propTypes.string,
   options: propTypes.arrayOf(propTypes.object).isRequired,
   placeholder: propTypes.string,
+  size: propTypes.oneOf(Object.values(SELECT_SIZES)),
   value: propTypes.object,
 
   onChange: propTypes.func.isRequired,
@@ -94,6 +96,7 @@ SingleSelect.defaultProps = {
   modal: false,
   name: undefined,
   placeholder: undefined,
+  size: SELECT_SIZES.SMALL,
   value: undefined,
 };
 

src/Select/index.js

@@ -1,7 +1,9 @@
 import AsyncSelect from './AsyncSelect';
 import SingleSelect from './SingleSelect';
+import { SELECT_SIZES } from './styles';
 
 export {
   AsyncSelect,
+  SELECT_SIZES,
   SingleSelect,
 };

src/Select/styles.js

@@ -1,47 +1,60 @@
 import systemColors from 'src/Styles/colors';
 
+export const SELECT_SIZES = { SMALL: 'small' };
+
+const getHeightProps = (size) => {
+  if (size === SELECT_SIZES.SMALL) {
+    return {
+      height: '2.25rem',
+      minHeight: '2.25rem',
+    };
+  }
+  return null;
+};
+
 /*
  To set styles for your item, make sure your option object has a child `colors` object
  with a text and/or hover key defined to override the defaults
  */
-const defaultStyles = {
-  control: (styles, { isDisabled }) => ({
-    ...styles,
-    backgroundColor: isDisabled ? systemColors.inputDisabledBg : styles.backgroundColor,
-    borderColor: systemColors.inputBorderColor,
-  }),
-  indicatorSeparator: (styles) => ({ ...styles, display: 'none' }),
-  singleValue: (styles, { data }) => ({
-    ...styles,
-    color: (data.colors ? data.colors.text : systemColors.uxGray600) || systemColors.uxGray600,
-  }),
-  option: (styles, {
-    data,
-    isDisabled,
-    isFocused,
-    isSelected,
-  }) => {
-    const colors = data.colors || {};
-
-    return {
+const defaultStyles = ({ size }) => ({
+    control: (styles, { isDisabled }) => ({
       ...styles,
-      backgroundColor: isSelected || isFocused ? colors.hover : styles.backgroundColor,
-      color: colors.text,
-      cursor: 'pointer',
-
-      ':active': {
-        ...styles[':active'],
-        backgroundColor:
-          !isDisabled && isSelected ? systemColors.uxGray200 : styles[':active'].backgroundColor,
-      },
-
-      ':hover': {
-        ...styles[':hover'],
-        backgroundColor: colors.hover || systemColors.uxGray200,
-      },
-    };
-  },
-};
+      ...getHeightProps(size),
+      backgroundColor: isDisabled ? systemColors.inputDisabledBg : styles.backgroundColor,
+      borderColor: systemColors.inputBorderColor,
+    }),
+    indicatorSeparator: (styles) => ({ ...styles, display: 'none' }),
+    singleValue: (styles, { data }) => ({
+      ...styles,
+      color: (data.colors ? data.colors.text : systemColors.uxGray600) || systemColors.uxGray600,
+    }),
+    option: (styles, {
+      data,
+      isDisabled,
+      isFocused,
+      isSelected,
+    }) => {
+      const colors = data.colors || {};
+
+      return {
+        ...styles,
+        backgroundColor: isSelected || isFocused ? colors.hover : styles.backgroundColor,
+        color: colors.text,
+        cursor: 'pointer',
+
+        ':active': {
+          ...styles[':active'],
+          backgroundColor:
+            !isDisabled && isSelected ? systemColors.uxGray200 : styles[':active'].backgroundColor,
+        },
+
+        ':hover': {
+          ...styles[':hover'],
+          backgroundColor: colors.hover || systemColors.uxGray200,
+        },
+      };
+    },
+});
 
 const defaultTheme = (theme) => ({
   ...theme,

src/index.js

@@ -19,6 +19,7 @@ import RadioButton from 'src/RadioButton';
 import RadioButtonGroup from 'src/RadioButtonGroup';
 import {
   AsyncSelect,
+  SELECT_SIZES,
   SingleSelect,
 } from 'src/Select';
 import TrackedButton from 'src/TrackedButton';
@@ -39,6 +40,7 @@ export {
   Popper,
   RadioButton,
   RadioButtonGroup,
+  SELECT_SIZES,
   SingleSelect,
   TrackedButton,
   useFlash,