Datagrid design review: Resizable columns

elycheea commented 1 year ago

Design review

Component epic #1607 #2499
Designers/reviewers: Virginia Nicholson
Links: PAL guidance / Storybook / Prototype in PR

Standards

[ ] All pattern updates/changes/iterations have been discussed with the component developer
[ ] Patterns have been approved by either DSAG or another approving entity

Pattern and behavior

[ ] The component behaves according to the guidelines set by the pattern maintainer
[ ] The component’s UI matches the pattern specifications set by the pattern maintainer
[ ] The component’s motion matches the specifications set by the pattern maintainer(s)
[ ] The UI produced is responsive, cross-browser, and responds to the currently set Carbon theme.
[ ] Colors, themes, sizes and additional props are true and correct, aligning with Carbon set tokens (unless otherwise specified by the pattern)
[ ] Paddings/margins/spacings are true and correct, in both desktop and mobile views

Storybook

[ ] A functioning component renders in Storybook
[ ] The Storybook displays multiple scenarios that show how the component can be used
[ ] Changing props in the Storybook updates the component

matthewgallo commented 1 year ago

• Explore examples from Google sheets and Excel around keyboard accessibility for resizable columns, investigate more regarding DataSpreadsheet usage vs Datagrid inline edit) • Think about how keyboard focus state works with sorting and other potential focusable elements in the column header • Potentially have the focusable resizer/sorting use some kind of keyboard shortcut to remove it from the default focus order

elycheea commented 1 year ago

@Ratheeshrajan Matt’s already been involved in the initial design reviews for these issues. While he’s out, I think you’re the best person to help close out these issues.

elycheea commented 1 year ago

@vsnichols @johanna-koval Wanted to follow up on some of the comments from the design review.

Google Sheets and Excel are more of data spreadsheets; but we can see how data tables are similar. I did not find any examples of resize actions in either case though. This does make me think our guidance should include some recommendations on when to choose a DataSpreadsheet over a Data table though.
Looked into sortable headers and realize Carbon table now includes sortable so we should update to include their tabbable version; will open a new issue for this change

I do think it’d be worth considering “modes” to limit confusing keyboard interactions though. When we met with @mbgower, he emphasized importance of time on task and equivalent facilitation. If sortable columns in combination with resize makes the keyboard interactions feel clunky, it might be worth creating some constraints around it. e.g. Don’t enable both sorting and resize simultaneously or toggle these via modes. (One of the suggestions was leveraging the settings menu, which currently is just used for row height settings.)

Happy to discuss these further, but I’ll open an issue in the meantime so we can get the tabbable sorting from Carbon added to play with alongside the resize prototype.

elycheea commented 1 year ago

FYI @Ratheeshrajan A prototype of the resizable columns with keyboard actions is in this draft PR if you’d like to either take over the PR or build off it. https://github.com/carbon-design-system/ibm-cloud-cognitive/pull/2464

elycheea commented 1 year ago

@johannasuarez-koval

My-Money29 commented 11 months ago

Content behaviors
1. Most of the columns can be shrunk to the min size, making the data in them disappear completely. we should always reveal a minimum of one letter in each cell.
  1. Some columns display an "empty space" to the left of the column's headline. Only happens when the browser's window is set to 320px (e.g. Someone 5 column).
  I think I get it, the header's hover state is set to a certain size. If the column is wider than the max, the hover state's color defaults to a different hover color.

https://github.com/carbon-design-system/ibm-products/assets/101175720/48ff08f4-7d94-4827-9510-c175fcf5c2b4

Some columns won't hide the data if shrunk to min (Joined column)

https://github.com/carbon-design-system/ibm-products/assets/101175720/30139a33-4cbd-48e6-84fc-330a599cdb1a

From the Resizing columns section Wasn't able to utilize these two features: (i) Resizing multiple columns at once and (ii) Resize column to fit its content.
On Mac, If I hold the ctrl button while clicking the header's resize option and then let go of the ctrl button and left click, the resize column behavior is initiated and follows my mouse's movement. Canceled only on left click.

https://github.com/carbon-design-system/ibm-products/assets/101175720/180c83a9-05c4-451e-97ef-c668055f9e30

Should we limit the max width size of a column?
Keyboard navigation works as intended.

elycheea commented 10 months ago

@My-Money29 the remaining issue for multiple columns is documented here and will be evaluated as an enhancement.

Closing this issue since I believe Matt addressed the bugs previously. 🙌

carbon-design-system / ibm-products