Skip to content

Commit 154d301

Browse files
git-nandorclaude
git-nandor
and
claude
committed
docs(many): update v2 spacing prop JSDoc to use the new Spacing scale
Describe margin/padding/gap on the v2 prop types in terms of the general Spacing scale and the layout-spacing guide instead of enumerating the deprecated keyword scale. Also correct the docs so `auto` is listed only for margin, not for padding/gap. INSTUI-5119 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 0d5ee0b commit 154d301

15 files changed

Lines changed: 66 additions & 34 deletions

File tree

‎packages/ui-color-picker/src/ColorPicker/v2/props.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,9 @@ type ColorPickerOwnProps = {
226226
withAlpha?: boolean
227227

228228
/**
229-
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
229+
* Valid values are `0`, `none`, `auto`, and Spacing token values,
230+
* see https://instructure.design/layout-spacing. Apply these values via
231+
* familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
230232
*/
231233
margin?: Spacing
232234

‎packages/ui-date-input/src/DateInput/v2/props.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,9 @@ type DateInputOwnProps = {
167167
renderCalendarIcon?: Renderable
168168

169169
/**
170-
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
170+
* Valid values are `0`, `none`, `auto`, and Spacing token values,
171+
* see https://instructure.design/layout-spacing. Apply these values via
172+
* familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
171173
*/
172174
margin?: Spacing
173175
/*

‎packages/ui-flex/src/Flex/v2/Item/props.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@ type FlexItemOwnProps = {
5050
elementRef?: (element: Element | null) => void
5151

5252
/**
53-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
54-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
55-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
53+
* Valid values are `0`, `none`, `auto`, and Spacing token values,
54+
* see https://instructure.design/layout-spacing. Apply these values via
55+
* familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
5656
*/
5757
margin?: Spacing
5858

5959
/**
60-
* Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
61-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
62-
* familiar CSS-like shorthand. For example: `padding="small x-large large"`.
60+
* Valid values are `0`, `none`, and Spacing token values,
61+
* see https://instructure.design/layout-spacing. Apply these values via
62+
* familiar CSS-like shorthand. For example, `padding="general.spaceMd general.spaceLg"`.
6363
*/
6464
padding?: Spacing
6565

‎packages/ui-flex/src/Flex/v2/props.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,16 +72,16 @@ type FlexOwnProps = {
7272
margin?: Spacing
7373

7474
/**
75-
* Valid values are `0`, `none`, `auto`, and Spacing token values,
75+
* Valid values are `0`, `none`, and Spacing token values,
7676
* see https://instructure.design/layout-spacing. Apply these values via
77-
* familiar CSS-like shorthand. For example, `gap="small auto large"`.
77+
* familiar CSS-like shorthand. For example, `gap="general.spaceMd general.spaceLg"`.
7878
*/
7979
gap?: Spacing
8080

8181
/**
82-
* Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
83-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
84-
* familiar CSS-like shorthand. For example: `padding="small x-large large"`.
82+
* Valid values are `0`, `none`, and Spacing token values,
83+
* see https://instructure.design/layout-spacing. Apply these values via
84+
* familiar CSS-like shorthand. For example, `padding="general.spaceMd general.spaceLg"`.
8585
*/
8686
padding?: Spacing
8787

‎packages/ui-form-field/src/FormField/v2/props.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,9 @@ type FormFieldOwnProps = {
6868
isRequired?: boolean
6969

7070
/**
71-
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
71+
* Valid values are `0`, `none`, `auto`, and Spacing token values,
72+
* see https://instructure.design/layout-spacing. Apply these values via
73+
* familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
7274
*/
7375
margin?: Spacing
7476
/**

‎packages/ui-list/src/InlineList/v2/InlineListItem/props.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@ type InlineListItemOwnProps = {
3939
delimiter?: 'none' | 'pipe' | 'slash' | 'arrow'
4040
size?: 'small' | 'medium' | 'large'
4141
/**
42-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
43-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
44-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
42+
* Valid values are `0`, `none`, `auto`, and Spacing token values,
43+
* see https://instructure.design/layout-spacing. Apply these values via
44+
* familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
4545
*/
4646
margin?: Spacing
4747
/**
48-
* Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
49-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
50-
* familiar CSS-like shorthand. For example: `padding="small x-large large"`.
48+
* Valid values are `0`, `none`, and Spacing token values,
49+
* see https://instructure.design/layout-spacing. Apply these values via
50+
* familiar CSS-like shorthand. For example, `padding="general.spaceMd general.spaceLg"`.
5151
*/
5252
padding?: Spacing
5353
/**

‎packages/ui-list/src/List/v2/ListItem/props.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@ type ListItemOwnProps = {
3939
delimiter?: 'none' | 'dashed' | 'solid'
4040
size?: 'small' | 'medium' | 'large'
4141
/**
42-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
43-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
44-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
42+
* Valid values are `0`, `none`, `auto`, and Spacing token values,
43+
* see https://instructure.design/layout-spacing. Apply these values via
44+
* familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
4545
*/
4646
margin?: Spacing
4747
/**
48-
* Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
49-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
50-
* familiar CSS-like shorthand. For example: `padding="small x-large large"`.
48+
* Valid values are `0`, `none`, and Spacing token values,
49+
* see https://instructure.design/layout-spacing. Apply these values via
50+
* familiar CSS-like shorthand. For example, `padding="general.spaceMd general.spaceLg"`.
5151
*/
5252
padding?: Spacing
5353
/**

‎packages/ui-modal/src/Modal/v2/ModalBody/props.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ import type {
3737

3838
type ModalBodyOwnProps = {
3939
children?: React.ReactNode
40+
/**
41+
* Valid values are `0`, `none`, and Spacing token values,
42+
* see https://instructure.design/layout-spacing. Apply these values via
43+
* familiar CSS-like shorthand. For example, `padding="general.spaceMd general.spaceLg"`.
44+
*/
4045
padding?: Spacing
4146
elementRef?: (element: UIElement | null) => void
4247
as?: AsElementType

‎packages/ui-number-input/src/NumberInput/v2/props.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,9 @@ type NumberInputOwnProps = {
180180
decrease: Renderable
181181
}
182182
/**
183-
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
183+
* Valid values are `0`, `none`, `auto`, and Spacing token values,
184+
* see https://instructure.design/layout-spacing. Apply these values via
185+
* familiar CSS-like shorthand. For example, `margin="general.spaceMd auto"`.
184186
*/
185187
margin?: Spacing
186188
}

‎packages/ui-tabs/src/Tabs/v2/Panel/props.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ type TabsPanelOwnProps = {
4545
minHeight?: string | number
4646
id?: string
4747
labelledBy?: string
48+
/**
49+
* Valid values are `0`, `none`, and Spacing token values,
50+
* see https://instructure.design/layout-spacing. Apply these values via
51+
* familiar CSS-like shorthand. For example, `padding="general.spaceMd general.spaceLg"`.
52+
*/
4853
padding?: Spacing
4954
textAlign?: 'start' | 'center' | 'end'
5055
/**

0 commit comments

Comments
 (0)