UI: Fix excessive height in TabbedArgsTable #33205

Sidnioulz · 2025-11-27T09:50:22Z

What I did

Set TabsView height to fit content in TabbedArgsTable. I chose to do that rather than edit TabsView because the height: 100% really helps with ensuring ScrollArea correctly works. If you remove it, for instance, you'll see the secondary TabsView in the A11y addon panel stops scrolling.

My reasoning is it's a lot easier to notice and debug an excessive height in the UI than it is to debug and notice an incorrect scroll behaviour.

We were missing stories to notice and diagnose this specific case, so I added them. Interestingly, the bug only occurs in DocsPage and not in standalone stories. I added an autodocs with TabbedArgsTable on the TabbedArgsTable stories so we have a repro case, even though it won't be covered by smoke tests.

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

Visit http://localhost:6006/?path=/docs/addons-docs-blocks-components-argstable-tabbedargstable--docs

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

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
- Enhanced visual consistency for the tabbed arguments table with improved wrapper styling.
Tests
- Added a new test case demonstrating the tabbed arguments table with surrounding content context.
Refactor
- Improved type safety and code organization for better maintainability.

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

nx-cloud · 2025-11-27T09:52:08Z

View your CI Pipeline Execution ↗ for commit acd744a

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	50s	View ↗

☁️ Nx Cloud last updated this comment at 2025-11-27 10:12:09 UTC

coderabbitai · 2025-11-27T09:54:41Z

📝 Walkthrough

Walkthrough

The TabbedArgsTable story file was refactored to use proper TypeScript typing with a dedicated meta constant and StoryObj-typed story exports. A new story variant, WithContentAround, was added. The component now wraps TabsView with a styled container that sets height to fit-content.

Changes

Cohort / File(s)	Summary
Story file refactoring `code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx`	Extracted meta constant with proper `Meta<typeof TabbedArgsTable>` typing, converted all story exports to `StoryObj<typeof meta>` type, added new `WithContentAround` story with custom render wrapper, and updated imports for `Meta`, `StoryObj`, and `TabsView`.
Component styling `code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx`	Imported `styled` from storybook/theming, created `StyledTabsView` wrapper with `height: fit-content`, and replaced `TabsView` usage with the styled variant.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Story file changes are primarily TypeScript type improvements applied consistently across exports (repetitive pattern)
New story variant (WithContentAround) is a straightforward addition with render wrapper composition
Component change is a simple styled wrapper with single CSS property

Possibly related PRs

storybookjs/storybook#32270: Refactors TabbedArgsTable to use AriaTabs (replacing TabsState) — directly related as it modifies the same component being styled in this PR.

✨ Finishing touches

📝 Generate docstrings

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

Provide your own instructions using the high_level_summary_instructions setting.
Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

📝 Description — Summarize the main change in 50–60 words, explaining what was done.

📓 References — List relevant issues, discussions, documentation, or related PRs.

📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.

📊 Contributor Summary — Include a Markdown table showing contributions:
| Contributor | Lines Added | Lines Removed | Files Changed |

✔️ Additional Notes — Add any extra reviewer context.
Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

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

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx (1)

1-3: Typed meta and story objects look correct; consider whether TabsView should be exposed as a subcomponent

Using a typed meta with satisfies Meta<typeof TabbedArgsTable> plus StoryObj<typeof meta> stories is a solid upgrade and will help keep ArgsTable/TabbedArgsTable stories type‑safe. The tabs args wiring against Normal/Compact/Sections.args also matches the component’s expected shape.

Minor design question: adding TabsView to subcomponents means this internal layout primitive will show up in autodocs. If the intent is purely to aid debugging this layout regression, that’s fine; otherwise you might consider omitting it from subcomponents to keep the public docs surface focused on ArgsTable/TabbedArgsTable.

Also applies to: 5-16, 17-42

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b90e26e and acd744a.

📒 Files selected for processing (2)

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx (3 hunks)
code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

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

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

Use camelCase for variable and function names

Files:

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx
code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx

**/*.{ts,tsx}

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

**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes

Files:

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx
code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx

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

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

**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes

Files:

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx
code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx

code/**/!(*.test).{ts,tsx,js,mjs}

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

code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
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/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx
code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

⏰ 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). (2)

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

🔇 Additional comments (2)

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx (1)

6-7: Scoped TabsView height override matches the layout bugfix intent

Wrapping TabsView in StyledTabsView with height: 'fit-content' keeps the change local to TabbedArgsTable and should prevent the args table from occupying full viewport height in DocsPage while leaving other TabsView usages untouched. The props are transparently forwarded, so behavior is preserved aside from the height rule.

One thing to keep an eye on is the zero‑tab case (used by the Empty story): tabsFromEntries can still be [] and is passed through unchanged. That’s pre‑existing behavior, but worth confirming that TabsView continues to handle an empty tabs array gracefully with the new style applied.

Also applies to: 17-19, 43-43

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx (1)

44-59: WithContentAround story is a good targeted repro for layout issues

The WithContentAround story correctly reuses the same tabs args and wraps TabbedArgsTable with surrounding content, which should make the excessive‑spacing bug easy to see and verify in isolation. The custom render implementation is straightforward and aligns with StoryObj typing.

UI: Fix excessive height in TabbedArgsTable (cherry picked from commit 82bd4ea)

UI: Fix excessive height in TabbedArgsTable

acd744a

Sidnioulz requested a review from valentinpalkovic November 27, 2025 09:50

Sidnioulz assigned Sidnioulz and valentinpalkovic Nov 27, 2025

Sidnioulz added bug patch:yes Bugfix & documentation PR that need to be picked to main branch ci:normal upgrade:10.1 labels Nov 27, 2025

Sidnioulz mentioned this pull request Nov 27, 2025

[Bug]: Doc Controls table with subcomponents adds a ton of extra spacing #33196

Closed

coderabbitai bot reviewed Nov 27, 2025

View reviewed changes

valentinpalkovic approved these changes Nov 27, 2025

View reviewed changes

valentinpalkovic merged commit 82bd4ea into next Nov 27, 2025
68 of 74 checks passed

valentinpalkovic deleted the sidnioulz/issue-33196 branch November 27, 2025 14:27

This was referenced Nov 28, 2025

Release: Patch 10.1.1 #33204

Merged

Release: Prerelease alpha 10.2.0-alpha.2 #33214

Merged

yannbf pushed a commit that referenced this pull request Nov 28, 2025

Merge pull request #33205 from storybookjs/sidnioulz/issue-33196

1ddbad1

UI: Fix excessive height in TabbedArgsTable (cherry picked from commit 82bd4ea)

github-actions bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Nov 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

UI: Fix excessive height in TabbedArgsTable #33205

UI: Fix excessive height in TabbedArgsTable #33205

Sidnioulz commented Nov 27, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

nx-cloud bot commented Nov 27, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 27, 2025

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

UI: Fix excessive height in TabbedArgsTable #33205

UI: Fix excessive height in TabbedArgsTable #33205

Conversation

Sidnioulz commented Nov 27, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

nx-cloud bot commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 27, 2025

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Sidnioulz commented Nov 27, 2025 •

edited by coderabbitai bot

Loading

nx-cloud bot commented Nov 27, 2025 •

edited

Loading