@instructure/ui-form-field 10.14.1-snapshot-2 → 10.14.1-snapshot-4

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.14.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-2) (2025-03-18)
+## [10.14.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.14.0...v10.14.1-snapshot-4) (2025-03-27)
 
-**Note:** Version bump only for package @instructure/ui-form-field
+
+### Bug Fixes
+
+* **ui-form-field:** fix misaligned text when size is exactly at the breakpoint ([142c508](https://github.com/instructure/instructure-ui/commit/142c508992d85ada9c0b70afea50bce0c3bb30d9))
 
 
 

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

@@ -1,4 +1,4 @@
-var _FormField, _FormField2, _FormField3;
+var _FormField, _FormField2, _FormField3, _FormField4;
 /*
  * The MIT License (MIT)
  *
@@ -29,6 +29,7 @@ import { vi } from 'vitest';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import '@testing-library/jest-dom';
 import { FormField } from '../index';
+import { userEvent } from '@testing-library/user-event';
 describe('<FormField />', () => {
   let consoleWarningMock;
   let consoleErrorMock;
@@ -67,4 +68,17 @@ describe('<FormField />', () => {
     const axeCheck = await runAxeCheck(container);
     expect(axeCheck).toBe(true);
   });
+  it('should focus the control with the supplied id', async () => {
+    const user = userEvent.setup();
+    render(_FormField4 || (_FormField4 = /*#__PURE__*/React.createElement(FormField, {
+      label: "labelText",
+      id: "foo"
+    }, /*#__PURE__*/React.createElement("input", null), /*#__PURE__*/React.createElement("input", {
+      id: "foo"
+    }), /*#__PURE__*/React.createElement("input", null))));
+    const label = screen.getByText('labelText').closest('label');
+    await user.click(label);
+    const input = document.getElementById('foo');
+    expect(input).toHaveFocus();
+  });
 });

package/es/FormField/index.js

@@ -47,7 +47,11 @@ class FormField extends Component {
     return /*#__PURE__*/React.createElement(FormFieldLayout, Object.assign({}, omitProps(this.props, FormField.allowedProps), pickProps(this.props, FormFieldLayout.allowedProps), {
       label: this.props.label,
       vAlign: this.props.vAlign,
-      as: "label",
+      as: "label"
+      // This makes the control in focus when the label is clicked
+      // This is needed to prevent the wrong element to be focused, e.g.
+      // multi selects Tag-s
+      ,
       htmlFor: this.props.id,
       elementRef: this.handleRef,
       margin: this.props.margin

package/es/FormFieldLayout/styles.js

@@ -92,7 +92,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
       // when inline add a small padding between the label and the control
       paddingRight: componentTheme.inlinePadding,
       // and use the horizontal alignment prop
-      [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+      [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
         textAlign: labelAlign
       }
     })
@@ -122,7 +122,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
       // removes margin in inline layouts
       gridTemplateColumns: gridTemplateColumns,
       gridTemplateAreas: gridTemplateAreas,
-      [`@media screen and (max-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+      [`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]: {
         // for small screens use the stacked layout
         gridTemplateColumns: '100%',
         gridTemplateAreas: generateGridLayout(false, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
@@ -150,7 +150,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
         marginTop: '0.375rem'
       }),
       ...(isInlineLayout && inline && {
-        [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+        [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
           justifySelf: 'start'
         }
       })

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

@@ -7,7 +7,8 @@ var _vitest = require("vitest");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 require("@testing-library/jest-dom");
 var _index = require("../index");
-var _FormField, _FormField2, _FormField3;
+var _userEvent = require("@testing-library/user-event");
+var _FormField, _FormField2, _FormField3, _FormField4;
 /*
  * The MIT License (MIT)
  *
@@ -69,4 +70,17 @@ describe('<FormField />', () => {
     const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
     expect(axeCheck).toBe(true);
   });
+  it('should focus the control with the supplied id', async () => {
+    const user = _userEvent.userEvent.setup();
+    (0, _react2.render)(_FormField4 || (_FormField4 = /*#__PURE__*/_react.default.createElement(_index.FormField, {
+      label: "labelText",
+      id: "foo"
+    }, /*#__PURE__*/_react.default.createElement("input", null), /*#__PURE__*/_react.default.createElement("input", {
+      id: "foo"
+    }), /*#__PURE__*/_react.default.createElement("input", null))));
+    const label = _react2.screen.getByText('labelText').closest('label');
+    await user.click(label);
+    const input = document.getElementById('foo');
+    expect(input).toHaveFocus();
+  });
 });

package/lib/FormField/index.js

