feat(Form): add field note

8base · Aug 28, 2019 · f19ed9c · f19ed9c
1 parent 1e020db
commit f19ed9c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 0 deletions.
diff --git a/...ts__/__image_snapshots__/input-test-js-components-input-field-common-1-snap.png b/...ts__/__image_snapshots__/input-test-js-components-input-field-common-1-snap.png
diff --git a/src/components/Form/FormField.js b/src/components/Form/FormField.js
@@ -10,6 +10,7 @@ import type { MetaType } from '../../types';
 type FormFieldProps = {
   children?: React$Node,
   label?: string,
+  note?: string,
   stretch?: boolean,
   hideErrorLabel?: boolean,
   direction?: 'row' | 'column',
@@ -52,6 +53,21 @@ const [ControlErrorTag, themeError] = createThemeTag(`${name}Error`, ({ COLORS,
   },
 }));
 
+const [FormFieldNoteTag, themeNote] = createThemeTag(`${name}Note`, ({ COLORS, SIZES }: *) => ({
+  root: {
+    position: 'relative',
+
+    fontSize: SIZES.OVERLINE_2,
+    lineHeight: SIZES.OVERLINE_2_LH,
+    color: COLORS.GRAY5,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    display: 'block',
+    maxWidth: '100%',
+    marginTop: 4,
+  },
+}));
 
 const [FormFieldDirectionTag, themeDirection] = createThemeTag(`${name}Direction`, {
   root: props => ({
@@ -80,12 +96,14 @@ const theme = {
   ...themeLabel,
   ...themeError,
   ...themeField,
+  ...themeNote,
 };
 
 
 const FormField = ({
   meta = {},
   label,
+  note,
   children,
   hideErrorLabel,
   ...rest
@@ -108,6 +126,11 @@ const FormField = ({
           </FormLabel>
         </If>
         { children }
+        <If condition={ !!note }>
+          <FormFieldNoteTag modifiers={ rest } title={ note }>
+            { note }
+          </FormFieldNoteTag>
+        </If>
       </FormFieldDirectionTag>
       <If condition={ hasError && !hideErrorLabel }>
         <ControlErrorWrapperTag modifiers={ rest } tagName="div">

diff --git a/src/components/InputField/InputField.stories.js b/src/components/InputField/InputField.stories.js
@@ -21,9 +21,11 @@ export default (asStory) => {
           </Grid.Box>
           <Grid.Box>
             <Column gap="md">
+              <InputField label="With note" input={{ name: 'input', onChange }} note="Note" stretch={ false } />
               <InputField label="With error" input={{ name: 'input', onChange }} meta={{ error: 'Required', touched: true }} stretch={ false } />
               <InputField label="With big error" input={{ name: 'input', onChange }} meta={{ error: 'Sadie objectation bainie painkiller archae Clinton Slavian Pinkerton echinus bearishly', touched: true }} stretch={ false } />
               <InputField label="Without error label" hideErrorLabel hideErrorIndicator input={{ name: 'input', onChange }} meta={{ error: 'Required', touched: true }} stretch={ false } />
+              <InputField label="With note and error" input={{ name: 'input', onChange }} note="Note" meta={{ error: 'Required', touched: true }} stretch={ false } />
               <InputField label="With mask" input={{ name: 'input', value: '12', onChange }} mask="999-999" stretch={ false } />
             </Column>
           </Grid.Box>