@instructure/ui-text-input 10.11.1-snapshot-18 → 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-18](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-18) (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-text-input
+
+### Features
+
+* **many:** introduce new spacing tokens; add margin prop for more components ([048c902](https://github.com/instructure/instructure-ui/commit/048c902406c00611cd117fb2fb8164a6eba62fb8))
 
 
 

package/es/TextInput/index.js

@@ -253,7 +253,8 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       width: width,
       inputContainerRef: inputContainerRef,
       layout: this.props.layout,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      margin: this.props.margin
     }, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.facade
     }, renderBeforeOrAfter ? jsx("span", {

package/es/TextInput/props.js

@@ -48,7 +48,8 @@ const propTypes = {
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  margin: PropTypes.string
 };
-const allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus'];
+const allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];
 export { propTypes, allowedProps };

package/lib/TextInput/index.js

@@ -263,7 +263,8 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       width: width,
       inputContainerRef: inputContainerRef,
       layout: this.props.layout,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      margin: this.props.margin
     }, (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.facade
     }, renderBeforeOrAfter ? (0, _emotion.jsx)("span", {

package/lib/TextInput/props.js

@@ -55,6 +55,7 @@ const propTypes = exports.propTypes = {
   renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   onChange: _propTypes.default.func,
   onBlur: _propTypes.default.func,
-  onFocus: _propTypes.default.func
+  onFocus: _propTypes.default.func,
+  margin: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'type', 'id', 'value', 'defaultValue', 'interaction', 'messages', 'size', 'textAlign', 'width', 'htmlSize', 'display', 'shouldNotWrap', 'placeholder', 'isRequired', 'elementRef', 'inputRef', 'inputContainerRef', 'renderBeforeInput', 'renderAfterInput', 'onChange', 'onBlur', 'onFocus', 'margin'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "10.11.1-snapshot-18",
+  "version": "10.12.0",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,12 +23,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.11.1-snapshot-18",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-18",
-    "@instructure/ui-badge": "10.11.1-snapshot-18",
-    "@instructure/ui-color-utils": "10.11.1-snapshot-18",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-18",
-    "@instructure/ui-themes": "10.11.1-snapshot-18",
+    "@instructure/ui-axe-check": "10.12.0",
+    "@instructure/ui-babel-preset": "10.12.0",
+    "@instructure/ui-badge": "10.12.0",
+    "@instructure/ui-color-utils": "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",
     "@testing-library/user-event": "^14.5.2",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.11.1-snapshot-18",
-    "@instructure/shared-types": "10.11.1-snapshot-18",
-    "@instructure/ui-dom-utils": "10.11.1-snapshot-18",
-    "@instructure/ui-form-field": "10.11.1-snapshot-18",
-    "@instructure/ui-icons": "10.11.1-snapshot-18",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-18",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-18",
-    "@instructure/ui-tag": "10.11.1-snapshot-18",
-    "@instructure/ui-testable": "10.11.1-snapshot-18",
+    "@instructure/emotion": "10.12.0",
+    "@instructure/shared-types": "10.12.0",
+    "@instructure/ui-dom-utils": "10.12.0",
+    "@instructure/ui-form-field": "10.12.0",
+    "@instructure/ui-icons": "10.12.0",
+    "@instructure/ui-prop-types": "10.12.0",
+    "@instructure/ui-react-utils": "10.12.0",
+    "@instructure/ui-tag": "10.12.0",
+    "@instructure/ui-testable": "10.12.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/TextInput/index.tsx

@@ -347,6 +347,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
         inputContainerRef={inputContainerRef}
         layout={this.props.layout}
         elementRef={this.handleRef}
+        margin={this.props.margin}
       >
         <span css={styles?.facade}>
           {renderBeforeOrAfter ? (

package/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<HTMLInputElement>) => 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 TextInputOwnProps
@@ -221,7 +230,8 @@ const propTypes: PropValidators<PropKeys> = {
   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 = {