fix(ui-form-field): fix misaligned text when size is exactly at the breakpoint

Also add a test so clicking on the label selects the right control

Author: matyasf

packages/ui-form-field/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()
+  })
 })

packages/ui-form-field/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}

packages/ui-form-field/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'
             }