Update spacing on fields to be more explicit (#893)

Update spacing around forms to be consistent with design artifacts

Author: jhardy

CHANGELOG.md

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `MenuItem` renders an empty Box with the same size as the icon(s) of sibling `MenuItem's (if any)
 - `MenuList`, `MenuGroup` contain piece of state the tracks the size of the preserved icon space
 - Labels in `FieldInline` and `ButtonItem` now include the `for` attribute
+- Fields have more explicit line-heights to enforce consistent layout.
+- `Fieldset` default spacing switched from `xsmall` to `small` to improve visual relationship with their `Input*`
 
 ### Fixed
 

packages/components/src/Form/Fields/Field.tsx

@@ -162,6 +162,7 @@ const fieldLabelCSS = (inline?: boolean) =>
         padding-right: ${({ theme }) => theme.space.small};
       `
     : css`
+        line-height: ${({ theme }) => theme.lineHeights.xsmall};
         padding-bottom: ${({ theme }) => theme.space.xsmall};
       `
 

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

@@ -24,11 +24,9 @@ exports[`A FieldCheckbox 1`] = `
 }
 
 .c4 {
-  display: inline-block;
   height: 1rem;
   position: relative;
   width: 1rem;
-  vertical-align: middle;
 }
 
 .c4 input {
@@ -78,6 +76,7 @@ exports[`A FieldCheckbox 1`] = `
   display: grid;
   grid-template-areas: 'input label' '. messages';
   grid-template-columns: repeat(3,max-content);
+  line-height: 1.25rem;
 }
 
 .c0 .c3 {
@@ -175,11 +174,9 @@ exports[`A FieldCheckbox with checked value 1`] = `
 }
 
 .c4 {
-  display: inline-block;
   height: 1rem;
   position: relative;
   width: 1rem;
-  vertical-align: middle;
 }
 
 .c4 input {
@@ -229,6 +226,7 @@ exports[`A FieldCheckbox with checked value 1`] = `
   display: grid;
   grid-template-areas: 'input label' '. messages';
   grid-template-columns: repeat(3,max-content);
+  line-height: 1.25rem;
 }
 
 .c0 .c3 {

packages/components/src/Form/Fields/FieldInline.tsx

@@ -77,6 +77,7 @@ export const FieldInline = styled(FieldInlineLayout)`
   display: grid;
   grid-template-areas: 'input label' '. messages';
   grid-template-columns: repeat(3, max-content);
+  line-height: ${({ theme }) => theme.lineHeights.small};
 
   ${InputArea} {
     grid-area: input;

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

@@ -26,11 +26,9 @@ exports[`A FieldRadio 1`] = `
 }
 
 .c4 {
-  display: inline-block;
   height: 1rem;
   position: relative;
   width: 1rem;
-  vertical-align: middle;
 }
 
 .c4 input {
@@ -83,6 +81,7 @@ exports[`A FieldRadio 1`] = `
   display: grid;
   grid-template-areas: 'input label' '. messages';
   grid-template-columns: repeat(3,max-content);
+  line-height: 1.25rem;
 }
 
 .c0 .c3 {
@@ -163,11 +162,9 @@ exports[`A FieldRadio checked 1`] = `
 }
 
 .c4 {
-  display: inline-block;
   height: 1rem;
   position: relative;
   width: 1rem;
-  vertical-align: middle;
 }
 
 .c4 input {
@@ -220,6 +217,7 @@ exports[`A FieldRadio checked 1`] = `
   display: grid;
   grid-template-areas: 'input label' '. messages';
   grid-template-columns: repeat(3,max-content);
+  line-height: 1.25rem;
 }
 
 .c0 .c3 {

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

@@ -140,6 +140,7 @@ exports[`A FieldSelect 1`] = `
 
 .c0 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 
@@ -422,6 +423,7 @@ exports[`A FieldSelect with an error validation aligned to the right 1`] = `
 
 .c0 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 
@@ -753,6 +755,7 @@ exports[`A required FieldSelect 1`] = `
 
 .c0 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 
@@ -1041,6 +1044,7 @@ exports[`FieldSelect supports labelWeight 1`] = `
 
 .c0 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 

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

@@ -113,6 +113,7 @@ exports[`A FieldText with default label 1`] = `
 
 .c0 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 
@@ -256,6 +257,7 @@ exports[`A FieldText with label inline 1`] = `
 
 .c7 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 

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

@@ -81,6 +81,7 @@ exports[`A FieldTextArea with default label 1`] = `
 
 .c0 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 
@@ -189,6 +190,7 @@ exports[`A FieldTextArea with label inline 1`] = `
 
 .c6 > .c1 {
   grid-area: label;
+  line-height: 1rem;
   padding-bottom: 0.5rem;
 }
 

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

@@ -63,6 +63,7 @@ exports[`A FieldToggleSwitch 1`] = `
   display: grid;
   grid-template-areas: 'input label' '. messages';
   grid-template-columns: repeat(3,max-content);
+  line-height: 1.25rem;
 }
 
 .c0 .c3 {
@@ -187,6 +188,7 @@ exports[`A FieldToggleSwitch turned on 1`] = `
   display: grid;
   grid-template-areas: 'input label' '. messages';
   grid-template-columns: repeat(3,max-content);
+  line-height: 1.25rem;
 }
 
 .c0 .c3 {

packages/components/src/Form/Fieldset/Fieldset.tsx

@@ -60,7 +60,7 @@ const FieldsetLayout = forwardRef(
     const content = (
       <LayoutComponent
         {...restProps}
-        gap={inline ? 'medium' : 'xsmall'}
+        gap={inline ? 'medium' : 'small'}
         className={className}
         ref={ref}
         role="group"