From de67cb1364c9cd293b3604718f3d3ec339ff9b36 Mon Sep 17 00:00:00 2001 From: Developing-Gamer Date: Wed, 15 Jul 2026 18:47:44 -0700 Subject: [PATCH] Document DesignEditableGrid props, layout rules, and usage patterns Capture the flat label/value grid, edit-state behavior, and shared control class helpers in the design guide. Co-authored-by: Cursor --- apps/dashboard/DESIGN-GUIDE.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/dashboard/DESIGN-GUIDE.md b/apps/dashboard/DESIGN-GUIDE.md index f5700d108..194c9a0d1 100644 --- a/apps/dashboard/DESIGN-GUIDE.md +++ b/apps/dashboard/DESIGN-GUIDE.md @@ -520,14 +520,22 @@ Use for: Props: - `items` (typed union: `text`, `boolean`, `dropdown`, `custom-dropdown`, `custom-button`, `custom`) +- shared item metadata: `itemKey`, `icon`, `name`, optional `description` and `tooltip` - `columns`: `1 | 2` +- `size`: `"sm" | "md"` - `deferredSave`, `hasChanges`, `onSave`, `onDiscard` - `externalModifiedKeys` Rules: - prefer this for config forms that are row-based and editable inline +- layout is a flat label/value grid (no per-field cards); editable values use white controls in light mode - use deferred save mode when many fields should be committed together +- text values enter an explicit edit state; Enter saves and Escape cancels +- omit `onUpdate` or set `readOnly` for a non-editable value +- use `description` for persistent context and `tooltip` only for secondary details +- `custom-dropdown` owns its popover; provide both `triggerContent` and `popoverContent` +- for page-local editable triggers outside the typed union, reuse `designEditableGridControlClassName` / `designEditableGridPopoverClassName` ### 4.12 `DataGrid` + `useDataSource` + `createDefaultDataGridState`