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.

"@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.

AgDS Beta v1.21.0 release

Updates

Combobox

• Warn if unsupported maxWidth prop is set.

Combobox multi

• Warn if unsupported maxWidth prop is set.
• Add default block value to docs props.

Date picker

• Fix scrolling to the top of the page on first open
• Fix consumer’s onBlur function not being called

Drawer

• Add mutedOverlay prop so that context with the main page content can be more easily retained

Icon

• Add CornerDownRightIcon icon

Progress indicator

• Add level two item support
• Add activePath prop to indicate which step is active, while deprecating isActive

Status badge

• Remove background colour for subtle appearance

Time input

• Initial release of component

Time picker

• Initial release of component

Selectable tables with batch actions

• Improve guidance

Released packages

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

Updates

Drawer

• Fix scrollbar not appearing in Chrome/Edge on platforms with permanent scrollbars
• Deprecating onDismiss in favour of onClose

Global alert

• Deprecating onDismiss in favour of onClose

Icon

• Add AlertCircle, Attachment, PieChart, ProgressPaused and WarningCircle icons.

Modal

• Deprecating onDismiss in favour of onClose

Page alert

• Deprecating onDismiss in favour of onClose
• Deprecating hasDismissButton in favour of hasCloseButton

Progress indicator

• Added ability to customise which item is treated as active. If no active item is specified, it defaults to the 'doing' status for backwards compatibility
• The 'doing' status has been marked as deprecated and encourages the use of the 'started' with isActive: true applied as a replacement

Section alert

• Deprecating onDismiss in favour of onClose
• Changed 'Dismiss' button text to 'Close' to align with Global Alert and Modal

Status badge

• Add 9 new status tones in 3 levels of emphasis. Deprecate existing tone values and the weight prop

Multi-task form pattern

• Add guidance for using the multi-task form pattern

Conditionally revealed content pattern

• Improve guidance

Released packages

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

Updates

Date picker

• Allow alternative date formats to be entered via the text input, e.g. 28-2-2023, 28/2/2023, 28th Feb 2023 etc
• Add new prop dateFormat, which can be used to adjust the date format displayed in the text input and secondary label
• Validate date formats onBlur instead of onInputChange
• Add indicator dot to today’s date in calendar widget

Date range picker

• Allow alternative date formats to be entered via the text input, e.g. 28-2-2023, 28/2/2023, 28th Feb 2023 etc
• Add new prop dateFormat, which can be used to adjust the date format displayed in the text input and secondary label
• Validate date formats onBlur instead of onInputChange
• Add indicator dot to today’s date in calendar widget

Field

• Ensure all form inputs always try to achieve their maxWidth

Grouped fields

• Initial release of component. To support this component, change how the invalid state is applied to autocomplete, combobox, date-picker, date-range-picker, password-input, search, search-input, select, textarea and text-input

Icon

• Update Warning and WarningFilled icons
• Add CalendarIcon to list of all icons.

Released packages

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

Updates

App layout

• Fix accessibility of AppLayoutSidebarDialog by giving it a "Menu" label
• Upgrade internal dependency of react-focus-lock

Core

• Add scrollbar-gutter to prevent layout shift between short & long pages

Date picker

• Update calendar widget to include a month select
• Improve logic for determining what initial month to display when the calendar is opened by the user
• Change day buttons from toggle buttons to normal buttons
• Improve the ARIA label of the button that opens the calendar picker
• Announce selected date upfront
• Upgrade internal dependency of react-day-picker
• Upgrade internal dependency of react-focus-lock

Date range picker

• Updated calendar widget to include a month select
• Improved logic for determining what initial month to display when the calendar is opened by the user
• Improved UX by ensuring that only valid date ranges can be entered when using the inputs to enter a date
• Improved range styles inside of the calendar picker
• Change day buttons from toggle buttons to normal buttons
• Correctly associate error message to appropriate date inputs
• Improved the ARIA labels of the buttons that opens the calendar picker
• Announce selected dates upfront
• Announce dates within ranges
• Upgraded internal dependency of react-day-picker
• Upgrade internal dependency of react-focus-lock

Drawer

• Upgrade internal dependency of react-focus-lock

File upload

• Set getErrorSummary().maxFiles to have a default of 1 to fix too-many-files error message

Global alert

• Fixed accessible label of region and close button

Icon

• Fixed incorrect usage of focusable attribute, which should always be set to "false"
• Make fillRule="evenodd" default.
• Remove icon-specific usage of fillRule and clipRule

Main nav

• Upgrade internal dependency of react-focus-lock

Modal

• Upgrade internal dependency of react-focus-lock

Progress indicator

• Added two new statuses for items: 'saved' and 'error'
• Added new prop: hideSubtitle

Section alert

• Correctly label dismiss button to match visible text

Table

• Add colSpan and rowSpan support to TableCell and TableHeader
• Add as support to TableHeader
• Reverse sortable arrow directions so ascending points up & descending points down
• Allow focus on TableWrapper to fix accessibility for keyboard users
• Fixed scope on TableHeader

Released packages

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

Updates

App layout

• Improved accessibility by replacing the underlying HTML sidebar element from an aside to a div

Breadcrumbs

