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

[git-nandor]

INSTUI-4399

Summary

• Add an optional margin prop (Spacing) to the v2 versions of FormFieldGroup, CheckboxGroup, RadioInputGroup, Checkbox, RadioInput, RangeInput, Text, and ToggleButton.
• Text / Checkbox / RadioInput resolve it directly in their styles via calcSpacingFromShorthand(margin, { ...sharedTokens.spacing, ...sharedTokens.legacy.spacing }); the rest forward it to an already margin-capable child (ToggleButton→IconButton, RangeInput→FormField, groups→FormFieldGroup/FormFieldLayout).
• Accepts current dot-path spacing tokens (e.g. general.spaceMd), CSS-like 1–4 value shorthand, and raw CSS values; documented via each component's props table and, for Text, a dedicated "Margin" section.

Test Plan

• Paste and try the snippet below into any v11_7 playground:

const MarginDemo = () => {
  // Try any token from the Layout Spacing guide, a custom value, or shorthand
  const demoMargin = 'general.spaceLg'

  const icon = (
    <svg width="1em" height="1em" viewBox="0 0 16 16" aria-hidden="true">
      <circle cx="8" cy="8" r="7" fill="currentColor" />
    </svg>
  )

  // Left = default, right = same component with `margin`.
  // The border box makes the whitespace the margin adds clearly visible.
  const Compare = ({ label, build }) => (
    <View as="div" display="block" margin="0 0 general.spaceLg">
      <Text weight="bold">{label}</Text>
      <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'flex-start', flexWrap: 'wrap', marginTop: '0.5rem' }}>
        <View as="div" display="flex" borderWidth="small" background="secondary">
          {build(undefined)}
        </View>
        <View as="div" display="flex" borderWidth="small" background="secondary">
          {build(demoMargin)}
        </View>
      </div>
    </View>
  )

  return (
    <div>
      <Compare label="Text" build={(m) => <Text margin={m}>Sample text</Text>} />

      <Compare label="ToggleButton" build={(m) => (
        <ToggleButton
          margin={m}
          screenReaderLabel="Toggle"
          renderTooltipContent="Toggle"
          renderIcon={icon}
          status="unpressed"
        />
      )} />

      <Compare label="Checkbox" build={(m) => (
        <Checkbox margin={m} label="Checkbox" value="c" />
      )} />

      <Compare label="RadioInput" build={(m) => (
        <RadioInput margin={m} label="RadioInput" value="r" name={m ? 'r-margin' : 'r-base'} />
      )} />

      <Compare label="RangeInput" build={(m) => (
        <RangeInput margin={m} label="RangeInput" name={m ? 'rng-margin' : 'rng-base'} min={0} max={100} defaultValue={50} />
      )} />

      <Compare label="CheckboxGroup" build={(m) => (
        <CheckboxGroup margin={m} name={m ? 'cg-margin' : 'cg-base'} description="CheckboxGroup">
          <Checkbox label="One" value="1" />
          <Checkbox label="Two" value="2" />
        </CheckboxGroup>
      )} />

      <Compare label="RadioInputGroup" build={(m) => (
        <RadioInputGroup margin={m} name={m ? 'rg-margin' : 'rg-base'} description="RadioInputGroup">
          <RadioInput label="One" value="1" />
          <RadioInput label="Two" value="2" />
        </RadioInputGroup>
      )} />

      <Compare label="FormFieldGroup" build={(m) => (
        <FormFieldGroup margin={m} description="FormFieldGroup">
          <TextInput renderLabel="Field" />
        </FormFieldGroup>
      )} />
    </div>
  )
}

render(<MarginDemo />)

🤖 Generated with Claude Code

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2662/
Built to branch gh-pages at 2026-07-28 08:11 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

⚠️ Changes detected.

Status	Count
Unchanged	0
Changed	1
New	96
Removed	32

📊 View full report

Diff images (33)

alert.png — baseline no longer produced

avatar.png — baseline no longer produced

badge.png — baseline no longer produced

billboard.png — baseline no longer produced

breadcrumb.png — baseline no longer produced

button-and-derivatives.png — baseline no longer produced

byline.png — baseline no longer produced

calendar.png — baseline no longer produced

checkbox.png — baseline no longer produced

checkboxgroup.png — baseline no longer produced

colorpicker.png — baseline no longer produced

contextview.png — baseline no longer produced

custom-and-lucide-icons.png — baseline no longer produced

dateinput-dateinput2.png — baseline no longer produced

datetimeinput.png — baseline no longer produced

diff-demo.png — 6324 pixels differ

drilldown.png — baseline no longer produced

filedrop.png — baseline no longer produced

form-errors.png — baseline no longer produced

heading.png — baseline no longer produced

img.png — baseline no longer produced

link.png — baseline no longer produced

menu.png — baseline no longer produced

metric-pill-tag-timeselect-text.png — baseline no longer produced

options.png — baseline no longer produced

pagination.png — baseline no longer produced

progressbar.png — baseline no longer produced

select-simpleselect.png — baseline no longer produced

table.png — baseline no longer produced

tabs.png — baseline no longer produced

tooltip.png — baseline no longer produced

treebrowser.png — baseline no longer produced

view.png — baseline no longer produced

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}