fix(bulma-ui): render the four burger spans Bulma v1 positions

[allxsmith]

Pull Request

Description

Navbar.Burger renders the four <span aria-hidden="true"> that Bulma v1's burger() mixin positions, instead of three.

• bulma-ui (@allxsmith/bestax-bulma)
• create-bestax (create-bestax)
• docs (@allxsmith/bestax-docs)
• Other (please specify):

The mixin places spans 1 and 2 in the middle, where they rotate into the X when open, span 3 above and span 4 below. With three spans the closed burger drew two bars. The open X looked right, since it only uses spans 1 and 2, which is how this went unnoticed.

I confirmed it in the browser against Bulma 1.0.4's stylesheet. Three spans: the closed burger shows two bars. Four spans: three bars. The open state is the same X in both.

The test that pinned the old count now asserts four, all aria-hidden. A code comment in Navbar.Burger says why there are four, so the count isn't "tidied" back to three.

Related Issue(s)

Closes #755

Type of Change

• Bug fix
• New feature
• Refactor
• Documentation
• Performance
• Build tooling
• Other (please describe):

Checklist

• My code follows the project style guidelines
• I have performed a self-review of my code
• I have added tests that prove my fix is effective or that my feature works
• I have added/updated documentation as needed
• I have updated Storybook stories as needed (bulma-ui)
• My changes require a change to the documentation
• All new and existing tests passed
• Any relevant dependencies are updated
• If this PR changes commands, conventions, or package structure, the affected CLAUDE.md files are updated

Screenshots / Demos

Rendered with Bulma 1.0.4's CSS:

	closed	open
3 spans (before)	two bars	X
4 spans (after)	three bars	X

Additional Context

• The workaround [Bug] bulma-ui: Navbar.Burger renders three spans where Bulma v1's burger places four #755 mentioned now over-corrects. Anyone who passed a fourth <span aria-hidden="true" /> as a child to fill the gap should drop it: children still render after the burger's own spans, so it becomes a fifth span. [Bug] bulma-ui: Navbar.Burger renders three spans where Bulma v1's burger places four #755 advised against documenting that workaround, so it shouldn't be common.
• Nothing else pins the count. The Hero story's raw burger already has four spans, and bestax-migrate's family:navbar-burger TODO is about the toggle being a <button>, not about spans.

Summary by CodeRabbit

• Tests
  • Updated navbar burger coverage to verify its four decorative spans.
• Documentation
  • Clarified the existing burger icon layout in code comments. There are no changes to the navbar’s appearance or behavior.

[allxsmith]

deep-review: read-only: don't install, build or run tests; CI covers them on this head.

Priorities:

1. bulma-ui/src/components/Navbar.tsx: does Navbar.Burger now match Bulma v1's burger() mixin (node_modules/bulma/sass/utilities/mixins.scss) and Bulma's own navbar markup, closed and open?
2. bulma-ui/src/components/__tests__/Navbar.test.tsx: does the test hold the count and aria-hidden without over-specifying?

Skip: the Hero story's raw burger and bestax-migrate's navbar-burger TODO (both checked in the PR body).

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Warning

Review limit reached

Next included review available in 49 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: 8fd60828-8efd-4aab-9bed-4145bf746cd6

📥 Commits

Reviewing files that changed from the base of the PR and between 5776714 and 9b7664c.

📒 Files selected for processing (4)

• bestax-mcp/data/components/Navbar.json
• bulma-ui/src/components/Navbar.tsx
• bulma-ui/src/components/__tests__/Navbar.test.tsx
• docs/docs/api/components/navbar.md

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Advanced

Run ID: 867679cb-c260-4e61-b52c-4402a6a899c5

📥 Commits

Reviewing files that changed from the base of the PR and between b5fb1f5 and 5776714.

📒 Files selected for processing (2)

• bulma-ui/src/components/Navbar.tsx
• bulma-ui/src/components/__tests__/Navbar.test.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

Walkthrough

The change adds a comment about the existing four-span Navbar.Burger layout and updates its test to expect four spans, each with aria-hidden="true". The rendered markup and runtime behavior do not change.

Changes

Navbar burger

Layer / File(s)	Summary
Burger markup and test bulma-ui/src/components/Navbar.tsx, bulma-ui/src/components/__tests__/Navbar.test.tsx	A comment describes the existing four-span Bulma layout. The test now expects four spans, each with aria-hidden="true".

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: bestaxbot

Merge Risk: ⚪ Minimal · up to 57767

