feat(many): add margin prop to FormFieldGroup, CheckboxGroup, RadioInputGroup, Checkbox, RadioInput, RangeInput, Text, and ToggleButton

Author: git-nandor

package-lock.json

@@ -1203,6 +1203,7 @@ export type RadioInputTheme = {
   toggleSmallFontSize: Typography['fontSizeXSmall']
   toggleMediumFontSize: Typography['fontSizeSmall']
   toggleLargeFontSize: Typography['fontSizeMedium']
+  spacing: any // TODO remove any
 }
 
 export type RangeInputTheme = {
@@ -1460,9 +1461,9 @@ export type TextTheme = Typography & {
   alertColor: string
   warningColor: string
   aiColor: string
-
   aiBackgroundColor: string
   paragraphMargin: string | 0
+  spacing: any // TODO remove any
 }
 
 export type TextAreaTheme = {

packages/shared-types/src/ComponentThemeVariables.ts

@@ -197,4 +197,59 @@ describe('<ToggleButton />', () => {
       expect(onClick).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('margin prop', () => {
+    it('should apply margin with theme tokens', () => {
+      const { container } = render(
+        <div>
+          <ToggleButton
+            screenReaderLabel="test1"
+            renderIcon={icon}
+            renderTooltipContent="tooltip"
+            status="unpressed"
+            margin="medium"
+          />
+          <ToggleButton
+            screenReaderLabel="test2"
+            renderIcon={icon}
+            renderTooltipContent="tooltip"
+            status="unpressed"
+            margin="large"
+          />
+          <ToggleButton
+            screenReaderLabel="test3"
+            renderIcon={icon}
+            renderTooltipContent="tooltip"
+            status="unpressed"
+            margin="space4"
+          />
+          <ToggleButton
+            screenReaderLabel="test4"
+            renderIcon={icon}
+            renderTooltipContent="tooltip"
+            status="unpressed"
+            margin="small medium"
+          />
+        </div>
+      )
+
+      const allButtons = container.querySelectorAll('button')
+
+      const buttonMedium = allButtons[0] as HTMLElement
+      const buttonMediumStyle = window.getComputedStyle(buttonMedium)
+      const buttonLarge = allButtons[1] as HTMLElement
+      const buttonLargeStyle = window.getComputedStyle(buttonLarge)
+      const buttonSpace = allButtons[2] as HTMLElement
+      const buttonSpaceStyle = window.getComputedStyle(buttonSpace)
+      const buttonMixed = allButtons[3] as HTMLElement
+      const buttonMixedStyle = window.getComputedStyle(buttonMixed)
+
+      // Note: ToggleButton passes margin to IconButton, which uses View component
+      // View only accepts theme tokens, not custom CSS values
+      expect(buttonMediumStyle.margin).toBe('1.5rem')
+      expect(buttonLargeStyle.margin).toBe('2.25rem')
+      expect(buttonSpaceStyle.margin).toBe('0.25rem')
+      expect(buttonMixedStyle.margin).toBe('0.75rem 1.5rem')
+    })
+  })
 })

packages/ui-buttons/src/ToggleButton/__tests__/ToggleButton.test.tsx

@@ -90,6 +90,7 @@ class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
       status,
       placement,
       onClick,
+      margin,
       ...props
     } = this.props
 
@@ -122,6 +123,7 @@ class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
           interaction={interaction}
           aria-pressed={status === 'pressed'}
           data-cid="ToggleButton"
+          margin={margin}
         >
           {callRenderProp(renderIcon)}
         </IconButton>

packages/ui-buttons/src/ToggleButton/index.tsx

@@ -35,6 +35,7 @@ import type {
 } from '@instructure/ui-position'
 import type { ViewProps } from '@instructure/ui-view'
 import { Renderable } from '@instructure/shared-types'
+import type { Spacing } from '@instructure/emotion'
 
 type ToggleButtonOwnProps = {
   /**
@@ -110,6 +111,11 @@ type ToggleButtonOwnProps = {
    * or a function returning an element.
    */
   constrain?: PositionConstraint
+
+  /**
+   * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
 }
 
 type PropKeys = keyof ToggleButtonOwnProps
@@ -129,6 +135,7 @@ const allowedProps: AllowedPropKeys = [
   'elementRef',
   'interaction',
   'isShowingTooltip',
+  'margin',
   'mountNode',
   'onClick',
   'placement',

packages/ui-buttons/src/ToggleButton/props.ts

@@ -245,4 +245,33 @@ describe('<Checkbox />', () => {
       expect(axeCheck).toBe(true)
     })
   })
+
+  describe('margin prop', () => {
+    it('should apply margin with custom CSS value and with tokens', () => {
+      const { container } = render(
+        <div>
+          <Checkbox label="test1" margin="30px" />
+          <Checkbox label="test2" margin="large" />
+          <Checkbox label="test3" margin="space4" />
+          <Checkbox label="test4" margin="small 20px" />
+        </div>
+      )
+
+      const allCheckboxes = container.querySelectorAll('[data-cid="Checkbox"]')
+
+      const checkboxCustom = allCheckboxes[0] as HTMLElement
+      const checkboxCustomStyle = window.getComputedStyle(checkboxCustom)
+      const checkboxLarge = allCheckboxes[1] as HTMLElement
+      const checkboxLargeStyle = window.getComputedStyle(checkboxLarge)
+      const checkboxSpace = allCheckboxes[2] as HTMLElement
+      const checkboxSpaceStyle = window.getComputedStyle(checkboxSpace)
+      const checkboxMixed = allCheckboxes[3] as HTMLElement
+      const checkboxMixedStyle = window.getComputedStyle(checkboxMixed)
+
+      expect(checkboxCustomStyle.margin).toBe('30px')
+      expect(checkboxLargeStyle.margin).toBe('2.25rem')
+      expect(checkboxSpaceStyle.margin).toBe('0.25rem')
+      expect(checkboxMixedStyle.margin).toBe('0.75rem 20px')
+    })
+  })
 })

packages/ui-checkbox/src/Checkbox/__tests__/Checkbox.test.tsx

@@ -28,7 +28,11 @@ import type {
   OtherHTMLAttributes,
   ToggleFacadeTheme
 } from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  WithStyleProps,
+  ComponentStyle,
+  Spacing
+} from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type CheckboxOwnProps = {
@@ -74,6 +78,10 @@ type CheckboxOwnProps = {
   inline?: boolean
   labelPlacement?: 'top' | 'start' | 'end'
   isRequired?: boolean
+  /**
+   * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
   /**
    * A function that provides a reference to the actual underlying input element
    */
@@ -119,6 +127,7 @@ const allowedProps: AllowedPropKeys = [
   'inline',
   'labelPlacement',
   'isRequired',
+  'margin',
   'inputRef'
 ]
 

packages/ui-checkbox/src/Checkbox/props.ts

@@ -24,6 +24,7 @@
 
 import type { CheckboxProps, CheckboxStyle } from './props'
 import type { ComponentTheme } from '@instructure/shared-types'
+import { mapSpacingToShorthand } from '@instructure/emotion'
 
 /**
  * ---
@@ -39,7 +40,16 @@ const generateStyle = (
   componentTheme: ComponentTheme,
   props: CheckboxProps
 ): CheckboxStyle => {
-  const { inline, disabled } = props
+  const { inline, disabled, margin } = props
+
+  // Calculate margin and support both theme token values like "space4" and custom values like "10px"
+  const cssMargin = margin
+    ? mapSpacingToShorthand(
+        margin,
+        (componentTheme as ComponentTheme & { spacing: Record<string, string> })
+          .spacing
+      )
+    : undefined
 
   return {
     requiredInvalid: {
@@ -49,12 +59,13 @@ const generateStyle = (
       paddingLeft: componentTheme.checkErrorInsetWidth
     },
     indentedToggleError: {
-      paddingLeft: componentTheme.toggleErrorInsetWidth,
+      paddingLeft: componentTheme.toggleErrorInsetWidth
     },
     checkbox: {
       label: 'checkbox',
       position: 'relative',
       width: '100%',
+      ...(margin && { margin: cssMargin }),
       ...(disabled && {
         cursor: 'not-allowed',
         pointerEvents: 'none',

packages/ui-checkbox/src/Checkbox/styles.ts

@@ -36,6 +36,7 @@ const generateComponentTheme = (theme: Theme): any => {
     requiredInvalidColor: colors?.contrasts?.red5782,
     toggleErrorInsetWidth: `calc(${forms?.inputHeightSmall}*1.5 + ${spacing?.small})`,
     checkErrorInsetWidth: `calc(1.25em + ${spacing?.xSmall})`,
+    spacing: spacing
   }
 
   return {

packages/ui-checkbox/src/Checkbox/theme.ts

@@ -233,4 +233,49 @@ describe('<CheckboxGroup />', () => {
       expect(group).not.toHaveAttribute('aria-invalid')
     })
   })
+
+  describe('margin prop', () => {
+    it('should apply margin with custom CSS value and with tokens', () => {
+      const { container } = render(
+        <div>
+          <CheckboxGroup name="group1" description="Group 1" margin="30px">
+            <Checkbox label="Option 1" value="1" />
+            <Checkbox label="Option 2" value="2" />
+          </CheckboxGroup>
+          <CheckboxGroup name="group2" description="Group 2" margin="large">
+            <Checkbox label="Option 1" value="1" />
+            <Checkbox label="Option 2" value="2" />
+          </CheckboxGroup>
+          <CheckboxGroup name="group3" description="Group 3" margin="small">
+            <Checkbox label="Option 1" value="1" />
+            <Checkbox label="Option 2" value="2" />
+          </CheckboxGroup>
+          <CheckboxGroup
+            name="group4"
+            description="Group 4"
+            margin="small 20px"
+          >
+            <Checkbox label="Option 1" value="1" />
+            <Checkbox label="Option 2" value="2" />
+          </CheckboxGroup>
+        </div>
+      )
+
+      const allFieldsets = container.querySelectorAll('fieldset')
+
+      const fieldsetCustom = allFieldsets[0] as HTMLElement
+      const fieldsetCustomStyle = window.getComputedStyle(fieldsetCustom)
+      const fieldsetLarge = allFieldsets[1] as HTMLElement
+      const fieldsetLargeStyle = window.getComputedStyle(fieldsetLarge)
+      const fieldsetSmall = allFieldsets[2] as HTMLElement
+      const fieldsetSmallStyle = window.getComputedStyle(fieldsetSmall)
+      const fieldsetMixed = allFieldsets[3] as HTMLElement
+      const fieldsetMixedStyle = window.getComputedStyle(fieldsetMixed)
+
+      expect(fieldsetCustomStyle.margin).toBe('30px')
+      expect(fieldsetLargeStyle.margin).toBe('2.25rem')
+      expect(fieldsetSmallStyle.margin).toBe('0.75rem')
+      expect(fieldsetMixedStyle.margin).toBe('0.75rem 20px')
+    })
+  })
 })