NYS Design System Release 1.21.0 “Colden”

“Colden” 🏔️

The winning vote during Office Hours was for naming this release “Colden” after the 11^th highest peak in New York: Mount Colden. The Mountain has an elevation of 4,714 ft (1,437 m). That is as tall as 28 Niagara Falls (51 m Horseshoe drop)!

Learn more about Mount Colden

Grid System Overhaul

The grid system now properly aligns the inner content of <nys-unavheader>, <nys-globalheader>, <nys-breadcrumbs>, <nys-globalfooter>, and <nys-unavfooter> with the grid containers and rows. If you're on an older implementation, here's what to update:

• Every child of a nys-grid-container (or nys-grid-container-[suffix]) needs the class nys-grid-row.
• Double-check any extra padding or margin you'd added to work around the old grid. Some of it will need to be removed or adjusted now that the containers align correctly.

<div class="nys-grid-container">
  <div class="nys-grid-row">
    <div class="nys-grid-col-8">Main content</div>
    <div class="nys-grid-col-4">Sidebar</div>
  </div>
</div>

Read more on the Grid System usage

• New style override variable, nys-max-width--content, lets you control the overall inner max-width of headers, footers, breadcrumbs, and the grid system.

Read more on the --nys-max-width--content style override

<nys-badge> updates!

The <nys-badge> component has been updated to better match our design standards, with a few breaking changes to the intent names. The legacy "error" intent is deprecated in favor of "danger", and "neutral" is now "base" (the new default). There are also three new props: strong, prefixIcon, suffixIcon, and srText.

The default intent is base.

1. Deprecated: intent="neutral" is now intent="base"
2. Depreciated: intent="error" is now intent="danger"
3. New intent="base"
4. New intent="emergency"

• Deprecated: variant="strong" is now the boolean strong attribute (e.g. <nys-badge strong>).

Read the <nys-badge> documentation

<nys-badge label="Neutral" prefixIcon></nys-badge>
<nys-badge label="Info" intent="info" prefixIcon></nys-badge>
<nys-badge label="Warning" intent="warning" prefixIcon></nys-badge>
<nys-badge label="Success" intent="success" prefixIcon></nys-badge>
<nys-badge label="Emergency" intent="emergency" prefixIcon></nys-badge>

Bug fixes

• MCP Utility classes were inventing their own classes that didnt exist. This was fixed
• Fix duplicate value on radio buttons on form submission

🚨 Breaking changes

• The nys-grid system was revamped to better align content and provide an overridable max-width value --nys-max-width--content. Read the full release notes for grid migration instructions. You can report any issues in our GitHub Issue Tracker.
• A couple of nys-badge intents have changed. Read the full release notes for badge migration instructions

⚠️ Known issues

• nys-table sorting currently only works on strings, it will not yet properly sort by numbers. See #1873: BUG: nys-table header not sorting properly
• nys-globalfooter does not allow you to dynamically insert menu items currently. See: Teams bug report
• nys-combobox doesn't focus on component for invalid submission See: #1596
• If you notice any issues, please add them to our GitHub Issue Tracker

For full component updates, bug fixes, and the detailed changelog:

See the full developer release notes for v.1.21.0 →