Improve consistency of border radius usage across components
Over time, individual components have reached for a larger radius in the scale, rather than increasing the scale at a theme level. This resulted in inconsistent use across the system, preventing uplift of the scale.
Re-aligning all components to use the scale consistently enables themes to apply very different radius scales — enabling an upcoming design uplift theme.
Support data attribute boolean values
The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.
EXAMPLE USAGE:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
Pagination: Increase chevron spacing on prev/next links
Increases the space between the "Previous" and "Next" text and their chevron icons to balance with the larger icon size.
Pagination: Add pageLimit support
Add support for configuring the number of pages displayed using the pageLimit prop. The default is still set to 7, but consumers can now reduce this, useful when Pagination is used inside column layouts.
In addition, the layout has been stabilised, preventing the links moving when the next/prev actions are shown/hidden.
EXAMPLE USAGE:
<Pagination ... pageLimit={3} />
Alert, Badge, Button, ButtonLink, ButtonRenderer, Card, Dialog, MenuRenderer, OverflowMenu, Pagination, TooltipRenderer, useToast: Increase border radius using updated borderRadius scale
Add support for data attribute maps on all components.
EXAMPLE USAGE:
<Alert data={{ testId: 'message' }} /> // => <div data-testId="message" />
Pagination: Add keyline to improve active page indicator contrast
Improves the contrast of the active page indicator by adding a keyline when Pagination is used outside of a Card.
Add space between page and navigation controls above mobile to improve affordance between the current page and the hover state of surrounding buttons.
Pagination: Add component
EXAMPLE USAGE:
<Pagination label="Search results pagination" page={1} total={20} linkProps={({ page }) => ({ href: `/results?page=${page}` })} />