@instructure/ui-text-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-text-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/TextInput/__new-tests__/TextInput.test.js

@@ -1,4 +1,4 @@
-var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6;
+var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6, _TextInput7;
 /*
  * The MIT License (MIT)
  *
@@ -85,41 +85,13 @@ describe('<TextInput/>', () => {
     }));
     expect((_ref2 = ref) === null || _ref2 === void 0 ? void 0 : _ref2.value).toBe('bar');
   });
-  it('should provide messageId to FormField', async () => {
-    render(/*#__PURE__*/React.createElement(TextInput, {
+  it('should let aria-describedby through', async () => {
+    render(_TextInput2 || (_TextInput2 = /*#__PURE__*/React.createElement(TextInput, {
       renderLabel: "Name",
-      messages: [{
-        text: 'yup',
-        type: 'error'
-      }]
-    }));
+      "aria-describedby": "abcd"
+    })));
     const input = screen.getByRole('textbox');
-    expect(input).toHaveAttribute('aria-describedby');
-  });
-  it('should have equal messagesId and aria-describedby values', async () => {
-    const _render2 = render(/*#__PURE__*/React.createElement(TextInput, {
-        renderLabel: "Name",
-        messages: [{
-          text: 'yup',
-          type: 'error'
-        }]
-      })),
-      container = _render2.container;
-    const id = screen.getByRole('textbox').getAttribute('aria-describedby');
-    const messages = container.querySelector('span[class$="-formFieldMessages"]');
-    expect(messages).toHaveAttribute('id', id);
-  });
-  it('should handle multiple aria-describedby ids', async () => {
-    render(/*#__PURE__*/React.createElement(TextInput, {
-      renderLabel: "Name",
-      "aria-describedby": "assistive-id",
-      messages: [{
-        text: 'yup',
-        type: 'error'
-      }]
-    }));
-    const ids = screen.getByRole('textbox').getAttribute('aria-describedby');
-    expect(ids).toMatch('assistive-id TextInput-messages');
+    expect(input).toHaveAttribute('aria-describedby', 'abcd');
   });
   describe('events', () => {
     it('responds to onChange event', async () => {
@@ -165,7 +137,7 @@ describe('<TextInput/>', () => {
   });
   describe('interaction', () => {
     it('should set the disabled attribute when `interaction` is disabled', async () => {
-      render(_TextInput2 || (_TextInput2 = /*#__PURE__*/React.createElement(TextInput, {
+      render(_TextInput3 || (_TextInput3 = /*#__PURE__*/React.createElement(TextInput, {
         renderLabel: "Name",
         interaction: "disabled"
       })));
@@ -173,7 +145,7 @@ describe('<TextInput/>', () => {
       expect(input).toHaveAttribute('disabled');
     });
     it('should set the disabled attribute when `disabled` is set', async () => {
-      render(_TextInput3 || (_TextInput3 = /*#__PURE__*/React.createElement(TextInput, {
+      render(_TextInput4 || (_TextInput4 = /*#__PURE__*/React.createElement(TextInput, {
         renderLabel: "Name",
         disabled: true
       })));
@@ -181,7 +153,7 @@ describe('<TextInput/>', () => {
       expect(input).toHaveAttribute('disabled');
     });
     it('should set the readonly attribute when `interaction` is readonly', async () => {
-      render(_TextInput4 || (_TextInput4 = /*#__PURE__*/React.createElement(TextInput, {
+      render(_TextInput5 || (_TextInput5 = /*#__PURE__*/React.createElement(TextInput, {
         renderLabel: "Name",
         interaction: "readonly"
       })));
@@ -189,7 +161,7 @@ describe('<TextInput/>', () => {
       expect(input).toHaveAttribute('readonly');
     });
     it('should set the readonly attribute when `readOnly` is set', async () => {
-      render(_TextInput5 || (_TextInput5 = /*#__PURE__*/React.createElement(TextInput, {
+      render(_TextInput6 || (_TextInput6 = /*#__PURE__*/React.createElement(TextInput, {
         renderLabel: "Name",
         readOnly: true
       })));
@@ -199,10 +171,10 @@ describe('<TextInput/>', () => {
   });
   describe('for a11y', () => {
     it('should meet standards', async () => {
-      const _render3 = render(_TextInput6 || (_TextInput6 = /*#__PURE__*/React.createElement(TextInput, {
+      const _render2 = render(_TextInput7 || (_TextInput7 = /*#__PURE__*/React.createElement(TextInput, {
           renderLabel: "Name"
         }))),
-        container = _render3.container;
+        container = _render2.container;
       const axeCheck = await runAxeCheck(container);
       expect(axeCheck).toBe(true);
     });

package/es/TextInput/index.js

@@ -186,9 +186,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
-    if (this.hasMessages) {
-      descriptionIds = descriptionIds !== '' ? `${descriptionIds} ${this._messagesId}` : this._messagesId;
-    }
     return jsx("input", Object.assign({}, props, {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
       defaultValue: defaultValue,
@@ -253,7 +250,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/__new-tests__/TextInput.test.js

@@ -8,7 +8,7 @@ var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _index = require("../index");
-var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6;
+var _TextInput, _TextInput2, _TextInput3, _TextInput4, _TextInput5, _TextInput6, _TextInput7;
 /*
  * The MIT License (MIT)
  *
@@ -87,41 +87,13 @@ describe('<TextInput/>', () => {
     }));
     expect((_ref2 = ref) === null || _ref2 === void 0 ? void 0 : _ref2.value).toBe('bar');
   });
-  it('should provide messageId to FormField', async () => {
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextInput, {
+  it('should let aria-describedby through', async () => {
+    (0, _react2.render)(_TextInput2 || (_TextInput2 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
       renderLabel: "Name",
-      messages: [{
-        text: 'yup',
-        type: 'error'
-      }]
-    }));
+      "aria-describedby": "abcd"
+    })));
     const input = _react2.screen.getByRole('textbox');
-    expect(input).toHaveAttribute('aria-describedby');
-  });
-  it('should have equal messagesId and aria-describedby values', async () => {
-    const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextInput, {
-        renderLabel: "Name",
-        messages: [{
-          text: 'yup',
-          type: 'error'
-        }]
-      })),
-      container = _render2.container;
-    const id = _react2.screen.getByRole('textbox').getAttribute('aria-describedby');
-    const messages = container.querySelector('span[class$="-formFieldMessages"]');
-    expect(messages).toHaveAttribute('id', id);
-  });
-  it('should handle multiple aria-describedby ids', async () => {
-    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.TextInput, {
-      renderLabel: "Name",
-      "aria-describedby": "assistive-id",
-      messages: [{
-        text: 'yup',
-        type: 'error'
-      }]
-    }));
-    const ids = _react2.screen.getByRole('textbox').getAttribute('aria-describedby');
-    expect(ids).toMatch('assistive-id TextInput-messages');
+    expect(input).toHaveAttribute('aria-describedby', 'abcd');
   });
   describe('events', () => {
     it('responds to onChange event', async () => {
@@ -167,7 +139,7 @@ describe('<TextInput/>', () => {
   });
   describe('interaction', () => {
     it('should set the disabled attribute when `interaction` is disabled', async () => {
-      (0, _react2.render)(_TextInput2 || (_TextInput2 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      (0, _react2.render)(_TextInput3 || (_TextInput3 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
         renderLabel: "Name",
         interaction: "disabled"
       })));
@@ -175,7 +147,7 @@ describe('<TextInput/>', () => {
       expect(input).toHaveAttribute('disabled');
     });
     it('should set the disabled attribute when `disabled` is set', async () => {
-      (0, _react2.render)(_TextInput3 || (_TextInput3 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      (0, _react2.render)(_TextInput4 || (_TextInput4 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
         renderLabel: "Name",
         disabled: true
       })));
@@ -183,7 +155,7 @@ describe('<TextInput/>', () => {
       expect(input).toHaveAttribute('disabled');
     });
     it('should set the readonly attribute when `interaction` is readonly', async () => {
-      (0, _react2.render)(_TextInput4 || (_TextInput4 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      (0, _react2.render)(_TextInput5 || (_TextInput5 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
         renderLabel: "Name",
         interaction: "readonly"
       })));
@@ -191,7 +163,7 @@ describe('<TextInput/>', () => {
       expect(input).toHaveAttribute('readonly');
     });
     it('should set the readonly attribute when `readOnly` is set', async () => {
-      (0, _react2.render)(_TextInput5 || (_TextInput5 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      (0, _react2.render)(_TextInput6 || (_TextInput6 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
         renderLabel: "Name",
         readOnly: true
       })));
@@ -201,10 +173,10 @@ describe('<TextInput/>', () => {
   });
   describe('for a11y', () => {
     it('should meet standards', async () => {
-      const _render3 = (0, _react2.render)(_TextInput6 || (_TextInput6 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
+      const _render2 = (0, _react2.render)(_TextInput7 || (_TextInput7 = /*#__PURE__*/_react.default.createElement(_index.TextInput, {
           renderLabel: "Name"
         }))),
-        container = _render3.container;
+        container = _render2.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
     });

package/lib/TextInput/index.js

@@ -196,9 +196,6 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     if (props['aria-describedby']) {
       descriptionIds = `${props['aria-describedby']}`;
     }
-    if (this.hasMessages) {
-      descriptionIds = descriptionIds !== '' ? `${descriptionIds} ${this._messagesId}` : this._messagesId;
-    }
     return (0, _emotion.jsx)("input", Object.assign({}, props, {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
       defaultValue: defaultValue,
@@ -263,7 +260,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.1-snapshot-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.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.12.1-snapshot-0",
+    "@instructure/ui-badge": "10.12.1-snapshot-0",
+    "@instructure/ui-color-utils": "10.12.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.12.1-snapshot-0",
+    "@instructure/ui-themes": "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",
@@ -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.1-snapshot-0",
+    "@instructure/shared-types": "10.12.1-snapshot-0",
+    "@instructure/ui-dom-utils": "10.12.1-snapshot-0",
+    "@instructure/ui-form-field": "10.12.1-snapshot-0",
+    "@instructure/ui-icons": "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-tag": "10.12.1-snapshot-0",
+    "@instructure/ui-testable": "10.12.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

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

@@ -90,59 +90,11 @@ describe('<TextInput/>', () => {
     expect(ref?.value).toBe('bar')
   })
 
-  it('should provide messageId to FormField', async () => {
-    render(
-      <TextInput
-        renderLabel="Name"
-        messages={[
-          {
-            text: 'yup',
-            type: 'error'
-          }
-        ]}
-      />
-    )
+  it('should let aria-describedby through', async () => {
+    render(<TextInput renderLabel="Name" aria-describedby="abcd" />)
     const input = screen.getByRole('textbox')
 
-    expect(input).toHaveAttribute('aria-describedby')
-  })
-
-  it('should have equal messagesId and aria-describedby values', async () => {
-    const { container } = render(
-      <TextInput
-        renderLabel="Name"
-        messages={[
-          {
-            text: 'yup',
-            type: 'error'
-          }
-        ]}
-      />
-    )
-    const id = screen.getByRole('textbox').getAttribute('aria-describedby')
-    const messages = container.querySelector(
-      'span[class$="-formFieldMessages"]'
-    )
-
-    expect(messages).toHaveAttribute('id', id)
-  })
-
-  it('should handle multiple aria-describedby ids', async () => {
-    render(
-      <TextInput
-        renderLabel="Name"
-        aria-describedby="assistive-id"
-        messages={[
-          {
-            text: 'yup',
-            type: 'error'
-          }
-        ]}
-      />
-    )
-    const ids = screen.getByRole('textbox').getAttribute('aria-describedby')
-
-    expect(ids).toMatch('assistive-id TextInput-messages')
+    expect(input).toHaveAttribute('aria-describedby', 'abcd')
   })
 
   describe('events', () => {

package/src/TextInput/index.tsx

@@ -243,13 +243,6 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       descriptionIds = `${props['aria-describedby']}`
     }
 
-    if (this.hasMessages) {
-      descriptionIds =
-        descriptionIds !== ''
-          ? `${descriptionIds} ${this._messagesId}`
-          : this._messagesId
-    }
-
     return (
       <input
         {...props}
@@ -347,6 +340,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 = {