Merge pull request #281 from WTTJ/fix-label-spacing-and-wrapping

fix: label spacing and wrapping

src/components/ConnectedField/doc.mdx

@@ -119,6 +119,7 @@ You can find additional props for each field component in [Fields](/fields/file-
                 placeholder="McBoatface"
                 label="Last name"
                 mb="xl"
+                flexDirection="row"
               />
               <ConnectedField
                 name="telephone"
@@ -174,7 +175,7 @@ You can find additional props for each field component in [Fields](/fields/file-
               </RadioGroup>
               <ConnectedField name="hungry" component={Toggle} label="Hungry" mb="xl" />
               <FieldGroup label="Animals" mb="xl">
-                <ConnectedField name="dogs" component={InputCheckbox} label="Dogs" />
+                <ConnectedField name="dogs" component={InputCheckbox} label="Dogs are particularly funny creatures due to their floppy ears" />
                 <ConnectedField name="cats" component={InputCheckbox} label="Cats" />
               </FieldGroup>
               <ConnectedField

src/components/Field/index.js

@@ -77,7 +77,7 @@ export const Field = forwardRef(
 
     const isShowRequired = isRadio ? null : required
     const layout = flexDirection || (isCheckable ? 'row' : 'column')
-    const Container = layout === 'row' ? RowContainer : Fragment
+    const Container = flexDirection === 'row' ? RowContainer : Fragment
 
     const handleLabelClick = () => {
       if (isCheckable) return

src/components/Field/styles.js

@@ -19,6 +19,7 @@ const columnStyles = css`
 
 const checkableFieldStyles = css`
   ${th('fields.checkablelabel.default')};
+  margin-bottom: sm;
 `
 
 export const Field = styled.div(

src/components/Label/styles.js

@@ -6,8 +6,8 @@ import { getVariantStateColor, system } from '../../utils/'
 export const Label = styled.label`
   display: flex;
   flex-shrink: 0;
-  align-items: center;
-  line-height: 1;
+  align-items: flex-start;
+  line-height: body1;
   ${th('fields.label')};
   ${system};
 `

src/theme/fields.js

@@ -1,3 +1,6 @@
+// To allow for line-height of text in label
+const LINE_HEIGHT_ADJUSTMENTS = '0.15rem'
+
 export const getFields = theme => {
   const { colors, fontSizes, fontWeights, radii, shadows, space, toRem } = theme
 
@@ -73,7 +76,9 @@ export const getFields = theme => {
     checkbox: {
       default: {
         width: toRem(15),
-        height: toRem(15)
+        height: toRem(15),
+        'flex-shrink': 0,
+        'margin-top': LINE_HEIGHT_ADJUSTMENTS
       },
       checked
     },
@@ -151,6 +156,7 @@ export const getFields = theme => {
         width: toRem(22),
         'background-color': colors.nude[200],
         'border-color': colors.nude[200],
+        'margin-top': `-${LINE_HEIGHT_ADJUSTMENTS}`,
         '&::after': {
           ...defaults,
           'background-color': colors.light[200],