@instructure/ui-form-field 10.11.1-snapshot-17 → 10.12.0

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.11.1-snapshot-17](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-17) (2025-02-21)
+# [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
 
-**Note:** Version bump only for package @instructure/ui-form-field
+
+### Features
+
+* **many:** introduce new spacing tokens; add margin prop for more components ([048c902](https://github.com/instructure/instructure-ui/commit/048c902406c00611cd117fb2fb8164a6eba62fb8))
 
 
 

package/es/FormField/index.js

@@ -49,7 +49,8 @@ class FormField extends Component {
       vAlign: this.props.vAlign,
       as: "label",
       htmlFor: this.props.id,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      margin: this.props.margin
     }));
   }
 }

package/es/FormField/props.js

@@ -36,7 +36,8 @@ const propTypes = {
   vAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
   width: PropTypes.string,
   inputContainerRef: PropTypes.func,
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  margin: PropTypes.string
 };
-const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef'];
+const allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef', 'margin'];
 export { propTypes, allowedProps };

package/es/FormFieldLayout/index.js

@@ -36,12 +36,14 @@ import { FormFieldLabel } from '../FormFieldLabel';
 import { FormFieldMessages } from '../FormFieldMessages';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
+import generateComponentTheme from './theme';
+
 /**
 ---
 parent: FormField
 ---
 **/
