feat: DR-7099 Add 2nd tab to codeblock

[carlagn]

Summary by CodeRabbit

• New Features
  • Introduced multi-axis tabs with variant dimensions, enabling dropdown selection of variants (e.g., language, framework) alongside primary tabs.
  • Tab content displays only when both the primary tab and selected variant match.
  • Enhanced documentation with multi-axis tab examples and comprehensive behavior guides.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blog	Ready	Preview, Comment	Apr 20, 2026 0:23am
docs	Ready	Preview, Comment	Apr 20, 2026 0:23am
eclipse	Ready	Preview, Comment	Apr 20, 2026 0:23am
site	Ready	Preview, Comment	Apr 20, 2026 0:23am

[coderabbitai]

Caution

Review failed

The head commit changed during the review from 036ffe4 to 3f6c94a.

Walkthrough

This PR extends the CodeBlock component system to support multi-axis tabs. It adds variants and defaultVariant props to CodeBlockTabs, introduces a variant prop to CodeBlockTab, expands the TabsContext to manage variant state and availability calculations, and integrates a dropdown selector in the tab list for variant switching.

Changes

Cohort / File(s)	Summary
Component Documentation apps/eclipse/content/design-system/components/codeblock.mdx	Documented new variants and defaultVariant props for CodeBlockTabs, added variant prop to CodeBlockTab, clarified rendering behavior (tab panel renders only when primary tab is active and variant matches dropdown selection), and expanded examples with multi-axis tab use cases.
Context & State Management packages/eclipse/src/components/codeblock.tsx	Extended TabsContext to include variant-related state (variants, activeVariant, setActiveVariant, availableVariants, availableTabs, existingCombos). Added variants and defaultVariant props to CodeBlockTabs. Implemented computation of existingCombos by iterating children, derived availableVariants for active tab, and availableTabs for active variant.
Component Integration packages/eclipse/src/components/codeblock.tsx	Updated CodeBlockTabsList to render a Select dropdown when variants exist. Modified CodeBlockTabsTrigger to disable triggers when current variant lacks matching content. Refactored CodeBlockTab to conditionally render children only when parent tab is active and declared variant matches activeVariant.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The changes introduce interconnected multi-axis tab logic across several components. While each individual piece is reasonably clear, the review requires understanding how variant state flows through the system, verifying the existingCombos computation correctly captures all tab-variant combinations, confirming the dropdown-driven availability filtering works as intended, and ensuring the conditional rendering logic in CodeBlockTab properly gates content by both tab state and variant matching. The moderate complexity stems from the interplay between these pieces rather than density of individual logic blocks.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 77.78% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Add 2nd tab to codeblock' is overly vague and doesn't accurately convey the core change: implementing a multi-axis tab system with variants support.	Consider revising to something like 'feat: Add multi-axis variant support to CodeBlock tabs' to better reflect that this enables flexible tab combinations, not just a literal second tab.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	1 changed	Apr 20, 2026, 12:29 PM

[coderabbitai]

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/eclipse/src/components/codeblock.tsx`:
- Around line 275-279: The debug console.log in the tab change handler should be
removed: delete the console.log call inside handleTabChange (which references
tab, activeTab, activeVariant) and ensure the function simply calls
setInternalActiveTab(tab) and onValueChange?.(tab); also remove the other stray
debug logs around lines handling the same tab/variant logic (the
console.debug/console.log calls mentioned at 287-292) so the component emits no
runtime console output during normal tab interactions.
- Around line 254-256: Normalize variant handling by deriving a single boolean
hasVariants = (variants?.length ?? 0) > 0 and use it to gate the tabs and
dropdown in CodeBlockTabsList; ensure activeVariant (and activeTab if present)
is initialized and revalidated to a valid value by falling back to the first
available variant when defaultVariant is missing or not in variants (e.g., set
activeVariant to defaultVariant if it exists in variants, otherwise to
variants[0] when hasVariants is true, otherwise to ""), and update any places
checking truthiness of variants to check hasVariants instead so an empty array
no longer hides the dropdown while disabling triggers.
- Around line 361-397: The variant Select is currently nested inside the ARIA
TabsList (TabsList), which breaks tablist semantics; move the Select (including
Select, SelectTrigger, SelectValue, SelectContent, SelectItem and their props)
out of the TabsList so TabsList only contains the tab pills div
(props.children). Wrap TabsList and the Select in a parent flex container (use
the existing hasVariants check) to preserve the layout (left: TabsList with the
"flex items-center overflow-x-auto" div; right: Select as a sibling), remove the
conditional "items-center justify-between pr-2" class from TabsList and apply
spacing/alignment to the parent container instead, and keep ctx and ctx.* usage
unchanged.
- Around line 453-459: In the CodeBlockTab rendering path, avoid creating the
Radix TabsContent wrapper for non-matching variants: compute the variant match
(using variant, ctx?.variants and ctx.activeVariant) and if it does not match,
return null immediately instead of rendering <TabsContent> with null children;
only render TabsContent when the variantMatch is true so you do not produce
extra tabpanel wrappers for the same tab value (adjust the CodeBlockTab
component around the variantMatch, TabsContent, children, and ctx symbols).
- Around line 130-134: The current rendering of the public prop "icon" in
Codeblock component uses dangerouslySetInnerHTML which can execute unsanitized
markup; update the JSX that handles typeof icon === "string" to render the
string as plain text (e.g., children or text node) instead of injecting HTML,
and if you intend to accept raw SVG markup add a distinct prop (e.g., svgIcon)
and require sanitization before using dangerouslySetInnerHTML; locate the JSX
handling "icon" in the Codeblock component (the typeof icon === "string" branch)
and replace the dangerous injection with text rendering or refactor the prop API
to clearly separate sanitized/raw SVG usage.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e8f8a775-f6a9-490b-929b-f3e45c638762

📥 Commits

Reviewing files that changed from the base of the PR and between 52d993a and be322d0.

📒 Files selected for processing (2)

• apps/eclipse/content/design-system/components/codeblock.mdx
• packages/eclipse/src/components/codeblock.tsx

[ArthurGamby]

Just a small space missing here at the start of the line