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

package/es/NumberInput/index.js

@@ -180,7 +180,8 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       width = _this$props4.width,
       styles = _this$props4.styles,
       allowStringValue = _this$props4.allowStringValue,
-      renderIcons = _this$props4.renderIcons;
+      renderIcons = _this$props4.renderIcons,
+      margin = _this$props4.margin;
     const interaction = this.interaction;
     const rawLabel = callRenderProp(renderLabel);
     const label = hasVisibleChildren(rawLabel) ? jsx(React.Fragment, null, rawLabel, isRequired && jsx("span", {
@@ -191,7 +192,8 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       label: label,
       inline: display === 'inline-block',
       id: this.id,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      margin: margin
     }), jsx("span", {
       css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.inputWidth,
       style: width ? {

package/es/NumberInput/props.js

@@ -49,7 +49,8 @@ const propTypes = {
   renderIcons: PropTypes.shape({
     increase: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
     decrease: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired
-  })
+  }),
+  margin: PropTypes.string
 };
-const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons'];
+const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons', 'margin'];
 export { propTypes, allowedProps };

package/lib/NumberInput/index.js

@@ -192,7 +192,8 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       width = _this$props4.width,
       styles = _this$props4.styles,
       allowStringValue = _this$props4.allowStringValue,
-      renderIcons = _this$props4.renderIcons;
+      renderIcons = _this$props4.renderIcons,
+      margin = _this$props4.margin;
     const interaction = this.interaction;
     const rawLabel = (0, _callRenderProp.callRenderProp)(renderLabel);
     const label = (0, _hasVisibleChildren.hasVisibleChildren)(rawLabel) ? (0, _emotion.jsx)(_react.default.Fragment, null, rawLabel, isRequired && (0, _emotion.jsx)("span", {
@@ -203,7 +204,8 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       label: label,
       inline: display === 'inline-block',
       id: this.id,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      margin: margin
     }), (0, _emotion.jsx)("span", {
       css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.inputWidth,
       style: width ? {

package/lib/NumberInput/props.js

@@ -56,6 +56,7 @@ const propTypes = exports.propTypes = {
   renderIcons: _propTypes.default.shape({
     increase: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
     decrease: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired
-  })
+  }),
+  margin: _propTypes.default.string
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue', 'renderIcons', 'margin'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "10.11.1-snapshot-18",
+  "version": "10.12.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,11 +23,11 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.11.1-snapshot-18",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-18",
-    "@instructure/ui-scripts": "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-scripts": "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",
@@ -35,14 +35,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.11.1-snapshot-18",
-    "@instructure/shared-types": "10.11.1-snapshot-18",
-    "@instructure/ui-form-field": "10.11.1-snapshot-18",
-    "@instructure/ui-icons": "10.11.1-snapshot-18",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-18",
-    "@instructure/ui-testable": "10.11.1-snapshot-18",
-    "@instructure/ui-utils": "10.11.1-snapshot-18",
-    "@instructure/uid": "10.11.1-snapshot-18",
+    "@instructure/emotion": "10.12.0",
+    "@instructure/shared-types": "10.12.0",
+    "@instructure/ui-form-field": "10.12.0",
+    "@instructure/ui-icons": "10.12.0",
+    "@instructure/ui-react-utils": "10.12.0",
+    "@instructure/ui-testable": "10.12.0",
+    "@instructure/ui-utils": "10.12.0",
+    "@instructure/uid": "10.12.0",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/NumberInput/index.tsx

@@ -248,7 +248,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       width,
       styles,
       allowStringValue,
-      renderIcons
+      renderIcons,
+      margin
     } = this.props
 
     const { interaction } = this
@@ -278,6 +279,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
         inline={display === 'inline-block'}
         id={this.id}
         elementRef={this.handleRef}
+        margin={margin}
       >
         <span
           css={this.props.styles?.inputWidth}

package/src/NumberInput/props.ts

@@ -34,7 +34,11 @@ import type {
   OtherHTMLAttributes,
   PickPropsWithExceptions
 } from '@instructure/shared-types'
-import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  WithStyleProps,
+  ComponentStyle,
+  Spacing
+} from '@instructure/emotion'
 import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field'
 import type {
   InteractionType,
@@ -174,6 +178,10 @@ type NumberInputOwnProps = {
     increase: Renderable
     decrease: Renderable
   }
+  /**
+   * 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 NumberInputState = {
@@ -238,7 +246,8 @@ const propTypes: PropValidators<PropKeys> = {
   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 {