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

package/es/DateInput2/index.js

@@ -132,7 +132,7 @@ const DateInput2 = ({
   dateFormat,
   onRequestValidateDate,
   renderCalendarIcon,
-  // margin, TODO enable this prop
+  margin,
   ...rest
 }) => {
   const localeContext = useContext(ApplyLocaleContext);
@@ -250,7 +250,6 @@ const DateInput2 = ({
   };
   const selectedDate = parseDate(value)[1];
   return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
-    // margin={'large'} TODO add this prop to TextInput
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
@@ -261,6 +260,7 @@ const DateInput2 = ({
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
+    margin: margin,
     renderAfterInput: jsx(Popover, {
       renderTrigger: jsx(IconButton, {
         withBackground: false,

package/es/DateInput2/props.js

@@ -43,6 +43,7 @@ const propTypes = {
   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 { propTypes };

package/lib/DateInput2/index.js

@@ -142,7 +142,7 @@ const DateInput2 = ({
   dateFormat,
   onRequestValidateDate,
   renderCalendarIcon,
-  // margin, TODO enable this prop
+  margin,
   ...rest
 }) => {
   const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
@@ -260,7 +260,6 @@ const DateInput2 = ({
   };
   const selectedDate = parseDate(value)[1];
   return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
-    // margin={'large'} TODO add this prop to TextInput
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
@@ -271,6 +270,7 @@ const DateInput2 = ({
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
+    margin: margin,
     renderAfterInput: (0, _emotion.jsx)(_Popover.Popover, {
       renderTrigger: (0, _emotion.jsx)(_IconButton.IconButton, {
         withBackground: false,

package/lib/DateInput2/props.js

@@ -50,5 +50,6 @@ const propTypes = exports.propTypes = {
   withYearPicker: _propTypes.default.object,
   dateFormat: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
   onRequestValidateDate: _propTypes.default.func,
-  renderCalendarIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
+  renderCalendarIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  margin: _propTypes.default.string
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-input",
-  "version": "10.11.1-snapshot-17",
+  "version": "10.12.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.11.1-snapshot-17",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-17",
-    "@instructure/ui-buttons": "10.11.1-snapshot-17",
-    "@instructure/ui-scripts": "10.11.1-snapshot-17",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-17",
+    "@instructure/ui-axe-check": "10.12.0",
+    "@instructure/ui-babel-preset": "10.12.0",
+    "@instructure/ui-buttons": "10.12.0",
+    "@instructure/ui-scripts": "10.12.0",
+    "@instructure/ui-test-utils": "10.12.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,20 +35,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.11.1-snapshot-17",
-    "@instructure/shared-types": "10.11.1-snapshot-17",
-    "@instructure/ui-calendar": "10.11.1-snapshot-17",
-    "@instructure/ui-form-field": "10.11.1-snapshot-17",
-    "@instructure/ui-i18n": "10.11.1-snapshot-17",
-    "@instructure/ui-icons": "10.11.1-snapshot-17",
-    "@instructure/ui-popover": "10.11.1-snapshot-17",
-    "@instructure/ui-position": "10.11.1-snapshot-17",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-17",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-17",
-    "@instructure/ui-selectable": "10.11.1-snapshot-17",
-    "@instructure/ui-testable": "10.11.1-snapshot-17",
-    "@instructure/ui-text-input": "10.11.1-snapshot-17",
-    "@instructure/ui-utils": "10.11.1-snapshot-17",
+    "@instructure/emotion": "10.12.0",
+    "@instructure/shared-types": "10.12.0",
+    "@instructure/ui-calendar": "10.12.0",
+    "@instructure/ui-form-field": "10.12.0",
+    "@instructure/ui-i18n": "10.12.0",
+    "@instructure/ui-icons": "10.12.0",
+    "@instructure/ui-popover": "10.12.0",
+    "@instructure/ui-position": "10.12.0",
+    "@instructure/ui-prop-types": "10.12.0",
+    "@instructure/ui-react-utils": "10.12.0",
+    "@instructure/ui-selectable": "10.12.0",
+    "@instructure/ui-testable": "10.12.0",
+    "@instructure/ui-text-input": "10.12.0",
+    "@instructure/ui-utils": "10.12.0",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

package/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 (
     <TextInput
       {...passthroughProps(rest)}
-      // margin={'large'} TODO add this prop to TextInput
       renderLabel={renderLabel}
       onChange={handleInputChange}
       onBlur={handleBlur}
@@ -289,6 +288,7 @@ const DateInput2 = ({
       display={isInline ? 'inline-block' : 'block'}
       messages={inputMessages}
       interaction={interaction}
+      margin={margin}
       renderAfterInput={
         <Popover
           renderTrigger={

package/src/DateInput2/props.ts

@@ -33,6 +33,7 @@ import type {
   Renderable,
   PropValidators
 } from '@instructure/shared-types'
+import type { Spacing } from '@instructure/emotion'
 
 type DateInput2OwnProps = {
   /**
@@ -164,12 +165,16 @@ type DateInput2OwnProps = {
     value: string,
     utcDateString: string
   ) => 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](https://instructure.design/#layout-spacing).
+   */
+  margin?: Spacing
 }
 
 type PropKeys = keyof DateInput2OwnProps
@@ -201,7 +206,8 @@ const propTypes: PropValidators<PropKeys> = {
   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 }