carbon
carbon copied to clipboard
Sage
Sort: customisable icons
Desired behaviour
It would be great to be able to customise the icons used by the Sort component in the FlatTable package. Currently the icons are locked to two pre-determined icons but there is nothing in the Design System that dictates that these icons must be used.
Current behaviour
The current icons are locked to sort_up and sort_down and cannot be changed or overriden
Suggested Solution
Accept optional props that allow consumers to override one/both/neither of the icons, and fall back to the current if none are provided
CodeSandbox or Storybook URL
https://codesandbox.io/p/sandbox/nice-villani-4hk9fm?file=%2Fsrc%2FApp.js%3A7%2C17
Anything else we should know?
CodeSandbox example also represents how a table might look with additional icons to show unsorted columns
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
Having spoken with @ljemmo and reviewed this request, we feel we should not allow this control over the sort icon in the table, but more add/update globally where needed. @damienrobson-sage was this request from a particular design that was provided?
@harpalsingh we had an accessibility audit done which indicated that the tables didn't indicate available sort particularly well (e.g. unsorted, sortable columns are not highlighted unless the mouse is placed over them). For reference, I raised DSY-3254 almost a year ago, so it might have fallen out of scope since it was last considered. Give me a shout if you need more info, etc.
@damienrobson-sage Yep 100% , I believe there were some designs done for that, Ill check with DS where we are on that improvements and will get the team to work on that, I'll catch up with you next week on this!
@damienrobson-sage and @harpalsingh. @Silviota has some designs pending for sort by which are due to be added to DS documentation in the next week. Please reach out to her for more details.
The use of an icon inside the column header was deemed not to be accessible by our accessibility colleagues so she's opted for a dropdown approach and a popover approach for more complex ssorting.
