feat(packages/ui): add MDX content components for doc-platform parity#89
Merged
zrosenbauer merged 22 commits intomainfrom Apr 10, 2026
Merged
feat(packages/ui): add MDX content components for doc-platform parity#89zrosenbauer merged 22 commits intomainfrom
zrosenbauer merged 22 commits intomainfrom
Conversation
Add 7 new consumer-facing MDX components: Accordion/AccordionGroup, Columns/Column, StatusBadge, Frame, Tooltip, Prompt, and Color. Reorganize theme barrel (index.tsx) with labeled API sections and @internal JSDoc on framework-only exports (Layout, HomeLayout, HomeFeature, Sidebar). Add built-in reference docs for all new components. Closes #86 Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 6bc8d01 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds nine documented built-in UI components—Accordion (with AccordionGroup), Columns (with Column), StatusBadge, Frame, Tooltip, Prompt, and Color—implemented in TypeScript with corresponding CSS and MDX reference pages. Accordion uses react-aria Disclosure, supports URL-hash deep linking and exclusive grouping. Theme entry imports new styles, re-exports the new components and prop types, annotates several layout exports as 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
Member
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
Add Accordion, Color, Columns, Frame, Prompt, StatusBadge, and Tooltip to the Built-ins section in zpress.config.ts. Alphabetize all entries. Co-Authored-By: Claude <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 9
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/references/built-ins/frame.mdx`:
- Around line 12-54: Add rendered "Output" blocks beneath each example so
readers see the live result alongside the code snippets: for the Basic image,
With caption, With hint and caption, and Video examples, add a rendered preview
section demonstrating the <Frame> component with the corresponding child (an
<img> or <video>), the caption prop, the hint prop, and the autoPlay behavior
(showing playsInline, loop, muted attributes implied). Ensure the Output
sections visually match the code examples and reference the same <Frame> usage
and child elements so readers can compare code to rendered result.
In `@docs/references/built-ins/status-badge.mdx`:
- Around line 38-44: Add an "Output" block for the "Inline with headings"
example in docs/references/built-ins/status-badge.mdx by inserting a rendered
output section immediately after the source MDX snippet that shows the heading
with the <StatusBadge variant="beta">Beta</StatusBadge> and the paragraph "The
authentication API is currently in beta."; locate the "## Inline with headings"
example (the MDX code block that contains "## Authentication <StatusBadge
variant=\"beta\">Beta</StatusBadge>") and append an Output block labeled
"**Output**" containing the rendered lines "## Authentication <StatusBadge
variant=\"beta\">Beta</StatusBadge>" and "The authentication API is currently in
beta." so the page matches the other code/output examples.
In `@packages/ui/src/theme/components/shared/accordion.tsx`:
- Around line 112-119: The exclusive group mode ignores the local defaultOpen
because the expanded calculation only checks group.openId; update the expanded
logic in the match for group.exclusive (and the analogous block at the 142–148
area) to fall back to the local initial isExpanded (which is seeded from
defaultOpen) when group.openId is not set: in other words, when resolving
expanded for the case with group.exclusive and an AccordionGroupContextValue,
return true if g.openId === anchorId OR if g.openId is null/undefined and
isExpanded is true; reference the symbols expanded, group, isExpanded,
defaultOpen, anchorId and AccordionGroupContextValue when making this change.
In `@packages/ui/src/theme/components/shared/color.css`:
- Around line 18-20: The .zp-color rule only styles :hover and lacks a visible
keyboard focus state; add a :focus-visible selector for .zp-color to provide a
clear outline or border-color (matching or contrasting var(--zp-c-brand-1)) and
appropriate outline-offset so keyboard users can see focus; update the
.zp-color:hover block and add .zp-color:focus-visible { outline: ...;
outline-offset: ...; } (or an equivalent border-color change) and ensure it
doesn’t clash with existing focus styles for consistency.
In `@packages/ui/src/theme/components/shared/color.tsx`:
- Around line 26-32: handleClick currently ignores rejected
navigator.clipboard.writeText and schedules a timeout without cleanup; update
handleClick to handle promise rejections from navigator.clipboard.writeText (use
.catch or try/catch with async) and ensure the timeout is tracked and cleared on
unmount (use a ref like timeoutRef and clearTimeout in a useEffect cleanup) and
avoid state updates after unmount by checking mounted flag or by clearing
timeout before calling setCopied(false); apply the same changes to the analogous
function in prompt.tsx so both clipboard writes have error handling and their
timers are properly cleaned up.
In `@packages/ui/src/theme/components/shared/frame.tsx`:
- Around line 68-76: The condition that applies autoplay defaults to video
elements currently checks props['autoPlay'] !== undefined and thus overrides
explicit autoPlay={false}; change the check to require props['autoPlay'] ===
true (i.e., only when explicitly true) before calling React.cloneElement on
child (the branch where child.type === 'video') so that React.cloneElement(...)
with playsInline/loop/muted is only applied when autoPlay is true and not when
it is false or omitted.
In `@packages/ui/src/theme/components/shared/prompt.css`:
- Around line 28-33: The .zp-prompt__content rule uses the deprecated
word-break: break-word; update the declaration to use word-break: normal and add
overflow-wrap: anywhere so long text wraps correctly; locate the
.zp-prompt__content selector in the CSS and replace the break-word line with
overflow-wrap: anywhere and word-break: normal while keeping the existing
white-space and min-width rules.
In `@packages/ui/src/theme/components/shared/prompt.tsx`:
- Around line 24-34: handleCopy currently calls navigator.clipboard.writeText
without handling rejection and starts a 2s timeout without cleanup, which can
lead to unhandled promise rejections and stacked timers; update handleCopy to
await or attach a .catch to navigator.clipboard.writeText and handle errors
(e.g., log or set an error state), introduce a mutable timeoutRef (useRef<number
| null>) to store the timeout id, clearTimeout(timeoutRef.current) before
creating a new timeout, assign the new id to timeoutRef.current, and clear that
timeout in a cleanup effect (useEffect return) to avoid stale state changes;
ensure useCallback deps include contentRef, setCopied, and timeoutRef as needed.
In `@packages/ui/src/theme/components/shared/tooltip.css`:
- Around line 5-17: Add an explicit :focus-visible rule for .zp-tooltip__trigger
to provide a consistent keyboard focus ring: create a
.zp-tooltip__trigger:focus-visible selector that applies a visible outline or
box-shadow (e.g., 2px solid/gap using an accessible color variable such as
var(--zp-c-focus) or var(--zp-c-text-3)), set an outline-offset (e.g., 2px) and
preserve border-radius if applicable; ensure this only targets :focus-visible so
mouse interactions remain unchanged and don't remove the existing cursor/text
styles on .zp-tooltip__trigger.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: cf1d7547-87f1-4862-b53a-b7874799831e
📒 Files selected for processing (23)
.changeset/add-mdx-content-components.mddocs/references/built-ins/accordion.mdxdocs/references/built-ins/color.mdxdocs/references/built-ins/columns.mdxdocs/references/built-ins/frame.mdxdocs/references/built-ins/prompt.mdxdocs/references/built-ins/status-badge.mdxdocs/references/built-ins/tooltip.mdxpackages/ui/src/theme/components/shared/accordion.csspackages/ui/src/theme/components/shared/accordion.tsxpackages/ui/src/theme/components/shared/color.csspackages/ui/src/theme/components/shared/color.tsxpackages/ui/src/theme/components/shared/columns.csspackages/ui/src/theme/components/shared/columns.tsxpackages/ui/src/theme/components/shared/frame.csspackages/ui/src/theme/components/shared/frame.tsxpackages/ui/src/theme/components/shared/prompt.csspackages/ui/src/theme/components/shared/prompt.tsxpackages/ui/src/theme/components/shared/status-badge.csspackages/ui/src/theme/components/shared/status-badge.tsxpackages/ui/src/theme/components/shared/tooltip.csspackages/ui/src/theme/components/shared/tooltip.tsxpackages/ui/src/theme/index.tsx
Accordion and Columns docs had triple-backtick code fences nested inside triple-backtick mdx fences, causing MDX parse errors. Switch outer fences to quad-backticks and simplify live output examples to avoid nesting. Co-Authored-By: Claude <noreply@anthropic.com>
Tighten panel padding (12px → 8px bottom, 0 → 4px top), strip all child margins and use gap-based spacing instead. Add justify-content center to the trigger for balanced alignment. Co-Authored-By: Claude <noreply@anthropic.com>
…omponent Rename StatusBadge → Badge for simplicity. Update export, docs, and sidebar config accordingly. Redesign Prompt as an AI prompt block: sparkle icon header bar with "Prompt" label, clipboard copy button with icon states, and a clean content area. Replaces the terminal-style inline layout. Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/ui/src/theme/components/shared/accordion.css`:
- Around line 36-38: Add an explicit keyboard focus-visible style for the
accordion trigger so keyboard users get a visible focus indicator: update the
.zp-accordion__trigger rules to include a :focus-visible selector that mirrors
the hover color (var(--zp-c-brand-1)) and also adds a visible focus outline or
ring (e.g., outline or box-shadow) to ensure clear contrast and keyboard
accessibility when .zp-accordion__trigger receives focus.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: d8ffe497-961d-4ae0-80cf-44586126b7fc
📒 Files selected for processing (1)
packages/ui/src/theme/components/shared/accordion.css
…m color support Replace domain-specific variants (new, beta, deprecated, etc.) with standard semantic variants: info, success, warning, error. Add `color` prop for arbitrary custom colors — auto-generates 12% opacity background tint from hex values, falls back to color-mix for other formats. Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (3)
packages/ui/src/theme/components/shared/prompt.tsx (1)
25-35:⚠️ Potential issue | 🟠 MajorHandle clipboard rejection and timeout cleanup in
handleCopy.Line 30 can reject without a handler, and Line 32 creates unmanaged timers. This can cause unhandled rejections and stale state updates on rapid clicks/unmount.
Proposed fix
-import { useCallback, useRef, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' @@ export function Prompt({ children }: PromptProps): React.ReactElement { const [copied, setCopied] = useState(false) const contentRef = useRef<HTMLDivElement>(null) + const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null) + + useEffect(() => { + return () => { + if (resetTimerRef.current !== null) { + clearTimeout(resetTimerRef.current) + } + } + }, []) @@ - navigator.clipboard.writeText(text).then(() => { - setCopied(true) - setTimeout(() => setCopied(false), 2000) - return null - }) + void navigator.clipboard.writeText(text).then( + () => { + if (resetTimerRef.current !== null) { + clearTimeout(resetTimerRef.current) + } + setCopied(true) + resetTimerRef.current = setTimeout(() => setCopied(false), 2000) + }, + () => { + setCopied(false) + } + ) }, [])#!/bin/bash # Verify clipboard call has rejection handling and timeout lifecycle cleanup. rg -n "clipboard\\.writeText|setTimeout|clearTimeout|useEffect" packages/ui/src/theme/components/shared/prompt.tsx🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/theme/components/shared/prompt.tsx` around lines 25 - 35, The handleCopy function can cause unhandled Promise rejections and create timers that update state after unmount; fix by adding rejection handling to navigator.clipboard.writeText(...) (use .catch to log/ignore the error) and manage the timeout via a ref (e.g., timeoutRef) so you can clearTimeout on unmount; add a useEffect cleanup that clears timeoutRef.current and toggles an isMounted ref to prevent setCopied from running after unmount; update handleCopy to set the timeout id into timeoutRef and guard setCopied calls with the isMounted flag.packages/ui/src/theme/components/shared/prompt.css (1)
63-65:⚠️ Potential issue | 🟡 MinorReplace deprecated
word-break: break-word.Line 64 uses a deprecated keyword. Use
word-break: normal+overflow-wrap: anywherefor equivalent modern behavior.Proposed fix
.zp-prompt__content { padding: 12px 16px; background: var(--zp-c-bg-soft); font-size: 14px; line-height: 1.7; color: var(--zp-c-text-1); white-space: pre-wrap; - word-break: break-word; + word-break: normal; + overflow-wrap: anywhere; }#!/bin/bash # Verify deprecated keyword removal in prompt.css. rg -n "word-break|overflow-wrap" packages/ui/src/theme/components/shared/prompt.css🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/theme/components/shared/prompt.css` around lines 63 - 65, Replace the deprecated CSS declaration by locating the rule block that currently contains "white-space: pre-wrap;" and "word-break: break-word;" and remove "word-break: break-word;"; then add "word-break: normal;" and "overflow-wrap: anywhere;" in that same rule block so the selector keeps the intended wrapping behavior using modern properties.docs/references/built-ins/status-badge.mdx (1)
50-54:⚠️ Potential issue | 🟡 MinorAdd an Output block for the inline heading example.
This section currently breaks the file’s Code/Output pattern.
Suggested patch
## Inline with headings +**Code** + ```mdx ## Authentication <Badge variant="warning">Warning</Badge>
+Output
+
+## Authentication Warning</details> <details> <summary>🤖 Prompt for AI Agents</summary>Verify each finding against the current code and only fix it if needed.
In
@docs/references/built-ins/status-badge.mdxaround lines 50 - 54, Add a
matching "Output" block after the inline heading example so the file follows the
Code/Output pattern: after the code fence containing the MDX snippet "##
Authentication <Badge variant="warning">Warning", insert an Output
section that repeats the rendered result (the same "## Authentication <Badge
variant="warning">Warning" line) inside a fenced block labeled as the
output; update the example around the inline heading to include this output
block.</details> </blockquote></details> </blockquote></details> <details> <summary>🤖 Prompt for all review comments with AI agents</summary>Verify each finding against the current code and only fix it if needed.
Inline comments:
In@docs/references/built-ins/accordion.mdx:
- Around line 122-130: Add explicit "Code" and "Output" sections for the Deep
linking example to match other reference entries: wrap the MDX snippet in a
labeled code block (e.g., indicate Code then the MDX example using
... ) and then
add a rendered Output block immediately after containing the same <Accordion
...> markup so readers see both the source and the rendered result; ensure the
example references the Accordion component and the id prop exactly as shown.In
@docs/references/built-ins/columns.mdx:
- Around line 116-125: Add an Output block to the "Four columns" example to
match the structure used in earlier sections: locate the Columns/Column snippet
in docs/references/built-ins/columns.mdx and append an block showing
the rendered result for the four columns (e.g., a visual/annotated
representation of Column 1 through Column 4) so the example mirrors the pattern
used elsewhere for Columns and Column components.In
@docs/references/built-ins/tooltip.mdx:
- Around line 43-49: The Tooltip component instances using href="/guides/config"
(the two occurrences wrapping "zpress.config.ts" in the snippet) point to a
non-existent route; update their href prop to a valid existing page (for example
change href="/guides/config" to href="/reference/configuration") so the CTA link
is not dead, and ensure both instances in the file are updated consistently.In
@packages/ui/src/theme/components/shared/status-badge.tsx:
- Around line 63-77: The current hex-length check allows invalid characters and
can yield NaN channels; add a validation step that ensures hex matches
/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/ before computing fullHex and parsing
channels. If the regex fails, return the existing fallbackcolor-mix(in srgb, ${color} 12%, transparent); otherwise compute fullHex (from hex or expanded
3-char form), then parse r, g, b and return the rgba string as before. Update
the logic around the variables hex, fullHex, r, g, b to perform this validation
and short-circuit on invalid input.
Duplicate comments:
In@docs/references/built-ins/status-badge.mdx:
- Around line 50-54: Add a matching "Output" block after the inline heading
example so the file follows the Code/Output pattern: after the code fence
containing the MDX snippet "## Authentication <Badge
variant="warning">Warning", insert an Output section that repeats the
rendered result (the same "## Authentication <Badge
variant="warning">Warning" line) inside a fenced block labeled as the
output; update the example around the inline heading to include this output
block.In
@packages/ui/src/theme/components/shared/prompt.css:
- Around line 63-65: Replace the deprecated CSS declaration by locating the rule
block that currently contains "white-space: pre-wrap;" and "word-break:
break-word;" and remove "word-break: break-word;"; then add "word-break:
normal;" and "overflow-wrap: anywhere;" in that same rule block so the selector
keeps the intended wrapping behavior using modern properties.In
@packages/ui/src/theme/components/shared/prompt.tsx:
- Around line 25-35: The handleCopy function can cause unhandled Promise
rejections and create timers that update state after unmount; fix by adding
rejection handling to navigator.clipboard.writeText(...) (use .catch to
log/ignore the error) and manage the timeout via a ref (e.g., timeoutRef) so you
can clearTimeout on unmount; add a useEffect cleanup that clears
timeoutRef.current and toggles an isMounted ref to prevent setCopied from
running after unmount; update handleCopy to set the timeout id into timeoutRef
and guard setCopied calls with the isMounted flag.</details> <details> <summary>🪄 Autofix (Beta)</summary> Fix all unresolved CodeRabbit comments on this PR: - [ ] <!-- {"checkboxId": "4b0d0e0a-96d7-4f10-b296-3a18ea78f0b9"} --> Push a commit to this branch (recommended) - [ ] <!-- {"checkboxId": "ff5b1114-7d8c-49e6-8ac1-43f82af23a33"} --> Create a new PR with the fixes </details> --- <details> <summary>ℹ️ Review info</summary> <details> <summary>⚙️ Run configuration</summary> **Configuration used**: Path: .coderabbit.yaml **Review profile**: ASSERTIVE **Plan**: Pro **Run ID**: `11eb3e74-7d3b-4644-b898-89d399caf5bc` </details> <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between b2166f123cac1b1a818e26ce46c89c34deeb5bc4 and 579554d284f7774c202b22fcf5a17634de6946d2. </details> <details> <summary>📒 Files selected for processing (12)</summary> * `docs/references/built-ins/accordion.mdx` * `docs/references/built-ins/color.mdx` * `docs/references/built-ins/columns.mdx` * `docs/references/built-ins/prompt.mdx` * `docs/references/built-ins/status-badge.mdx` * `docs/references/built-ins/tooltip.mdx` * `packages/ui/src/theme/components/shared/prompt.css` * `packages/ui/src/theme/components/shared/prompt.tsx` * `packages/ui/src/theme/components/shared/status-badge.css` * `packages/ui/src/theme/components/shared/status-badge.tsx` * `packages/ui/src/theme/index.tsx` * `zpress.config.ts` </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Group related items together instead of pure alphabetical: - Layout & Structure: Accordion, Cards, Columns, Frame - Window Chrome: Desktop, Browser, IDE, Terminal - Inline Elements: Badge, Color, Tooltip - Code & Prompts: Code Blocks, Prompt - Diagrams & Visualizations: File Tree, Mermaid - Markdown Extensions: Math, Superscript & Subscript Co-Authored-By: Claude <noreply@anthropic.com>
…ig array order Add 'none' as a sort option for sections and workspaces. When set, entries preserve their config array order instead of being alpha-sorted. Set sort: 'none' on the Built-ins section so the sidebar respects the logical grouping defined in zpress.config.ts. Co-Authored-By: Claude <noreply@anthropic.com>
… expandable code view Replace fixed header/content layout with a new design: - Description + icon as visible summary (no "Prompt" title) - Action buttons: copy (clipboard), cursor (copy for Cursor IDE) - Expand/collapse button reveals full prompt in a code block - Hidden div holds raw children for textContent extraction Export new PromptAction type. Update docs with new API examples. Co-Authored-By: Claude <noreply@anthropic.com>
… component Redesign Prompt with voltagent-style action pattern: - First action renders as full labeled button (icon + text) - Additional actions appear in a dropdown menu with icons, labels, and descriptions - New actions: cursor, vscode (copy to clipboard), chatgpt and claude (open in browser with prompt pre-filled) - Dropdown has click-outside-to-close and chevron toggle - Feedback toast shows action-specific confirmation message Co-Authored-By: Claude <noreply@anthropic.com>
…hatGPT/Claude Cursor and VS Code actions now copy to clipboard then launch the IDE via cursor:// and vscode:// URL schemes. ChatGPT opens chatgpt.com with hints=search&prompt= pre-filled. Claude opens claude.ai/new with q= pre-filled. Feedback messages updated to reflect the actual behavior (e.g. "Copied — opening Cursor…"). Co-Authored-By: Claude <noreply@anthropic.com>
Replace minimal one-liners with substantial multi-section prompts using bold, italic, inline code, numbered/bulleted lists, headings, blockquotes, and tables to better showcase the expanded code view. Co-Authored-By: Claude <noreply@anthropic.com>
…se errors
MDX can't handle markdown list items inside JSX component tags.
Switch to {`...`} template literal syntax so the prompt content
is passed as a string, avoiding MDX parser conflicts with lists,
headings, and other block-level markdown inside <Prompt>.
Co-Authored-By: Claude <noreply@anthropic.com>
Use !important overrides to prevent Rspress global pre/code styles from stripping the code block appearance. Uses --zp-code-block-bg for consistent theming with native code blocks. Co-Authored-By: Claude <noreply@anthropic.com>
Replace custom <pre><code> with Rspress's CodeBlockRuntime for the expanded prompt view — renders with proper syntax highlighting as a markdown code block. Remove custom CursorLogo, ChatGPTLogo, and ClaudeLogo SVGs in favor of registered icon libraries: - simple-icons:cursor for Cursor - simple-icons:openai for ChatGPT - simple-icons:claude for Claude - mdi:microsoft-visual-studio-code for VS Code Co-Authored-By: Claude <noreply@anthropic.com>
Accordion: - Use --rp-radius instead of --rp-radius-large (matches project config) - Hover changes border color to brand instead of text color - Remove justify-content: center from trigger (was wrong axis) - Fix chevron vertical centering with explicit flex container - Reduce icon size to 16px for better alignment with text - Tighten padding (16px → 14px) and panel bottom (8px → 10px) Prompt: - Align border-radius to --rp-radius throughout for consistency Co-Authored-By: Claude <noreply@anthropic.com>
Root cause: the ChevronIcon SVG has className applied directly to the <svg> element. Inline SVGs default to display: inline, which adds baseline gap in flex containers, pushing the icon below center. Fix: set display: block on the chevron SVG so the flex parent's align-items: center works correctly. Also add display: block on icon wrapper SVGs, explicit margin: 0 on the <button> to clear browser defaults, and line-height: 1.4 to match title text height. Co-Authored-By: Claude <noreply@anthropic.com>
…height Replace the custom ChevronIcon SVG component with pixelarticons:chevron-right via the Icon component, matching the pattern used for all other icons in the codebase. Add min-height: 40px to both the trigger button and the chevron wrapper so they share the same height reference for vertical centering via align-items: center. Co-Authored-By: Claude <noreply@anthropic.com>
- Fix autoPlay check to use === true instead of !== undefined (frame.tsx) - Add clipboard error handling and timer cleanup (color.tsx, prompt.tsx) - Seed exclusive accordion group state from defaultOpen (accordion.tsx) - Add :focus-visible keyboard styles (color.css, tooltip.css, accordion.css) - Add rendered Output sections to Frame reference (frame.mdx) - Fix broken CTA link in Tooltip reference (tooltip.mdx) Co-Authored-By: Claude <noreply@anthropic.com>
OXLint requires each then() to return a value and prefers .catch() over two-argument .then(onFulfilled, onRejected). Co-Authored-By: Claude <noreply@anthropic.com>
Add new MDX content components for structured parameter documentation (Field/FieldGroup with expandable nesting) and vertical timeline steppers (Steps/Step with numbered indicators and icon support). Includes reference docs, config entries, accordion panel visibility fix, and hoisted render constants for ExpandableFieldGroup. Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
packages/ui/src/theme/index.tsxwith labeled API sections and@internalJSDoc on framework-only exports (Layout, HomeLayout, HomeFeature, Sidebar)Changes
New Components (
packages/ui/src/theme/components/shared/)Accordion/AccordionGroupreact-aria-componentsDisclosure.Columns/ColumnStatusBadgeFrame<figure>. Auto-injectsplaysInline/loop/mutedon autoplay videosTooltipreact-aria-componentsTooltipTriggerPromptColorPublic API Audit
Layout,HomeLayout,HomeFeature,Sidebar) tagged with@internalJSDocDocumentation (
docs/references/built-ins/)7 new
.mdxfiles with live Code/Output examples and props tables.Testing
pnpm checkpasses (typecheck + lint + format) — 18/18 taskspnpm devCloses #86