Agriculture Design System
Beta
Design System for the Export Service
22nd September 2023

AgDS Beta v1.11.0 release

Initial release of Section alert and Filter sidebar, rename `Filter drawer` to `Drawer`, added `info` tone in Callout, plus various bug fixes and improvements.

Updates

App layout

  • Removed overflow: hidden from AppLayoutContent to support sticky elements. Added min-width: 0 to fix large tables breaking layout on smaller devices.

Autocomplete

  • Added search icon.

Box

  • Add support for more colours in background, foreground and border props.

Callout

  • Added info tone and compact variant
  • Added support for custom icons.

Control group

  • Added flex wrapping so horizontal options can break into multiple lines if required.

Core

  • Added xxl breakpoint token
  • Added none border-width.

Details

  • Added new prop onBodyAlt. If the Details component is placed on a page with bodyAlt background, set the onBodyAlt prop to true
  • Updated width of interactive element to match content.

Drawer

Filter drawer has been renamed to Drawer.

The FilterDrawer component will continue to work out of the the @ag.ds-next/react/filter-drawer entrypoint, but this usage has been marked as deprecated and will be removed in the next major release.

To upgrade, update the import and component name when using these components.

- import { FilterDrawer } from '@ag.ds-next/react/filter-drawer';
+ import { Drawer } from '@ag.ds-next/react/drawer';

Dropdown menu

  • Added new prop offset
  • Updated padding of label element in DropdownMenuGroup
  • Swapped from display style to conditional rendering to improve panel element anchoring
  • Improve handling of menu items with long labels.

Filter sidebar

  • Created new component for filtering layouts.

Search input

  • Updated search icon position.

SectionAlert

  • Created new component.

Switch

  • Updated width of interactive element to match content.

Released packages

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