Update Form component to support gap property

Author: Luke Bowerman

CHANGELOG.md

@@ -13,11 +13,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- removed labelFontWeight from FieldInline and update test for it
+- `InputText` will now show red error icon when validation fails
+- `Field*` components no longer have a bottom margin by default (see `Form` update)
+- `Form` now acts as `SpaceVertical` component automatically putting a gap between each child item
 
-### Fixed
+### Removed
 
-- updated InputText to have Icon warning when ValidationType = error
+- `FieldInline` no longer supports `labelFontWeight`
 
 ## [0.7.27] - 2020-04-15
 

packages/components/src/Form/Form.tsx

@@ -31,29 +31,15 @@ import React, {
   FormEventHandler,
   createContext,
 } from 'react'
-import styled from 'styled-components'
 import omit from 'lodash/omit'
-import {
-  CompatibleHTMLProps,
-  border,
-  flexbox,
-  layout,
-  reset,
-  space,
-  BorderProps,
-  FlexboxProps,
-  LayoutProps,
-  SpaceProps,
-} from '@looker/design-tokens'
+import { CompatibleHTMLProps } from '@looker/design-tokens'
+import { SpaceVertical, SpaceHelperProps } from '../Layout'
 import { ValidationMessageProps } from './ValidationMessage'
 
 export type ValidationMessages = Record<string, ValidationMessageProps>
 
 export interface FormProps
-  extends BorderProps,
-    FlexboxProps,
-    LayoutProps,
-    SpaceProps,
+  extends SpaceHelperProps,
     CompatibleHTMLProps<HTMLFormElement> {
   /**
    * A record of all validation messages for the form, where the key is the name
@@ -72,22 +58,18 @@ export interface FormContext {
 
 export const FormContext = createContext<FormContext>({})
 
-const FormBase = styled.form`
-  ${reset}
-  ${border}
-  ${flexbox}
-  ${layout}
-  ${space}
-`
-
 export const Form = forwardRef(
   (props: FormProps, ref: Ref<HTMLFormElement>) => (
     <FormContext.Provider
       value={{
         validationMessages: props.validationMessages,
       }}
     >
-      <FormBase {...omit(props, 'validationMessages')} ref={ref} />
+      <SpaceVertical
+        as="form"
+        {...omit(props, 'validationMessages')}
+        ref={ref}
+      />
     </FormContext.Provider>
   )
 )

packages/components/src/Form/__snapshots__/Form.test.tsx.snap

@@ -1,7 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form with one child 1`] = `
-.c4 {
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c0 > * {
+  margin-top: 1rem;
+}
+
+.c0 > :first-child {
+  margin-top: 0rem;
+}
+
+.c5 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -18,7 +40,7 @@ exports[`Form with one child 1`] = `
   justify-content: space-evenly;
 }
 
-.c4 input {
+.c5 input {
   border: none;
   background: transparent;
   -webkit-flex: 1;
@@ -31,34 +53,34 @@ exports[`Form with one child 1`] = `
   padding: 0;
 }
 
-.c4::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: #939BA5;
 }
 
-.c4::-moz-placeholder {
+.c5::-moz-placeholder {
   color: #939BA5;
 }
 
-.c4:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: #939BA5;
 }
 
-.c4::placeholder {
+.c5::placeholder {
   color: #939BA5;
 }
 
-.c4:hover {
+.c5:hover {
   border-color: #C1C6CC;
 }
 
-.c4:focus,
-.c4:focus-within {
+.c5:focus,
+.c5:focus-within {
   border-color: #9785F2;
   box-shadow: 0 0 0 2px #E8E5FF;
   outline: none;
 }
 
-.c5 {
+.c6 {
   border-radius: 0.25rem;
   border: solid 1px;
   border-color: #DEE1E5;
@@ -72,14 +94,14 @@ exports[`Form with one child 1`] = `
   color: #343C42;
 }
 
-.c2 {
+.c3 {
   color: #343C42;
   font-weight: 600;
   font-size: 0.75rem;
   display: inline-block;
 }
 
-.c0 {
+.c1 {
   -webkit-align-items: left;
   -webkit-box-align: left;
   -ms-flex-align: left;
@@ -96,41 +118,41 @@ exports[`Form with one child 1`] = `
   width: 100%;
 }
 
-.c0 .c3 {
+.c1 .c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   grid-area: input;
 }
 
-.c0 .c6 {
+.c1 .c7 {
   grid-area: messages;
 }
 
-.c0 .c1 {
+.c1 .c2 {
   grid-area: label;
   padding-bottom: 0.5rem;
 }
 
-.c0 .c8 {
+.c1 .c9 {
   grid-area: detail;
   justify-self: end;
 }
 
-.c0 .c7 {
+.c1 .c8 {
   margin-right: 0.5rem;
   margin-top: 0.5rem;
 }
 
 <form
-  className=""
+  className="c0"
 >
   <div
-    className="c0 "
+    className="c1 "
   >
     <label
-      className="c1 c2"
+      className="c2 c3"
       color="palette.charcoal700"
       fontSize="xsmall"
       fontWeight="semiBold"
@@ -139,10 +161,10 @@ exports[`Form with one child 1`] = `
       label
     </label>
     <div
-      className="c3 "
+      className="c4 "
     >
       <div
-        className="c4 c5 "
+        className="c5 c6 "
         onClick={[Function]}
       >
         <input
@@ -153,7 +175,7 @@ exports[`Form with one child 1`] = `
       </div>
     </div>
     <div
-      className="c6 "
+      className="c7 "
     />
   </div>
 </form>

packages/playground/src/Form/FieldsDemo.tsx

@@ -31,6 +31,7 @@ import {
   FieldCheckbox,
   FieldRadio,
   FieldToggleSwitch,
+  Form,
   Grid,
   InputText,
   Select,
@@ -46,6 +47,11 @@ export const FieldsDemo: FC = () => {
       <InputText />
 
       <Grid>
+        <Form>
+          <FieldText label="Text Input" prefix="$" placeholder="Money" />
+          <FieldText label="Text Input" prefix="$" placeholder="Money" />
+          <FieldText label="Text Input" prefix="$" placeholder="MONEY!!!" />
+        </Form>
         <FieldText disabled label="Text Input" placeholder="placeholder" />
         <FieldText
           disabled