From 31ea0e5ddb3833726a3d42c2b464066bd79c53ea Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Thu, 18 Jul 2024 08:22:56 +1000 Subject: [PATCH] Improve internal form field spacing --- .changeset/chilled-bulldogs-remember.md | 17 ++ .changeset/mighty-rats-sip.md | 25 ++ .../lib/components/FieldLabel/FieldLabel.tsx | 10 +- .../lib/components/RadioGroup/RadioGroup.tsx | 28 +-- .../lib/components/private/Field/Field.tsx | 220 +++++++++--------- .../private/FieldGroup/FieldGroup.tsx | 6 +- .../private/InlineField/InlineField.tsx | 2 +- .../src/lib/themes/makeVanillaTheme.ts | 4 +- 8 files changed, 172 insertions(+), 140 deletions(-) create mode 100644 .changeset/chilled-bulldogs-remember.md create mode 100644 .changeset/mighty-rats-sip.md diff --git a/.changeset/chilled-bulldogs-remember.md b/.changeset/chilled-bulldogs-remember.md new file mode 100644 index 00000000000..03720d31973 --- /dev/null +++ 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 new file mode 100644 index 00000000000..c181f08c173 --- /dev/null +++ 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 index 501da4b88f1..5e512bdb72b 100644 --- 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 ( - + {label ? ( {htmlFor === false ? ( @@ -55,11 +55,9 @@ export const FieldLabel = ({ ) : null} {description ? ( - - - {description} - - + + {description} + ) : null} ); diff --git a/packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.tsx b/packages/braid-design-system/src/lib/components/RadioGroup/RadioGroup.tsx index 310b2ce6961..2fb6a7980b4 100644 --- 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> = @@ -29,8 +28,8 @@ export type RadioGroupProps> = RadioGroupBaseProps & RadioGroupLabelProps; const stackSpaceForSize = { - small: 'small', - standard: 'medium', + small: 'xsmall', + standard: 'small', } as Record, 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, }} > - - - {items.map((item, i) => ( - - {item} - - ))} - - + + {items.map((item, i) => ( + + {item} + + ))} + )} 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 index 7384ae1adc2..6434a055aa5 100644 --- 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 ( - + {hasVisualLabelOrDescription ? ( ) : null} - - {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 ? ( - - - {icon} - - - ) : null, - secondaryIcon ? ( - - {secondaryIcon} - - ) : null, - prefix ? ( - - - {prefix} - - - + + + {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 ? ( + + + {icon} + - - ) : null, - )} - + ) : null, + secondaryIcon ? ( + + {secondaryIcon} + + ) : null, + prefix ? ( + + + {prefix} + + + + + + ) : null, + )} + - {message || secondaryMessage || reserveMessageSpace ? ( - - ) : null} + {message || secondaryMessage || reserveMessageSpace ? ( + + ) : null} + ); }; diff --git a/packages/braid-design-system/src/lib/components/private/FieldGroup/FieldGroup.tsx b/packages/braid-design-system/src/lib/components/private/FieldGroup/FieldGroup.tsx index 4cabdba7334..736740bfec4 100644 --- a/packages/braid-design-system/src/lib/components/private/FieldGroup/FieldGroup.tsx +++ b/packages/braid-design-system/src/lib/components/private/FieldGroup/FieldGroup.tsx @@ -5,7 +5,7 @@ import { type FieldMessageProps, FieldMessage, } from '../../FieldMessage/FieldMessage'; -import { type StackProps, Stack } from '../../Stack/Stack'; +import { Stack } from '../../Stack/Stack'; import buildDataAttributes, { type DataAttributeMap, } from '../buildDataAttributes'; @@ -50,7 +50,6 @@ interface FieldGroupRenderProps { type InternalFieldGroupProps = FieldGroupBaseProps & FieldLabelVariant & { role?: FormElementProps['role']; - space?: StackProps['space']; children(props: FieldGroupRenderProps): ReactNodeNoStrings; }; @@ -66,7 +65,6 @@ export const FieldGroup = ({ tone, required, role, - space = 'xsmall', data, ...restProps }: InternalFieldGroupProps) => { @@ -95,7 +93,7 @@ export const FieldGroup = ({ aria-required={required} {...buildDataAttributes({ data, validateRestProps: restProps })} > - + {('label' in restProps && restProps.label) || description ? ( - + { ); const getInlineFieldSize = (size: 'standard' | 'small') => { - const scale = parseInt(textSize[size].mobile.lineHeight, 10) / 42; + const scale = + parseInt(textSize[size].mobile.lineHeight, 10) / + (tokens.touchableSize * tokens.grid); return px(tokens.grid * Math.round(tokens.touchableSize * scale)); };