fix(ui-form-field): always display messages at the top of form groups

[matyasf]

Summary

• The v2 FormFieldLayout now shows every message type above the controls in a group, not just errors. This covers RadioInputGroup, CheckboxGroup, and FormFieldGroup.

Test Plan

• In the docs app, open RadioInputGroup, CheckboxGroup, and FormFieldGroup. Check that hint and success messages show above the controls in both stacked and inline layouts.
• Check that error messages still show above the controls and keep the small gap before the first control.
• Check that non-group form fields (e.g. TextInput) still show messages below the input.

Fixes INSTUI-5199

🤖 Generated with Claude Code

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2733/
Built to branch gh-pages at 2026-09-30 15:12 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

Visual regression report

Cypress suite: ✅ Passing

Visual diff: ⚠️ Changes detected.

Status	Count
Unchanged	92
Changed	7
New	0
Removed	0

Accessibility (axe): ✅ No violations.

📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches.

Diff images (7)

badge-canvas.png — 1573 pixels differ

checkboxgroup-canvas.png — 5379 pixels differ

checkboxgroup-dark.png — 5249 pixels differ

checkboxgroup-light.png — 4787 pixels differ

form-errors-canvas.png — 37228 pixels differ

form-errors-dark.png — 38391 pixels differ

form-errors-light.png — 37548 pixels differ

_{Baselines come from the visual-baselines branch. They refresh on every merge to master. The Cypress suite line covers the a11y and console-error assertions — a ❌ there means the suite found real issues even if the visual diff is clean.}

[git-nandor]

In index.tsx:100, hasMsgAndIsGroup = hasMessages && !!isGroup will now apply to all message types, causing the layout of the screenreader-only variant to shift.

The example below demonstrates this:

<Flex gap="large" alignItems="start">
  <div>
    <RadioInputGroup name="fruit1">
      <RadioInput label="Apple" value="apple" />
    </RadioInputGroup>
  </div>
  <div>
    <RadioInputGroup
      name="fruit2"
      messages={[
        { type: 'screenreader-only', text: 'Pick one option' }
      ]}
    >
      <RadioInput label="Apple" value="apple" />
    </RadioInputGroup>
  </div>
</Flex>

suggestion:

      ...(hasNonEmptyMessages && hasMsgAndIsGroup && { marginTop: '0.375rem' }),

[matyasf]

good catch, I've fixed this case (also refactored the logic here, it was getting chaotic)