Agriculture Design System
Design System for the Export Service
10th July 2024

AgDS Beta v1.23.0 release

Add sub-level support to App layout sidebar, new UX for Side nav sub-levels, add theming to Main nav and Footer, allow co-branding App layout header, plus various bug fixes and improvements.


App layout

  • Add co-branding to the AppLayoutHeader via secondHref, secondLogo, and dividerPosition props.
  • Add sub-level support for AppLayoutSidebar navigation items with accompanying always and whenActive strategies for making them visible.
  • Fix AppLayoutHeader divider width.


  • Add form prop from native button props to allow submit buttons to be connected from outside a form.


  • Fix required to set aria-required.
  • Add name support.


  • Combobox multi: Allow backspace to remove selected items when the popover is open.

Control group

  • Fix passing required to Checkbox and Radio children.
  • Add automatic & custom name support.

Date picker

  • Reduce the size of and horizontally centre the calendar when the screen size is less than 375px.


  • Add borderColor prop to Footer.
  • Add color prop to FooterDivider.


  • Fix spacing on desktop.
  • Fix divider not being hidden when wrapping to a second line.

Main nav

  • Add focusMode prop.
  • Add borderColor prop to MainNav and MainNavBottomBar.
  • Deprecate MainNavBottomBar.
  • Fix mobile dialog menu not closing when you press the active link.
  • Use correct ARIA labels for menu button & dialog. Remove other incorrect ARIA properties.


  • Make the Close button’s visual and reading order identical.


  • Fix required to set aria-required.
  • Add name support.

Side nav

  • Add always and whenActive strategies for making sub-level items visible. The new default will be whenActive as always should be used sparingly and when only a small number of navigation items exist.


  • Fix textAlign support in TableHeaderSortable.


  • Add 'use client' to entrypoints so they can be imported and used directly from server components


  • Drawer: Add examples of creating an accessible form within a drawer.
  • Header: Update co-branding example.
  • Pagination: Fix “Items per page” section not showing correct page number.

Released packages

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