@instructure/ui-text-input 10.5.0 → 10.5.1-snapshot-1

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.
 
+## [10.5.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-1) (2024-11-11)
+
+
+### Bug Fixes
+
+* **many:** fix regression where form elements without label got misaligned ([139f7f1](https://github.com/instructure/instructure-ui/commit/139f7f130cd7e8372af869a13cfd50cd6a97fd85))
+
+
+
+
+
 # [10.5.0](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.5.0) (2024-11-07)
 
 

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';
@@ -247,11 +248,13 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     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: jsx(React.Fragment, null, callRenderProp(renderLabel), isRequired && jsx("span", {
-        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
-      }, " *")),
+      label: label,
       messagesId: this._messagesId,
       messages: messages,
       inline: display === 'inline-block',

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");
@@ -257,11 +258,13 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
     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, _emotion.jsx)(_react.default.Fragment, null, (0, _callRenderProp.callRenderProp)(renderLabel), isRequired && (0, _emotion.jsx)("span", {
-        css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
-      }, " *")),
+      label: label,
       messagesId: this._messagesId,
       messages: messages,
       inline: display === 'inline-block',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-text-input",
-  "version": "10.5.0",
+  "version": "10.5.1-snapshot-1",
   "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.5.0",
-    "@instructure/ui-babel-preset": "10.5.0",
-    "@instructure/ui-badge": "10.5.0",
-    "@instructure/ui-color-utils": "10.5.0",
-    "@instructure/ui-test-utils": "10.5.0",
-    "@instructure/ui-themes": "10.5.0",
+    "@instructure/ui-axe-check": "10.5.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.5.1-snapshot-1",
+    "@instructure/ui-badge": "10.5.1-snapshot-1",
+    "@instructure/ui-color-utils": "10.5.1-snapshot-1",
+    "@instructure/ui-test-utils": "10.5.1-snapshot-1",
+    "@instructure/ui-themes": "10.5.1-snapshot-1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -36,15 +36,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.5.0",
-    "@instructure/shared-types": "10.5.0",
-    "@instructure/ui-dom-utils": "10.5.0",
-    "@instructure/ui-form-field": "10.5.0",
-    "@instructure/ui-icons": "10.5.0",
-    "@instructure/ui-prop-types": "10.5.0",
-    "@instructure/ui-react-utils": "10.5.0",
-    "@instructure/ui-tag": "10.5.0",
-    "@instructure/ui-testable": "10.5.0",
+    "@instructure/emotion": "10.5.1-snapshot-1",
+    "@instructure/shared-types": "10.5.1-snapshot-1",
+    "@instructure/ui-dom-utils": "10.5.1-snapshot-1",
+    "@instructure/ui-form-field": "10.5.1-snapshot-1",
+    "@instructure/ui-icons": "10.5.1-snapshot-1",
+    "@instructure/ui-prop-types": "10.5.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.5.1-snapshot-1",
+    "@instructure/ui-tag": "10.5.1-snapshot-1",
+    "@instructure/ui-testable": "10.5.1-snapshot-1",
     "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'
@@ -327,17 +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={
-          <React.Fragment>
-            {callRenderProp(renderLabel)}
-            {isRequired && (
-              <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
-            )}
-          </React.Fragment>
-        }
+        label={label}
         messagesId={this._messagesId}
         messages={messages}
         inline={display === 'inline-block'}