Add tooltips to form fields

packages/fannypack/package.json

@@ -7,7 +7,7 @@
   "unpkg": "dist/fannypack.min.js",
   "types": "ts/index.d.ts",
   "scripts": {
-    "build": "yarn clean && yarn build:lib && yarn build:types",
+    "build": "yarn clean && yarn build:lib",
     "build:lib": "rollup -c",
     "build:types": "tsc --emitDeclarationOnly",
     "clean": "rimraf es/ lib/ dist/ ts/",
@@ -83,5 +83,5 @@
     "accessible",
     "composable"
   ],
-  "gitHead": "613d46b6624167b65e548fe917ecfb5a9a0e2dbe"
+  "gitHead": "7b7ed3a0783df48486e43e6937f33240a8240167"
 }

packages/fannypack/src/Checkbox/styled.ts

@@ -7,6 +7,7 @@ import HiddenInput from '../_utils/HiddenInput';
 import { LocalCheckboxProps } from './Checkbox';
 
 export const CheckboxIcon = styled(Box)<{ state?: string }>`
+  background-color: white;
   border: 1px solid #bdbdbd;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 0.2em;

packages/fannypack/src/FieldWrapper/FieldWrapper.tsx

@@ -1,10 +1,29 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { FieldProps as ReakitFieldProps } from 'reakit/ts/Field/Field';
+// @ts-ignore
+import _omit from 'lodash/omit';
+// @ts-ignore
+import _get from 'lodash/get';
 
 import { Box, Flex } from '../primitives';
+import Button from '../Button';
+import Icon from '../Icon';
+import Popover from '../Popover';
+import { LocalPopoverProps, popoverPropTypes } from '../Popover/Popover';
+import Text from '../Text';
+import VisuallyHidden from '../VisuallyHidden';
+import { withTheme } from '../styled';
 import { Omit } from '../types';
-import _FieldWrapper, { Label, DescriptionText, HintText, OptionalText, ValidationText } from './styled';
+import _FieldWrapper, {
+  Label,
+  DescriptionText,
+  HintText,
+  OptionalText,
+  RequiredText,
+  TooltipPopover,
+  ValidationText
+} from './styled';
 
 export type LocalFieldWrapperProps = {
   a11yId?: string;
@@ -16,6 +35,9 @@ export type LocalFieldWrapperProps = {
   isRequired?: boolean;
   label?: string | React.ReactElement<any>;
   state?: string;
+  tooltip?: string | React.ReactElement<any>;
+  tooltipPopoverProps?: Omit<Omit<LocalPopoverProps, 'children'>, 'content'>;
+  tooltipTrigger?: React.ReactElement<any>;
   validationText?: string;
 };
 export type FieldWrapperProps = Omit<ReakitFieldProps, 'label'> & LocalFieldWrapperProps;
@@ -35,17 +57,43 @@ export const FieldWrapper: React.FunctionComponent<LocalFieldWrapperProps> = ({
   isRequired,
   label,
   state,
+  tooltip,
+  tooltipPopoverProps: _tooltipPopoverProps,
+  tooltipTrigger: _tooltipTrigger,
   validationText,
   ...props
 }) => {
+  const tooltipPopoverProps = _get(
+    props,
+    'theme.fannypack.FieldWrapper.defaultProps.tooltipPopoverProps',
+    _tooltipPopoverProps
+  );
+  const tooltipTrigger = _get(props, 'theme.fannypack.FieldWrapper.defaultProps.tooltipTrigger', _tooltipTrigger);
   const elementProps: FieldElementProps = { isRequired, a11yId, state };
   return (
     <_FieldWrapper {...props}>
       {label && (
         <Box marginBottom="minor-2">
-          <Flex alignItems="center">
+          <Flex alignItems="center" lineHeight="1">
             {typeof label === 'string' ? <Label htmlFor={a11yId}>{label}</Label> : label}
             {isOptional && <OptionalText>OPTIONAL</OptionalText>}
+            {isRequired && <RequiredText>*</RequiredText>}
+            {tooltip && (
+              <TooltipPopover
+                isFullWidth
+                placement="bottom-start"
+                content={typeof tooltip === 'string' ? <Text fontSize="150">{tooltip}</Text> : tooltip}
+                gutter={4}
+                {...tooltipPopoverProps}
+              >
+                {tooltipTrigger || (
+                  <Button kind="ghost" size="small" marginLeft="minor-1" minHeight="unset" padding="0.1em 0.5em">
+                    <VisuallyHidden>Toggle tooltip</VisuallyHidden>
+                    <Icon a11yHidden icon="question-circle" />
+                  </Button>
+                )}
+              </TooltipPopover>
+            )}
           </Flex>
           {typeof description === 'string' ? (
             <DescriptionText>{description}</DescriptionText>
@@ -76,6 +124,9 @@ export const fieldWrapperPropTypes = {
   isRequired: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   state: PropTypes.string,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  tooltipPopoverProps: PropTypes.shape(_omit(popoverPropTypes, 'children', 'content')),
+  tooltipTrigger: PropTypes.element,
   validationText: PropTypes.string
 };
 FieldWrapper.propTypes = fieldWrapperPropTypes;
@@ -89,10 +140,13 @@ export const fieldWrapperDefaultProps = {
   isRequired: undefined,
   label: undefined,
   state: undefined,
+  tooltip: undefined,
+  tooltipPopoverProps: undefined,
+  tooltipTrigger: undefined,
   validationText: undefined
 };
 FieldWrapper.defaultProps = fieldWrapperDefaultProps;
 
 // @ts-ignore
-const C: React.FunctionComponent<FieldWrapperProps> = FieldWrapper;
+const C: React.FunctionComponent<FieldWrapperProps> = withTheme(FieldWrapper);
 export default C;

packages/fannypack/src/FieldWrapper/styled.ts

@@ -5,6 +5,7 @@ import styled, { space } from '../styled';
 import { Omit } from '../types';
 // @ts-ignore
 import _Label from '../Label';
+import Popover from '../Popover';
 // @ts-ignore
 import _Text from '../Text';
 import { FieldWrapperProps } from './FieldWrapper';
@@ -47,6 +48,24 @@ export const OptionalText = styled(_Text)`
   }
 `;
 
+export const RequiredText = styled(_Text)`
+  color: ${palette('danger')};
+  margin-left: ${space(1)}rem;
+  line-height: 1;
+
+  & {
+    ${theme('fannypack.FieldWrapper.required')};
+  }
+`;
+
+export const TooltipPopover = styled(Popover)`
+  padding: ${space(1, 'major')}rem;
+
+  & {
+    ${theme('fannypack.FieldWrapper.TooltipPopover.base')};
+  }
+`;
+
 export const ValidationText = styled(_Text)`
   display: block;
   font-size: 0.8rem;

