search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
94 stars 137 forks source link

[Customize columns] Content issues in Data table column customization data table extension #1981

Closed Hayley-l-williams closed 2 years ago

Hayley-l-williams commented 2 years ago

Content issues and considerations for the Customize columns data table extension

Pattern: https://pages.github.ibm.com/cdai-design/pal/components/data-table/column-customization/usage/

Content bug:

In the instructions, it reads: "Click and drag the white box to reorder the columns."

This is confusing because there is no white box. Consider updating the instructions on click & drag to reflect the visuals of the UI.

Considerations:

In the instructions, it reads: "Deselect columns to hide them." Consider adjusting the instructions to include the opposite: "Select columns to display them," either by replacing the original sentence or as an alternative.

While this can make sense if the majority of columns are selected and displayed by default, this is not intuitive if a minority are selected. For example, where we want to use this in Data Virtualization, we want four columns displayed on default, with the option to display another seven. I would think for any user accessing the Customizing columns, the task for them is choosing more columns to display, not choosing which of the few already displayed to hide.

Also, I don't know if this is something that needs to be considered in the pattern instructions but I will write anyway: the term "Manage columns" is misleading in context of data virtualization because the concept of managing columns exists, though carrying a different meaning. Currently in the pattern, the header in the modal is called "Manage columns." The hover state over the icon that invokes this feature also uses "Manage columns." We are implementing this pattern in Data virtualization / Watson Query but will need to use "Customize columns" to prevent confusion, despite being inconsistent with the pattern.

Screen Shot 2022-05-10 at 12 07 49 PM
elycheea commented 2 years ago

Looks like this has already been resolved on the PAL.

elycheea commented 2 years ago

Reopening after discussion with @Hayley-l-williams. Hayley is opening an issue in the PAL repo, but we should also update our example to be close to the examples in the PAL guidance.

Regardless of the changes to the PAL site, we should remove the “click and drag the white box” example content from the Storybook example.

Comparing again against the PAL guidelines, I’ll open another issue for column customization @kai-liu. Looks like we’re still using the older styles from WKC.

elycheea commented 2 years ago

https://github.com/carbon-design-system/ibm-cloud-cognitive/pull/2221