Add content docs - #20
Merged
Merged
Conversation
…iven nav panels Adds useContainerBreakpoints, a container-width equivalent of VueUse's useBreakpoints, for layouts where page decoration means viewport width doesn't reflect actual available space. Wires it into ContentDocs' demo page to drive forceOpened/onTop on its nav ExpandingPanels per breakpoint. Also fixes two ExpandingPanel bugs surfaced by exercising forceOpened reactively for the first time: a shared `name` made two force-opened panels mutually exclusive via native <details> grouping, and forceOpened's programmatic open state was leaking into isPanelOpen and getting stuck after forceOpened reverted to false.
…iven nav panels Style updates
…Panels Replaces the docsNav/docsPageNav slots with prop-driven nav items (docsNavItems/docsPageNavItems, DocsNavItem incl. optional icon) and active-item v-models, since every consumer would otherwise have to re-wire the same ExpandingPanel + breakpoint force-open/name-grouping logic themselves. Adds default heading/panel/link styling with a shared + per-side CSS token API, grid-based link layout so icon-less items stay aligned, and start/end icon ordering via a direction flip. Documents the component in .claude/skills/components/content-docs.md.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new docs-page layout shell (ContentDocs) and supporting infrastructure to enable container-width–driven responsive behavior (instead of viewport breakpoints), plus a small ExpandingPanel behavior fix surfaced by the new layout.
Changes:
- Added
ContentDocscomponent (docs nav + content + “on this page”) with a CSS token API, container-query layout, and comprehensive tests. - Added
useContainerBreakpointscomposable (element-width breakpoints) with unit tests. - Fixed
ExpandingPanelsoforceOpened-driven<details>toggles don’t leak into the click-driven model, with a regression test.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| app/types/components/index.ts | Re-exports the new DocsNavItem type definitions. |
| app/types/components/content-docs.d.ts | Introduces DocsNavItem type used by ContentDocs. |
| app/pages/ui/layout-content-docs.vue | Adds a demo page showcasing ContentDocs. |
| app/layouts/default.vue | Adds a navigation link to the new demo page. |
| app/composables/useContainerBreakpoints.ts | Adds container-width breakpoint helpers using ResizeObserver. |
| app/composables/tests/useContainerBreakpoints.spec.ts | Tests for container breakpoint behavior and helpers. |
| app/components/layout-grids/LayoutGridA.vue | Formatting/style indentation adjustments. |
| app/components/02.molecules/expandable/expanding-panel/tests/ExpandingPanel.spec.ts | Adds regression coverage for the forceOpened toggle leak. |
| app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue | Ignores native toggle events while forceOpened is true. |
| app/components/01.atoms/content-wrappers/docs-pages/tests/ContentDocs.spec.ts | Adds ContentDocs behavior tests (rendering, icons, force-open rules, grouping). |
| app/components/01.atoms/content-wrappers/docs-pages/ContentDocs.vue | Implements the new docs-page layout component with container-query logic and tokenized styling. |
| .vscode/srcdev-component-content-docs.code-snippets | Adds editor snippets for consuming/styling ContentDocs. |
| .claude/skills/index.md | Registers the new content-docs skill doc entry. |
| .claude/skills/components/content-docs.md | Adds repository documentation for ContentDocs usage, behavior, and tokens. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Previously v-if'd away entirely, which shrank a forceOpened panel's summary row relative to a toggleable sibling's whenever the icon was the tallest child — breaking vertical alignment between ContentDocs' docsNav (toggleable) and docsPageNav (forceOpened) panels at tablet width. Now always rendered, just visually hidden via a modifier class. Adds a Storybook story and a permanent Playwright visual regression suite for ContentDocs covering mobile/tablet/desktop states, since the tablet state is exactly what exposed this bug. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
These are regenerated on every test run and were accidentally committed at some point; ignore and untrack them. Co-Authored-By: Claude Sonnet 5 <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
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
ContentDocs, a docs-page layout component (nav + content + on-this-page columns) that adapts via CSS@containerqueries on its own measured width, not the viewport — correct even when a consumer page's own decoration (e.g. a left nav) eats into available space.docsNav/docsPageNavare prop-driven (docsNavItems/docsPageNavItems: DocsNavItem[], with optional per-itemicon) and rendered internally asExpandingPanelaccordions with active-itemv-models — not slots — so every consumer gets the breakpoint force-open/collapse and native-accordion-grouping logic for free instead of re-wiring it themselves.useContainerBreakpoints, a container-width equivalent of VueUse'suseBreakpoints, since viewport-based breakpoints don't reflect actual available space when page decoration is present.Fixes found along the way
ExpandingPanel:forceOpened's programmaticopenstate was leaking into the click-drivenisPanelOpenmodel, leaving panels stuck open afterforceOpenedreverted tofalse.ExpandingPanels sharing a hardcodednamemade them mutually exclusive via native<details>grouping — correct on mobile, wrong at tablet/desktop where both need to be open simultaneously. Now grouped only while mobile.Test plan
ContentDocs.spec.ts(20 tests): visibility, active-item state/emits, icon rendering, breakpoint-driven forceOpened at all three widths, panel name-groupinguseContainerBreakpoints.spec.ts(5 tests)ExpandingPanel.spec.tsregression test for the forceOpened leak (47 tests total, all passing)/ui/layout-content-docs) — canvas-switcher-driven width changes, click-to-toggle, hover/active states, light/dark surface tokensvue-tsc --noEmitclean