@instructure/ui-date-input 10.11.1-snapshot-18 → 10.12.1-snapshot-0

package/CHANGELOG.md

@@ -3,9 +3,23 @@
 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.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-0) (2025-02-26)
 
-**Note:** Version bump only for package @instructure/ui-date-input
+
+### Bug Fixes
+
+* **many:** fix form label not read by NVDA in hover mode and other layout issues ([ef77281](https://github.com/instructure/instructure-ui/commit/ef77281890511e8eea794196445d3ef2454537ba))
+
+
+
+
+
+# [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
+
+
+### Features
+
+* **many:** introduce new spacing tokens; add margin prop for more components ([048c902](https://github.com/instructure/instructure-ui/commit/048c902406c00611cd117fb2fb8164a6eba62fb8))
 
 
 

package/es/DateInput/__new-tests__/DateInput.test.js

@@ -263,7 +263,7 @@ describe('<DateInput />', () => {
             onRequestShowCalendar: onRequestShowCalendar
           }, generateDays())),
           container = _render5.container;
-        const dateInput = container.querySelector("[class$='-formFieldLabel']");
+        const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
         expect(dateInput).toHaveTextContent('Choose date');
         await userEvent.click(dateInput);
         await waitFor(() => {

package/es/DateInput2/__new-tests__/DateInput2.test.js

@@ -71,11 +71,9 @@ describe('<DateInput2 />', () => {
   it('should render an input label', async () => {
     const _render2 = render(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/React.createElement(DateInputExample, null))),
       container = _render2.container;
-    const dateInput = container.querySelector('input');
     const label = container.querySelector('label');
     expect(label).toBeInTheDocument();
     expect(label).toHaveTextContent(LABEL_TEXT);
-    expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.id).toBe(label === null || label === void 0 ? void 0 : label.htmlFor);
   });
   it('should render an input placeholder', async () => {
     const placeholder = 'Placeholder';

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/DateInput/__new-tests__/DateInput.test.js

@@ -265,7 +265,7 @@ describe('<DateInput />', () => {
             onRequestShowCalendar: onRequestShowCalendar
           }, generateDays())),
           container = _render5.container;
-        const dateInput = container.querySelector("[class$='-formFieldLabel']");
+        const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
         expect(dateInput).toHaveTextContent('Choose date');
         await _userEvent.default.click(dateInput);
         await (0, _react2.waitFor)(() => {

package/lib/DateInput2/__new-tests__/DateInput2.test.js

@@ -75,11 +75,9 @@ describe('<DateInput2 />', () => {
   it('should render an input label', async () => {
     const _render2 = (0, _react2.render)(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/_react.default.createElement(DateInputExample, null))),
       container = _render2.container;
-    const dateInput = container.querySelector('input');
     const label = container.querySelector('label');
     expect(label).toBeInTheDocument();
     expect(label).toHaveTextContent(LABEL_TEXT);
-    expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.id).toBe(label === null || label === void 0 ? void 0 : label.htmlFor);
   });
   it('should render an input placeholder', async () => {
     const placeholder = 'Placeholder';

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-18",
+  "version": "10.12.1-snapshot-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-18",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-18",
-    "@instructure/ui-buttons": "10.11.1-snapshot-18",
-    "@instructure/ui-scripts": "10.11.1-snapshot-18",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-18",
+    "@instructure/ui-axe-check": "10.12.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.12.1-snapshot-0",
+    "@instructure/ui-buttons": "10.12.1-snapshot-0",
+    "@instructure/ui-scripts": "10.12.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.12.1-snapshot-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-18",
-    "@instructure/shared-types": "10.11.1-snapshot-18",
-    "@instructure/ui-calendar": "10.11.1-snapshot-18",
-    "@instructure/ui-form-field": "10.11.1-snapshot-18",
-    "@instructure/ui-i18n": "10.11.1-snapshot-18",
-    "@instructure/ui-icons": "10.11.1-snapshot-18",
-    "@instructure/ui-popover": "10.11.1-snapshot-18",
-    "@instructure/ui-position": "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-selectable": "10.11.1-snapshot-18",
-    "@instructure/ui-testable": "10.11.1-snapshot-18",
-    "@instructure/ui-text-input": "10.11.1-snapshot-18",
-    "@instructure/ui-utils": "10.11.1-snapshot-18",
+    "@instructure/emotion": "10.12.1-snapshot-0",
+    "@instructure/shared-types": "10.12.1-snapshot-0",
+    "@instructure/ui-calendar": "10.12.1-snapshot-0",
+    "@instructure/ui-form-field": "10.12.1-snapshot-0",
+    "@instructure/ui-i18n": "10.12.1-snapshot-0",
+    "@instructure/ui-icons": "10.12.1-snapshot-0",
+    "@instructure/ui-popover": "10.12.1-snapshot-0",
+    "@instructure/ui-position": "10.12.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.12.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.12.1-snapshot-0",
+    "@instructure/ui-selectable": "10.12.1-snapshot-0",
+    "@instructure/ui-testable": "10.12.1-snapshot-0",
+    "@instructure/ui-text-input": "10.12.1-snapshot-0",
+    "@instructure/ui-utils": "10.12.1-snapshot-0",
     "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },

package/src/DateInput/__new-tests__/DateInput.test.tsx

@@ -381,7 +381,9 @@ describe('<DateInput />', () => {
             {generateDays()}
           </DateInput>
         )
-        const dateInput = container.querySelector("[class$='-formFieldLabel']")
+        const dateInput = container.querySelector(
+          'span[class$="-formFieldLayout__label"]'
+        )
 
         expect(dateInput).toHaveTextContent('Choose date')
 

package/src/DateInput2/__new-tests__/DateInput2.test.tsx

@@ -77,12 +77,10 @@ describe('<DateInput2 />', () => {
   it('should render an input label', async () => {
     const { container } = render(<DateInputExample />)
 
-    const dateInput = container.querySelector('input')
     const label = container.querySelector('label')
 
     expect(label).toBeInTheDocument()
     expect(label).toHaveTextContent(LABEL_TEXT)
-    expect(dateInput?.id).toBe(label?.htmlFor)
   })
 
   it('should render an input placeholder', async () => {

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 }