AgDS Beta v1.22.0 release

Updates

App layout

• Add background and palette support to AppLayoutFooter, AppLayoutHeader & AppLayoutSidebar.
• Fix AppLayoutSidebar not closing on item press.

Box

• Deprecate focus prop in favour of new focusRingFor prop to enable a focus ring when the element is keyboard focused (focusRingFor="keyboard") and programmatically focused (focusRingFor="all").
• Add breakWords prop to let words break across multiple lines where necessary.
• Add alignSelf CSS prop.
• Add justifySelf CSS prop.
• Add 'start' and 'end' as valid alignItems values.
• Document all style props.

Button

• Add alignSelf CSS prop from Box.
• Add focusRingFor prop to allow programmatic focus, e.g. via a link, to render the focus ring. This is available for Button and ButtonLink.

Core

• Add new useFocus hook to allow an element to be focused when it’s mounted and updated.

Drawer

• Add elementToFocusOnClose prop to allow custom element to be focused when the drawer closes.

File upload

• New implementation of error handling: new UI and unaccepted files no longer trigger the invalid state.
• When using multiple, duplicate files aren’t selected.
• maxFiles now uses the total files being uploaded, not just current selection.

Grouped fields

• Remove unused required prop.

Header

• Support second logo with link for co-branding.

Icon

• Prevent icons from shrinking smaller than their intended size.

List

• Add BoxProps to allowed types for ListItem.

Page alert

• Add focusOnMount prop to focus the alert as soon as it’s rendered to the page.
• Add focusOnUpdate prop for to focus the alert when content updates.
• Add focusRingFor="all" to improve accessibility for programmatically focused alerts.

Section alert

• Add focusOnMount prop to focus the alert as soon as it’s rendered to the page.
• Add focusOnUpdate prop for to focus the alert when content updates.
• Add focusRingFor="all" to improve accessibility for programmatically focused alerts.
• Ensure Close button is always aligned to the top.

Summary list

• Increase gap between SummaryListItemTerm and SummaryListItemDescription to show a clearer separation.

Table

• Add invalid prop to TableRow component to visually indicate a row with error.
• Docs: Fix example header alignment.

Task list

• Make doneRecently status count towards stepsCompleted.

Text

• Remove unnecessary margin reset CSS.

Released packages

"@ag.ds-next/react": "1.22.0"

Full changelog

Aside from the complete release notes on the @ag.ds-next website, you can also view the verbose change log in the related PR for this release.