{
onPaste={(event) => this.handleOnPaste(event)}
onBlur={() => this.handleOnBlur()}
messages={this.renderMessages()}
+ margin={margin}
/>
{!this.isSimple && (
= {
id: PropTypes.string,
value: PropTypes.string,
width: PropTypes.string,
- withAlpha: PropTypes.bool
+ withAlpha: PropTypes.bool,
+ margin: PropTypes.string
}
const allowedProps: AllowedPropKeys = [
@@ -339,7 +349,8 @@ const allowedProps: AllowedPropKeys = [
'tooltip',
'value',
'width',
- 'withAlpha'
+ 'withAlpha',
+ 'margin'
]
export type {
diff --git a/packages/ui-date-input/src/DateInput2/index.tsx b/packages/ui-date-input/src/DateInput2/index.tsx
index df5803ad9a..d6b1a3c408 100644
--- a/packages/ui-date-input/src/DateInput2/index.tsx
+++ b/packages/ui-date-input/src/DateInput2/index.tsx
@@ -153,7 +153,7 @@ const DateInput2 = ({
dateFormat,
onRequestValidateDate,
renderCalendarIcon,
- // margin, TODO enable this prop
+ margin,
...rest
}: DateInput2Props) => {
const localeContext = useContext(ApplyLocaleContext)
@@ -278,7 +278,6 @@ const DateInput2 = ({
return (
void
- // margin?: Spacing // TODO enable this prop
/**
* Custom icon for the icon button opening the picker.
*/
renderCalendarIcon?: Renderable
+
+ /**
+ * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](/#layout-spacing).
+ */
+ margin?: Spacing
}
type PropKeys = keyof DateInput2OwnProps
@@ -201,7 +206,8 @@ const propTypes: PropValidators = {
withYearPicker: PropTypes.object,
dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
onRequestValidateDate: PropTypes.func,
- renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+ renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+ margin: PropTypes.string
}
export type { DateInput2Props }
diff --git a/packages/ui-form-field/src/FormField/index.tsx b/packages/ui-form-field/src/FormField/index.tsx
index b97bd66202..a5cfe3cfa3 100644
--- a/packages/ui-form-field/src/FormField/index.tsx
+++ b/packages/ui-form-field/src/FormField/index.tsx
@@ -70,6 +70,7 @@ class FormField extends Component {
as="label"
htmlFor={this.props.id}
elementRef={this.handleRef}
+ margin={this.props.margin}
/>
)
}
diff --git a/packages/ui-form-field/src/FormField/props.ts b/packages/ui-form-field/src/FormField/props.ts
index 81dc172264..40250d239f 100644
--- a/packages/ui-form-field/src/FormField/props.ts
+++ b/packages/ui-form-field/src/FormField/props.ts
@@ -32,6 +32,7 @@ import type {
PropValidators
} from '@instructure/shared-types'
import type { FormMessage } from '../FormPropTypes'
+import type { Spacing } from '@instructure/emotion'
type FormFieldOwnProps = {
label: React.ReactNode
@@ -62,6 +63,11 @@ type FormFieldOwnProps = {
* provides a reference to the underlying html root element
*/
elementRef?: (element: Element | null) => void
+
+ /**
+ * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](/#layout-spacing).
+ */
+ margin?: Spacing
}
type PropKeys = keyof FormFieldOwnProps
@@ -82,7 +88,8 @@ const propTypes: PropValidators = {
vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
width: PropTypes.string,
inputContainerRef: PropTypes.func,
- elementRef: PropTypes.func
+ elementRef: PropTypes.func,
+ margin: PropTypes.string
}
const allowedProps: AllowedPropKeys = [
@@ -97,7 +104,8 @@ const allowedProps: AllowedPropKeys = [
'vAlign',
'width',
'inputContainerRef',
- 'elementRef'
+ 'elementRef',
+ 'margin'
]
export type { FormFieldOwnProps, FormFieldProps }
diff --git a/packages/ui-form-field/src/FormFieldLayout/index.tsx b/packages/ui-form-field/src/FormFieldLayout/index.tsx
index 13de6eaa07..37b2d160fe 100644
--- a/packages/ui-form-field/src/FormFieldLayout/index.tsx
+++ b/packages/ui-form-field/src/FormFieldLayout/index.tsx
@@ -44,6 +44,7 @@ import generateStyle from './styles'
import { propTypes, allowedProps } from './props'
import type { FormFieldLayoutProps } from './props'
+import generateComponentTheme from './theme'
/**
---
@@ -51,7 +52,7 @@ parent: FormField
---
**/
@withDeterministicId()
-@withStyle(generateStyle, null)
+@withStyle(generateStyle, generateComponentTheme)
class FormFieldLayout extends Component {
static readonly componentId = 'FormFieldLayout'
diff --git a/packages/ui-form-field/src/FormFieldLayout/props.ts b/packages/ui-form-field/src/FormFieldLayout/props.ts
index 837443e7e5..5c9ec7625d 100644
--- a/packages/ui-form-field/src/FormFieldLayout/props.ts
+++ b/packages/ui-form-field/src/FormFieldLayout/props.ts
@@ -31,7 +31,11 @@ import type {
OtherHTMLAttributes,
PropValidators
} from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+ WithStyleProps,
+ ComponentStyle,
+ Spacing
+} from '@instructure/emotion'
import type { FormMessage } from '../FormPropTypes'
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
@@ -68,6 +72,11 @@ type FormFieldLayoutOwnProps = {
*/
elementRef?: (element: Element | null) => void
isGroup?: boolean
+
+ /**
+ * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](/#layout-spacing).
+ */
+ margin?: Spacing
}
type PropKeys = keyof FormFieldLayoutOwnProps
@@ -97,7 +106,8 @@ const propTypes: PropValidators = {
width: PropTypes.string,
inputContainerRef: PropTypes.func,
elementRef: PropTypes.func,
- isGroup: PropTypes.bool
+ isGroup: PropTypes.bool,
+ margin: PropTypes.string
}
const allowedProps: AllowedPropKeys = [
@@ -112,7 +122,8 @@ const allowedProps: AllowedPropKeys = [
'labelAlign',
'width',
'inputContainerRef',
- 'elementRef'
+ 'elementRef',
+ 'margin'
// added vAlign because FormField and FormFieldGroup passes it, but not adding
// it to allowedProps to prevent it from getting passed through accidentally
diff --git a/packages/ui-form-field/src/FormFieldLayout/styles.ts b/packages/ui-form-field/src/FormFieldLayout/styles.ts
index 542ad8e95d..d43ede2436 100644
--- a/packages/ui-form-field/src/FormFieldLayout/styles.ts
+++ b/packages/ui-form-field/src/FormFieldLayout/styles.ts
@@ -35,21 +35,22 @@ import type { FormFieldLayoutProps, FormFieldLayoutStyle } from './props'
* @return {Object} The final style object, which will be used in the component
*/
const generateStyle = (
- _componentTheme: null,
+ componentTheme: any,
props: FormFieldLayoutProps
): FormFieldLayoutStyle => {
- const { inline } = props
+ const { inline, margin } = props
+ const { spacing } = componentTheme
return {
groupErrorMessage: {
- margin: '0.5rem 0',
+ margin: '0.5rem 0'
},
formFieldLayout: {
label: 'formFieldLayout',
all: 'initial',
border: '0',
padding: '0',
- margin: '0',
+ margin: margin ? spacing[margin] : '0',
minWidth: '0',
direction: 'inherit',
textAlign: 'start',
diff --git a/packages/ui-form-field/src/FormFieldLayout/theme.ts b/packages/ui-form-field/src/FormFieldLayout/theme.ts
new file mode 100644
index 0000000000..6a7a7a6807
--- /dev/null
+++ b/packages/ui-form-field/src/FormFieldLayout/theme.ts
@@ -0,0 +1,33 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+
+const generateComponentTheme = (theme: Theme): any => {
+ const { spacing } = theme
+
+ return { spacing }
+}
+
+export default generateComponentTheme
diff --git a/packages/ui-number-input/src/NumberInput/index.tsx b/packages/ui-number-input/src/NumberInput/index.tsx
index 703cecd52d..df16136d59 100644
--- a/packages/ui-number-input/src/NumberInput/index.tsx
+++ b/packages/ui-number-input/src/NumberInput/index.tsx
@@ -248,7 +248,8 @@ class NumberInput extends Component {
width,
styles,
allowStringValue,
- renderIcons
+ renderIcons,
+ margin
} = this.props
const { interaction } = this
@@ -278,6 +279,7 @@ class NumberInput extends Component {
inline={display === 'inline-block'}
id={this.id}
elementRef={this.handleRef}
+ margin={margin}
>
= {
renderIcons: PropTypes.shape({
increase: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
decrease: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
- })
+ }),
+ margin: PropTypes.string
}
const allowedProps: AllowedPropKeys = [
@@ -263,7 +272,8 @@ const allowedProps: AllowedPropKeys = [
'inputMode',
'textAlign',
'allowStringValue',
- 'renderIcons'
+ 'renderIcons',
+ 'margin'
]
export type {
diff --git a/packages/ui-text-area/src/TextArea/index.tsx b/packages/ui-text-area/src/TextArea/index.tsx
index 942b5c0319..6d11a4dfab 100644
--- a/packages/ui-text-area/src/TextArea/index.tsx
+++ b/packages/ui-text-area/src/TextArea/index.tsx
@@ -315,7 +315,8 @@ class TextArea extends Component {
maxHeight,
textareaRef,
resize,
- styles
+ styles,
+ margin
} = this.props
const props = omitProps(this.props, TextArea.allowedProps)
@@ -380,6 +381,7 @@ class TextArea extends Component {
elementRef={(el) => {
this.ref = el
}}
+ margin={margin}
>
) => void
+
+ /**
+ * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](/#layout-spacing).
+ */
+ margin?: Spacing
}
type PropKeys = keyof TextAreaOwnProps
@@ -153,7 +162,8 @@ const propTypes: PropValidators
= {
textareaRef: PropTypes.func,
defaultValue: PropTypes.string,
value: controllable(PropTypes.string),
- onChange: PropTypes.func
+ onChange: PropTypes.func,
+ margin: PropTypes.string
}
const allowedProps: AllowedPropKeys = [
@@ -175,7 +185,8 @@ const allowedProps: AllowedPropKeys = [
'textareaRef',
'defaultValue',
'value',
- 'onChange'
+ 'onChange',
+ 'margin'
]
export type { TextAreaProps, TextAreaStyle }
diff --git a/packages/ui-text-input/src/TextInput/index.tsx b/packages/ui-text-input/src/TextInput/index.tsx
index 5a208d45b3..8bc83830ac 100644
--- a/packages/ui-text-input/src/TextInput/index.tsx
+++ b/packages/ui-text-input/src/TextInput/index.tsx
@@ -347,6 +347,7 @@ class TextInput extends Component {
inputContainerRef={inputContainerRef}
layout={this.props.layout}
elementRef={this.handleRef}
+ margin={this.props.margin}
>
{renderBeforeOrAfter ? (
diff --git a/packages/ui-text-input/src/TextInput/props.ts b/packages/ui-text-input/src/TextInput/props.ts
index 781accdf85..25313750c3 100644
--- a/packages/ui-text-input/src/TextInput/props.ts
+++ b/packages/ui-text-input/src/TextInput/props.ts
@@ -34,7 +34,11 @@ import type {
PropValidators,
TextInputTheme
} from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+ WithStyleProps,
+ ComponentStyle,
+ Spacing
+} from '@instructure/emotion'
import type {
InteractionType,
WithDeterministicIdProps
@@ -172,6 +176,11 @@ type TextInputOwnProps = {
* Callback fired when input receives focus.
*/
onFocus?: (event: React.FocusEvent) => void
+
+ /**
+ * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](/#layout-spacing).
+ */
+ margin?: Spacing
}
type PropKeys = keyof TextInputOwnProps
@@ -221,7 +230,8 @@ const propTypes: PropValidators = {
renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
onChange: PropTypes.func,
onBlur: PropTypes.func,
- onFocus: PropTypes.func
+ onFocus: PropTypes.func,
+ margin: PropTypes.string
}
const allowedProps: AllowedPropKeys = [
@@ -247,7 +257,8 @@ const allowedProps: AllowedPropKeys = [
'renderAfterInput',
'onChange',
'onBlur',
- 'onFocus'
+ 'onFocus',
+ 'margin'
]
type TextInputState = {
diff --git a/packages/ui-themes/src/sharedThemeTokens/spacing.ts b/packages/ui-themes/src/sharedThemeTokens/spacing.ts
index 1409d4d175..a1b0a7851c 100644
--- a/packages/ui-themes/src/sharedThemeTokens/spacing.ts
+++ b/packages/ui-themes/src/sharedThemeTokens/spacing.ts
@@ -25,6 +25,7 @@
import { Spacing } from '@instructure/shared-types'
const spacing: Spacing = Object.freeze({
+ // legacy spacing tokens:
xxxSmall: '0.125rem', // 2px
xxSmall: '0.375rem', // 6px
xSmall: '0.5rem', // 8px
@@ -33,7 +34,37 @@ const spacing: Spacing = Object.freeze({
medium: '1.5rem', // 24px
large: '2.25rem', // 36px
xLarge: '3rem', // 48px
- xxLarge: '3.75rem' // 60px
+ xxLarge: '3.75rem', // 60px
+
+ // new spacing tokens:
+ space0: '0rem', // 0px
+ space2: '0.125rem', // 2px
+ space4: '0.25rem', // 4px
+ space8: '0.5rem', // 8px
+ space12: '0.75rem', // 12px
+ space16: '1rem', // 16px
+ space24: '1.5rem', // 24px
+ space36: '2.25rem', // 36px
+ space48: '3rem', // 48px
+ space60: '3.75rem', // 60px
+ sections: '2.25rem', // 36px
+ sectionElrements: '1.5em', // 24px
+ trayElrements: '1.5em', // 24px
+ modalElrements: '1.5em', // 24px
+ moduleElrements: '1em', // 16px
+ paddingCardLarge: '1.5rem', // 24px
+ paddingCardMedium: '1rem', // 16px
+ paddingCardSmall: '0.75rem', // 12px
+ selects: '1rem', // 16px
+ textareas: '1rem', // 16px
+ inputFields: '1rem', // 16px
+ checkboxes: '1rem', // 16px
+ radios: '1rem', // 16px
+ toggles: '1rem', // 16px
+ buttons: '0.75rem', // 12px
+ tags: '0.75rem', // 12px
+ statusIndicators: '0.75rem', // 12px
+ dataPoints: '0.75rem' // 12px
} as const)
export default spacing
diff --git a/todo-add-margin-componentlist.md b/todo-add-margin-componentlist.md
new file mode 100644
index 0000000000..408d8919a0
--- /dev/null
+++ b/todo-add-margin-componentlist.md
@@ -0,0 +1,77 @@
+- [] Alert
+- [] AppNav
+- [] Avatar
+- [] Badge
+- [] Billboard
+- [] Breadcrumb
+- [] Button
+- [] Byline
+- [x] Calendar
+- [x] Checkbox
+- [x] CheckboxGroup
+- [] CloseButton
+- [] ColorContrast
+- [x] ColorIndicator
+- [x] ColorMixer
+- [x] ColorPicker
+- [x] ColorPreset
+- [] CondensedButton
+- [] ContextView
+- [x] DateInput
+- [x] DateInput2
+- [x] DateTimeInput
+- [] DrawerLayout
+- [?] Drilldown
+- [x] Editable
+- [] FileDrop
+- [] Flex
+- [x] FormField
+- [x] FormFieldGroup
+- [x] Grid
+- [] Heading
+- [] IconButton
+- [] Img
+- [] InlineList
+- [x] InPlaceEdit
+- [] Link
+- [] List
+- [x] Menu
+- [x] Metric
+- [x] MetricGroup
+- [] Modal
+- [x] NumberInput
+- [x] Options
+- [] Overlay
+- [] Pages
+- [] Pagination
+- [] Pill
+- [] Popover
+- [] ProgressBar
+- [] ProgressCircle
+- [x] RadioInput
+- [x] RadioInputGroup
+- [x] RangeInput
+- [] Rating
+- [?] Responsive
+- [x] Select
+- [x] Selectable
+- [] SideNavBar
+- [x] SimpleSelect
+- [x] SourceCodeEditor
+- [] Spinner
+- [] Table
+- [] Tabs
+- [] Tag
+- [x] Text
+- [x] TextArea
+- [x] TextInput
+- [x] TimeSelect
+- [x] ToggleButton
+- [x] ToggleDetails
+- [x] ToggleGroup
+- [] Tooltip
+- [] TopNavBar
+- [] Tray
+- [x] TreeBrowser
+- [x] TruncateText
+- [] View