fix(bulma-ui): avoid empty class attribute on several components

[bestaxbot]

Summary

Several components passed the result of classNames(...) straight to className, so when every entry was falsy the result ('') rendered as class="" instead of omitting the attribute. Fixed by falling back to undefined, the same pattern SelectBase already uses for its inner <select> (className={innerSelectClass || undefined}).

Fixed sites:

• Image's <img>
• Menu.Item's inner link (unless active)
• Tabs' Tab, TabItem, and TabList
• Table.Thead, Table.Tbody, Table.Tfoot, Table.Tr, Table.Th, and Table.Td

Test plan

• Added a failing-first regression test for each affected component asserting class is completely absent (not merely empty) when nothing would set it; confirmed all 11 failed against the pre-fix code with class="".
• Applied the || undefined fix at each site; confirmed the same tests pass.
• pnpm --filter @allxsmith/bestax-bulma run lint
• pnpm --filter @allxsmith/bestax-bulma run typecheck and typecheck:tests
• pnpm --filter @allxsmith/bestax-bulma run test:coverage (4247 passed, 99.6% overall coverage)
• pnpm run format:check
• pnpm run gen:catalog:check (no diff — no components added/renamed)
• pnpm run check:conformance (only pre-existing version-regression failure, caused by this sandbox's shallow clone, unrelated to this change)
• pnpm --filter @allxsmith/bestax-bulma run build
• pnpm --filter @allxsmith/bestax-bulma run build-storybook

Fixes #767

Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

Next included review available in 13 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Repository: allxsmith/bestax/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: cacb89fa-d61e-4ba0-8014-8d05bbc45450

📥 Commits

Reviewing files that changed from the base of the PR and between f40a19c and 7324a93.

📒 Files selected for processing (13)

• bulma-ui/src/components/Menu.tsx
• bulma-ui/src/components/Tabs.tsx
• bulma-ui/src/components/__tests__/Menu.test.tsx
• bulma-ui/src/components/__tests__/Tabs.test.tsx
• bulma-ui/src/elements/Image.tsx
• bulma-ui/src/elements/Tbody.tsx
• bulma-ui/src/elements/Td.tsx
• bulma-ui/src/elements/Tfoot.tsx
• bulma-ui/src/elements/Th.tsx
• bulma-ui/src/elements/Thead.tsx
• bulma-ui/src/elements/Tr.tsx
• bulma-ui/src/elements/__tests__/Image.test.tsx
• bulma-ui/src/elements/__tests__/Table.test.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Preview Deployment

Preview URL: https://6fbaae4a.bestax.pages.dev

[github-actions]

AI loop status: iteration 1/4 — fix-reviews at 0b7cca3 (2026-09-27T14:29:04Z).
Managed by claude-pr-loop.yml. To resume after a pause: set iteration back to 0 on the first line, re-add ai-loop, remove ai-loop-paused, then re-run via workflow_dispatch.

[bestaxbot]

Fix pass recap (iteration 1)

One open AI review thread, and it was a real one.

Finding	Thread	Outcome
Nested Menu.List still rendered class="" (Menu.tsx:131)	claude deep review	Fixed in 7324a93

Nothing refuted this round.

What I changed

MenuList only applies menu-list when level === 0, so a nested list with no className and no helper props reduced ulClass to '' and React wrote class="" — the identical defect this PR set out to remove, in the one family the issue names. I applied the same || undefined guard used at the other eleven sites and added a regression test beside the existing applies menu-list class only to top-level MenuList case. As with the original eleven, I verified it failing-first: against the unguarded line it reports class="", and it passes with the guard.

Gates run

Gate	Result
lint (bulma-ui)	pass — 0 errors, 7 pre-existing warnings
typecheck + typecheck:tests	pass
test:coverage (bulma-ui)	pass — 129 suites, 4248 tests, thresholds met
format:check	pass
check:conformance	pass — all 20 checks, including version-regression (the shallow-clone failure noted in the PR body is gone now that the clone is complete)
gen:catalog:check / gen:mcp:check	pass — no diff
build	pass
build-storybook	pass

[github-actions]

Preview Deployment

Preview URL: https://7558a640.bestax.pages.dev

[claude]

Deep review — 0 blocking · 3 advisory

N	Severity	Area	Finding	Location
1	🔵 Advisory	API	The wrapping <li> in MenuItem is the one element left in a touched file that can still emit class="": it takes className raw, so <Menu.Item className=""> renders <li class=""> while <Table.Td className=""> now omits the attribute. Caller-supplied, so outside the shape 767 describes, but the inconsistency now sits inside a file this PR touches.	bulma-ui/src/components/Menu.tsx:260
2	🔵 Advisory	Robustness	The inner element of MenuItem moves from an empty-string className to undefined. With as set to a custom component, a consumer that interpolates className into a template string now renders base undefined where it used to render base with a trailing space. The same trade-off SelectBase already made — recorded, not contested.	bulma-ui/src/components/Menu.tsx:268
3	🔵 Advisory	Correctness	PR body is stale against HEAD, and is maintainer-facing because neither this review nor the fix agent can edit it: the Fixed sites list omits the MenuList <ul> and the count of 11 is 12 as of 7324a93. The version-regression conformance failure it notes does not reproduce here either — pnpm check:conformance passes all 22 checks on this SHA.	PR description

Overall: The change is sound and narrowly scoped — classNames(...) || undefined at each of the 12 sites, matching the SelectBase precedent and the 27 places in the library that already do exactly this. I verified it empirically rather than by reading the diff: the full suite is green (4248 passed, 129 suites, coverage gate exit 0), pnpm check:conformance passes all 22 checks, format:check is clean, and lint reports 0 errors (7 pre-existing warnings in Slider/Taginput, untouched). Branch coverage is the strongest evidence the new tests are real rather than decorative: Menu.tsx, Tabs.tsx, Image.tsx, Tbody, Tfoot and Thead report 100% branches, and for Th/Td/Tr the uncovered-branch lines are 53-54 plus 68-69, 59, and 45 — the pre-existing isAligned/color/width ternaries, never the new || lines — so both sides of every added || are exercised, which means each new test genuinely reaches the empty-string case that used to render class="". The riskiest part of this PR is what is not in it, so start with the residual-risk list below rather than with the twelve one-line edits.

Residual risk:

• Other components in the same failure class — refuted for the touched files, and as far as static analysis reaches for the rest. I walked every className= site in bulma-ui/src (about 388) and checked the expression behind each: every remaining one carries an unconditional base from a string literal (usePrefixedClassNames("column"), "field-label", "level-item", "breadcrumb", "image", "tabs", "tabs-content", "menu", "menu-label", "table", "table-container", and so on), so none can collapse to the empty string.
• All-conditional expressions that only look unsafe — refuted one at a time. Reveal builds itemAnimationClasses from an object alone (Reveal.tsx:196), but revealed = !isAnimated || isRevealed keeps one key truthy in every state. Icon prefers containerClassName over its default (Icon.tsx:307), and an empty containerClassName is falsy, so it falls back to icon. The inner <ul> of Breadcrumb (Breadcrumb.tsx:83) takes no className at all.
• Custom class prefix — refuted. The process helper inside createPrefixedClassNames early-returns on the empty string before prefixing (bulma-ui/src/helpers/classNames.ts:110-116), so a ConfigProvider classPrefix cannot turn an all-falsy set into a bare-prefix class, and every fix here holds identically under one.
• Caller-supplied empty strings — open. <Menu.Item className=""> (row 1) and <Panel.InputBlock iconClassName="">, which renders <i class=""> (bulma-ui/src/components/Panel.tsx:264, default fas fa-search), are the two paths that still reach class="". Both sit outside the shape the issue describes — nothing puts a class on it — so they are named here rather than posted inline.
• Reintroduction — open. Nothing mechanical stops the next component from handing an all-conditional classNames(...) result straight to className: there is no lint rule and no check:conformance rule for it (I grepped scripts/ and eslint-plugin/src), and coverage cannot see it. The 12 new assertions pin only the sites that exist today.
• Downstream staleness — refuted. The absorbs refusal in bestax-migrate that says a bestax target renders the inner element with no class attribute (bestax-migrate/src/sources/bulma-classes/plan.ts:635) fires for two entries only, Select (inner <select>, already guarded) and Breadcrumb (inner <ul>, classless), so widening the set of classless elements invalidates no codemod message. The Image and Menu.Item mappings this unblocks are explicitly deferred to their own PR.
• Prior review — the nested MenuList finding from the earlier pass is genuinely fixed by 7324a93 (Menu.tsx:131), with its own test and 100% branch coverage on the file. That thread is resolved and is not reopened here.

🏄 Twelve tiny || undefined tweaks, zero drama — the markup comes out clean as a glassy dawn set, the whole suite paddles out green, and the only thing still bobbing in the lineup is an empty className somebody hands you on purpose. Good to go, brah.

[bestaxbot]

🏂 Rode it summit to base without catching a single edge. 1 iteration(s) deep, CI all-green top to base, and every AI review thread resolved and stomped flat.

You fleshbags kept the merge button for yourselves — so @allxsmith, wiggle those opposable thumbs and squash-merge when you're stoked. Loop never merges; apparently 'ship it' needs a pulse. 🤙

[github-actions]

📸 Story screenshots at handoff — 7324a93

15 stories (light + dark) from this PR's changed files under bulma-ui/src/ (workflow run · artifact story-screenshots-pr-793, 30-day retention).

elements-image--default · Elements/Image · Default

Light	Dark

elements-image--rounded · Elements/Image · Rounded

Light	Dark

elements-image--retina · Elements/Image · Retina

Light	Dark

elements-image--aspect-ratio-16-by-9 · Elements/Image · Aspect Ratio 16 By 9

Light	Dark

elements-image--aspect-ratio-4-by-3 · Elements/Image · Aspect Ratio 4 By 3

Light	Dark

elements-image--with-margin · Elements/Image · With Margin

Light	Dark

components-menu--basic · Components/Menu · Basic

Light	Dark

components-menu--compound-usage · Components/Menu · Compound Usage

Light	Dark

components-menu--forwarded-ref · Components/Menu · Forwarded ref (inner element, not the `<li>`)

Light	Dark

components-tabs--default · Components/Tabs · Default

Light	Dark

components-tabs--controlled · Components/Tabs · Controlled

Light	Dark

components-tabs--external-navigation · Components/Tabs · External Navigation

Light	Dark

components-tabs--alignment-centered · Components/Tabs · Alignment Centered

Light	Dark

components-tabs--alignment-right · Components/Tabs · Alignment Right

Light	Dark

components-tabs--small-tabs · Components/Tabs · Small Tabs

Light	Dark

> ✂ 17 more matched stories skipped by the cap: `elements-image--with-iframe`, `elements-image--with-custom-child`, `elements-image--with-text-color-and-background`, `components-tabs--medium-tabs`, `components-tabs--large-tabs`, `components-tabs--boxed-tabs`, `components-tabs--toggle-tabs`, `components-tabs--toggle-rounded-tabs`, `components-tabs--fullwidth-tabs`, `components-tabs--with-icons`, … — full set in the artifact.

[bestax-release-bot]

🎉 This PR is included in version 5.16.11 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bestax-release-bot]

🎉 This PR is included in version 2.13.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bestax-release-bot]

🎉 This PR is included in version 1.7.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[bestax-release-bot]

🎉 This PR is included in version 4.2.13 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