Agriculture Design System
Design System for import and export services
30th June 2025

AgDS v1.30.0 release

Adds a responsive preview, indented Accordions, fixes Checkbox vertical-alignment, updates Conditional field container style and its support for invalid fields, includes new pattern and accessibility documentation, plus various bug fixes and improvements.

Updates

Accordion

  • Add indent prop to apply horizontal padding to AccordionTitle and AccordionBody.
  • Update accessibility documentation.
  • Update colour documentation.

Ag branding

  • Add colour documentation.

App layout

  • AppLayoutSidebar - Simplify announcements of parent links.

Autocomplete

  • Add accessibiity documentation.
  • Add colour documentation.

Avatar

  • Add colour documentation.

Breadcrumbs

  • Add colour documentation.

Button

  • Update accessibility documentation.
  • Update colour documentation.

Call to action

  • Update accessibility documentation.
  • Add colour documentation.

Callout

  • Update colour documentation.

Card

  • Update colour section in current and legacy docs.

Checkbox

  • Remove space beneath when in the normal document flow.
  • Add onFocus as valid TypeScript prop.
  • Add accessibiity documentation.
  • Add colour documentation.

Combobox

  • Add accessibiity documentation.
  • Add colour documentation.

Conditional field container

  • Update style to use a left border instead of a horizontal divider.

Control group

  • Add accessibiity documentation.
  • Add colour documentation.

Date picker

  • Add colour documentation.

Date picker next

  • Update accessibility documentation.
  • Add colour documentation.

Date range picker

  • Add colour documentation.

Date range picker next

  • Update accessibility documentation.
  • Add colour documentation.

Details

  • Add colour documentation.

Direction link

  • Add colour documentation.

Divider

  • Add colour documentation.

Divider with text

  • Update colour documentation.

Drawer

  • Make the content area keyboard-accessible.
  • Prevent title from overlapping Close button.
  • Add accessibiity documentation.

Dropdown menu

  • Add colour documentation.

Feature link list

  • Add accessibiity documentation.
  • Add colour documentation.

Field

  • Update style to support invalid fields within <ConditionalFieldContainer>.
  • Add accessibiity documentation.

Fieldset

  • Update accessibility documentation.

File input

  • Add colour documentation.

File upload

  • Add colour documentation.

File upload

  • Update accessibility documentation.

Filter sidebar

  • Update CollapsingSideBar chevron to action colour.
  • Add colour documentation.
  • Enhanced documentation and guidance around mobile usage.

Footer

  • Add colour documentation.

Form stack

  • Add accessibiity documentation.

Global alert

  • Add colour documentation.

Grouped fields

  • Update style to support invalid fields within <ConditionalFieldContainer>.
  • Add accessibiity documentation.
  • Add colour documentation.

Header

  • Add colour documentation.

Hero banner

  • Add colour documentation.

Icon

  • Add colour documentation.

Indicator dot

  • Add colour documentation.

Inpage nav

  • Add colour documentation.

Link list

  • Add colour documentation.

Main nav

  • Add colour documentation.

Notification badge

  • Add colour documentation.

Page alert

  • Add colour documentation.

Pagination

  • Add colour documentation.

Password input

  • Add accessibiity documentation.

Password input

  • Add colour documentation.

Progress indicator

  • Update CollapsingSideBar chevron to action colour.
  • Add accessibiity documentation.
  • Add colour documentation.

Radio

  • Remove space beneath when in the normal document flow.
  • Add onFocus as valid TypeScript prop.
  • Add accessibiity documentation.
  • Add colour documentation.

Search box

  • Fix clear button position on SearchBoxInput when labelVisible prop is provided.
  • Add accessibiity documentation.
  • Update colour documentation.

Search input

  • Add colour documentation.

Section alert

  • Update colour documentation.

Select

  • Add accessibiity documentation.
  • Add colour documentation.

Side nav

  • Simplify announcements of parent links.
  • Update CollapsingSideBar chevron to action colour.
  • Add colour documentation.

Skeleton

  • Add colour documentation.

Status badge

  • Add colour documentation.

Sub nav

  • Add colour documentation.

Summary list

  • Add colour documentation.

Switch

  • Add colour documentation.

Table

  • Add colour documentation.
  • Fix and lint code sample examples.
  • Update accessibility documentation.

Tabs

  • Add colour documentation.

Tags

  • Add colour documentation.

Task list

  • Add accessibiity documentation.
  • Add colour documentation.

Text input

  • Add accessibiity documentation.
  • Add colour documentation.

Text link

  • Add colour documentation.

Textarea

  • Add accessibiity documentation.
  • Add colour documentation.

Time input

  • Add accessibiity documentation.
  • Add colour documentation.

Time picker

  • Add accessibiity documentation.
  • Add colour documentation.

Toggle button

  • Add colour documentation.

Docs

yourGov

  • Bypass auth to allow navigating/previewing the app without logging.

Released packages

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