feat(components): Add a validation hint to the Select (#451)

* feat(components): add a validation hint tooltip to the Select component

* feat(components): add error icon to invalid Select

* fix(components): don't apply invalid styles when disabled

Author: connor-baer

src/components/Input/Input.js

@@ -31,9 +31,9 @@ import {
 
 import Tooltip from '../Tooltip';
 
-import { ReactComponent as ErrorIcon } from './error.svg';
-import { ReactComponent as WarningIcon } from './warning.svg';
-import { ReactComponent as ValidIcon } from './valid.svg';
+import { ReactComponent as ErrorIcon } from '../../icons/error.svg';
+import { ReactComponent as WarningIcon } from '../../icons/warning.svg';
+import { ReactComponent as ValidIcon } from '../../icons/valid.svg';
 
 const containerBaseStyles = ({ theme }) => css`
   label: input__container;

src/components/Select/Select.js

@@ -26,7 +26,9 @@ import {
 } from '../../util/shared-prop-types';
 import { textMega, disableVisually } from '../../styles/style-helpers';
 
-import { ReactComponent as ArrowsIcon } from './arrows.svg';
+import { ReactComponent as ArrowsIcon } from '../../icons/arrows.svg';
+import { ReactComponent as ErrorIcon } from '../../icons/error.svg';
+import Tooltip from '../Tooltip';
 
 // HACK: Firefox includes the border-width in the overall height of the element
 //       (despite box-sizing: border-box), so we have to force the height.
@@ -76,21 +78,29 @@ const selectInvalidStyles = ({ theme, invalid, disabled }) =>
   css`
     label: select--invalid;
     border-color: ${theme.colors.r300};
+    padding-right: ${theme.spacings.zetta};
   `;
 
-const iconBaseStyles = ({ theme }) => css`
+const suffixBaseStyles = ({ theme }) => css`
   label: select__icon;
   fill: ${theme.colors.n700};
   display: block;
   z-index: 40;
   pointer-events: none;
   position: absolute;
-  ${size(theme.spacings.kilo)};
-  top: 50%;
-  right: ${theme.spacings.kilo};
-  transform: translateY(-50%);
+  ${size(theme.spacings.mega)};
+  top: 1px;
+  right: 1px;
+  margin: ${theme.spacings.kilo};
 `;
 
+const suffixInvalidStyles = ({ theme, invalid }) =>
+  invalid &&
+  css`
+    label: select__icon--invalid;
+    right: calc(1px + ${theme.spacings.giga});
+  `;
+
 const containerBaseStyles = ({ theme }) => css`
   label: select__container;
   color: ${theme.colors.n900};
@@ -146,6 +156,11 @@ const selectPrefixStyles = ({ theme, hasPrefix }) =>
     );
   `;
 
+const tooltipBaseStyles = css`
+  label: select__tooltip;
+  right: 1px;
+`;
+
 const SelectContainer = styled('div')`
   ${containerBaseStyles};
   ${containerNoMarginStyles};
@@ -159,8 +174,17 @@ const SelectElement = styled('select')`
   ${selectPrefixStyles};
 `;
 
-const Icon = styled(ArrowsIcon)`
-  ${iconBaseStyles};
+const SelectIcon = styled(ArrowsIcon)`
+  ${suffixBaseStyles};
+  ${suffixInvalidStyles};
+`;
+
+const InvalidIcon = styled(ErrorIcon)`
+  ${suffixBaseStyles};
+`;
+
+const SelectTooltip = styled(Tooltip)`
+  ${tooltipBaseStyles};
 `;
 
 /**
@@ -172,19 +196,23 @@ const Select = ({
   disabled,
   noMargin,
   inline,
+  invalid,
   options,
   children,
   renderPrefix: RenderPrefix,
+  validationHint,
   ...props
 }) => {
   const prefix = RenderPrefix && <RenderPrefix css={prefixStyles} />;
+  const showInvalid = !disabled && invalid;
 
   return (
     <SelectContainer {...{ noMargin, inline, disabled }}>
       {prefix}
       <SelectElement
         {...{
           ...props,
+          invalid,
           value,
           disabled,
           hasPrefix: !!prefix
@@ -206,7 +234,13 @@ const Select = ({
               </option>
             )))}
       </SelectElement>
-      <Icon />
+      <SelectIcon invalid={showInvalid} />
+      {showInvalid && <InvalidIcon />}
+      {!disabled && validationHint && (
+        <SelectTooltip position={Tooltip.TOP} align={Tooltip.LEFT}>
+          {validationHint}
+        </SelectTooltip>
+      )}
     </SelectContainer>
   );
 };
@@ -270,7 +304,11 @@ Select.propTypes = {
    * Render prop that should render a left-aligned overlay icon or element.
    * Receives a className prop.
    */
-  renderPrefix: PropTypes.func
+  renderPrefix: PropTypes.func,
+  /**
+   * Warning or error message, displayed in a tooltip.
+   */
+  validationHint: PropTypes.string
 };
 
 Select.defaultProps = {

src/components/Select/Select.spec.js

@@ -62,6 +62,13 @@ describe('Select', () => {
     expect(actual).toMatchSnapshot();
   });
 
+  it('should render with a tooltip when passed a validation hint', () => {
+    const actual = create(
+      <Select {...{ options }} validationHint="This field is required." />
+    );
+    expect(actual).toMatchSnapshot();
+  });
+
   /**
    * Accessibility tests.
    */

src/components/Select/Select.story.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs/react';
+import { boolean, text } from '@storybook/addon-knobs/react';
 
 import { GROUPS } from '../../../.storybook/hierarchySeparators';
 
@@ -71,6 +71,20 @@ storiesOf(`${GROUPS.FORMS}|Select`, module)
         onChange={action('Option selected')}
         disabled={boolean('Disabled', false)}
         invalid={boolean('Invalid', false)}
+        validationHint={text('Validation hint', '')}
+      />
+    ))
+  )
+  .add(
+    'Select invalid',
+    withInfo()(() => (
+      <Select
+        name="select"
+        options={options}
+        onChange={action('Option selected')}
+        disabled={boolean('Disabled', false)}
+        invalid={boolean('Invalid', true)}
+        validationHint={text('Validation hint', 'This field is required')}
       />
     ))
   )

