Skip to content

[Task](docs): update and add DataGrid / DataGridToolbar stories #1688

@franzheidl

Description

@franzheidl

WIP

Follows #1692. The current stories in storybook for DataGrid do not cover the pattern as a whole, many options are missing, and are generally too much of stories simply rendering components rather than communicating usage and user experience intent. Update existing stories and add new ones based on the revised DataGrid toolbar concept. Stories should be real-world scenarios, not zone-by-zone technical demonstrations.

(Guiding principle: Every story should answer "when and how would I use this?" — not "what does this component render?")

DataGridToolbar stories (DataGridToolbar.stories.tsx)

  • Update ComplexCustomLayout to add className="jn:bg-theme-background-lvl-1" (required after [Task](ui): remove built-in DataGridToolbar background color for updated design #1692)
  • Replace Default with a story showing a minimal but realistic toolbar: just a primary action button (e.g. "Create Server") — the simplest real-world case
  • Add a story showing a toolbar with filters, search, active filter pills, item count and refresh — no bulk actions, no primary action
  • Add a story showing a full toolbar: bulk action controls + sort + overflow + primary action in the first DataGridToolbar, filters + search + pills + item count + refresh in the second DataGridToolbar with background, both wrapped in a Stack (direction="vertical")

DataGrid stories (DataGrid.stories.tsx)

  • Add a story showing a DataGrid with row checkboxes and a toolbar with select-all and bulk action controls — the primary reference for DataGridCheckboxCell usage in context
  • Add a story showing a DataGrid with a footer with realistic pagination controls — the primary reference for DataGridFoot usage in context

DataGridCheckboxCell / DataGridFoot stories

  • Delete DataGridCheckboxCell.stories.tsx and DataGridFoot.stories.tsx
  • Clarify: Is DatagridFoot actually needed? And if yes, how (Pagination? or does that go underneath a DataGrid anyway? If not, can we create a ticket to remove the component altogether?

Story Descriptions

Update the descriptions so they:

  • Clarify usage of header cells (are these technically part of the header / toolbar?)
  • Clarify sorting by Sort element, not by column headers (description)
  • Interacting with rows/items
  • placement of action buttons, usage of overflow menus
  • pagination of datagrids

Not in scope:

  • Show states (empty (no data), empty (no items matching filter or search), loading, error – qwe need design first)

Depends on #1692

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentationui-componentsAll tasks related to juno-ui-components library

Type

No fields configured for Task.

Projects

Status

In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions