cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update spec and guide for search position and chevron removal
All checks were successful
Build & Publish / publish (push) Successful in 1m7s
Details

Browse Source 
- COMPONENT_GUIDE: note search renders between Header and Sections,
  no chevrons on section headers
- Spec: update rendering diagrams and description to match
  implemented behavior

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-02 22:43:00 +02:00
parent 0cf696cded
commit 2f1df869db
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
COMPONENT_GUIDE.md
View File

@@ -114,8 +114,11 @@ Sidebar compound API:
</Sidebar.Footer> </Sidebar.Footer>
</Sidebar> </Sidebar>
The app controls all content — sections, order, tree data, collapse state. Notes:
Sidebar provides the frame, search input, and icon-rail collapse mode. - Search input auto-renders between Header and first Section (not above Header)
- Section headers have no chevron — the entire row is clickable to toggle
- The app controls all content — sections, order, tree data, collapse state
- Sidebar provides the frame, search input, and icon-rail collapse mode
``` ```
### Data page pattern ### Data page pattern

7
docs/superpowers/specs/2026-04-02-composable-sidebar-design.md
View File

@@ -73,6 +73,7 @@ The outer shell. Renders the sidebar frame with an optional search input and col
- Width transition: `transition: width 200ms ease` - Width transition: `transition: width 200ms ease`
- Collapse toggle button (`<<` / `>>` chevron) in top-right corner - Collapse toggle button (`<<` / `>>` chevron) in top-right corner
- Search input hidden when collapsed - Search input hidden when collapsed
- Search input auto-positioned between `Sidebar.Header` and first `Sidebar.Section` (not above Header)
### `<Sidebar.Header>` ### `<Sidebar.Header>`
@@ -119,13 +120,13 @@ An accordion section with a collapsible header and content area.
**Expanded rendering:** **Expanded rendering:**
``` ```
v [icon] APPLICATIONS [icon] APPLICATIONS
(children rendered here) (children rendered here)
``` ```
**Collapsed rendering:** **Collapsed rendering:**
``` ```
> [icon] APPLICATIONS [icon] APPLICATIONS
``` ```
**In sidebar icon-rail mode:** **In sidebar icon-rail mode:**
@@ -133,7 +134,7 @@ v [icon] APPLICATIONS
[icon] <- centered, tooltip shows label on hover [icon] <- centered, tooltip shows label on hover
``` ```
Header has: chevron (left), icon, label. Chevron rotates on collapse/expand. Active section gets the amber left-border accent (existing pattern). Clicking the header calls `onToggle`. Header has: icon and label (no chevron — the entire row is clickable). Active section gets the amber left-border accent (existing pattern). Clicking anywhere on the header row calls `onToggle`.
**Implementation detail:** `Sidebar.Section` and `Sidebar.Header` need to know the parent's `collapsed` state to switch between expanded and icon-rail rendering. The `<Sidebar>` component provides `collapsed` and `onCollapseToggle` via React context (`SidebarContext`). Sub-components read from context — no prop drilling needed. **Implementation detail:** `Sidebar.Section` and `Sidebar.Header` need to know the parent's `collapsed` state to switch between expanded and icon-rail rendering. The `<Sidebar>` component provides `collapsed` and `onCollapseToggle` via React context (`SidebarContext`). Sub-components read from context — no prop drilling needed.