Improve internal form field spacing

seek-oss · Jul 17, 2024 · 31ea0e5 · 31ea0e5
1 parent 5f9132e
commit 31ea0e5
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 140 deletions.
diff --git a/.changeset/chilled-bulldogs-remember.md b/.changeset/chilled-bulldogs-remember.md
@@ -0,0 +1,17 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Checkbox
+  - CheckboxStandalone
+  - RadioItem
+  - Toggle
+---
+
+Refine the Checkbox, Radio & Toggle size
+
+Refines the size of the inline field elements including the `RadioItem`, `Checkbox` and `Toggle` components.
+
+Primarily impacts consumers of the `seekJobs` theme, seeing a reduction across all sizes.
diff --git a/.changeset/mighty-rats-sip.md b/.changeset/mighty-rats-sip.md
@@ -0,0 +1,25 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - Autosuggest
+  - Dropdown
+  - MonthPicker
+  - PasswordField
+  - TextField
+  - Textarea
+  - Checkbox
+  - RadioItem
+  - RadioGroup
+  - FieldLabel
+  - FieldMessage
+---
+
+Improve internal form field spacing
+
+Refined the spacing between internal elements of form fields to align with the latest spacing guidelines.
+
+This change impacts the `Stack` spacing between `label` and `description`, the form field itself and the `message` slots.
+
diff --git a/packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.tsx b/packages/braid-design-system/src/lib/components/FieldLabel/FieldLabel.tsx
@@ -41,7 +41,7 @@ export const FieldLabel = ({
   );
 
   return (
-    <Stack space="xsmall" data={data}>
+    <Stack space="small" data={data}>
       {label ? (
         <Box component="span" display="flex" justifyContent="spaceBetween">
           {htmlFor === false ? (
@@ -55,11 +55,9 @@ export const FieldLabel = ({
         </Box>
       ) : null}
       {description ? (
-        <Box paddingTop={label ? 'xxsmall' : undefined} paddingBottom="xxsmall">
-          <Text tone="secondary" id={descriptionId}>
-            {description}
-          </Text>
-        </Box>
+        <Text tone="secondary" id={descriptionId}>
+          {description}
+        </Text>
       ) : null}
     </Stack>
   );

diff --git a/packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.tsx b/packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.tsx
@@ -9,7 +9,6 @@ import {
 import { type RadioItemProps, RadioItem } from '../RadioGroup/RadioItem';
 import { type StackProps, Stack } from '../Stack/Stack';
 import { RadioGroupContext, RadioItemContext } from './RadioGroupContext';
-import { Box } from '../Box/Box';
 import type { InlineFieldProps } from '../private/InlineField/InlineField';
 
 export type RadioGroupBaseProps<Value = NonNullable<string | number>> =
@@ -29,8 +28,8 @@ export type RadioGroupProps<Value = NonNullable<string | number>> =
   RadioGroupBaseProps<Value> & RadioGroupLabelProps;
 
 const stackSpaceForSize = {
-  small: 'small',
-  standard: 'medium',
+  small: 'xsmall',
+  standard: 'small',
 } as Record<NonNullable<RadioGroupProps['size']>, StackProps['space']>;
 
 const RadioGroup = ({
@@ -45,7 +44,6 @@ const RadioGroup = ({
   ...props
 }: RadioGroupProps) => {
   const items = flattenChildren(children);
-  const labelSpace = props.description ? 'xxsmall' : 'xsmall';
 
   assert(
     items.every(
@@ -61,7 +59,6 @@ const RadioGroup = ({
       {...props}
       disabled={disabled}
       tone={tone}
-      space="small"
       role="radiogroup"
     >
       {(fieldGroupProps) => (
@@ -77,20 +74,13 @@ const RadioGroup = ({
             ...fieldGroupProps,
           }}
         >
-          <Box
-            paddingTop={'label' in props ? labelSpace : undefined}
-            paddingBottom={
-              props.message || props.reserveMessageSpace ? 'xsmall' : undefined
-            }
-          >
-            <Stack space={stackSpaceForSize[size || 'standard']}>
-              {items.map((item, i) => (
-                <RadioItemContext.Provider key={i} value={i}>
-                  {item}
-                </RadioItemContext.Provider>
-              ))}
-            </Stack>
-          </Box>
+          <Stack space={stackSpaceForSize[size || 'standard']}>
+            {items.map((item, i) => (
+              <RadioItemContext.Provider key={i} value={i}>
+                {item}
+              </RadioItemContext.Provider>
+            ))}
+          </Stack>
         </RadioGroupContext.Provider>
       )}
     </FieldGroup>

diff --git a/packages/braid-design-system/src/lib/components/private/Field/Field.tsx b/packages/braid-design-system/src/lib/components/private/Field/Field.tsx
@@ -151,7 +151,7 @@ export const Field = ({
   const fieldPadding = 'small';
 
   return (
-    <Stack space="xsmall">
+    <Stack space="small">
       {hasVisualLabelOrDescription ? (
         <FieldLabel
           htmlFor={id}
@@ -168,116 +168,118 @@ export const Field = ({
         />
       ) : null}
 
-      <Box
-        position="relative"
-        background={fieldBackground}
-        borderRadius="standard"
-        display="flex"
-        className={showSecondaryIcon ? styles.secondaryIconSpace : undefined}
-      >
-        {children(
-          overlays,
-          {
-            id,
-            name,
-            background: fieldBackground,
-            width: 'full',
-            paddingLeft: fieldPadding,
-            paddingRight: showSecondaryIcon ? undefined : fieldPadding,
-            borderRadius: 'standard',
-            outline: 'none',
-            'aria-describedby': mergeIds(
-              ariaDescribedBy,
-              message || secondaryMessage ? messageId : undefined,
-              descriptionId,
-            ),
-            'aria-required': required,
-            ...('aria-label' in restProps
-              ? { 'aria-label': restProps['aria-label'] }
-              : {}),
-            ...('aria-labelledby' in restProps
-              ? { 'aria-labelledby': restProps['aria-labelledby'] }
-              : {}),
-            disabled,
-            autoComplete,
-            autoFocus,
-            ...buildDataAttributes({ data, validateRestProps: restProps }),
-            className: clsx(
-              styles.field,
-              styles.placeholderColor,
-              textStyles({
-                tone: hasValue && !disabled ? 'neutral' : 'secondary',
-                size: 'standard',
-                baseline: false,
-              }),
-              touchableText.standard,
-              icon && !prefix ? styles.iconSpace : null,
-            ),
-          },
-          icon ? (
-            <Box
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-              position="absolute"
-              height="touchable"
-              width="touchable"
-              pointerEvents="none"
-              top={0}
-              left={0}
-            >
-              <Text baseline={false} tone={prefix ? 'secondary' : undefined}>
-                {icon}
-              </Text>
-            </Box>
-          ) : null,
-          secondaryIcon ? (
-            <Box
-              component="span"
-              position="absolute"
-              width="touchable"
-              height="touchable"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-              top={0}
-              right={0}
-            >
-              {secondaryIcon}
-            </Box>
-          ) : null,
-          prefix ? (
-            <Box
-              component="label"
-              htmlFor={id}
-              display="flex"
-              alignItems="center"
-              paddingLeft={icon ? undefined : fieldPadding}
-              height="touchable"
-              flexShrink={0}
-              className={icon ? styles.iconSpace : null}
-            >
-              <Text tone="secondary" baseline={false}>
-                {prefix}
-              </Text>
-              <Box padding={fieldPadding} paddingRight="none" height="full">
-                <Box height="full" className={styles.verticalDivider} />
+      <Stack space="xsmall">
+        <Box
+          position="relative"
+          background={fieldBackground}
+          borderRadius="standard"
+          display="flex"
+          className={showSecondaryIcon ? styles.secondaryIconSpace : undefined}
+        >
+          {children(
+            overlays,
+            {
+              id,
+              name,
+              background: fieldBackground,
+              width: 'full',
+              paddingLeft: fieldPadding,
+              paddingRight: showSecondaryIcon ? undefined : fieldPadding,
+              borderRadius: 'standard',
+              outline: 'none',
+              'aria-describedby': mergeIds(
+                ariaDescribedBy,
+                message || secondaryMessage ? messageId : undefined,
+                descriptionId,
+              ),
+              'aria-required': required,
+              ...('aria-label' in restProps
+                ? { 'aria-label': restProps['aria-label'] }
+                : {}),
+              ...('aria-labelledby' in restProps
+                ? { 'aria-labelledby': restProps['aria-labelledby'] }
+                : {}),
+              disabled,
+              autoComplete,
+              autoFocus,
+              ...buildDataAttributes({ data, validateRestProps: restProps }),
+              className: clsx(
+                styles.field,
+                styles.placeholderColor,
+                textStyles({
+                  tone: hasValue && !disabled ? 'neutral' : 'secondary',
+                  size: 'standard',
+                  baseline: false,
+                }),
+                touchableText.standard,
+                icon && !prefix ? styles.iconSpace : null,
+              ),
+            },
+            icon ? (
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                position="absolute"
+                height="touchable"
+                width="touchable"
+                pointerEvents="none"
+                top={0}
+                left={0}
+              >
+                <Text baseline={false} tone={prefix ? 'secondary' : undefined}>
+                  {icon}
+                </Text>
               </Box>
-            </Box>
-          ) : null,
-        )}
-      </Box>
+            ) : null,
+            secondaryIcon ? (
+              <Box
+                component="span"
+                position="absolute"
+                width="touchable"
+                height="touchable"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+                top={0}
+                right={0}
+              >
+                {secondaryIcon}
+              </Box>
+            ) : null,
+            prefix ? (
+              <Box
+                component="label"
+                htmlFor={id}
+                display="flex"
+                alignItems="center"
+                paddingLeft={icon ? undefined : fieldPadding}
+                height="touchable"
+                flexShrink={0}
+                className={icon ? styles.iconSpace : null}
+              >
+                <Text tone="secondary" baseline={false}>
+                  {prefix}
+                </Text>
+                <Box padding={fieldPadding} paddingRight="none" height="full">
+                  <Box height="full" className={styles.verticalDivider} />
+                </Box>
+              </Box>
+            ) : null,
+          )}
+        </Box>
 
-      {message || secondaryMessage || reserveMessageSpace ? (
-        <FieldMessage
-          id={messageId}
-          tone={tone}
-          disabled={disabled}
-          message={message}
-          secondaryMessage={secondaryMessage}
-          reserveMessageSpace={reserveMessageSpace}
-        />
-      ) : null}
+        {message || secondaryMessage || reserveMessageSpace ? (
+          <FieldMessage
+            id={messageId}
+            tone={tone}
+            disabled={disabled}
+            message={message}
+            secondaryMessage={secondaryMessage}
+            reserveMessageSpace={reserveMessageSpace}
+          />
+        ) : null}
+      </Stack>
     </Stack>
   );
 };