Skip to content

Commit ad15db3

Browse files
git-nandorgit-nandor
committed
feat(many): add margin
1 parent 4a08572 commit ad15db3

File tree

17 files changed

+9149
-6021
lines changed

17 files changed

+9149
-6021
lines changed

‎package-lock.json‎

Lines changed: 9020 additions & 6004 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/shared-types/src/ComponentThemeVariables.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -613,7 +613,7 @@ export type FormFieldLayoutTheme = {
613613
lineHeight: Typography['lineHeightFit']
614614
inlinePadding: Spacing['xxSmall']
615615
stackedOrInlineBreakpoint: Breakpoints['medium']
616-
spacing: any // TODO remove any
616+
spacing: Spacing
617617
}
618618

619619
export type FormFieldLabelTheme = {
@@ -1203,6 +1203,7 @@ export type RadioInputTheme = {
12031203
toggleSmallFontSize: Typography['fontSizeXSmall']
12041204
toggleMediumFontSize: Typography['fontSizeSmall']
12051205
toggleLargeFontSize: Typography['fontSizeMedium']
1206+
spacing: any // TODO remove any
12061207
}
12071208

12081209
export type RangeInputTheme = {
@@ -1460,9 +1461,9 @@ export type TextTheme = Typography & {
14601461
alertColor: string
14611462
warningColor: string
14621463
aiColor: string
1463-
14641464
aiBackgroundColor: string
14651465
paragraphMargin: string | 0
1466+
spacing: Spacing
14661467
}
14671468

14681469
export type TextAreaTheme = {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
9090
status,
9191
placement,
9292
onClick,
93+
margin,
9394
...props
9495
} = this.props
9596

@@ -122,6 +123,7 @@ class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
122123
interaction={interaction}
123124
aria-pressed={status === 'pressed'}
124125
data-cid="ToggleButton"
126+
margin={margin}
125127
>
126128
{callRenderProp(renderIcon)}
127129
</IconButton>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import type {
3535
} from '@instructure/ui-position'
3636
import type { ViewProps } from '@instructure/ui-view'
3737
import { Renderable } from '@instructure/shared-types'
38+
import type { Spacing } from '@instructure/emotion'
3839

3940
type ToggleButtonOwnProps = {
4041
/**
@@ -110,6 +111,11 @@ type ToggleButtonOwnProps = {
110111
* or a function returning an element.
111112
*/
112113
constrain?: PositionConstraint
114+
115+
/**
116+
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
117+
*/
118+
margin?: Spacing
113119
}
114120

115121
type PropKeys = keyof ToggleButtonOwnProps
@@ -129,6 +135,7 @@ const allowedProps: AllowedPropKeys = [
129135
'elementRef',
130136
'interaction',
131137
'isShowingTooltip',
138+
'margin',
132139
'mountNode',
133140
'onClick',
134141
'placement',

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ import type {
2828
OtherHTMLAttributes,
2929
ToggleFacadeTheme
3030
} from '@instructure/shared-types'
31-
import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
31+
import type {
32+
WithStyleProps,
33+
ComponentStyle,
34+
Spacing
35+
} from '@instructure/emotion'
3236
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
3337

3438
type CheckboxOwnProps = {
@@ -74,6 +78,10 @@ type CheckboxOwnProps = {
7478
inline?: boolean
7579
labelPlacement?: 'top' | 'start' | 'end'
7680
isRequired?: boolean
81+
/**
82+
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
83+
*/
84+
margin?: Spacing
7785
/**
7886
* A function that provides a reference to the actual underlying input element
7987
*/
@@ -119,6 +127,7 @@ const allowedProps: AllowedPropKeys = [
119127
'inline',
120128
'labelPlacement',
121129
'isRequired',
130+
'margin',
122131
'inputRef'
123132
]
124133

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424

2525
import type { CheckboxProps, CheckboxStyle } from './props'
2626
import type { ComponentTheme } from '@instructure/shared-types'
27+
import { mapSpacingToShorthand } from '@instructure/emotion'
2728

2829
/**
2930
* ---
@@ -39,7 +40,16 @@ const generateStyle = (
3940
componentTheme: ComponentTheme,
4041
props: CheckboxProps
4142
): CheckboxStyle => {
42-
const { inline, disabled } = props
43+
const { inline, disabled, margin } = props
44+
45+
// Calculate margin and support both theme token values like "space4" and custom values like "10px"
46+
const cssMargin = margin
47+
? mapSpacingToShorthand(
48+
margin,
49+
(componentTheme as ComponentTheme & { spacing: Record<string, string> })
50+
.spacing
51+
)
52+
: undefined
4353

4454
return {
4555
requiredInvalid: {
@@ -49,12 +59,13 @@ const generateStyle = (
4959
paddingLeft: componentTheme.checkErrorInsetWidth
5060
},
5161
indentedToggleError: {
52-
paddingLeft: componentTheme.toggleErrorInsetWidth,
62+
paddingLeft: componentTheme.toggleErrorInsetWidth
5363
},
5464
checkbox: {
5565
label: 'checkbox',
5666
position: 'relative',
5767
width: '100%',
68+
...(margin && { margin: cssMargin }),
5869
...(disabled && {
5970
cursor: 'not-allowed',
6071
pointerEvents: 'none',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const generateComponentTheme = (theme: Theme): any => {
3636
requiredInvalidColor: colors?.contrasts?.red5782,
3737
toggleErrorInsetWidth: `calc(${forms?.inputHeightSmall}*1.5 + ${spacing?.small})`,
3838
checkErrorInsetWidth: `calc(1.25em + ${spacing?.xSmall})`,
39+
spacing: spacing
3940
}
4041

4142
return {

‎packages/ui-checkbox/src/CheckboxGroup/props.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { type InputHTMLAttributes } from 'react'
2626
import type { FormMessage } from '@instructure/ui-form-field'
2727
import type { OtherHTMLAttributes } from '@instructure/shared-types'
2828
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
29+
import type { Spacing } from '@instructure/emotion'
2930

3031
import { Checkbox } from '../Checkbox'
3132
import type { CheckboxProps } from '../Checkbox/props'
@@ -44,6 +45,10 @@ type CheckboxGroupOwnProps = {
4445
messages?: FormMessage[]
4546
size?: 'small' | 'medium' | 'large'
4647
layout?: 'stacked' | 'columns' | 'inline'
48+
/**
49+
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
50+
*/
51+
margin?: Spacing
4752
}
4853

4954
type PropKeys = keyof CheckboxGroupOwnProps
@@ -67,7 +72,8 @@ const allowedProps: AllowedPropKeys = [
6772
'messages',
6873
'children',
6974
'size',
70-
'layout'
75+
'layout',
76+
'margin'
7177
]
7278

7379
type CheckboxGroupState = {

‎packages/ui-form-field/src/FormFieldGroup/props.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ import type {
2727
FormFieldGroupTheme,
2828
OtherHTMLAttributes
2929
} from '@instructure/shared-types'
30-
import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
30+
import type {
31+
WithStyleProps,
32+
ComponentStyle,
33+
Spacing
34+
} from '@instructure/emotion'
3135
import type { FormFieldLayoutOwnProps } from '../FormFieldLayout/props'
3236
import type { FormMessage } from '../FormPropTypes'
3337

@@ -55,6 +59,10 @@ type FormFieldGroupOwnProps = {
5559
colSpacing?: 'none' | 'small' | 'medium' | 'large'
5660
vAlign?: 'top' | 'middle' | 'bottom'
5761
startAt?: 'small' | 'medium' | 'large' | 'x-large' | null
62+
/**
63+
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
64+
*/
65+
margin?: Spacing
5866
/**
5967
* provides a reference to the underlying html root element
6068
*/
@@ -92,6 +100,7 @@ const allowedProps: AllowedPropKeys = [
92100
'colSpacing',
93101
'vAlign',
94102
'startAt',
103+
'margin',
95104
'elementRef'
96105
]
97106

‎packages/ui-radio-input/src/RadioInput/props.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ import type {
2828
OtherHTMLAttributes,
2929
RadioInputTheme
3030
} from '@instructure/shared-types'
31-
import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
31+
import type {
32+
WithStyleProps,
33+
ComponentStyle,
34+
Spacing
35+
} from '@instructure/emotion'
3236
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
3337

3438
type RadioInputOwnProps = {
@@ -63,6 +67,10 @@ type RadioInputOwnProps = {
6367
size?: 'small' | 'medium' | 'large'
6468
context?: 'success' | 'warning' | 'danger' | 'off'
6569
inline?: boolean
70+
/**
71+
* Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
72+
*/
73+
margin?: Spacing
6674
onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
6775
/**
6876
* Callback fired when the input fires a change event.
@@ -106,6 +114,7 @@ const allowedProps: AllowedPropKeys = [
106114
'size',
107115
'context',
108116
'inline',
117+
'margin',
109118
'onClick',
110119
'onChange',
111120
'inputRef'

0 commit comments

Comments
 (0)