Refactor click/select/expand affordances for data lists and tables #5347
Labels
Feature
end user feature that requires design to define this, i.e. changes or augments the user experience.
PF5
released on @alpha
Milestone
Follow up to patternfly/patternfly-design#1211
Updates to the table rows behavior/interactions:
Selectable table rows: (same behavior/interaction as current)
There is a hover on the checkbox via mouse and keyboard. Selection is done by clicking the checkbox and the visual affordance is the checkbox appears to show the row is selected. There is no hover on the row itself.
Expanding table rows:
![Expandable-3](https://user-images.githubusercontent.com/98424339/213572121-2101a8f1-3f7c-406d-99e5-7d7a07420f5f.png)
There is a hover on the caret via mouse and keyboard. Expansion is done by clicking the caret. There is no hover on the row itself. Updates: Once the row expands, the visual affordance will no longer be the left blue border to indicate expansion, instead it will be the removal of the bottom border of the parent row and the growing of the row into the expanded row content. The expanded row content will also be indented to be in line with the first column content.
Clickable table rows [primary-detail view only]:
![Primary-detail no padding](https://user-images.githubusercontent.com/98424339/211367081-92855f0e-e6a1-4d26-a669-1d4443c41e84.png)
![Clickable-3](https://user-images.githubusercontent.com/98424339/213572218-c7ce26bf-e628-4115-b590-61379651df09.png)
There is a hover on the row via mouse and keyboard (drop shadow and blue border). The row can be clicked to produce the action of opening the primary-detail drawer. Updates: Once the primary-detail drawer opens, the visual affordance will be updated to be a thicker left blue border (double the width of current) so it can be clearly seen in both cases where the table has content padding and where it doesn't.
Note that while these mocks are specifically for tables, the same changes should be applied to clickable/expandable data lists.
The text was updated successfully, but these errors were encountered: