@instructure/ui-text-input 9.8.1 → 9.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.9.0](https://github.com/instructure/instructure-ui/compare/v9.8.1...v9.9.0) (2024-11-12)
+
+
+### Features
+
+* **many:** backport new error messages from v10 ([9003d19](https://github.com/instructure/instructure-ui/commit/9003d19cc66022dfdeecc2e2c8c8d9d2a7300e3f))
+
+
+
+
+
 ## [9.8.1](https://github.com/instructure/instructure-ui/compare/v9.8.0...v9.8.1) (2024-10-28)
 
 **Note:** Version bump only for package @instructure/ui-text-input

package/es/TextInput/index.js

@@ -32,6 +32,7 @@ import { isActiveElement, addEventListener } from '@instructure/ui-dom-utils';
 import { FormField } from '@instructure/ui-form-field';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
@@ -161,7 +162,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
   get invalid() {
     return !!this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error';
+      return message.type === 'error' || message.type === 'newError';
     }) >= 0;
   }
   get focused() {
@@ -242,13 +243,18 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       renderAfterInput = _this$props4.renderAfterInput,
       messages = _this$props4.messages,
       inputContainerRef = _this$props4.inputContainerRef,
+      isRequired = _this$props4.isRequired,
       styles = _this$props4.styles;
     const beforeElement = renderBeforeInput ? callRenderProp(renderBeforeInput) : null;
     const afterElement = renderAfterInput ? callRenderProp(renderAfterInput) : null;
     const renderBeforeOrAfter = !!beforeElement || !!afterElement;
+    const rawLabel = callRenderProp(renderLabel);
+    const label = hasVisibleChildren(rawLabel) ? jsx(React.Fragment, null, rawLabel, isRequired && jsx("span", {
+      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
+    }, " *")) : rawLabel;
     return jsx(FormField, {
       id: this.id,
-      label: callRenderProp(renderLabel),
+      label: label,
       messagesId: this._messagesId,
       messages: messages,
       inline: display === 'inline-block',

package/es/TextInput/styles.js

@@ -127,6 +127,9 @@ const generateStyle = (componentTheme, props, state) => {
     flexShrink: 0
   };
   return {
+    requiredInvalid: {
+      color: componentTheme.requiredInvalidColor
+    },
     textInput: {
       label: 'textInput',
       ...inputStyle,
@@ -170,6 +173,8 @@ const generateStyle = (componentTheme, props, state) => {
       })
     },
     beforeElement: {
+      display: 'inline-flex',
+      alignItems: 'center',
       label: 'textInput__beforeElement',
       ...flexItemBase,
       paddingInlineStart: componentTheme.padding,

package/es/TextInput/theme.js

@@ -50,6 +50,7 @@ const generateComponentTheme = theme => {
     color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : colors.textDanger,
     focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
     focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
     focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,

package/lib/TextInput/index.js

@@ -17,6 +17,7 @@ var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.
 var _FormField = require("@instructure/ui-form-field/lib/FormField");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
@@ -171,7 +172,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
   }
   get invalid() {
     return !!this.props.messages && this.props.messages.findIndex(message => {
-      return message.type === 'error';
+      return message.type === 'error' || message.type === 'newError';
     }) >= 0;
   }
   get focused() {
@@ -252,13 +253,18 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
       renderAfterInput = _this$props4.renderAfterInput,
       messages = _this$props4.messages,
       inputContainerRef = _this$props4.inputContainerRef,
+      isRequired = _this$props4.isRequired,
       styles = _this$props4.styles;
     const beforeElement = renderBeforeInput ? (0, _callRenderProp.callRenderProp)(renderBeforeInput) : null;
     const afterElement = renderAfterInput ? (0, _callRenderProp.callRenderProp)(renderAfterInput) : null;
     const renderBeforeOrAfter = !!beforeElement || !!afterElement;
+    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", {
+      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
+    }, " *")) : rawLabel;
     return (0, _emotion.jsx)(_FormField.FormField, {
       id: this.id,
-      label: (0, _callRenderProp.callRenderProp)(renderLabel),
+      label: label,
       messagesId: this._messagesId,
       messages: messages,
       inline: display === 'inline-block',

package/lib/TextInput/styles.js

@@ -133,6 +133,9 @@ const generateStyle = (componentTheme, props, state) => {
     flexShrink: 0
   };
   return {
+    requiredInvalid: {
+      color: componentTheme.requiredInvalidColor
+    },
     textInput: {
       label: 'textInput',
       ...inputStyle,
@@ -176,6 +179,8 @@ const generateStyle = (componentTheme, props, state) => {
       })
     },
     beforeElement: {
+      display: 'inline-flex',
+      alignItems: 'center',
       label: 'textInput__beforeElement',
       ...flexItemBase,
       paddingInlineStart: componentTheme.padding,

package/lib/TextInput/theme.js

@@ -56,6 +56,7 @@ const generateComponentTheme = theme => {
     color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    requiredInvalidColor: colors === null || colors === void 0 ? void 0 : colors.textDanger,
     focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
     focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
     focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "9.8.1",
+  "version": "9.9.0",
   "description": "A styled HTML text input component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,25 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.8.1",
-    "@instructure/ui-badge": "9.8.1",
-    "@instructure/ui-color-utils": "9.8.1",
-    "@instructure/ui-test-utils": "9.8.1",
-    "@instructure/ui-themes": "9.8.1",
+    "@instructure/ui-babel-preset": "9.9.0",
+    "@instructure/ui-badge": "9.9.0",
+    "@instructure/ui-color-utils": "9.9.0",
+    "@instructure/ui-test-utils": "9.9.0",
+    "@instructure/ui-themes": "9.9.0",
     "react-dom": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.8.1",
-    "@instructure/shared-types": "9.8.1",
-    "@instructure/ui-dom-utils": "9.8.1",
-    "@instructure/ui-form-field": "9.8.1",
-    "@instructure/ui-icons": "9.8.1",
-    "@instructure/ui-prop-types": "9.8.1",
-    "@instructure/ui-react-utils": "9.8.1",
-    "@instructure/ui-tag": "9.8.1",
-    "@instructure/ui-testable": "9.8.1",
+    "@instructure/emotion": "9.9.0",
+    "@instructure/shared-types": "9.9.0",
+    "@instructure/ui-a11y-utils": "9.9.0",
+    "@instructure/ui-dom-utils": "9.9.0",
+    "@instructure/ui-form-field": "9.9.0",
+    "@instructure/ui-icons": "9.9.0",
+    "@instructure/ui-prop-types": "9.9.0",
+    "@instructure/ui-react-utils": "9.9.0",
+    "@instructure/ui-tag": "9.9.0",
+    "@instructure/ui-testable": "9.9.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/TextInput/index.tsx

@@ -35,6 +35,7 @@ import { isActiveElement, addEventListener } from '@instructure/ui-dom-utils'
 import { FormField } from '@instructure/ui-form-field'
 import { testable } from '@instructure/ui-testable'
 import { withStyle, jsx } from '@instructure/emotion'
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -179,7 +180,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
     return (
       !!this.props.messages &&
       this.props.messages.findIndex((message) => {
-        return message.type === 'error'
+        return message.type === 'error' || message.type === 'newError'
       }) >= 0
     )
   }
@@ -314,6 +315,7 @@ class TextInput extends Component<TextInputProps, TextInputState> {
       renderAfterInput,
       messages,
       inputContainerRef,
+      isRequired,
       styles
     } = this.props
 
@@ -326,10 +328,22 @@ class TextInput extends Component<TextInputProps, TextInputState> {
 
     const renderBeforeOrAfter = !!beforeElement || !!afterElement
 
+    const rawLabel = callRenderProp(renderLabel)
+    const label = hasVisibleChildren(rawLabel) ? (
+      <React.Fragment>
+        {rawLabel}
+        {isRequired && (
+          <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
+        )}
+      </React.Fragment>
+    ) : (
+      rawLabel
+    )
+
     return (
       <FormField
         id={this.id}
-        label={callRenderProp(renderLabel)}
+        label={label}
         messagesId={this._messagesId}
         messages={messages}
         inline={display === 'inline-block'}

package/src/TextInput/props.ts

@@ -197,6 +197,7 @@ type TextInputStyle = ComponentStyle<
   | 'innerWrapper'
   | 'inputLayout'
   | 'afterElement'
+  | 'requiredInvalid'
 >
 
 const propTypes: PropValidators<PropKeys> = {

package/src/TextInput/styles.ts

@@ -157,6 +157,9 @@ const generateStyle = (
   }
 
   return {
+    requiredInvalid: {
+      color: componentTheme.requiredInvalidColor
+    },
     textInput: {
       label: 'textInput',
       ...inputStyle,
@@ -199,6 +202,8 @@ const generateStyle = (
       ...(!shouldNotWrap && { flexWrap: 'wrap' })
     },
     beforeElement: {
+      display: 'inline-flex',
+      alignItems: 'center',
       label: 'textInput__beforeElement',
       ...flexItemBase,
       paddingInlineStart: componentTheme.padding,

package/src/TextInput/theme.ts

@@ -54,6 +54,8 @@ const generateComponentTheme = (theme: Theme): TextInputTheme => {
 
     padding: spacing?.small,
 
+    requiredInvalidColor: colors?.textDanger,
+
     focusOutlineWidth: borders?.widthMedium,
     focusOutlineStyle: borders?.style,
     focusOutlineColor: colors?.borderBrand,

package/tsconfig.build.json

@@ -19,6 +19,7 @@
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-prop-types/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-a11y-utils/tsconfig.build.json" },
     { "path": "../ui-tag/tsconfig.build.json" },
     { "path": "../ui-testable/tsconfig.build.json" }
   ]