AgDS Beta v1.3.0 release

Updates

Autocomplete

• Improved styles for disabled state (PR #981)

Box

• Updated the palette prop to accept responsive values. For example <Box palette={["dark", "light"]} />. (PR #1021)

Combobox

• Fixed bug where the dropdown trigger button and clear button were not being marked or shown as disabled (PR #981)
• Improved styles for disabled state (PR #981)

Control Input

• Improved styles for disabled state (PR #981)

Core

• Removed dependency to Reach UI as it is no longer being maintained. The logic from @reach/auto-id has been forked and copied into the repo. (PR #1002)

Date picker

• Updated default label to show "(optional)" when the field is not required. This is consistent with all other form components in the design system. (PR #1008)
• Added new prop onInputChange which can be used to track the value of the text input (PR #997)
• Updated the type of the value prop so it can accept string (which represents the value of the text input) (PR #997)
• Removed unused prop placeholder (PR #1016)
• Removed options xs and sm from maxWidth prop. These widths were too small to be used in this component. (PR #1016)
• Improved styles for disabled state (PR #981)
• Improved test coverage (PR #999)

Date range picker

• Updated default label to show "(optional)" when the field is not required. This is consistent with all other form components in the design system. (PR #1008)
• Updated the type of the value prop so it can accept string (which represents the value of the text inputs) (PR #997)- Added new prop onFromInputChange and onToInputChange which can be used to track the value of the text inputs (PR #997)
• Added support for a legend to be supplied via a new legend prop. If no legend is supplied, a default legend of Date range will be rendered but will be visually hidden. (PR #1000)
• Added support for hint text via the hint prop (PR #1000)
• Added support for an invalid state via the fromInvalid, toInvalid and message prop (PR #1000)
• Improved styles for disabled state (PR #981)
• Improved test coverage (PR #999)

Field

• Updated behaviour of the secondaryLabel prop so it will prepend any text to the label instead of replacing default secondary label "(optional)". (PR #1008)
• Added className prop to FieldLabel (PR #998)
• Fixed typos in hook useScrollToField (PR #998)
• Exported component props and added comments to props (PR #998)

File input

• Improved styles for disabled state (PR #981)

Icon

• Added new icons ChevronsUpDownIcon, EmailIcon, FacebookIcon, InstagramIcon, LinkedInIcon, WebsiteIcon and TwitterIcon. (PR #1005)

Search input

• Improved styles for disabled state (PR #981)

Side nav

• Updated interface of link list items as per latest designs (PR #1023)
• Removed exports of primitive components and modular storybook example (PR #1023)

Summary list

• Fixed a text colour bug when this component was placed inside dark palette. This was done by adding an explicit colour to SummaryListItemTerm and SummaryListItemDescription. (PR #1022)

Table

• Add support for id prop (PR #1010)
• Add support for table-layout prop (PR #1015)
• Add support for aria-labelledby and aria-describedby props (PR #1007)
• Widen types for column widths (PR #1015)
• TableCell supports usage as a row header (th) (PR #1017)

Text input

• Improved styles for disabled state (PR #981)

Textarea

• Improved styles for disabled state (PR #981)

---

Released packages

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

Updates

Avatar

• Fixed flex shrinking bug (PR #972)

Button

• Replaced transparent background in the secondary variant from transparent with body background colour. (PR #974)

File Input

• Updated file selector button size from sm to md (PR #984)

Released packages

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

New components

Avatar

User avatars help to quickly identify people in the system.

<Avatar name="William Mead" />

Updates

Autocomplete

• Fixed issue where hint and error text had incorrect max-width

Card

• Reverted back to pseudo-content trick for CardLink

Comboxbox

• Fixed issue where hint and error text had incorrect max-width

Core

• Added new modalPanel max-width token

Date Picker

• Fixed bug where the text input component was not being updated correctly when the value prop changed

Icon

• Added PlusIcon

Pagination

• Improved design for smaller devices

Select

• Added support for sm size

Released packages

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

New components

File input

A simple input for selecting files in a form. The FileInput component is a wrapper around the native <input type="file" /> element. Use when you require multiple files in a form, which must be associated as seperate fields. If you only require a single file, use the FileUpload component instead.

<FileInput label="Drivers license" />

Updates

Card

• Prevent link event from firing twice

Combobox

• Fixed bug in ComboboxAsync where options would be loaded on initial render incorrectly.
• Fixed a bug where the input element became non-interactive after blur

Icon

• Added new icons: ChartBarIcon, ChartLineIcon, DeleteIcon, DownloadIcon, EditIcon, FilterIcon, HelpIcon and PrintIcon

Tags

• Add support for removing tags

Text input

• Apply body background to all inputs

Released packages

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

The Agriculture Design System (AgDS), which helps designers and developers build the Export Service efficiently and consistently, is now in Beta.

AgDS is based on the former Australian Government Design System GOLD which was created to meet the Digital Service Standard. The aesthetic and design principles of GOLD have been extended into AgDS to meet the needs of the Export Service.

The design system incorporates the highest usability and accessibility standards and helps deliver a consistent experience for all users. It includes:

• a React/Typescript component library containing over 60 components
• a Figma library of components and tokens
• documentation and examples of how to use the design system
• templates for common page compositions
• a shared language between design, development and content practitioners

The move from Alpha to Beta demonstrates our confidence in the foundations, design language, component architecture, accessibility and usability of AgDS. Part of the Beta release includes a redesigned Components section and new Tokens section, as well as moving our documentation website to design-system.agriculture.gov.au.

The AgDS team is led by Adrian Yee and consists of designers Adham Dannaway and Paul Maher, as well as developers Jordan Overbye and Nathan Simpson from Thinkmill.

Accessibility

Accessibility is a huge focus area for AgDS. Independent third-party specialists Intopia recently reviewed AgDS against the Web Content Accessibility Guidelines (WCAG). This review also included usability testing sessions with users who heavily rely on assistive technologies. We are proud to have achieved AA-level compliance against the WCAG v2.1 standard from Intopia who now refer to AgDS as an exemplary implementation of an accessible React based design system.

What’s new for designers

The AgDS Figma file has been refreshed and includes a component gallery where common component variants can be copied. The gallery also includes general guidance for the components for quick reference.

What’s new for developers

The React component library has been merged into a single NPM package, which simplifies dependency management for consumers.

Current users of AgDS will need to follow this two step guide in order to upgrade from our previous multi-package distribution method.

Step 1: Update package.json

In your package.json file, remove all current dependencies to @ag.ds-next/* (e.g. @ag.ds-next/box) and replace with a single dependency @ag.ds-next/react at version 1.0.0.

Once you have done that, you will need install your dependencies (e.g. run yarn or npm install).

Step 2: Update imports

All imports to @ag.ds-next/* will also need to be updated. Using a code editors find and replace with RegEx feature makes this a fairly straightforward task.

Find:    '@ag.ds-next/(.*)'
Replace: '@ag.ds-next/react/$1'

This will results in changes that look similar to the following:

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

Released packages

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

January 4th, 2023

⚠️ Note: All releases under the @ag.ds-next package scope should be considered alpha pre-releases. Expect breaking changes. Once we are happy with the state of the core packages we will migrate all packages to @ag.ds.

New Packages

@ag.ds-next/[email protected]
@ag.ds-next/[email protected]

@ag.ds-next/[email protected]

Global Alerts show pressing and high-signal messages, such as system alerts.

You can learn more about GlobalAlert in the component docs.

<GlobalAlert title="Alert title">
	<Text as="p">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce massa nibh,
		aliquam vel dolor non, gravida porttitor nulla. Pellentesque cursus orci
		vulputate nibh sagittis blandit.
	</Text>
</GlobalAlert>

@ag.ds-next/[email protected]

Search input enables users to enter a word or phrase to find relevant content.

You can learn more about SearchInput in the component docs.

<SearchInput label="Search" />

Updates

@ag.ds-next/[email protected]

• Removed the neutral tone as well as the tone prop from IndicatorDot. It now only uses the blue 'action' colour.

@ag.ds-next/[email protected]

• Split up Combobox and ComboboxAsync into separate components
• Improved styles to combobox buttons (dropdown indicator and clear button)
• Added debouncing to prevent unnecessary network requests
• Removed valid prop
• Added new prop hideOptionalLabel. If true, "(optional)" will never be appended to the label even when required is false.
• Adjusted form field max widths

@ag.ds-next/[email protected]

• Added new size xl (2.5rem/40px)
• Enable dynamic weights to show thicker strokes at small sizes
• Added support for responsive sizes
• Removed ProgressDoneIcon
• Added ProgressBlockedIcon
• Updated ProgressTodoIcon

@ag.ds-next/[email protected]

• Removed valid prop.
• Added debouncing to prevent unnecessary network requests.

@ag.ds-next/[email protected]

• Enable responsive border props

@ag.ds-next/[email protected]

• Added collapsible behaviour to mobile version

@ag.ds-next/[email protected]

• Removed valid prop
• Added aria-invalid and aria-describedby to Checkbox and Radio
• Added new prop hideOptionalLabel. If true, "(optional)" will never be appended to the label even when required is false.

@ag.ds-next/[email protected]

• Removed valid prop
• Added year select to calendar widget
• Disabled browser autocomplete from text input
• Improve accessibility by increasing font weight of selected dates
• Adjusted form field max widths

@ag.ds-next/[email protected]

• Removed valid prop
• Added new prop hideOptionalLabel. If true, "(optional)" will never be appended to the label even when required is false.
• Adjusted form field max widths

@ag.ds-next/[email protected]

• Removed valid prop
• Show multiple errors per rejected file
• Updated visual styles for default and active drag state
• Added new prop hideOptionalLabel. If true, "(optional)" will never be appended to the label even when required is false.

@ag.ds-next/[email protected]

• Visual improvements featuring a new timeline design
• Added new status option blocked
• Updated status labels with new language

@ag.ds-next/[email protected]

• Removed valid prop
• Adjusted form field max width and removed xs and sm options from the maxWidth prop
• Added new prop hideOptionalLabel. If true, "(optional)" will never be appended to the label even when required is false.

@ag.ds-next/[email protected]

• Added new status options blocked and doneRecently
• Added title and step count above TaskList
• Updated status labels with new language
• UI refresh

@ag.ds-next/[email protected]

• Removed valid prop
• Adjusted form field max widths
• Added new prop hideOptionalLabel. If true, "(optional)" will never be appended to the label even when required is false.

@ag.ds-next/[email protected]

• Removed valid prop
• Adjusted form field max widths and removed xs and sm options from the maxWidth prop
• Added new prop hideOptionalLabel. If true, "(optional)" will never be appended to the label even when required is false.

@ag.ds-next/[email protected]

• Updated card link data attribute value

@ag.ds-next/[email protected]

• Added support for tabIndex in BaseContent

@ag.ds-next/[email protected]

• Adjusted form field max widths

@ag.ds-next/[email protected]

• Adjust responsive behaviour to better support SearchBox

@ag.ds-next/[email protected]

• Added tab index to navigation container to improve accessibility when used with skip links

@ag.ds-next/[email protected]

• Added empty styles so the container will be hidden if no content has been supplied
• Increase spacing before block elements

@ag.ds-next/[email protected]

• Removed browser autocomplete from the search box input component

@ag.ds-next/[email protected]

• Prevented flex shrinking of SummaryListItemTerm to ensure the width of this element is always the same

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 (#818) for this release.

Released packages

"@ag.ds-next/accordion": "12.0.0",
"@ag.ds-next/ag-branding": "8.0.1",
"@ag.ds-next/autocomplete": "2.0.0",
"@ag.ds-next/badge": "4.0.0",
"@ag.ds-next/box": "8.1.0",
"@ag.ds-next/breadcrumbs": "16.0.0",
"@ag.ds-next/button": "13.0.0",
"@ag.ds-next/call-to-action": "12.0.0",
"@ag.ds-next/callout": "9.0.0",
"@ag.ds-next/card": "9.0.0",
"@ag.ds-next/columns": "10.0.0",
"@ag.ds-next/combobox": "2.0.0",
"@ag.ds-next/content": "11.0.0",
"@ag.ds-next/control-input": "13.0.0",
"@ag.ds-next/core": "4.1.1",
"@ag.ds-next/date-picker": "10.0.0",
"@ag.ds-next/details": "2.0.0",
"@ag.ds-next/direction-link": "12.0.0",
"@ag.ds-next/field": "12.0.0",
"@ag.ds-next/fieldset": "9.0.0",
"@ag.ds-next/file-upload": "8.0.0",
"@ag.ds-next/footer": "11.0.0",
"@ag.ds-next/form-stack": "8.0.0",
"@ag.ds-next/global-alert": "1.0.0",
"@ag.ds-next/header": "13.0.0",
"@ag.ds-next/heading": "11.0.0",
"@ag.ds-next/hero-banner": "8.0.0",
"@ag.ds-next/icon": "13.0.0",
"@ag.ds-next/inpage-nav": "11.0.0",
"@ag.ds-next/link-list": "14.0.0",
"@ag.ds-next/loading": "8.0.0",
"@ag.ds-next/main-nav": "16.0.0",
"@ag.ds-next/modal": "10.0.0",
"@ag.ds-next/page-alert": "9.0.0",
"@ag.ds-next/pagination": "5.0.0",
"@ag.ds-next/progress-indicator": "14.0.0",
"@ag.ds-next/prose": "3.0.0",
"@ag.ds-next/search-box": "14.0.0",
"@ag.ds-next/search-input": "1.0.0",
"@ag.ds-next/select": "13.0.0",
"@ag.ds-next/side-nav": "15.0.0",
"@ag.ds-next/skeleton": "4.0.0",
"@ag.ds-next/skip-link": "11.0.0",
"@ag.ds-next/sub-nav": "5.0.0",
"@ag.ds-next/summary-list": "2.0.0",
"@ag.ds-next/switch": "5.0.0",
"@ag.ds-next/table": "8.0.0",
"@ag.ds-next/tags": "11.0.0",
"@ag.ds-next/task-list": "12.0.0",
"@ag.ds-next/text": "12.0.0",
"@ag.ds-next/text-input": "13.0.0",
"@ag.ds-next/text-link": "8.0.0",
"@ag.ds-next/textarea": "13.0.0"

October 24th, 2022

⚠️ Note: All releases under the @ag.ds-next package scope should be considered alpha pre-releases. Expect breaking changes. Once we are happy with the state of the core packages we will migrate all packages to @ag.ds.

New Packages

"@ag.ds-next/autocomplete": "1.0.0",
"@ag.ds-next/combobox": "1.0.0",
"@ag.ds-next/details": "1.0.0",
"@ag.ds-next/summary-list": "1.0.0"

Updates

@ag.ds-next/[email protected]

• Removed loading and loadingLabel prop from ButtonLink. If you are using these props, you should be using Button instead.
• Improved accessibility by adding an always-present aria-live container for LoadingDots
• Adjusted text variant styles

@ag.ds-next/[email protected]

• Upgraded @reach/auto-id
• Added new hook useBoxPalette which returns the current palette for a specific DOM element
• Adjusted height and line-height of buttons and text inputs to align better to an 8px baseline grid
• Change input height from em to rem

@ag.ds-next/[email protected]

• Added new components: ThumbsUpIcon and ThumbsDownIcon
• Exported createIcon function
• Fixed bug with focusable prop
• Added support for aria-label and aria-hidden props

@ag.ds-next/[email protected]

• Replaced aria-label prop with label
• Improved HTML by rendering spans instead of divs
• Improved accessibility in windows high contrast mode

@ag.ds-next/[email protected]

• Fixed focus trapping accessibilty bug in VoiceOver iOS
• Improved handling of pressing Escape to close the component

@ag.ds-next/[email protected]

• Improved accessibility of ExternalLinkCallout by updating screen reader text

@ag.ds-next/[email protected]

• Improved accessibility by updating logo aria label
• Optimised logo SVG for smaller bundle @

@ag.ds-next/[email protected]

• Improved accessibility in windows high contrast mode
• Updated colours in neutral variants

@ag.ds-next/[email protected]

• Added table, grid and inline-grid display types
• Added new prop highContrastOutline
• Added gridColumnSpan, gridColumnStart and gridColumnEnd props

@ag.ds-next/[email protected]

• Improved accessibility in windows high contrast mode
• Improved accessibility when using CardLink

@ag.ds-next/[email protected]

• Fixed bug in BaseContent component where the id prop was not being rendered

@ag.ds-next/[email protected]

• Improved accessibility in windows high contrast mode
• Improved accessibilty by fixing minor invalid HTML
• Improve accessibilty by connecting the hint and message via aria-describedby.
• Added autoFocus prop
• Prevented the checkbox and radio indicator for shrinking
• Updated alignment of labels to ensure multi-line labels are aligned vertically

@ag.ds-next/[email protected]

• Improve accessibility by updating the aria label for each calendar day button
• Upgraded react-day-picker dependency
• Improved handling of pressing Escape to close the component
• DatePicker: Added new prop inputRef
• DateRangePicker: Added new props fromInputRef and toInputRef
• Improved accessibility in windows high contrast mode

@ag.ds-next/[email protected]

• Add aria-label to error icons
• Improved screen reader experience when using secondaryLabel
• Improved accessibility by ensuring aria-describedby is only rendered when there is a value

@ag.ds-next/[email protected]

• Improved accessibilty by connecting the hint via aria-describedby.

@ag.ds-next/[email protected]

• Accessibility improvements

  • Added aria-label to icons
  • Removed invalid elements from list
  • Loading indicators do not have a text alternative
  • Added accessible label to "Remove file" button
  • Update internal usage of LoadingDots

• Merge consumer ref with dropzone ref before forwarding to input and use visuallyHiddenStyles instead of display: none

@ag.ds-next/[email protected]

• Exported FooterProps type

@ag.ds-next/[email protected]

• Improved accessibility in examples by setting example image to be decorative

@ag.ds-next/[email protected]

• Close the modal when the user presses the escape key
• Added vertical scrolling to the modal to prevent content from being cut off
• Improved accessibility by updating aria labels for the open and close buttons
• Removed aria-label prop as this is now baked into the component
• Improved accessibility

@ag.ds-next/[email protected]

• Improved accessibility by adding aria-label to icons
• Improved accessibility in windows high contrast mode

@ag.ds-next/[email protected]

• Improved accessibilty by rading out 'current page' in PaginationItemPageButton
• Improved accessibilty by rading out 'ellipsis' in PaginationItemSeperator

@ag.ds-next/[email protected]

• Improved HTML for larger screen sizes

@ag.ds-next/[email protected]

• Update visual style
• Added accessible name to SearchBoxButton

@ag.ds-next/[email protected]

• Added autoFocus prop

@ag.ds-next/[email protected]

• Improved HTML for larger screen sizes
• Removed aria-haspopup="menu" to convert the ARIA Menu Button to a simple disclosure widget
• Removed role="menu" from the <ul> as this was only partially implemented
• Fixed bug where titleLink would not render an anchor tag
• Fixed minor HTML validation issue
• Removed aria-label prop

@ag.ds-next/[email protected]

• Improved accessibility in windows high contrast mode

@ag.ds-next/[email protected]

• Improved accessibility by adding role="switch" to main input

@ag.ds-next/[email protected]

• Added ref and tabIndex props
• Update usage of CSS display properties

@ag.ds-next/[email protected]

• Improved accessibilty by fixing minor invalid HTML
• Fixed small typo

@ag.ds-next/[email protected]

• Added autoFocus and autoComplete props
• Set a default value of the type prop to text

@ag.ds-next/[email protected]

• Added autoFocus prop

Released packages

"@ag.ds-next/a11y": "1.2.2",
"@ag.ds-next/accordion": "11.0.0",
"@ag.ds-next/ag-branding": "8.0.0",
"@ag.ds-next/autocomplete": "1.0.0",
"@ag.ds-next/badge": "3.0.0",
"@ag.ds-next/box": "8.0.0",
"@ag.ds-next/breadcrumbs": "15.0.0",
"@ag.ds-next/button": "12.0.0",
"@ag.ds-next/call-to-action": "11.0.0",
"@ag.ds-next/callout": "8.0.0",
"@ag.ds-next/card": "8.0.0",
"@ag.ds-next/columns": "9.0.0",
"@ag.ds-next/combobox": "1.0.0",
"@ag.ds-next/content": "10.0.0",
"@ag.ds-next/control-input": "12.0.0",
"@ag.ds-next/core": "4.1.0",
"@ag.ds-next/date-picker": "9.0.0",
"@ag.ds-next/details": "1.0.0",
"@ag.ds-next/direction-link": "11.0.0",
"@ag.ds-next/field": "11.0.0",
"@ag.ds-next/fieldset": "8.0.0",
"@ag.ds-next/file-upload": "7.0.0",
"@ag.ds-next/footer": "10.0.0",
"@ag.ds-next/form-stack": "7.0.0",
"@ag.ds-next/header": "12.0.0",
"@ag.ds-next/heading": "10.0.0",
"@ag.ds-next/hero-banner": "7.0.0",
"@ag.ds-next/icon": "12.0.0",
"@ag.ds-next/inpage-nav": "10.0.0",
"@ag.ds-next/keyword-list": "10.0.0",
"@ag.ds-next/link-list": "13.0.0",
"@ag.ds-next/loading": "7.0.0",
"@ag.ds-next/main-nav": "15.0.0",
"@ag.ds-next/modal": "9.0.0",
"@ag.ds-next/page-alert": "8.0.0",
"@ag.ds-next/pagination": "4.0.0",
"@ag.ds-next/progress-indicator": "13.0.0",
"@ag.ds-next/prose": "2.0.0",
"@ag.ds-next/search-box": "13.0.0",
"@ag.ds-next/select": "12.0.0",
"@ag.ds-next/side-nav": "14.0.0",
"@ag.ds-next/skeleton": "3.0.0",
"@ag.ds-next/skip-link": "10.0.0",
"@ag.ds-next/sub-nav": "4.0.0",
"@ag.ds-next/summary-list": "1.0.0",
"@ag.ds-next/switch": "4.0.0",
"@ag.ds-next/table": "7.0.0",
"@ag.ds-next/tags": "10.0.0",
"@ag.ds-next/task-list": "11.0.0",
"@ag.ds-next/text": "11.0.0",
"@ag.ds-next/text-input": "12.0.0",
"@ag.ds-next/text-link": "7.0.0",
"@ag.ds-next/textarea": "12.0.0"

August 26th, 2022

⚠️ Note: All releases under the @ag.ds-next package scope should be considered alpha pre-releases. Expect breaking changes. Once we are happy with the state of the core packages we will migrate all packages to @ag.ds.

In this release, we've updated the props in the Header, Footer and MainNav. Create the new Prose component. Added Text variant for Button.

New Packages

"@ag.ds-next/prose": "1.0.0",

Breaking Changes

• @ag.ds-next/ag-branding new token schema. Please see notes below.
• @ag.ds-next/body is deprecated. Please use the new Prose component from @ag.ds-next/prose
• @ag.ds-next/core: New token schema. Please see notes below.
• @ag.ds-next/footer: New props API and added support for new tokens. Please see notes below.
• @ag.ds-next/header: New props API and added support for new tokens. Please see notes below.
• @ag.ds-next/main-nav: Remove variant prop. Rename links to items. Please see notes below.
• @ag.ds-next/text-link: Remove TextButton component, use <Button variant="text"> instead.

Updates

@ag.ds-next/[email protected]

We've renamed our Body component to Prose to be more unique.

- import { Body } from '@ag.ds-next/body'
+ import { Prose } from '@ag.ds-next/prose'

@ag.ds-next/[email protected]

We've improved our brand's background and system colours for the dark palette. The token schema matches the same shape as in @ag.ds-next/core (see below).

@ag.ds-next/[email protected]

We've significantly improved the colour token schema by giving all system colours a light and dark version.

Going forward, globalPalette should be avoided. Use boxPalette where possible to apply colour tokens.

- globalPalette.success
- globalPalette.successMuted
- globalPalette.error
- globalPalette.errorMuted
- globalPalette.info
- globalPalette.infoMuted
- globalPalette.warning
- globalPalette.warningMuted
- globalPalette.accent
+ globalPalette.lightSuccess
+ globalPalette.lightSuccessMuted
+ globalPalette.lightError
+ globalPalette.lightErrorMuted
+ globalPalette.lightInfo
+ globalPalette.lightInfoMuted
+ globalPalette.lightWarning
+ globalPalette.lightWarningMuted
+ globalPalette.lightAccent
+ globalPalette.darkSuccess
+ globalPalette.darkSuccessMuted
+ globalPalette.darkError
+ globalPalette.darkErrorMuted
+ globalPalette.darkInfo
+ globalPalette.darkInfoMuted
+ globalPalette.darkWarning
+ globalPalette.darkWarningMuted
+ globalPalette.darkAccent
+ boxPalette.systemSuccess
+ boxPalette.systemSuccessMuted
+ boxPalette.systemError
+ boxPalette.systemErrorMuted
+ boxPalette.systemInfo
+ boxPalette.systemInfoMuted
+ boxPalette.systemWarning
+ boxPalette.systemWarningMuted
+ boxPalette.accent

@ag.ds-next/[email protected]

• Replaced variant prop with background. This component now respects parent colour palette. We also make use of the new accent token in Core.
• Update to support new dark tokens. Please ensure you are using the latest version of the @ag.ds-next/ag-branding package.

In this new version of Footer, we have upgraded the API so that the component is more consistent with the rest of the system. We’ve also included some important fixes to ensure colours are treated correctly with our newly updated Design Tokens.

If you are using the @ag.common/footer component:

You can wait for the next version of that component, which will be a straight-forward upgrade process.

If you’re using @ag.ds-next/main-nav directly in your app:

We recommend using the @ag.common/footer component if your app is part of the external-facing Export Service experience.

Otherwise you must follow these steps when upgrading:

1. Install latest version of @ag.ds-next/[email protected], @ag.ds-next/[email protected] and @ag.ds-next/[email protected]
2. Remove variant prop
3. Add background="bodyAlt" prop
4. Wrap Footer in a <Box palette=‘dark’> to apply dark colours.

Old

// Old code
<>
	<Footer variant="agriculture">...</Footer>
</>

New

// New code
<Box palette="dark">
	<Footer background="bodyAlt">...</Footer>
</Box>

If you have any questions, please reach out to Jordan Overbye or Nathan Simpson in the Design System team.

@ag.ds-next/[email protected]

• Add background prop and support for parent palettes, remove variant prop.
• Add small size variant
• Update to support new dark tokens. Please ensure you are using the latest version of the @ag.ds-next/ag-branding package.

In this new version of Header, we have upgraded the API so that the component is more consistent with the rest of the system. We’ve also included a small size, and some important fixes to ensure colours are treated correctly with our newly updated Design Tokens.

If you are using the @ag.common/header component:

You can wait for the next version of that component, which will be a straight-forward upgrade process.

If you’re using @ag.ds-next/header directly in your app:

We recommend using the @ag.common/header component if your app is part of the external-facing Export Service experience.

Otherwise you must follow these steps when upgrading:

1. Install latest version of @ag.ds-next/[email protected], @ag.ds-next/[email protected] and @ag.ds-next/[email protected]
2. Remove variant prop
3. Add background="bodyAlt" prop
4. Wrap Header and MainNav in a Box with palette=‘dark’

Old

// Old code
<>
	<Header variant="agriculture" />
	<MainNav variant="agriculture" />
</>

New

// New code
<Box palette="dark">
  <Header background="bodyAlt" {...} />
  <MainNav {...} />
</Box>

If you have any questions, please reach out to Jordan Overbye or Nathan Simpson in the Design System team.

@ag.ds-next/[email protected]

• Renamed links prop to items.
• Replaced rightContent prop with secondaryItems prop.
• Added new endElement prop to each item to support for adding icons, notification badges and other decorative elements.
• Add background prop and support for parent palettes, remove variant prop.
• Update references to colour tokens.
• Update to support new dark tokens. Please ensure you are using the latest version of the @ag.ds-next/ag-branding package.

In this new version of MainNav, we have upgraded the API so that the component is more consistent with the rest of the system. We’ve also included some important fixes to ensure colours are treated correctly with our newly updated Design Tokens.

If you are using the @ag.common/header component:

You can wait for the next version of that component, which will be a straight-forward upgrade process.

If you’re using @ag.ds-next/main-nav directly in your app:

We recommend using the @ag.common/header component if your app is part of the external-facing Export Service experience.

Otherwise you must follow these steps when upgrading:

1. Install latest version of @ag.ds-next/[email protected], @ag.ds-next/[email protected] and @ag.ds-next/[email protected]
2. Remove variant prop
3. Rename links prop to items
4. Wrap Header and MainNav in a Box with palette=‘dark’

Old

// Old code
<>
  <Header variant="agriculture" />
  <MainNav links={[ ... ]} rightContent={ ... } variant="agriculture"  />
</>

New

// New code
<Box palette="dark">
  <Header background="bodyAlt" {...} />
  <MainNav items={[ ... ]} secondaryItems={[ ... ]} />
</Box>

Take a look at Storybook and the Storybook code for more references.

If you have any questions, please reach out to Jordan Overbye or Nathan Simpson in the Design System team.

@ag.ds-next/[email protected]

Added mobile variant which shows a link to the immediate parent.

@ag.ds-next/[email protected]

We've added a new text variant to the Button component. It replaces the TextButton component which used to come from @ag.ds-next/text-link.

<Button variant="text">Edit</Button>

@ag.ds-next/[email protected]

Deleted TextButton component. Please use <Button variant="text" /> instead (see above).

@ag.ds-next/[email protected]

Added new endElement prop to each item to support for adding icons, notification badges and other decorative elements.

@ag.ds-next/[email protected]

Selected days in range mode now have more rounded borders

@ag.ds-next/[email protected]

If no colour prop is supplied, the svg colour will now defualt to currentColor.

And more...

• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Update references to colour tokens
• @ag.ds-next/[email protected]: Updated dependencies
• @ag.ds-next/[email protected]: Updated dependencies
• @ag.ds-next/[email protected]: Updated dependencies
• @ag.ds-next/[email protected]: Updated dependencies
• @ag.ds-next/[email protected]: Updated dependencies
• @ag.ds-next/[email protected]: Updated dependencies
• @ag.ds-next/[email protected]: Updated dependencies
• `@ag.ds-next/skeleton@...

July 27th, 2022

⚠️ Note: All releases under the @ag.ds-next package scope should be considered alpha pre-releases. Expect breaking changes. Once we are happy with the state of the core packages we will migrate all packages to @ag.ds.

In this release, we rethought our <Columns /> component, improved many of our components to handle colours more consistently, and also introduced @babel/runtime as a dependency for most packages.

New Packages

"@ag.ds-next/badge": "1.0.0",
"@ag.ds-next/skeleton": "1.0.0",

Breaking Changes

• @ag.ds-next/card: Removed CardList component, please use Columns instead.
• @ag.ds-next/hero-banner: Replaced variant prop with background
• @ag.ds-next/side-nav: Replaced variant prop with background
• @ag.ds-next/sub-nav: Replaced variant prop with background

Updates

@ag.ds-next/[email protected]

• Remove CardList component. please use Columns instead.
• Added support for css prop
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Using the new cols prop on the Columns, you can now specify the amount of columns you want in your grid, rather than being forced to use 12 columns everywhere. This largely removes the need to use the Column component, which greatly improves the API for achieving column layouts.
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Replaced variant prop with background. This component now respects parent colour palette.
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Replaced variant prop with background
• Improved overflow of mobile version
• Converted titleLink into an optional prop
• Removed unnecessary button role on collapsible button
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Replaced variant prop with background. This component now respects parent colour palette.
• Updated documentation
• Added @babel/runtime as a package dependency

@ag.ds-next/[email protected]

• Added background prop
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added support for columnGap and rowGap props
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added background prop
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Narrowed down prop types
• Upgraded react-day-picker dependency
• Added the ability to disable dates through new minDate and maxDate props
• Fixed bug where incorrect element was being focused when calendar first opened
• Fixed bug where users couldn't input a date using the text input after a value was set
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Adjusted font weight of FieldMessage
• Prevent flex shrinking of field message alert icon
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Refreshed UI for invalid files
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added WarningIcon and InfoIcon
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added background prop
• Improved overflow of mobile version
• Removed unnecessary button role on collapsible button
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation
• Narrowed down prop types

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation
• Narrowed down prop types

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation
• Narrowed down prop types

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation
• Narrowed down prop types

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• New error colour token
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Allow consumers to keep vertical rhythm on specific elements using bodyBlockClassname
• Added styles for tables
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added default type="button" to BaseButton
• Improved prop type definitions
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Narrowed down types for Checkbox and Radio
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Fixed bug in the Core component where if no theme was supplied, the default theme (GOLD) was not being applied
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Exported size map object for use in other packages
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Updated title in examples
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation
• Narrowed down types

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation
• Added comments to each prop to improve documentation

@ag.ds-next/[email protected]

• Added new verticalAlign prop to TableCell with a default value of top
• Added more options to the width prop in TableOption
• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

@ag.ds-next/[email protected]

• Added @babel/runtime as a package dependency
• Updated documentation

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 (#499) for this release.

Released packages

  "@ag.ds-next/a11y": "1.2.1",
  "@ag.ds-next/accordion": "9.0.0",
  "@ag.ds-next/ag-branding": "6.1.1",
  "@ag.ds-next/badge": "1.0.0",
  "@ag.ds-next/body": "8.0.0",
  "@ag.ds-next/box": "6.1.0",
  "@ag.ds-next/breadcrumbs": "13.0.0",
  "@ag.ds-next/button": "10.0.0",
  "@ag.ds-next/call-to-action": "9.0.0",
  "@ag.ds-next/callout": "6.0.0",
  "@ag.ds-next/card": "6.0.0",
  "@ag.ds-next/columns": "7.0.0",
  "@ag.ds-next/content": "8.0.0",
  "@ag.ds-next/control-input": "10.0.0",
  "@ag.ds-next/core": "3.0.1",
  "@ag.ds-next/date-picker": "7.0.0",
  "@ag.ds-next/direction-link": "9.0.0",
  "@ag.ds-next/field": "9.0.0",
  "@ag.ds-next/fieldset": "6.0.0",
  "@ag.ds-next/file-upload": "5.0.0",
  "@ag.ds-next/footer": "8.0.0",
  "@ag.ds-next/form-stack": "5.0.0",
  "@ag.ds-next/header": "10.0.0",
  "@ag.ds-next/heading": "8.0.0",
  "@ag.ds-next/hero-banner": "5.0.0",
  "@ag.ds-next/icon": "10.0.0",
  "@ag.ds-next/inpage-nav": "8.0.0",
  "@ag.ds-next/keyword-list": "8.0.0",
  "@ag.ds-next/link-list": "11.0.0",
  "@ag.ds-next/loading": "5.0.0",
  "@ag.ds-next/main-nav": "13.0.0",
  "@ag.ds-next/modal": "7.0.0",
  "@ag.ds-next/page-alert": "6.0.0",
  "@ag.ds-next/pagination": "2.0.0",
  "@ag.ds-next...

June 28th, 2022

⚠️ Note: All releases under the @ag.ds-next package scope should be considered alpha pre-releases. Expect breaking changes. Once we are happy with the state of the core packages we will migrate all packages to @ag.ds.

In this release, we introduce new branding for the Department of Agriculture, Fisheries and Forestry, create new Switch and Pagination components, and add various bug fixes and improvements.

New packages

"@ag.ds-next/pagination": "1.0.0",
"@ag.ds-next/sub-nav": "1.0.0",
"@ag.ds-next/switch": "1.0.0"

Breaking Changes

• @ag.ds-next/secondary-nav has been deprecated, use @ag.ds-next/sub-nav instead.

Updates

@ag.ds-next/[email protected]

• New Logo for Department of Agriculture, Fisheries and Forestry

@ag.ds-next/[email protected]

• Removed target="_blank" from all links as per accessibility recommendations.

@ag.ds-next/[email protected]

• Removed target="_blank" from all links as per accessibility recommendations.

@ag.ds-next/[email protected]

• Removed target="_blank" from all links as per accessibility recommendations.

@ag.ds-next/[email protected]

• Remove dot prefixes from file extensions
• Update file-level validation messages
• Improve documentation

@ag.ds-next/[email protected]

• Update examples with new branding

@ag.ds-next/[email protected]

• Explicitly import fragment

@ag.ds-next/[email protected]

• Updated documentation

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 (#466) for this release.

Released packages

"@ag.ds-next/accordion": "8.0.0",
"@ag.ds-next/ag-branding": "6.1.0",
"@ag.ds-next/breadcrumbs": "12.0.0",
"@ag.ds-next/button": "9.1.0",
"@ag.ds-next/call-to-action": "8.0.0",
"@ag.ds-next/date-picker": "6.0.0",
"@ag.ds-next/direction-link": "8.0.0",
"@ag.ds-next/file-upload": "4.0.0",
"@ag.ds-next/inpage-nav": "7.0.0",
"@ag.ds-next/keyword-list": "7.0.0",
"@ag.ds-next/link-list": "10.0.0",
"@ag.ds-next/main-nav": "12.0.0",
"@ag.ds-next/modal": "6.0.0",
"@ag.ds-next/pagination": "1.0.0",
"@ag.ds-next/progress-indicator": "10.0.0",
"@ag.ds-next/search-box": "10.0.0",
"@ag.ds-next/select": "9.0.1",
"@ag.ds-next/side-nav": "11.0.0",
"@ag.ds-next/skip-link": "7.0.0",
"@ag.ds-next/sub-nav": "1.0.0",
"@ag.ds-next/switch": "1.0.0",
"@ag.ds-next/tags": "7.0.0",
"@ag.ds-next/task-list": "8.0.0",
"@ag.ds-next/text-link": "4.0.0",