feat: add gutter ribbon layout to CellContainer#140
Merged
Conversation
Implement a new gutter ribbon system that provides a cleaner, paper-like aesthetic for notebook cells. Instead of heavy borders, cells now display a thin colored ribbon on the left side that indicates cell type (code, markdown, sql, ai, raw) and focus state. - Create gutter-colors.ts with extensible color configuration - Add cellType, gutterContent, and customGutterColors props to CellContainer - Add gutterMode prop to PlayButton for smart visibility - Maintain full backwards compatibility with legacy border-based styling - Add GutterCellDemo and GutterNotebookDemo components - Update documentation with new gutter mode examples Closes #139
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Remove legacy border-based styling in favor of gutter ribbon as the only mode. This is a breaking change that simplifies the API: - cellType is now required (was optional) - Remove focusBgColor and focusBorderColor props - All demos updated to use gutter mode consistently - Documentation updated to reflect the simpler API Breaking changes are appropriate for shadcn-style components since users vendor the code and can adapt as needed when pulling updates.
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
Implements a gutter ribbon system for CellContainer that creates a cleaner, paper-like notebook aesthetic. A thin colored ribbon on the left side indicates cell type and focus state.
This is a breaking change - the old border-based
focusBgColor/focusBorderColorprops are removed. In the shadcn model, users vendor the code, so breaking changes are acceptable when they simplify the API.Changes
cellTypeis now required; gutter ribbon is the only modegutterModeprop for smart visibility (hidden unfocused, visible on focus/hover)API
Test Plan
pnpm devand navigate to/docs/cell/cell-containerCloses #139