@@ -55,7 +55,11 @@ class FormField extends _react.Component {
     return /*#__PURE__*/_react.default.createElement(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(this.props, FormField.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldLayout.FormFieldLayout.allowedProps), {
       label: this.props.label,
       vAlign: this.props.vAlign,
-      as: "label",
+      as: "label"
+      // This makes the control in focus when the label is clicked
+      // This is needed to prevent the wrong element to be focused, e.g.
+      // multi selects Tag-s
+      ,
       htmlFor: this.props.id,
       elementRef: this.handleRef,
       margin: this.props.margin

package/lib/FormFieldLayout/styles.js

@@ -98,7 +98,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
       // when inline add a small padding between the label and the control
       paddingRight: componentTheme.inlinePadding,
       // and use the horizontal alignment prop
-      [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+      [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
         textAlign: labelAlign
       }
     })
@@ -128,7 +128,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
       // removes margin in inline layouts
       gridTemplateColumns: gridTemplateColumns,
       gridTemplateAreas: gridTemplateAreas,
-      [`@media screen and (max-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+      [`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]: {
         // for small screens use the stacked layout
         gridTemplateColumns: '100%',
         gridTemplateAreas: generateGridLayout(false, hasNewErrorMsgAndIsGroup, hasVisibleLabel, hasMessages)
@@ -156,7 +156,7 @@ const generateStyle = (componentTheme, props, styleProps) => {
         marginTop: '0.375rem'
       }),
       ...(isInlineLayout && inline && {
-        [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]: {
+        [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]: {
           justifySelf: 'start'
         }
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-form-field",
-  "version": "10.14.1-snapshot-2",
+  "version": "10.14.1-snapshot-4",
   "description": "Form layout components.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.14.1-snapshot-2",
-    "@instructure/ui-babel-preset": "10.14.1-snapshot-2",
-    "@instructure/ui-test-utils": "10.14.1-snapshot-2",
-    "@instructure/ui-themes": "10.14.1-snapshot-2",
+    "@instructure/ui-axe-check": "10.14.1-snapshot-4",
+    "@instructure/ui-babel-preset": "10.14.1-snapshot-4",
+    "@instructure/ui-test-utils": "10.14.1-snapshot-4",
+    "@instructure/ui-themes": "10.14.1-snapshot-4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.14.1-snapshot-2",
-    "@instructure/emotion": "10.14.1-snapshot-2",
-    "@instructure/shared-types": "10.14.1-snapshot-2",
-    "@instructure/ui-a11y-content": "10.14.1-snapshot-2",
-    "@instructure/ui-a11y-utils": "10.14.1-snapshot-2",
-    "@instructure/ui-grid": "10.14.1-snapshot-2",
-    "@instructure/ui-icons": "10.14.1-snapshot-2",
-    "@instructure/ui-react-utils": "10.14.1-snapshot-2",
-    "@instructure/ui-utils": "10.14.1-snapshot-2",
-    "@instructure/uid": "10.14.1-snapshot-2",
+    "@instructure/console": "10.14.1-snapshot-4",
+    "@instructure/emotion": "10.14.1-snapshot-4",
+    "@instructure/shared-types": "10.14.1-snapshot-4",
+    "@instructure/ui-a11y-content": "10.14.1-snapshot-4",
+    "@instructure/ui-a11y-utils": "10.14.1-snapshot-4",
+    "@instructure/ui-grid": "10.14.1-snapshot-4",
+    "@instructure/ui-icons": "10.14.1-snapshot-4",
+    "@instructure/ui-react-utils": "10.14.1-snapshot-4",
+    "@instructure/ui-utils": "10.14.1-snapshot-4",
+    "@instructure/uid": "10.14.1-snapshot-4",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

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

@@ -29,6 +29,7 @@ import { runAxeCheck } from '@instructure/ui-axe-check'
 import '@testing-library/jest-dom'
 
 import { FormField } from '../index'
+import { userEvent } from '@testing-library/user-event'
 
 describe('<FormField />', () => {
   let consoleWarningMock: ReturnType<typeof vi.spyOn>
@@ -65,9 +66,22 @@ describe('<FormField />', () => {
 
   it('should meet a11y standards', async () => {
     const { container } = render(<FormField label="foo" id="bar" />)
-
     const axeCheck = await runAxeCheck(container)
-
     expect(axeCheck).toBe(true)
   })
+
+  it('should focus the control with the supplied id', async () => {
+    const user = userEvent.setup()
+    render(
+      <FormField label="labelText" id="foo">
+        <input />
+        <input id="foo" />
+        <input />
+      </FormField>
+    )
+    const label = screen.getByText('labelText').closest('label')!
+    await user.click(label)
+    const input = document.getElementById('foo')!
+    expect(input).toHaveFocus()
+  })
 })

package/src/FormField/index.tsx

@@ -68,6 +68,9 @@ class FormField extends Component<FormFieldProps> {
         label={this.props.label}
         vAlign={this.props.vAlign}
         as="label"
+        // This makes the control in focus when the label is clicked
+        // This is needed to prevent the wrong element to be focused, e.g.
+        // multi selects Tag-s
         htmlFor={this.props.id}
         elementRef={this.handleRef}
         margin={this.props.margin}

package/src/FormFieldLayout/styles.ts

@@ -107,7 +107,7 @@ const generateStyle = (
       // when inline add a small padding between the label and the control
       paddingRight: componentTheme.inlinePadding,
       // and use the horizontal alignment prop
-      [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]:
+      [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]:
         {
           textAlign: labelAlign
         }
@@ -138,7 +138,7 @@ const generateStyle = (
       verticalAlign: 'middle', // removes margin in inline layouts
       gridTemplateColumns: gridTemplateColumns,
       gridTemplateAreas: gridTemplateAreas,
-      [`@media screen and (max-width: ${componentTheme.stackedOrInlineBreakpoint})`]:
+      [`@media screen and (width < ${componentTheme.stackedOrInlineBreakpoint})`]:
         {
           // for small screens use the stacked layout
           gridTemplateColumns: '100%',
@@ -171,7 +171,7 @@ const generateStyle = (
       ...(hasMessages && hasNewErrorMsgAndIsGroup && { marginTop: '0.375rem' }),
       ...(isInlineLayout &&
         inline && {
-          [`@media screen and (min-width: ${componentTheme.stackedOrInlineBreakpoint})`]:
+          [`@media screen and (width >= ${componentTheme.stackedOrInlineBreakpoint})`]:
             {
               justifySelf: 'start'
             }