UI: Make vertical alignment of TestStatusIcon more robust

[Sidnioulz]

Closes #31719

What I did

Swapped icons and text in TestStatusIcon to have better alignment to the edge of the testing module and context menus.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

• Browse through stories of the TestProviderRender, some have statuses
• Run all tests and see the change in the SB UI

Documentation

ø

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Style
  • Reordered status icons and count information in test provider displays for consistent visual presentation across component, coverage, and accessibility sections.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 691632d

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	11m 59s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-12-08 17:56:31 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 691632d

---

☁️ Nx Cloud last updated this comment at 2025-12-08 17:43:16 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

DOM element reordering within ActionList.Button blocks in a React component. TestStatusIcon components and percentage text were repositioned relative to status count displays, with no functional logic changes.

Changes

Cohort / File(s)	Summary
DOM element reordering code/addons/vitest/src/components/TestProviderRender.tsx	Reordered TestStatusIcon placement within three ActionList.Button blocks: moved component test status icon after count display, repositioned coverage percentage text before icon instead of after, and moved accessibility status icon after count display.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

• Single file affected with only DOM element reordering
• No logic or functional changes
• No modifications to component signatures or behavior
• Changes are purely visual/layout-based and easy to verify

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9548e92 and 691632d.

📒 Files selected for processing (1)

• code/addons/vitest/src/components/TestProviderRender.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

• code/addons/vitest/src/components/TestProviderRender.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

• code/addons/vitest/src/components/TestProviderRender.tsx

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/addons/vitest/src/components/TestProviderRender.tsx

code/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions that need to be tested from their modules

Files:

• code/addons/vitest/src/components/TestProviderRender.tsx

code/**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

• code/addons/vitest/src/components/TestProviderRender.tsx

🧠 Learnings (4)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests

Applied to files:

• code/addons/vitest/src/components/TestProviderRender.tsx

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx,js,jsx} : Aim for high test coverage of business logic (75%+ for statements/lines) using coverage reports

Applied to files:

• code/addons/vitest/src/components/TestProviderRender.tsx

📚 Learning: 2025-11-05T09:36:55.944Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

Applied to files:

• code/addons/vitest/src/components/TestProviderRender.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: normal
• GitHub Check: nx
• GitHub Check: nx
• GitHub Check: nx
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (3)

code/addons/vitest/src/components/TestProviderRender.tsx (3)

298-301: Component tests status: child order change is safe

Moving <TestStatusIcon> after the error/warning count keeps logic and accessibility intact (the button’s ariaLabel still provides the accessible name) and matches the stated visual alignment goal. No functional impact.

---

345-351: Coverage link: reordered percentage text and icon without behavior change

Showing {percentage}% before <TestStatusIcon> only affects visual order; the link target, ariaLabel, and status logic are unchanged. This should be purely a layout/alignment improvement.

---

415-418: Accessibility status: icon moved after count as intended

Placing <TestStatusIcon> after the combined error/warning count mirrors the component-tests row, improving visual consistency. ariaLabel={a11yStatusLabel} remains unchanged, so screen-reader behavior is preserved.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[MichaelArestad]

Nice! LGTM!