Add tabbed carousel to design system pages#83
Closed
jamesrochabrun wants to merge 1 commit into
Closed
Conversation
Replace the long vertical scroll on the design system page with a scrollable tab carousel so colors, typography, spacing, components, etc. each get a focused view instead of being stacked end to end. - DesignSystemReferenceView: dynamic tab list (only sections with content), sticky horizontal pill carousel with a sliding selection highlight (matchedGeometryEffect), count badges, cross-fade between panels, and accessibility traits. Sections are derived from the catalog and selection resets when the catalog changes. - DesignSystemBrowserView: give reference catalogs a fixed header with the carousel pinned below (no nested scroll); other states keep the existing scroll layout. - EaselDesignSystemCatalogHTMLRenderer: mirror the same hierarchy in the canvas web preview with an accessible role=tablist carousel, keeping the required element IDs and catalog-loading flow intact.
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
The design system page previously stacked every category (colors, typography, spacing, components, …) in one long scroll, forcing a lot of scrolling to find anything. This replaces that with a scrollable tab carousel so each category gets its own focused view — applied to both surfaces where a design system is shown.
Changes
Native browser —
DesignSystemReferenceView.swiftmatchedGeometryEffect, the active tab auto-centers, and panels cross-fade on switch..isButton/.isSelected) added.Native browser host —
DesignSystemBrowserView.swiftCanvas web preview —
EaselDesignSystemCatalogHTMLRenderer.swiftindex.html: an accessiblerole="tablist"carousel (capsule pills, count badges, keyboard nav: ←/→/Home/End,prefers-reduced-motionopt-out).EaselDesignSystemManager.swift); only the content layout changed.Note on existing design systems
index.htmlis written at create/import time, so new design systems get the tabbed canvas automatically; existing ones need a Regenerate to pick it up in the canvas. The native browser updates immediately.Testing
swift build --target EaselDesignSystems→ build complete.EaselChat-Packagebuilds;EaselDesignSystemsTests(incl. both HTML-renderer tests) → all passed.node --check→ syntax OK.🤖 Generated with Claude Code