+ }
+ ).spacing
+ )
+ : undefined
const getInputStateSelector = (state: 'hover' | 'focus' | 'checked') =>
`[class$=-radioInput__input]:${state} + [class$=-radioInput__control] &`
@@ -261,6 +274,7 @@ const generateStyle = (
label: 'radioInput',
position: 'relative',
width: '100%',
+ ...(margin && { margin: cssMargin }),
...(disabled && { opacity: 0.5 }),
...(inline && {
display: 'inline-block',
diff --git a/packages/ui-radio-input/src/RadioInput/theme.ts b/packages/ui-radio-input/src/RadioInput/theme.ts
index 3e856caf34..0d4faeef85 100644
--- a/packages/ui-radio-input/src/RadioInput/theme.ts
+++ b/packages/ui-radio-input/src/RadioInput/theme.ts
@@ -94,7 +94,8 @@ const generateComponentTheme = (theme: Theme): RadioInputTheme => {
// toggle font is uppercase, so sizes are smaller below
toggleSmallFontSize: typography?.fontSizeXSmall,
toggleMediumFontSize: typography?.fontSizeSmall,
- toggleLargeFontSize: typography?.fontSizeMedium
+ toggleLargeFontSize: typography?.fontSizeMedium,
+ spacing: spacing
}
return {
diff --git a/packages/ui-radio-input/src/RadioInputGroup/__tests__/RadioInputGroup.test.tsx b/packages/ui-radio-input/src/RadioInputGroup/__tests__/RadioInputGroup.test.tsx
index 0865fc56e2..4ebaddf683 100644
--- a/packages/ui-radio-input/src/RadioInputGroup/__tests__/RadioInputGroup.test.tsx
+++ b/packages/ui-radio-input/src/RadioInputGroup/__tests__/RadioInputGroup.test.tsx
@@ -230,4 +230,45 @@ describe('', () => {
expect(group).toHaveAttribute('aria-invalid', 'true')
expect(group).toHaveAttribute('aria-errormessage', expect.anything())
})
+
+ describe('margin prop', () => {
+ it('should apply margin with custom CSS value and with tokens', () => {
+ const { container } = render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+
+ 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 fieldsetSpace = allFieldsets[2] as HTMLElement
+ const fieldsetSpaceStyle = window.getComputedStyle(fieldsetSpace)
+ const fieldsetMixed = allFieldsets[3] as HTMLElement
+ const fieldsetMixedStyle = window.getComputedStyle(fieldsetMixed)
+
+ expect(fieldsetCustomStyle.margin).toBe('30px')
+ expect(fieldsetLargeStyle.margin).toBe('2.25rem')
+ expect(fieldsetSpaceStyle.margin).toBe('0.25rem')
+ expect(fieldsetMixedStyle.margin).toBe('0.75rem 20px')
+ })
+ })
})
diff --git a/packages/ui-radio-input/src/RadioInputGroup/props.ts b/packages/ui-radio-input/src/RadioInputGroup/props.ts
index cae9e6f354..ef48b997b1 100644
--- a/packages/ui-radio-input/src/RadioInputGroup/props.ts
+++ b/packages/ui-radio-input/src/RadioInputGroup/props.ts
@@ -24,7 +24,11 @@
import React from 'react'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+ WithStyleProps,
+ ComponentStyle,
+ Spacing
+} from '@instructure/emotion'
import type { FormMessage } from '@instructure/ui-form-field'
import type {
OtherHTMLAttributes,
@@ -92,6 +96,11 @@ type RadioInputGroupOwnProps = {
* Setting this to `true` adds and asterisk after the description (group label). It does not cause any behavioural change.
*/
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
}
type PropKeys = keyof RadioInputGroupOwnProps
@@ -121,7 +130,8 @@ const allowedProps: AllowedPropKeys = [
'variant',
'size',
'layout',
- 'isRequired'
+ 'isRequired',
+ 'margin'
]
export type { RadioInputGroupProps, RadioInputGroupState, RadioInputGroupStyle }
diff --git a/packages/ui-range-input/src/RangeInput/__tests__/RangeInput.test.tsx b/packages/ui-range-input/src/RangeInput/__tests__/RangeInput.test.tsx
index 9b680482ff..c57ec60667 100644
--- a/packages/ui-range-input/src/RangeInput/__tests__/RangeInput.test.tsx
+++ b/packages/ui-range-input/src/RangeInput/__tests__/RangeInput.test.tsx
@@ -231,4 +231,59 @@ describe('', () => {
expect(output).toHaveTextContent('40%')
})
})
+
+ describe('margin prop', () => {
+ it('should apply margin with custom CSS value and with tokens', () => {
+ const { container } = render(
+
+
+
+
+
+
+ )
+
+ const allRangeInputs = container.querySelectorAll(
+ '[data-cid="RangeInput"]'
+ )
+
+ const rangeInputCustom = allRangeInputs[0] as HTMLElement
+ const rangeInputCustomStyle = window.getComputedStyle(rangeInputCustom)
+ const rangeInputLarge = allRangeInputs[1] as HTMLElement
+ const rangeInputLargeStyle = window.getComputedStyle(rangeInputLarge)
+ const rangeInputSpace = allRangeInputs[2] as HTMLElement
+ const rangeInputSpaceStyle = window.getComputedStyle(rangeInputSpace)
+ const rangeInputMixed = allRangeInputs[3] as HTMLElement
+ const rangeInputMixedStyle = window.getComputedStyle(rangeInputMixed)
+
+ expect(rangeInputCustomStyle.margin).toBe('30px')
+ expect(rangeInputLargeStyle.margin).toBe('2.25rem')
+ expect(rangeInputSpaceStyle.margin).toBe('0.25rem')
+ expect(rangeInputMixedStyle.margin).toBe('0.75rem 20px')
+ })
+ })
})
diff --git a/packages/ui-range-input/src/RangeInput/props.ts b/packages/ui-range-input/src/RangeInput/props.ts
index 296a75c7a6..bfc9c9055f 100644
--- a/packages/ui-range-input/src/RangeInput/props.ts
+++ b/packages/ui-range-input/src/RangeInput/props.ts
@@ -30,7 +30,11 @@ import type {
PickPropsWithExceptions
} from '@instructure/shared-types'
import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+ WithStyleProps,
+ ComponentStyle,
+ Spacing
+} from '@instructure/emotion'
import type { InputHTMLAttributes } from 'react'
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
@@ -54,6 +58,11 @@ type RangeInputOwnProps = {
*/
onChange?: (value: number | string) => void
+ /**
+ * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+ */
+ margin?: Spacing
+
messages?: FormMessage[]
/**
@@ -142,6 +151,7 @@ const allowedProps: AllowedPropKeys = [
'disabled',
'readOnly',
'thumbVariant',
+ 'margin',
'inputRef'
]
diff --git a/packages/ui-text/src/Text/__tests__/Text.test.tsx b/packages/ui-text/src/Text/__tests__/Text.test.tsx
index 48a3522003..3e8ff6c855 100644
--- a/packages/ui-text/src/Text/__tests__/Text.test.tsx
+++ b/packages/ui-text/src/Text/__tests__/Text.test.tsx
@@ -49,4 +49,38 @@ describe('', () => {
expect(text?.tagName).toBe('LI')
})
+
+ describe('margin prop', () => {
+ it('should apply margin with custom CSS value and with tokens', () => {
+ const { getByTestId } = render(
+
+
+ test1
+
+
+ test2
+
+
+ test3
+
+
+ test4
+
+
+ )
+ const textCustom = getByTestId('text-custom')
+ const textCustomStyle = window.getComputedStyle(textCustom)
+ const textLarge = getByTestId('text-large')
+ const textLargeStyle = window.getComputedStyle(textLarge)
+ const textSpace = getByTestId('text-space')
+ const textSpaceStyle = window.getComputedStyle(textSpace)
+ const textMixed = getByTestId('text-mixed')
+ const textMixedStyle = window.getComputedStyle(textMixed)
+
+ expect(textCustomStyle.margin).toBe('30px')
+ expect(textLargeStyle.margin).toBe('2.25rem')
+ expect(textSpaceStyle.margin).toBe('0.25rem')
+ expect(textMixedStyle.margin).toBe('0.75rem 20px')
+ })
+ })
})
diff --git a/packages/ui-text/src/Text/props.ts b/packages/ui-text/src/Text/props.ts
index 73a357ce5d..cd2fcc8e09 100644
--- a/packages/ui-text/src/Text/props.ts
+++ b/packages/ui-text/src/Text/props.ts
@@ -28,7 +28,11 @@ import type {
TextTheme,
OtherHTMLAttributes
} from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+ WithStyleProps,
+ ComponentStyle,
+ Spacing
+} from '@instructure/emotion'
type TextOwnProps = {
/**
@@ -92,6 +96,10 @@ type TextOwnProps = {
| 'legend'
weight?: 'normal' | 'light' | 'bold' | 'weightRegular' | 'weightImportant'
wrap?: 'normal' | 'break-word'
+ /**
+ * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
+ */
+ margin?: Spacing
children?: React.ReactNode
}
@@ -116,7 +124,8 @@ const allowedProps: AllowedPropKeys = [
'transform',
'variant',
'weight',
- 'wrap'
+ 'wrap',
+ 'margin'
]
export type { TextProps, TextStyle }
diff --git a/packages/ui-text/src/Text/styles.ts b/packages/ui-text/src/Text/styles.ts
index 4d19aa8c37..e9a6f043fc 100644
--- a/packages/ui-text/src/Text/styles.ts
+++ b/packages/ui-text/src/Text/styles.ts
@@ -24,6 +24,7 @@
import type { TextTheme } from '@instructure/shared-types'
import type { TextProps, TextStyle } from './props'
+import { mapSpacingToShorthand } from '@instructure/emotion'
/**
* ---
@@ -48,9 +49,19 @@ const generateStyle = (
lineHeight,
letterSpacing,
color,
- variant
+ variant,
+ margin
} = props
+ // Calculate margin and support both theme token values like "space4" and custom values like "10px"
+ const cssMargin = margin
+ ? mapSpacingToShorthand(
+ margin,
+ (componentTheme as TextTheme & { spacing: Record })
+ .spacing
+ )
+ : undefined
+
const variants: Record, object> = {
descriptionPage: {
fontStyle: 'normal',
@@ -203,6 +214,7 @@ const generateStyle = (
label: 'text',
fontFamily: componentTheme.fontFamily,
...baseStyles,
+ ...(margin && { margin: cssMargin }), // Apply margin if provided
// NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
'&:is(input)[type]': inputStyles,
diff --git a/packages/ui-text/src/Text/theme.ts b/packages/ui-text/src/Text/theme.ts
index 61ebe9b817..2165df7830 100644
--- a/packages/ui-text/src/Text/theme.ts
+++ b/packages/ui-text/src/Text/theme.ts
@@ -58,7 +58,8 @@ const generateComponentTheme = (theme: Theme): TextTheme => {
aiBackgroundColor: colors?.contrasts?.violet1212,
- paragraphMargin: `${spacing.medium} 0`
+ paragraphMargin: `${spacing.medium} 0`,
+ spacing: spacing
}
return {
diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/__tests__/TopNavBarSmallViewportLayout.test.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/__tests__/TopNavBarSmallViewportLayout.test.tsx
index 03df5d4391..b207a1f116 100644
--- a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/__tests__/TopNavBarSmallViewportLayout.test.tsx
+++ b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/__tests__/TopNavBarSmallViewportLayout.test.tsx
@@ -687,7 +687,7 @@ describe('', () => {
// TODO this should be tested with chromatic
expect(activeOptionStyle.borderBottom).toBe(
- '0.125rem solid rgb(39, 53, 64)'
+ '0.125rem solid currentColor'
)
expect(option).toHaveAttribute('aria-current', 'page')
} else {