AgDS Beta v1.9.0 release

Updates

App layout

Fixed usage of useTransition by @react-spring/web to ensure compatibility with latest version (#PR 1281)

Box

Extended the Box component so borders can be applied with the accent colour (#PR 1185)

<Box borderBottom borderBottomWidth="xxl" borderColor="accent">
    Hello world
</Box>

Core

Extended utility function useClickOutside to accept multiple refs (#PR 1266)

Date picker

Clicking the calendar button trigger while the calendar popover is open will now close the calendar popover (#PR 1270)

Date range picker

Clicking the calendar button trigger while the calendar popover is open will now close the calendar popover (#PR 1270)

Filter drawer

Fixed usage of useTransition by @react-spring/web to ensure compatibility with latest version. (#PR 1281)

Global alert

• Visual refresh (#PR 1256)
• Added support for 'info' tone (#PR 1256)

Released packages

"@ag.ds-next/react": "1.9.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.

AgDS Beta v1.8.0 release

Updates

Button

• Extended BaseButton to support onKeyDown, onBlur, onFocus, role and tabIndex props (#PR 1232)

Tabs

• Initial release of the Tabs component (#PR 1232)

Released packages

"@ag.ds-next/react": "1.8.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.

AgDS Beta v1.7.1 release

Updates

App layout

• Used findBestMatch utility function to ensure nav items are highlighted correctly based on the activePath (PR #1251)

Core

• Deduplicated use of findBestMatch from navigational components () and moved into the core entry point (PR #1251)

Sub nav

• Used findBestMatch utility function to ensure nav items are highlighted correctly based on the activePath (PR #1251)

Released packages

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

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.

AgDS Beta v1.7.0 release

Updates

App layout

• Changed responsive behaviour so that the desktop layout is visible from the extra large breakpoint (1200px) (PR #1213)
• Added new prop badgeLabel to AppLayoutHeader which can be used to indicate if an application is in a prerelease state (PR #1241)

Combobox

• Improved hover styles (PR #1242)

Core

• Upgraded popover positioning dependency from React Popper to Floating UI (PR #1207)
• Created a set of tokens for z-index (PR #1210)
• Removed modalDialog and mobileMenu max-width tokens as they are related to specific components (PR #1240)

Filter drawer

• Create initial component (PR #1099)

File input

• Removed red tint background from invalid state (PR #1191)

Icon

• Added new icon FactoryIcon (PR #1226)

Modal

• Fixed inconsistent padding on mobile (PR #1205)

Page alert

• Added support for dismissing through a new onDismiss prop (PR #1171)

Prose

• Improved styles for figcaption (PR #1094)
• Increased margin between hr elements (PR #1233)

Status badge

• Added new weight prop which can be used to set the visual weight of the badge. The two accepted values are subtle and regular (default) (PR #1218)

Table

• Added new fontWeight prop to TableCell (PR #1238)

Released packages

"@ag.ds-next/react": "1.7.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.

AgDS Beta v1.6.0 release

Updates

App layout

• Updated AppLayoutFooterDivider border color from border to borderMuted (PR #1181)
• Adding missing aria dialog tags to mobile version of App layout sidebar (PR #1119)

Autocomplete

• Fixed bug where the "Clear" button was not being rendered as expected (PR #1123)
• Added new prop emptyResultsMessage which can be used to display a message when no options match the users search term (PR #1123)

Badge

Indicator dot, Notification badge and Status badge have been moved to their own entry points.

These components will continue to work out of the the @ag.ds-next/react/badge entrypoint, but this usage has been marked as deprecated and will be removed in the next major release.

To upgrade, update the import when using these components.

- import { IndicatorDot, NotificationBadge, StatusBadge } from '@ag.ds-next/react/badge';
+ import { IndicatorDot } from '@ag.ds-next/react/indicator-dot';
+ import { NotificationBadge } from '@ag.ds-next/react/notification-badge';
+ import { StatusBadge } from '@ag.ds-next/react/status-badge';

Box

Flex and Stack have been moved to their own entry points.

These components will continue to work out of the the @ag.ds-next/react/box entrypoint, but this usage has been marked as deprecated and will be removed in the next major release.

To upgrade, update the import when using these components.

- import { Box, Flex, Stack } from '@ag.ds-next/react/box';
+ import { Box } from '@ag.ds-next/react/box';
+ import { Flex } from '@ag.ds-next/react/flex';
+ import { Stack } from '@ag.ds-next/react/stack';

Combobox

• Remove use-debounce dependency (PR #1131)
• Fixed bug where the "Clear" button was not being rendered as expected (PR #1123)
• Updated logic in the splitLabel helper function so options with special characters (brackets, slashes etc) are handled correctly (PR #1176)

Control input

Checkbox, Radio and Control group have been moved to their own entry points.

These components will continue to work out of the the @ag.ds-next/react/control-input entrypoint, but this usage has been marked as deprecated and will be removed in the next major release.

To upgrade, update the import when using these components.

- import { Checkbox, Radio, ControlGroup } from '@ag.ds-next/react/control-input';
+ import { Checkbox } from '@ag.ds-next/react/checkbox';
+ import { Radio } from '@ag.ds-next/react/radio';
+ import { ControlGroup } from '@ag.ds-next/react/control-group';

Core

• Created new hook useAriaModalPolyfill which adds aria-hidden="true" to every direct child of the body element when a modal is opened. This hook consolidates code that was previously copied/pasted across Modal, App layout and Main nav. (PR #1119)
• Created a new overlay design token which can be used as an overlay for modals and other components that sit on top of the main background (PR #1147)

Date picker

Date range picker has been moved to it's own entry point.

DateRangePicker will continue to work out of the the @ag.ds-next/react/date-picker entrypoint, but this usage has been marked as deprecated and will be removed in the next major release.

To upgrade, update the import when using these components.

- import { DateRangePicker } from '@ag.ds-next/react/date-picker';
+ import { DateRangePicker } from '@ag.ds-next/react/date-range-picker';

Date range picker

• Updated container wrapping behaviour to allow the component to be placed in tight areas such as sidebars (PR #1177)

Divider

• Created new component Divider which is a horizontal rule that separates blocks of content (PR #1180)

File upload

• Made internal types available to consumers (PR #1183)
• Removed the filesize third party dependency (PR #1110)

Page alert

• Added support for a react element in the title prop (PR #1177)

Tags

• Enabled wrapping behaviour to allow tags to flow across multiple lines (PR #1116)

Released packages

"@ag.ds-next/react": "1.6.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.

AgDS Beta v1.5.1 release

Updates

App layout

• Reduced spacing between user avatar and user name in AppLayoutHeader (PR #1108)
• Fixed bug when server side rendering AppLayoutSidebarDialog (PR #1111)

Released packages

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

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.

AgDS Beta v1.5.0 release

Updates

Accordion

• Replaced chevron icon react-spring animation with CSS animation (PR #1088)

App layout

• Initial release of App layout, a collection of components that can be composed together to create a layout for the authenticated space. (PR #1059)

Call to action

• Removed icon animation on hover as it is inconsistent with AgDS interactions (PR #1088)

Core

• Added new border token xxl which has a value of 8px (PR #1095)

Combobox

• Fixed exhaustive deps warning for the onClear function in ComboboxAsyncMulti (PR #1076)

Date picker

• Improved documentation examples and test coverage of DateRangePicker (PR #1087)

Header

• Updated header branding link size to match content (PR #1101)

Icon

• Added new icons ChevronsLeftIcon, ChevronsRightIcon and SettingsIcon (PR #1086)

Loading

• Replaced react-spring animation with CSS animation (PR #1088)

Main nav

• Replaced custom inline icons with design system icons (MenuIcon and CloseIcon) (PR #1080)

Modal

• Replaced react-spring animation with CSS animation (PR #1088)

Progress indicator

• Replaced chevron icon react-spring animation with CSS animation (PR #1088)

Side nav

• Replaced chevron icon react-spring animation with CSS animation (PR #1088)

Skeleton

• Replaced react-spring animation with CSS animation (PR #1088)

Switch

• Replaced react-spring animation with CSS animation (PR #1088)

Released packages

"@ag.ds-next/react": "1.5.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.

AgDS Beta v1.4.1

Updates

Combobox

• Fixed controlled usage bug where value and onChange props were not being used/called in ComboboxMulti and ComboboxAsyncMulti (PR #1072)
• Updated disabled state in ComboboxMulti and ComboboxAsyncMulti (PR #1072)

File upload

• Added support for application/xml and text/xml MIME types (PR #1071)

Released packages

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

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.

AgDS Beta v1.4.0

Updates

Autocomplete

• Upgraded internal dependency of downshift to version 7 which was updated to support the ARIA 1.2 combobox pattern (PR #993)
• Updated documentation (PR #993)
• Fixed asynchronous test displaying a warning for performing a state update that is not wrapped in act (PR #993)

Badge

• Added support for the aria-hidden prop in NotificationBadge (PR #1042)

Combobox

• Upgraded internal dependency of downshift to version 7 which was updated to support the ARIA 1.2 combobox pattern (PR #993)
• Created new component ComboboxMulti which allows users to choose multiple items from a predefined list of options (PR #993)
• Created new component ComboboxAsyncMulti which allows users to choose multiple items from a list of options that needs to be fetched over the network (PR #993)

Date picker

• Fixed text colour bug when using in dark palette (PR #1067)

Field

• Update wrapping behaviour of label (PR #1041)
• Extended the function returned from from useScrollToField to accept either a mouse event or an ID of a form field element. This change makes it easier for consumers to scroll and focus a form field on the same page in situations such as when a form first renders. (PR #1038)

Icon

• Added new icons HomeIcon and ExitIcon (PR #1062)

Page alert

• Added flex growing to the content area (PR #1066)

Progress indicator

• Added new status started which can be used to indicate that the step has been partially completed but is not active or selected (PR #1068)

Table

• Created new component TableHeaderSortable which can be used in place of TableHeader when users can click a column header to sort the table (PR #1047)

Released packages

"@ag.ds-next/react": "1.4.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.

AgDS Beta v1.3.1

Updates

Avatar

• Render a span component (PR #1026)

Select

• Updated styles for disabled state to fix default browser styles overrides (PR #1039)

Skip link

• Added high z-index to ensure the element is always placed above other elements on the page (PR #1034)

---

Released packages

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

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.