Create SortButton Component
Overview
Problem Statement
We need a SortButton that allows users to toggle sort order on DataGrid, list, etc elements ascending or descending by whatever property the user chose to sort by using another element on the UI.
Goal
Have a generic SortButton component in place that can be used wherever users need to define or toggle the sort order of items.
Context
Ongoing development and enhancement of our Design System. SortButton has a dependency on ToggleButton (#1142 ) which it is supposed to wrap, and on sort icons it is supposed to display (#1145 ).
Details
Implementation
Create a thin wrapper around our ToggleButton component with two states/values, representing ascending and descending sort order.
Visual Design
The current state of the button is represented by a sole icon, no label. Visually the SortButton has all variants of the Button component it wraps via ToggleButton.
By default, SortButton does not render a label, but only the respective icons:
Example
TODO
Props
The SortButton inherits all props from Button via ToggleButton, and in addition implements an order prop:
| Prop |
Type |
Default |
Notes |
options |
Array<T | {value: T; label? React.ReactNode} |
"asc" | "desc" |
Can be an array of plain values or objects with value and label each. |
order |
|
"desc" |
Must be one of the available options |
Any other, arbitrary props should be passed to the wrapped ToggleButton component, so users can completely overwrite the semantics, and, using an array of objects as options or via the renderLabel function, can even pass custom icons or labels if they need to.
Estimation
- Priority: High
- Effort: Low
- Status: Backlog
Acceptance Criteria
QA
Additional Links
#1142, #1145
Create SortButton Component
Overview
Problem Statement
We need a SortButton that allows users to toggle sort order on DataGrid, list, etc elements ascending or descending by whatever property the user chose to sort by using another element on the UI.
Goal
Have a generic
SortButtoncomponent in place that can be used wherever users need to define or toggle the sort order of items.Context
Ongoing development and enhancement of our Design System.
SortButtonhas a dependency onToggleButton(#1142 ) which it is supposed to wrap, and on sort icons it is supposed to display (#1145 ).Details
Implementation
Create a thin wrapper around our
ToggleButtoncomponent with two states/values, representing ascending and descending sort order.Visual Design
The current state of the button is represented by a sole icon, no label. Visually the SortButton has all variants of the
Buttoncomponent it wraps viaToggleButton.By default,
SortButtondoes not render a label, but only the respective icons:Example
TODO
Props
The
SortButtoninherits all props fromButtonviaToggleButton, and in addition implements anorderprop:optionsArray<T | {value: T; label? React.ReactNode}"asc" | "desc"valueandlabeleach.order"desc"Any other, arbitrary props should be passed to the wrapped
ToggleButtoncomponent, so users can completely overwrite the semantics, and, using an array of objects asoptionsor via therenderLabelfunction, can even pass custom icons or labels if they need to.Estimation
Acceptance Criteria
QA
Additional Links
#1142, #1145