-let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends Component {
+let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;

package/es/FormFieldLayout/props.js

@@ -38,9 +38,10 @@ const propTypes = {
   width: PropTypes.string,
   inputContainerRef: PropTypes.func,
   elementRef: PropTypes.func,
-  isGroup: PropTypes.bool
+  isGroup: PropTypes.bool,
+  margin: PropTypes.string
 };
-const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'
+const allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef', 'margin'
 
 // added vAlign because FormField and FormFieldGroup passes it, but not adding
 // it to allowedProps to prevent it from getting passed through accidentally

package/es/FormFieldLayout/styles.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import { mapSpacingToShorthand } from '@instructure/emotion';
 /**
  * ---
  * private: true
@@ -32,8 +33,11 @@
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (_componentTheme, props) => {
-  const inline = props.inline;
+const generateStyle = (componentTheme, props) => {
+  const inline = props.inline,
+    margin = props.margin;
+  const spacing = componentTheme.spacing;
+  const cssMargin = mapSpacingToShorthand(margin, spacing);
   return {
     groupErrorMessage: {
       margin: '0.5rem 0'
@@ -43,7 +47,7 @@ const generateStyle = (_componentTheme, props) => {
       all: 'initial',
       border: '0',
       padding: '0',
-      margin: '0',
+      margin: cssMargin,
       minWidth: '0',
       direction: 'inherit',
       textAlign: 'start',

package/es/FormFieldLayout/theme.js

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+const generateComponentTheme = theme => {
+  const spacing = theme.spacing;
+  return {
+    spacing
+  };
+};
+export default generateComponentTheme;

package/lib/FormField/index.js

@@ -57,7 +57,8 @@ class FormField extends _react.Component {
       vAlign: this.props.vAlign,
       as: "label",
       htmlFor: this.props.id,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      margin: this.props.margin
     }));
   }
 }

package/lib/FormField/props.js

@@ -43,6 +43,7 @@ const propTypes = exports.propTypes = {
   vAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
   width: _propTypes.default.string,
   inputContainerRef: _propTypes.default.func,
-  elementRef: _propTypes.default.func
+  elementRef: _propTypes.default.func,
+  margin: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef'];
+const allowedProps = exports.allowedProps = ['label', 'id', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'vAlign', 'width', 'inputContainerRef', 'elementRef', 'margin'];

package/lib/FormFieldLayout/index.js

@@ -19,6 +19,7 @@ var _FormFieldLabel = require("../FormFieldLabel");
 var _FormFieldMessages = require("../FormFieldMessages");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
+var _theme = _interopRequireDefault(require("./theme"));
 const _excluded = ["makeStyles", "styles", "messages", "isGroup"];
 var _dec, _dec2, _class, _FormFieldLayout;
 /*
@@ -50,7 +51,7 @@ var _dec, _dec2, _class, _FormFieldLayout;
 parent: FormField
 ---
 **/
-let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends _react.Component {
+let FormFieldLayout = exports.FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_FormFieldLayout = class FormFieldLayout extends _react.Component {
   constructor(props) {
     super(props);
     this._messagesId = void 0;

package/lib/FormFieldLayout/props.js

@@ -45,9 +45,10 @@ const propTypes = exports.propTypes = {
   width: _propTypes.default.string,
   inputContainerRef: _propTypes.default.func,
   elementRef: _propTypes.default.func,
-  isGroup: _propTypes.default.bool
+  isGroup: _propTypes.default.bool,
+  margin: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef'
+const allowedProps = exports.allowedProps = ['label', 'id', 'as', 'messages', 'messagesId', 'children', 'inline', 'layout', 'labelAlign', 'width', 'inputContainerRef', 'elementRef', 'margin'
 
 // added vAlign because FormField and FormFieldGroup passes it, but not adding
 // it to allowedProps to prevent it from getting passed through accidentally

package/lib/FormFieldLayout/styles.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _emotion = require("@instructure/emotion");
 /*
  * The MIT License (MIT)
  *
@@ -38,8 +39,11 @@ exports.default = void 0;
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (_componentTheme, props) => {
-  const inline = props.inline;
+const generateStyle = (componentTheme, props) => {
+  const inline = props.inline,
+    margin = props.margin;
+  const spacing = componentTheme.spacing;
+  const cssMargin = (0, _emotion.mapSpacingToShorthand)(margin, spacing);
   return {
     groupErrorMessage: {
       margin: '0.5rem 0'
@@ -49,7 +53,7 @@ const generateStyle = (_componentTheme, props) => {
       all: 'initial',
       border: '0',
       padding: '0',
-      margin: '0',
+      margin: cssMargin,
       minWidth: '0',
       direction: 'inherit',
       textAlign: 'start',

package/lib/FormFieldLayout/theme.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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.
+ */
+
+const generateComponentTheme = theme => {
+  const spacing = theme.spacing;
+  return {
+    spacing
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "10.11.1-snapshot-17",
+  "version": "10.12.0",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.11.1-snapshot-17",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-17",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-17",
-    "@instructure/ui-themes": "10.11.1-snapshot-17",
+    "@instructure/ui-axe-check": "10.12.0",
+    "@instructure/ui-babel-preset": "10.12.0",
+    "@instructure/ui-test-utils": "10.12.0",
+    "@instructure/ui-themes": "10.12.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.11.1-snapshot-17",
-    "@instructure/emotion": "10.11.1-snapshot-17",
-    "@instructure/shared-types": "10.11.1-snapshot-17",
-    "@instructure/ui-a11y-content": "10.11.1-snapshot-17",
-    "@instructure/ui-a11y-utils": "10.11.1-snapshot-17",
-    "@instructure/ui-grid": "10.11.1-snapshot-17",
-    "@instructure/ui-icons": "10.11.1-snapshot-17",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-17",
-    "@instructure/ui-utils": "10.11.1-snapshot-17",
-    "@instructure/uid": "10.11.1-snapshot-17",
+    "@instructure/console": "10.12.0",
+    "@instructure/emotion": "10.12.0",
+    "@instructure/shared-types": "10.12.0",
+    "@instructure/ui-a11y-content": "10.12.0",
+    "@instructure/ui-a11y-utils": "10.12.0",
+    "@instructure/ui-grid": "10.12.0",
+    "@instructure/ui-icons": "10.12.0",
+    "@instructure/ui-react-utils": "10.12.0",
+    "@instructure/ui-utils": "10.12.0",
+    "@instructure/uid": "10.12.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/FormField/index.tsx

@@ -70,6 +70,7 @@ class FormField extends Component<FormFieldProps> {
         as="label"
         htmlFor={this.props.id}
         elementRef={this.handleRef}
+        margin={this.props.margin}
       />
     )
   }

package/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](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
 }
 
 type PropKeys = keyof FormFieldOwnProps
@@ -82,7 +88,8 @@ const propTypes: PropValidators<PropKeys> = {
   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 }

package/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<FormFieldLayoutProps> {
   static readonly componentId = 'FormFieldLayout'
 

package/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](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
 }
 
 type PropKeys = keyof FormFieldLayoutOwnProps
@@ -97,7 +106,8 @@ const propTypes: PropValidators<PropKeys> = {
   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

package/src/FormFieldLayout/styles.ts

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+import { mapSpacingToShorthand } from '@instructure/emotion'
 import type { FormFieldLayoutProps, FormFieldLayoutStyle } from './props'
 
 /**
@@ -35,21 +36,23 @@ 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
 
+  const cssMargin = mapSpacingToShorthand(margin, spacing)
   return {
     groupErrorMessage: {
-      margin: '0.5rem 0',
+      margin: '0.5rem 0'
     },
     formFieldLayout: {
       label: 'formFieldLayout',
       all: 'initial',
       border: '0',
       padding: '0',
-      margin: '0',
+      margin: cssMargin,
       minWidth: '0',
       direction: 'inherit',
       textAlign: 'start',

package/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