packages/fannypack/src/Input/Input.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { InputProps as ReakitInputProps } from 'reakit/ts';
+// @ts-ignore
+import _omit from 'lodash/omit';
 
 import { InlineFlex } from '../primitives';
 import { Omit, Size, sizePropType } from '../types';
@@ -20,10 +22,10 @@ export type LocalInputProps = {
   children?: React.ReactNode;
   className?: string;
   /** Default value of the input */
-  defaultValue?: string;
+  defaultValue?: string | string[];
   /** Disables the input */
   disabled?: boolean;
-  inputProps?: ReakitInputProps;
+  inputProps?: Omit<ReakitInputProps, 'ref'>;
   inputRef?: React.RefObject<any>;
   /** Adds a cute loading indicator to the input field */
   isLoading?: boolean;
@@ -34,11 +36,11 @@ export type LocalInputProps = {
   /** Alters the size of the input. Can be "small", "medium" or "large" */
   size?: Size;
   /** The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value. */
-  max?: number;
+  max?: number | string;
   /** If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. */
   maxLength?: number;
   /** The minimum (numeric or date-time) value for this input, which must not be greater than its maximum (max attribute) value. */
-  min?: number;
+  min?: number | string;
   /** If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored. */
   minLength?: number;
   /** This prop indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file. */
@@ -52,13 +54,13 @@ export type LocalInputProps = {
   /** Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked. */
   spellCheck?: boolean;
   /** Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. */
-  step?: number;
+  step?: number | string;
   /** State of the input. Can be any color in the palette. */
   state?: string;
   /** Specify the type of input. */
   type?: string;
   /** Value of the input */
-  value?: string;
+  value?: string | number | string[];
   /** Function to invoke when focus is lost */
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   /** Function to invoke when input has changed */
@@ -145,7 +147,7 @@ export const Input: React.FunctionComponent<LocalInputProps> & InputComponents =
       styledSize={size}
       type={type}
       value={value}
-      {...inputProps}
+      {..._omit(inputProps, 'size')}
     />
     {isLoading && <LoadingSpinner color="text" size="small" />}
   </InputWrapper>

packages/fannypack/src/Radio/styled.ts

@@ -9,6 +9,7 @@ import { RadioProps, LocalRadioProps } from './Radio';
 
 export const RadioIcon = styled(Box)<{ state?: string }>`
   border: 1px solid #bdbdbd;
+  background-color: white;
   box-shadow: inset 0px 1px 2px #e5e5e5;
   border-radius: 100%;
   height: 1em;

packages/fannypack/src/Select/Select.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { InlineBlockProps as ReakitInlineBlockProps } from 'reakit/ts/InlineBlock/InlineBlock';
+import { InputProps as ReakitInputProps } from 'reakit/ts/Input/Input';
 
 import { InlineBlock } from '../primitives';
 import { Omit } from '../types';
@@ -33,7 +34,7 @@ export type LocalSelectProps = {
   options: Array<{ label: string; value: string; disabled?: boolean }>;
   /** Hint text to display */
   placeholder?: string;
-  selectProps: ReakitInputProps;
+  selectProps?: ReakitInputProps;
   /** Alters the size of the select field. Can be "small", "medium" or "large" */
   size?: string;
   /** State of the select field. Can be any color in the palette. */
@@ -161,7 +162,11 @@ export class Select extends React.PureComponent<LocalSelectProps, SelectState> {
           value={value}
           {...selectProps}
         >
-          {placeholder && <option disabled>{placeholder}</option>}
+          {placeholder && (
+            <option disabled value="">
+              {placeholder}
+            </option>
+          )}
           {options.map((option, i) => (
             <option
               key={i} // eslint-disable-line

packages/fannypack/src/themes/default/Icon.ts

@@ -4,6 +4,7 @@ import * as faInfoCircle from '@fortawesome/free-solid-svg-icons/faInfoCircle';
 import * as faExclamationTriangle from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 import * as faCheckCircle from '@fortawesome/free-solid-svg-icons/faCheckCircle';
 import * as faExclamationCircle from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
+import * as faQuestionCircle from '@fortawesome/free-solid-svg-icons/faQuestionCircle';
 import * as faTimes from '@fortawesome/free-solid-svg-icons/faTimes';
 import * as faSearch from '@fortawesome/free-solid-svg-icons/faSearch';
 
@@ -23,9 +24,12 @@ const parseOverrideIcons = (
 export default (overrides: any) => ({
   ..._get(overrides, 'Icon', {}),
   icons: {
-    ...parseIcons([faInfoCircle, faExclamationTriangle, faCheckCircle, faExclamationCircle, faTimes, faSearch], {
-      type: 'font-awesome-standalone'
-    }),
+    ...parseIcons(
+      [faInfoCircle, faExclamationTriangle, faCheckCircle, faExclamationCircle, faQuestionCircle, faTimes, faSearch],
+      {
+        type: 'font-awesome-standalone'
+      }
+    ),
     ...parseOverrideIcons(_get(overrides, 'Icon.iconSets', [])),
     ..._get(overrides, 'Icon.icons', {})
   },

packages/fannypack/src/types/theme.ts

@@ -165,6 +165,13 @@ export type FieldWrapperThemeConfig = {
   hint?: Stylesheet;
   optional?: Stylesheet;
   validation?: Stylesheet;
+  TooltipPopover?: {
+    base?: Stylesheet;
+  };
+  defaultProps?: {
+    tooltipTrigger?: any;
+    tooltipPopoverProps?: Object;
+  };
 };
 export type FieldSetThemeConfig = {
   base?: Stylesheet;

packages/website/pages/form/fieldwrapper.mdx

@@ -19,6 +19,62 @@ The `<FieldWrapper>` component is a utility belt that wraps around form elements
 </FieldWrapper>
 ```
 
+### Tooltips
+
+You can show a tooltip by supplying a string or an element to the `tooltip` prop.
+
+```.jsx
+<FieldWrapper a11yId="username" label="Username" tooltip="Your username must be awesome.">
+  <Input />
+</FieldWrapper>
+```
+
+```.jsx
+<FieldWrapper
+  a11yId="username"
+  label="Username"
+  tooltip={
+    <Text fontSize="150">Your username must be <Text fontWeight="bold">awesome.</Text></Text>
+  }
+>
+  <Input />
+</FieldWrapper>
+```
+
+#### Custom tooltip trigger
+
+You can modify the tooltip trigger button by supplying an element to the `tooltipTrigger` prop.
+
+```.jsx
+<FieldWrapper
+  a11yId="username"
+  label="Username"
+  tooltip="Your username must be awesome."
+  tooltipTrigger={<Button size="small" minHeight="unset">Tooltip</Button>}
+>
+  <Input />
+</FieldWrapper>
+```
+
+Or you can set a default trigger via `defaultProps` [in the theme](#theming)
+
+#### Custom tooltip popover props
+
+You can modify the tooltip popover props by supplying `tooltipPopoverProps`.
+
+```.jsx
+<FieldWrapper
+  a11yId="username"
+  label="Username"
+  tooltip="Your username must be awesome."
+  tooltipPopoverProps={{ placement: 'top-start' }}
+>
+  <Input />
+</FieldWrapper>
+```
+
+Or you can set a default popover props via `defaultProps` [in the theme](#theming)
+
 ### Descriptions
 
 The description text is placed underneath the label.
@@ -51,8 +107,6 @@ To indicate a field as optional, add the `isOptional` prop.
 
 ### Required fields
 
-Required fields don't show any visual feedback. Displaying 'optional' labels (as above) instead of a red astrix is more descriptive, less fearful, and accessible. However, adding the `isRequired` prop to the field will enable screen readers to identify required fields.
-
 ```.jsx
 <FieldWrapper a11yId="username" label="Username" isRequired>
   <Input />
@@ -141,7 +195,16 @@ Required fields don't show any visual feedback. Displaying 'optional' labels (as
     description: css | Object,
     hint: css | Object,
     optional: css | Object,
-    validation: css | Object
+    validation: css | Object,
+
+    TooltipPopover: {
+      base: css | Object
+    },
+
+    defaultProps: {
+      tooltipPopoverProps: Object
+      tooltipTrigger: ReactElement
+    }
   }
 }
 ```