Skip to content

Commit 5830eff

Browse files
Copilothotlong
andcommitted
Add clear instructions to Storybook examples on how to see save buttons
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 9ac7575 commit 5830eff

2 files changed

Lines changed: 18 additions & 4 deletions

File tree

packages/components/src/stories-json/data-table.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const EditableTable: Story = {
8989
export const BatchEditTable: Story = {
9090
args: {
9191
type: 'data-table',
92-
caption: 'Batch Edit Mode - Edit Multiple Rows & Save Together',
92+
caption: 'Batch Edit Mode - Edit Multiple Rows & Save Together (💡 Double-click cells to edit, then see save buttons appear)',
9393
searchable: false,
9494
pagination: false,
9595
editable: true,

packages/components/src/stories-json/object-grid.stories.tsx

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -196,11 +196,19 @@ export const EditableGrid: Story = {
196196
/**
197197
* Batch Edit Grid - Multi-Row Editing with Batch Save
198198
*
199-
* This story demonstrates advanced batch editing capabilities:
199+
* **💡 How to use:**
200+
* 1. Double-click any cell (except SKU) to start editing
201+
* 2. Press Enter to confirm the edit (cell becomes highlighted in amber)
202+
* 3. Edit more cells across different rows
203+
* 4. Watch the toolbar appear showing "X rows modified" with Save/Cancel buttons
204+
* 5. Row-level save buttons (✓) appear in the Actions column for edited rows
205+
* 6. Click "Save All" to batch save, or click row save buttons individually
206+
*
207+
* **Features demonstrated:**
200208
* - Edit multiple cells across multiple rows
201209
* - Modified rows are highlighted with amber background
202210
* - Modified cells shown in bold amber text
203-
* - Save individual rows using row-level save buttons
211+
* - Row-level save/cancel buttons appear after editing
204212
* - Batch save all changes at once using "Save All" button
205213
* - Cancel changes per row or all at once
206214
* - Toolbar shows count of modified rows
@@ -250,7 +258,13 @@ export const BatchEditGrid: Story = {
250258
/**
251259
* Advanced Batch Editing - Real-World Inventory Management
252260
*
253-
* This example shows a complete workflow:
261+
* **💡 Instructions:**
262+
* - Double-click any cell (except ID and SKU which are read-only)
263+
* - Make edits across multiple rows and pages
264+
* - Save buttons appear in Actions column after editing
265+
* - Batch save toolbar appears when there are pending changes
266+
*
267+
* **Complete workflow demonstration:**
254268
* - Large dataset with pagination
255269
* - Multiple editable fields
256270
* - Read-only columns (ID, SKU)

0 commit comments

Comments
 (0)