• Update default aria-label to 'Breadcrumbs'

Combobox

• Added support for onBlur and onFocus props to all Combobox component variants (Combobox, ComboboxAsync, ComboboxMulti, ComboboxAsyncMulti)

Drawer

• Added new width prop which can be either Medium md (512px) or lg (720px)

Inpage nav

• Update default aria-label to 'In page'

Main nav

• Add default aria-label of 'Main' and update 2nd use to 'Supplementary'

Pagination

• Update default aria-label to 'Pagination'

Progress indicator

• Tweaked padding and spacing values of list item elements to more closely match designs

Search box

• Update default aria-label to 'Sitewide'

Side nav

• Improved accessibility by replacing the underlying HTML element from aside to div

Skip link

• Update default aria-label to 'Skip links'

Sub nav

• Update default aria-label to 'Content'

Released packages

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

Updates

AG Branding

• Updated darkBackgroundShade and darkBackgroundBodyAlt colors

Autocomplete

• Added support for react nodes in the secondaryText and tertiaryText props in the AutocompleteRenderItem component

Combobox

• Added new clearable prop to Combobox. If true, the clear button ("x") will be rendered when there is a selected option
• Fixed a bug where changing the value of the options prob would not immediately update the list of options
• Added support for react nodes in the secondaryText and tertiaryText props in the ComboboxRenderItem component

Date picker

• Used fixed height in calendar to prevent navigation controls from moving when switching between months

Date range picker

• Used fixed height in calendar to prevent navigation controls from moving when switching between months

File input

• Increased visual prominence of when a file has been uploaded by changing the font weight when a file has been added
• Decreased the "Choose files" button size
• Fixed hover styles in file selector button

File upload

• Added support for href in FileWithStatus

Main nav

• Extended the secondaryItems prop to allow users to add a dropdown menu
• Made improvements to component under the hood to better improve performance and code readability

Password input

• Initial release of component

Released packages

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

Updates

Autocomplete

• Improved the renderItem prop which controls how each option in the dropdown list is rendered. Inside this function, consumers can style extra information about an option by using a new component called AutocompleteRenderItem.

Button

• Added flex-shrinking to icons to prevent from shrinking when the button label spans multiple lines
• Switched to min-height instead of height to better accommodate buttons with multi-line labels
• Updated text alignment for the text button variant

Combobox

• Improved the renderItem prop which controls how each option in the dropdown list is rendered. Inside this function, consumers can style extra information about an option by using a new component called ComboboxRenderItem.

Dropdown menu

• Minor improvements to internal state reducer

Pagination

• Fixed small bug where separators were sometimes being displayed unnecessarily

Text input

• Added support for max-length

Released packages

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

Updates

App layout

• Removed "Menu" button from mobile variant when in focus mode

Checkbox

• If supplied, the invalid prop will now override the value of the invalid prop set in ControlGroup

Combobox

• Improved internal positioning engine

Dropdown menu

• Improved accessibility by ensuring that the DropdownMenuButton component always has a valid aria-controls attribute
• Improved accessibility by allowing users to press Enter, Space, ArrowDown or ArrowUp keys to open up the dropdown menu and activate a child descendant
• Fixed a bug where keyboard shortcuts couldn't be used when the dropdown menu was open - e.g. refresh the page using cmd + r
• Improved accessibility by significantly improving the logic for searching for a child descendant

Icon

• Created InboxIcon, PauseIcon and PlayIcon

File upload

• Exported formatFileSize utility
• Removed border from thumbnail
• Added support for showing previously uploaded files with the new existingFiles and onRemoveExistingFile props.

Main nav

• Updated the mobile variant to always render in the light palette

Pagination

• Extended Pagination and PaginationButtons components to support items range text and items per page select dropdown

Status badge

• Made each icon in the StatusBadge component announceable by screen readers

Table

• Added support for aria-rowcount and aria-rowindex on the Table component

Released packages

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

Updates

App layout

• Fixed small issue in AppLayoutSidebar where the text color wasn't being applied correctly to text list items in dark mode
• Extended the items prop in AppLayoutSidebar to accept an object with options and items. This allows consumers to control the padding between sidebar navigation groups

File upload

• Added thumbnails to selected files. This can be disabled via a new hideThumbnails prop
• Extended the accept prop so MIME types that are not in the predefined list can be passed
• Exported formatFileSize utility function. Example usage: import { formatFileSize } from '@ag.ds-next/react/file-upload'
• Upgraded internal react-dropzone dependency

Icon

• Created new icon FileIcon

table

• Created new components for batch table actions: TableBatchActionsBar and TableBatchActionsTitle

• Created new TableRow component. If you're using the standard <tr> HTML element, you can optionally upgrade to this new component.

<Table>
  <TableHead>
-   <tr>
+   <TableRow>
      <TableHeader scope="col">Location</TableHeader>
      <TableHeader scope="col">Population</TableHeader>
-   </tr>
+   </TableRow>
  </TableHead>
  <TableBody>
-   <tr>
+   <TableRow>
      <TableCell>New South Wales</TableCell>
      <TableCell>7,670,700</TableCell>
-   <tr>
+   </TableRow>
  </TableBody>
</Table>

Released packages

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