Datagrid stories: improve controls

[elycheea]

What will this achieve?

Allow users to have more control over datagrid settings. Currently, the controls only use the datagridState but it provides no way view use cases and examples that the datagrid hooks provide.

How will success be measured?

For each story, users should be able to view scenarios matching those described in the in design specs.

Additional information

• Designs
• Existing code
• etc

[elycheea]

This is a list of scenarios we should demonstrate in our stories but some of these may not require a separate story (e.g. alignment, truncation)

Header

• [x] Default header w/ or w/o sublines
• [x] Dense header w/ or w/o sublines
• Example with accordion headers??

For PageHeader or Tabs as table header, should double check accessibility.

Settings

AKA Row height settings

• [x] Rename to Row height settings or Row size settings
  • Overflow menu should align right #2280
  • Uses v11 Popover styles

Row action buttons

• [x] Overflow menu with more than 2 actions (including destructive action) -> Sticky action column
• [ ] Hover on row (with overflow or actions) -> Is Hover on Row uses text as example
• [x] Action buttons with 1-2 buttons
• [x] Action buttons + batch actions (to show disabled in batch mode)

Batch actions

• [x] Batch actions with more than 4 actions

Select all across all pages in the toolbar not implemented at this time (Carbon). More does not use caret yet due to limitations in ButtonMenu.

Expandable rows

• [x] Rename to Expandable row
  • Fix spacing shown with content ✅
  • Border should be below expanded area — not above ✅

Nested rows

• [x] Default rows
  • Expansion indicator is missing (should display on hover of parent row; hover on child should not show indicator)
  • Chevrons should be right/down not down/up ✅
• [ ] Selectable rows
• [x] Multilevel nesting
• [ ] Selectable multilevel nesting
• Simple pagination — no option to select items on page
  • May not need an actual story, but should verify this works as expected
• [x] Remove Nested table story

Resizable columns

• Resizable columns
  • Individual column ✅
  • Double click to resize to fit — what about keyboard??
  • Multiple columns (visible only)
  • Column header should wrap to two lines before truncating when header is long
  • compact data tables should keep to one line for truncation
  • Should include label and icons (min-width shows icon only)
  • Column min-width of 1ch?

Keyboard navigation may overlap with that of inline editing.

Column customization

• Column customization
  • ⚠️ Need to open several fixes (i.e. Should use Tearsheet instead of Modal, spacing, colors, some interactive bugs)
• Edit column values
  • May need to add support for inline editing titles ...
• With fixed column
  • Fixed columns should be locked in Tearsheet

Column alignment

• [x] Right aligned columns
• [x] Center aligned columns

Can either use the default basic table story or one alignment story

• [x] Right aligned content should use numerical data in example
• [x] Centered should use status icons or multi-part data (16:9, 4:3)

Inline editing

• [x] Edit mode
  • Enter + F2 or space when cell is focused should enter edit mode (seems to work when testing from touchbar)
  • Disabled during batch edit ⚠️
  • [ ] Autosave — undo (cmd/ctrl + z) and redo (cmd + shift + z / ctrl + y)
  • [ ] Data types: text, selection, date, number with stepper
    • Missing number without stepper ⚠️ (text / numeric)
• [ ] Complex cells
  • Must click/select icon to edit
• [ ] Compact columns
  • Resize to full width in edit mode / return to original width on exit
  • Right edge columns should remain in view
  • Max width of 640px
• [ ] With validation
  • Should show below and prevent tab/enter; esc should cancel
• [ ] System error on save??
• [ ] Selectable rows with inline edit
  • Hover state should include a border $ui-05
• [ ] With row heights
• [ ] With mostly editable cells v. with mostly non-editable cells (I know you got this working but maybe add an example??)

Clickable row items

• [ ] Clickable links (blue on hover, navigates to new page)
  • Should rewatch video from Marion, Michael G
• [x] Clickable rows (preview in page)
• Another story to allow side panel to open from row actions / overflow??
• Tooltips, tags, secondary links?? Tagset??)

Empty state

• [x] Empty state

Scrolling

• [x] Two-line text wrapping (doesn’t need to be its own story)
• ~Truncation (with tooltips)~
• [-] Frozen columns; last (default), first column
  • Frozen first column should unfreeze below 672px

Filtering

To be defined.

Ability to handle thousands of entries.

[matthewgallo]

Adding a shortened list of extensions we need to add with it's own extension directory in storybook

• [X] Header
• [X] Settings (Row height settings)
• [X] Row action buttons
• [ ] Batch actions
• [X] Expandable rows
• [X] Nested rows
• [ ] Resizable columns
• [x] Column customization
• [X] Column alignment
• [x] Inline editing
• [x] Clickable row items
• [ ] Empty state
• [ ] Scrolling
• [ ] Filtering

[elycheea]

@AlexanderMelox Most of these are covered in the design reviews, but keeping us on the hook to ensure we don’t miss anything.