Fieldset, Legend improvements + more

Checkbox & Radio
  - Remove default margin (previously `3px)

ToggleSwitch
  - Explicitly specify `margin: 0` to suppress browser-default styling

Field improvements
  - Set `id` on label based on field.id to allow for `Fieldset` `legend` replacement / association
  - Remove bottom margin
  - Vertically center input (for checkbox & radio group) within Field
  - Only apply Label styling to immediate child to prevent unintended consequences on nested Fields (e.g. CheckboxGroup)

Fieldset
  - Implement with a `Space` / `SpaceVertical` layout (emulate `Form`)
  - Enable `inline` presentation
  - Use `div` instead of `fieldset` for DOM object due to Chrome implementation bug of `fieldset` (doesn’t allow for Flex / Grid layouts within `fieldset`
  - Minor fix-up to Fieldset composition (no visual impact)

Legend
  - Extend `Label` styles to keep Label & Legend presentation bound where appropriate

Grid
  - Correct column specification to prevent grid “blow-out”
  - Remove explicitly specified `width: 100%` (it’s implied)

Space & SpaceVertical
  - Specify `width: 100%` by default
  - Add `layout` / `layoutProps` to simpleLayoutProps to allow for default width specification  - Improve specificity of child selectors to apply only to direct descendants.
- Use double selector to override theme reset behavior

- FieldColor defaults to `width=“100%”`
- `RequiredStar` was preventing visual artifact from being rendered (`className` assignment missing)
- TextArea now only resizes on the Y access

Author: Luke Bowerman

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `Menu` closes by default on `MenuItem` click
 - Provide `@types/styled-system` as a package dependency
+- `TextArea` only supports vertical resizing now
 
 ### Fixed
 

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

@@ -25,7 +25,7 @@
  */
 
 import React, { FunctionComponent, ReactNode } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { ResponsiveValue, TLengthStyledSystem } from 'styled-system'
 import omit from 'lodash/omit'
 import pick from 'lodash/pick'
@@ -124,7 +124,12 @@ const FieldLayout: FunctionComponent<FieldPropsInternal> = ({
 
   return (
     <div className={className}>
-      <Label htmlFor={id} fontWeight={labelFontWeight} fontSize={labelFontSize}>
+      <Label
+        fontSize={labelFontSize}
+        fontWeight={labelFontWeight}
+        htmlFor={id}
+        id={`${id}-labeledby`}
+      >
         {label}
         {required && <RequiredStar />}
       </Label>
@@ -147,12 +152,24 @@ FieldDetail.defaultProps = {
 const InputArea = styled.div``
 const MessageArea = styled.div``
 
+const fieldLabelCSS = (inline?: boolean) =>
+  inline
+    ? css`
+        text-align: right;
+        line-height: ${inputHeight};
+        justify-self: end;
+        height: ${inputHeight};
+        padding-right: ${({ theme }) => theme.space.small};
+      `
+    : css`
+        padding-bottom: ${({ theme }) => theme.space.xsmall};
+      `
+
 export const Field = styled(FieldLayout)<FieldPropsInternal>`
   height: fit-content;
   width: ${({ width }) => width || 'fit-content'};
   align-items: left;
   justify-content: space-between;
-  margin-bottom: ${({ theme }) => theme.space.xsmall};
 
   display: grid;
   grid-template-areas: ${({ inline }) =>
@@ -165,28 +182,16 @@ export const Field = styled(FieldLayout)<FieldPropsInternal>`
   ${InputArea} {
     display: flex;
     grid-area: input;
+    align-items: center;
   }
 
   ${MessageArea} {
     grid-area: messages;
   }
 
-  ${Label} {
+  & > ${Label} {
     grid-area: label;
-
-    ${({ inline, theme }) =>
-      inline
-        ? `
-      text-align: right;
-      line-height: ${inputHeight};
-      justify-self: end;
-      height: ${inputHeight};
-      padding-right: ${theme.space.small};
-      `
-        : `
-        padding-bottom: ${theme.space.xsmall};
-
-      `}
+    ${({ inline }) => fieldLabelCSS(inline)}
   }
 
   ${FieldDetail} {
@@ -195,10 +200,8 @@ export const Field = styled(FieldLayout)<FieldPropsInternal>`
 
     ${({ inline, theme }) =>
       inline &&
-      `
-        align-self: center;
-        padding-left: ${theme.space.small};
-      `}
+      ` align-self: center;
+        padding-left: ${theme.space.small}; `}
   }
 
   ${ValidationMessage} {

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

@@ -24,7 +24,6 @@ exports[`A FieldCheckbox 1`] = `
 }
 
 .c4 {
-  margin: 3px;
   display: inline-block;
   height: 1rem;
   position: relative;
@@ -69,7 +68,6 @@ exports[`A FieldCheckbox 1`] = `
   color: #343C42;
   font-size: 0.75rem;
   font-weight: 600;
-  display: inline-block;
 }
 
 .c0 {
@@ -176,7 +174,6 @@ exports[`A FieldCheckbox with checked value 1`] = `
 }
 
 .c4 {
-  margin: 3px;
   display: inline-block;
   height: 1rem;
   position: relative;
@@ -221,7 +218,6 @@ exports[`A FieldCheckbox with checked value 1`] = `
   color: #343C42;
   font-size: 0.75rem;
   font-weight: 600;
-  display: inline-block;
 }
 
 .c0 {

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

@@ -37,7 +37,6 @@ import { useID, useWrapEvent } from '../../../utils'
 import { usePopover, PopoverContent } from '../../../Popover'
 import { InputText, InputTextProps } from '../../Inputs/InputText'
 import { Field, FieldProps, omitFieldProps, pickFieldProps } from '../Field'
-import { FormControl } from '../../FormControl'
 import { useFormContext } from '../../Form'
 import {
   HueSaturation,
@@ -186,36 +185,34 @@ export const FieldColorComponent = forwardRef(
         id={inputID}
         validationMessage={validationMessage}
       >
-        <FormControl alignLabel="left">
-          <Swatch
-            ref={triggerRef}
-            color={hsv2hex(color)}
-            borderRadius={hideInput ? 'medium' : 'none'}
-            borderTopLeftRadius="medium"
-            borderBottomLeftRadius="medium"
-            border="1px solid"
-            borderRight={hideInput ? undefined : 'none'}
-            disabled={props.disabled}
-            onClick={open}
+        <Swatch
+          ref={triggerRef}
+          color={hsv2hex(color)}
+          borderRadius={hideInput ? 'medium' : 'none'}
+          borderTopLeftRadius="medium"
+          borderBottomLeftRadius="medium"
+          border="1px solid"
+          borderRight={hideInput ? undefined : 'none'}
+          disabled={props.disabled}
+          onClick={open}
+        />
+        {!props.disabled && popover}
+        {!hideInput && (
+          <InputText
+            {...omitFieldProps(props)}
+            aria-describedby={`${id}-describedby`}
+            id={inputID}
+            ref={ref}
+            borderRadius="none"
+            borderTopRightRadius="medium"
+            borderBottomRightRadius="medium"
+            validationType={validationMessage && validationMessage.type}
+            onChange={handleInputTextChange}
+            value={inputTextValue}
+            onFocus={wrappedOnFocus}
+            onBlur={wrappedOnBlur}
           />
-          {!props.disabled && popover}
-          {!hideInput && (
-            <InputText
-              {...omitFieldProps(props)}
-              aria-describedby={`${id}-describedby`}
-              id={inputID}
-              ref={ref}
-              borderRadius="none"
-              borderTopRightRadius="medium"
-              borderBottomRightRadius="medium"
-              validationType={validationMessage && validationMessage.type}
-              onChange={handleInputTextChange}
-              value={inputTextValue}
-              onFocus={wrappedOnFocus}
-              onBlur={wrappedOnBlur}
-            />
-          )}
-        </FormControl>
+        )}
       </Field>
     )
   }

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

@@ -26,7 +26,6 @@ exports[`A FieldRadio 1`] = `
 }
 
 .c4 {
-  margin: 3px;
   display: inline-block;
   height: 1rem;
   position: relative;
@@ -74,7 +73,6 @@ exports[`A FieldRadio 1`] = `
   color: #343C42;
   font-size: 0.75rem;
   font-weight: 600;
-  display: inline-block;
 }
 
 .c0 {
@@ -168,7 +166,6 @@ exports[`A FieldRadio checked 1`] = `
 }
 
 .c4 {
-  margin: 3px;
   display: inline-block;
   height: 1rem;
   position: relative;
@@ -216,7 +213,6 @@ exports[`A FieldRadio checked 1`] = `
   color: #343C42;
   font-size: 0.75rem;
   font-weight: 600;
-  display: inline-block;
 }
 
 .c0 {