Table favorites #5213
Table favorites #5213
Conversation
|
PF4 preview: https://patternfly-react-pr-5213.surge.sh |
|
This looks great @jschuler . There's just one small styling issue that I wonder if we can fix. When the favorites star in the header is not selected to sort, it should be a slightly darker gray per the design. Here's what the original design looked like:
and here's the implementation:
Right now it feels like the column is disabled. @mcoker do we need a CSS update for that? @mceledonia can you tell us what gray value we should be using there? I don't see it specified in the design. Thanks. |
|
@mcarrano I want to say that was something we changed while implementing the feature in core, but I can make it darker. |
|
Yeah it should be our secondary text/global color #6A6E73 in order for it to pass contrast requirements. |
There was a problem hiding this comment.
@jschuler the styling looks right now. In looking at this again, there's just one thing I was hoping you can change. When I first click the star in the header to sort by favorities, the initial sort is to put the favorited items at the end. I need to click again to move them to the top. That's exactly opposite of what I expect. If a user sorts by favorities, it's most likely because they want to pop all of the favorited items to the top of the table so they can take some action on them. Is is possible to just turn that around?
| // using this prop enables the favorites column | ||
| onFavorite={this.onFavorite} | ||
| // if the onSort prop is detected, favorites can be sorted | ||
| // if you want to exclude favorites from sorting you can use this prop with a value of `false` |
There was a problem hiding this comment.
These comments are great. I wonder if it makes sense to add them to the prop docs?
There was a problem hiding this comment.
yes, I added a description for the Favorites example that explains how to enable favoriting, and in the props I added
/**
* Enables favorites column
* Callback triggered when a row is favorited/unfavorited
*/
onFavorite?: OnFavorite;
/** Along with the onSort prop, enables favorites sorting, defaults to true */
canSortFavorites?: boolean;
| /** The row index */ | ||
| rowIndex?: number; | ||
| /** Additional props forwarded to the FavoritesCell */ | ||
| props?: any; |
There was a problem hiding this comment.
DO you think we should make the name more specific here?
There was a problem hiding this comment.
To use it you need to wrap it in the favorites object which gives it context, e.g.
favorites: {
props: { 'aria-label': 'favs' }
}
What: Closes #5020
https://patternfly-react-pr-5213.surge.sh/components/table#favoritable