src/components/Select/__snapshots__/Select.spec.js.snap

@@ -174,6 +174,133 @@ exports[`Select should render with a prefix when passed the prefix prop 1`] = `
 </div>
 `;
 
+exports[`Select should render with a tooltip when passed a validation hint 1`] = `
+.circuit-4 {
+  color: #212933;
+  display: block;
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.circuit-0 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: #FFFFFF;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #D8DDE1;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
+  color: #212933;
+  padding: 8px 32px 8px 12px;
+  max-height: 42px;
+  position: relative;
+  width: 100%;
+  z-index: 20;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.circuit-0:focus,
+.circuit-0:hover,
+.circuit-0:active {
+  outline: none;
+}
+
+.circuit-0:focus {
+  border-color: #3388FF;
+}
+
+.circuit-0:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #000;
+}
+
+.circuit-2 {
+  display: inline-block;
+  width: 100%;
+  max-width: 280px;
+  min-width: 120px;
+  background-color: #212933;
+  color: #FFFFFF;
+  border-radius: 4px;
+  padding: 8px 12px;
+  position: absolute;
+  z-index: 31;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+  font-size: 13px;
+  line-height: 20px;
+  box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06);
+  right: 50%;
+  right: calc(50% - (16px + 4px));
+  bottom: 100%;
+  bottom: calc(100% + 12px);
+  right: 1px;
+}
+
+.circuit-2::after {
+  display: block;
+  content: '';
+  width: 0;
+  height: 0;
+  position: absolute;
+  border: 8px solid transparent;
+}
+
+.circuit-2::after {
+  right: 12px;
+}
+
+.circuit-2::after {
+  top: 100%;
+  border-top-color: #212933;
+}
+
+<div
+  className="circuit-4 circuit-5"
+  disabled={false}
+>
+  <select
+    className="circuit-0 circuit-1"
+    disabled={false}
+  >
+    <option
+      value=""
+    >
+      Select an option
+    </option>
+    <option
+      value="1"
+    >
+      Option 1
+    </option>
+    <option
+      value="2"
+    >
+      Option 2
+    </option>
+    <option
+      value="3"
+    >
+      Option 3
+    </option>
+  </select>
+  <div>
+    arrows.svg
+  </div>
+  <div
+    className="circuit-2 circuit-3"
+  >
+    This field is required.
+  </div>
+</div>
+`;
+
 exports[`Select should render with default styles 1`] = `
 .circuit-2 {
   color: #212933;
@@ -452,6 +579,7 @@ exports[`Select should render with invalid styles when passed the invalid prop 1
   font-size: 16px;
   line-height: 24px;
   border-color: #EA7A7A;
+  padding-right: 56px;
 }
 
 .circuit-0:focus,
@@ -501,6 +629,9 @@ exports[`Select should render with invalid styles when passed the invalid prop 1
   <div>
     arrows.svg
   </div>
+  <div>
+    error.svg
+  </div>
 </div>
 `;