[v12] InstUI-4399 add margin props

[git-nandor]

INSTUI-4399

Summary

This PR adds a new margin prop to multiple components to provide consistent and customizable spacing control across the UI.

Components Updated:
-FormFieldGroup
-CheckboxGroup
-RadioInputGroup
-Checkbox
-RadioInput
-RangeInput
-Text
-ToggleButton

Test plan

On the doc page try to add margin prop for the components, it should accept spacing
tokens (e.g. 'space16'), legacy values (e.g. 'large'), and custom CSS values (e.g. '10px').

<FormFieldGroup
  margin="2rem"
  description="Fruits"
  rowSpacing="large"
  messages={[
  { text: 'Complete All Fields', type: 'error' }
  ]}
>
  <RadioInputGroup
    margin="20px"
    name="fruit3"
    defaultValue="banana"
    description={
      <ScreenReaderContent>Select a fruit</ScreenReaderContent>
    }
  >
    <RadioInput margin="small" label="Apple" value="apple" />
    <RadioInput margin="20px" label="Orange" value="orange" />
    <RadioInput margin="space24" label="Banana" value="banana" />
  </RadioInputGroup>

</FormFieldGroup>

[github-actions]

PR Preview Action v1.6.2
🚀 View preview at https://instructure.design/pr-preview/pr-2212/
Built to branch gh-pages at 2025-11-03 16:32 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[Copilot]

Pull Request Overview

This PR adds a margin prop to multiple form and input components to allow consumers to control spacing around these components. The margin prop accepts Spacing tokens (e.g., "small", "large", "space4") as well as custom CSS values (e.g., "30px", "small 20px").

Key changes:

• Added margin prop to Text, RangeInput, RadioInput, RadioInputGroup, Checkbox, CheckboxGroup, FormFieldGroup, and ToggleButton components
• Implemented margin handling using mapSpacingToShorthand utility for components with their own styles
• For components using FormFieldLayout, margin is passed through via pickProps
• Added comprehensive tests for all components with custom CSS values and theme tokens
• Updated theme files to include spacing object for margin calculation

Reviewed Changes

Copilot reviewed 25 out of 26 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/ui-text/src/Text/theme.ts	Adds spacing object to theme for margin token resolution
packages/ui-text/src/Text/styles.ts	Implements margin prop with mapSpacingToShorthand utility
packages/ui-text/src/Text/props.ts	Adds margin prop definition and documentation
packages/ui-text/src/Text/tests/Text.test.tsx	Adds tests for margin with tokens and custom values
packages/ui-range-input/src/RangeInput/props.ts	Adds margin prop definition (passed to FormField)
packages/ui-range-input/src/RangeInput/tests/RangeInput.test.tsx	Adds margin tests
packages/ui-radio-input/src/RadioInputGroup/props.ts	Adds margin prop definition (passed to FormFieldGroup)
packages/ui-radio-input/src/RadioInputGroup/tests/RadioInputGroup.test.tsx	Adds margin tests
packages/ui-radio-input/src/RadioInput/theme.ts	Adds spacing object to theme
packages/ui-radio-input/src/RadioInput/styles.ts	Implements margin with mapSpacingToShorthand
packages/ui-radio-input/src/RadioInput/props.ts	Adds margin prop definition
packages/ui-radio-input/src/RadioInput/tests/RadioInput.test.tsx	Adds margin tests
packages/ui-form-field/src/FormFieldGroup/props.ts	Adds margin prop definition (passed to FormFieldLayout)
packages/ui-form-field/src/FormFieldGroup/tests/FormFieldGroup.test.tsx	Adds margin tests
packages/ui-file-drop/src/FileDrop/tests/FileDrop.test.tsx	Updates import to use act from @testing-library/react
packages/ui-checkbox/src/CheckboxGroup/props.ts	Adds margin prop definition (passed to FormFieldGroup)
packages/ui-checkbox/src/CheckboxGroup/tests/CheckboxGroup.test.tsx	Adds margin tests
packages/ui-checkbox/src/Checkbox/theme.ts	Adds spacing object to theme
packages/ui-checkbox/src/Checkbox/styles.ts	Implements margin with mapSpacingToShorthand and removes trailing comma
packages/ui-checkbox/src/Checkbox/props.ts	Adds margin prop definition
packages/ui-checkbox/src/Checkbox/tests/Checkbox.test.tsx	Adds margin tests
packages/ui-buttons/src/ToggleButton/props.ts	Adds margin prop definition
packages/ui-buttons/src/ToggleButton/index.tsx	Passes margin to IconButton
packages/ui-buttons/src/ToggleButton/tests/ToggleButton.test.tsx	Adds margin tests (tokens only)
packages/shared-types/src/ComponentThemeVariables.ts	Adds spacing property to RadioInputTheme and TextTheme

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[matyasf]

Text is behaving strangely, it just addsa left margin, is this the correct behaviour?

<div>
  <Text margin="space48" color="primary">I&#39;m primary text</Text><br/>
  <Text color="secondary">I&#39;m secondary text</Text><br/>
  <Text color="brand">I&#39;m brand text</Text><br />
  <Text color="success">I&#39;m success text</Text><br/>
  <Text margin="space24" color="warning">I&#39;m warning text</Text><br />
  <Text color="danger">I&#39;m danger text</Text><br />
  <Text color="ai-highlight">I&#39;m a highlighted text (by AI)</Text><br />
  <Text color="alert">I&#39;m alert text - DEPRECATED - DO NOT USE</Text>
</div>

otherwise it looks good. But this needs to be rebased to the v12 branch, lets try to make minimal changes on v11