This change documents existing burger markup and aligns its test with the four hidden spans. No behavior change or merge-blocking risk is identified.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the main change: rendering four burger spans for Bulma v1 positioning.
Description check	✅ Passed	The description includes the required sections, identifies the affected package, links issue #755, classifies the change as a bug fix, documents the implementation and test updates, and records checkl…
Linked Issues check	✅ Passed	Issue #755 requires four <span aria-hidden="true"> elements in Navbar.Burger. The reviewed code renders four decorative spans before custom children. The updated test asserts a count of four and v…
Out of Scope Changes check	✅ Passed	The pull request changes only Navbar.Burger markup, adds an explanatory Bulma v1 comment, and updates its focused test. These changes directly support issue #755. No unrelated implementation or test…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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://0e7e165e.bestax.pages.dev

[claude]

Deep review — 0 blocking · 2 advisory

#	Severity	Area	Finding	Location
1	🔵 Advisory	API	The #755 workaround now over-corrects, and nothing a consumer reads says so — only the PR body does. A consumer who added a fourth <span aria-hidden="true" /> child gets five spans, and span 5 matches the base span rule (absolute, currentColor, 2×20px) with no nth-child inset, so it lands at its static position and draws a visible extra bar.	bulma-ui/src/components/Navbar.tsx:322
2	🔵 Advisory	Coverage	Nothing pins the spans before children, which is what the CSS contract actually needs (the burger's own spans must be nth-child 1–4). The count assertion still passes if a refactor put {children} first. children on Navbar.Burger has no test at all — pre-existing, not introduced here.	bulma-ui/src/components/__tests__/Navbar.test.tsx:276

Overall: The fix is correct, and I confirmed it from the stylesheet rather than the diff. With Bulma 1.0.4's defaults (themes/light.scss:92-94 — gap 5px, item-height 2px, item-width 20px) in a 40px box (navbar.scss:266, @include mx.burger(2.5rem)), the mixin puts spans 1–2 at 19–21px, span 3 at 13–15px (bottom: calc(50% + gap)) and span 4 at 25–27px (top: calc(50% + gap)): four spans draw three bars 6px apart, three spans draw only the 13px and 19px bars — a top-heavy two-bar glyph. is-active rotates 1 and 2 and zeroes the opacity of 3 and 4, so the open X is identical either way, exactly as the PR body explains the miss. The riskiest part is the silent rendering change for anyone carrying the #755 workaround (row 1); there is nothing for a human to fix in the code.

Residual risk:

• An older Bulma without the four-span mixin. Refuted: bulma-ui/package.json:89 declares "bulma": "^1.0.4" as a direct dependency, so the lowest stylesheet a consumer resolves already carries these nth-child rules. A hand-pinned 0.9.x stylesheet from a CDN would draw an extra bar, but that is outside a v1-only library's contract.
• Another surface still pinning three spans. Refuted by grep: the changed assertion is the only span-count assertion in the repo. bestax-migrate/src/sources/bulma-classes/__testfixtures__/navbar.{input,output}.tsx and eval/agent-loop/fixtures/bulma-app/src/components/SiteNavbar.tsx already use four, and skills/bestax-migrate/references/bulma-classes/unmappables.md:165 says "renders its own spans" — count-agnostic, so no skills/ update is owed.
• Docs or generated artefacts going stale. Refuted: docs/docs/api/components/navbar.md states no span count and its three burger examples render the component live; the MCP index, skill catalog and ESLint metadata are generated from props and JSDoc, not the render body, so a JSX comment inside return cannot stale them.
• fragile-prose rejecting the new comment's counts. Refuted: that check targets only .github/** yaml, CLAUDE.md files and docs/docs/guides (scripts/check-conformance.mjs:3958-3975); component source is deliberately out of scope.
• Open: row 2 — the spans-before-children ordering the mixin depends on is asserted nowhere.

🏄 Two bars where Bulma wanted three, and the X hid the evidence the whole time — classic. One extra span, a test that counts them and confirms they're all hidden, and the burger finally looks like a burger. Ship it.

[allxsmith]

Thanks for the deep review. Both advisories are fixed in the latest commit:

1. The workaround over-corrects. children's TSDoc now says they render after the burger's four bar spans, and that Bulma styles every <span> in the burger as a bar, so an extra span draws an extra bar. The regenerated props table on the Navbar page and the MCP index carry it, so readers of the types and the docs both see it.
2. Spans before children. A new test renders a child and asserts the first four children are the spans and the child comes after. I moved {children} ahead of the spans to watch it fail, then restored it.

[github-actions]

Preview Deployment

Preview URL: https://d0237288.bestax.pages.dev

[allxsmith]

deep-review: fresh

Read-only: do not install, build or run tests; CI is green on this head.
Review the whole PR as it stands now, including 9b7664c (the children TSDoc, the ordering test, and the regenerated props table and MCP entry).
Priorities: 1. bulma-ui/src/components/Navbar.tsx against Bulma v1 burger() mixin. 2. bulma-ui/src/components/__tests__/Navbar.test.tsx. 3. docs/docs/api/components/navbar.md and bestax-mcp/data/components/Navbar.json agree with the TSDoc.

[claude]

Deep review — 0 blocking · 1 advisory

No.	Severity	Area	Finding	Location
1	🔵 Advisory	Correctness	The new TSDoc sentence — an extra span here draws an extra bar — holds only in the open state. A fifth span matches .navbar-burger span (absolute, currentColor, 20x2px, left: 10px) but no nth-child inset, so it takes its flex static position: vertically centred in the 40px box at top: 19px, identical to spans 1-2 at calc(50% - 1px) = 19px. Closed, it hides under the middle bar; only is-active (which rotates 1-2 and zeroes 3-4) exposes it, as a bar across the X. This refines my own prior row 1, which called it a visible extra bar with no state qualifier. No wording change requested — the sentence claims a bar is drawn, and one is.	bulma-ui/src/components/Navbar.tsx:283

Overall: The fix is correct, and I confirmed it from the stylesheet rather than the diff. sass/utilities/mixins.scss:172-183 puts spans 1-2 at top: calc(50% - item-height/2), span 3 at bottom: calc(50% + gap) and span 4 at top: calc(50% + gap); with the Bulma 1.0.4 defaults (gap 5px, item-height 2px, item-width 20px — css/bulma.css:1897-1899) in the 40px burger box that is bars at 13px, 19px and 25px, so three spans drew a top-heavy two-bar glyph and four draw the intended three. is-active (mixins.scss:205-219) touches only spans 1-4, the same way in both cases, which is exactly why the open X hid the defect. The second commit closes my prior coverage row: Navbar.test.tsx:283-297 now pins the four spans ahead of children by tag name and asserts the child lands at index 4, so a refactor moving children first fails on the first element being an EM instead of passing a bare count. Nothing here for a human to fix; the one thing worth a glance is the silent DOM change for anyone carrying the workaround from issue 755, which the TSDoc now names.

Residual risk:

• The three prose copies drifting from the TSDoc. Refuted: Custom content inside the burger appears in exactly three files (Navbar.tsx, docs/docs/api/components/navbar.md, bestax-mcp/data/components/Navbar.json) and all three carry the identical sentence. Both derived copies are machine-gated rather than trusted: the MCP props come from props-extract.mjs (gen-mcp-index.mjs:629, gated by gen:mcp:check), and the docs Props table sits inside the generated props region (navbar.md:493-626), which checkDocsGenerated() in scripts/check-conformance.mjs:462-484 re-renders and byte-compares — so gen:api-docs:check being absent from ci.yml and from pnpm all does not leave that table unguarded. props-extract.mjs:405 collapses the multi-line TSDoc to single spaces, which is exactly what the one-line cell holds.
• Another surface still asserting three spans. Refuted by grep: the changed assertion was the only span-count assertion in the repo, and the two raw-markup burgers (bulma-ui/src/layout/Hero.stories.tsx:254-259, eval/agent-loop/fixtures/bulma-app/src/components/SiteNavbar.tsx:24-27) already wrote four. No snapshot covers the burger. The count-agnostic wording in skills/bestax-migrate/references/bulma-classes/unmappables.md:165 and bestax-migrate/src/sources/bulma-classes/class-map.ts:1509 (renders its own spans) means no skills/ or codemod update is owed.
• A consumer on a stylesheet whose mixin wants three. Refuted: bulma-ui/package.json:89 pins bulma ^1.0.4 as a direct dependency, so the lowest stylesheet a consumer resolves already carries the four-span nth-child rules; a hand-pinned 0.9.x CDN sheet sits outside the contract of a v1-only library.
• A nested span inside children becoming a bar. Open, and correctly described rather than fixed: the compiled rule is the descendant selector .navbar-burger span (css/bulma.css:7501), not a child selector, so the wrapper span of an Icon passed as a child is styled as a bar too — which is what the phrase about every span in the burger says. Closing it would mean changing where children render, a public-API change rather than this patch.
• Open — no automated surface can see the glyph regress. jsdom applies no Bulma CSS, so the new tests pin DOM shape only, and .navbar-burger is display: none above the desktop breakpoint (css/bulma.css:7744-7746), which the stories already acknowledge (Navbar.stories.tsx:390): BurgerOnly and BurgerActive render nothing at the Storybook default width. The docs live examples force display: flex (navbar.md:107,124) and do show it, so a human on the docs site is the only check on the rendered bars.

🏄 Two bars pretending to be three, and the open X covered for it the whole time — sneaky. The mixin says four, the geometry says 13/19/25, and now a test even holds the spans in line ahead of the kids. Clean set, paddle out. 🤙

[allxsmith]

Thanks for the fresh review. No change for the single advisory: as you note, the TSDoc sentence ("an extra span here draws an extra bar") holds, since a bar is drawn in both states. Closed, it just sits under the middle one. This round has nothing blocking and no open threads on the current head.

[bestax-release-bot]

🎉 This PR is included in version 5.16.10 🎉

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.12.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 📦🚀