NYS Design System Release 1.11.0 “Gothics”

Why “Gothics?”

When we name our releases, we pick from a list of Adirondack high peaks. This week's release is named Gothics. We wanted to take advantage of spooky season and find an appropriate name! BOO! 👻

Learn more about Gothics mountain.

<nys-option> deprecated

<nys-select> has been updated to use “native guts.” If you are running v1.11.0 or higher, you should use native <option> and <optgroup> tags instead of <nys-option>. Check it out below and on the <nys-select> documentation page.

<nys-select label="Which New York State service are you contacting us about?" description="This is for demo purposes and the list might not be exhaustive.">
  <optgroup label="Transportation Services">
    <option value="mta">MTA / Public Transit</option>
    <option value="dmv">Department of Motor Vehicles (DMV)</option>
    <option value="highway">Highway Maintenance</option>
  </optgroup>
  <optgroup label="Health & Human Services">
    <option value="medicaid">Medicaid / Health Insurance</option>
    <option value="mental-health">Mental Health Support</option>
    <option value="child-family">Child and Family Services</option>
  </optgroup>
  <optgroup label="Public Safety">
    <option value="state-police">State Police</option>
    <option value="emergency-management">Emergency Management</option>
    <option value="fire-safety">Fire Safety</option>
  </optgroup>
  <optgroup label="Environment & Energy">
    <option value="environmental-conservation">Environmental Conservation</option>
    <option value="clean-energy">Clean Energy Programs</option>
    <option value="waste-management">Waste Management</option>
  </optgroup>
</nys-select>

Emily Gorelik selected this ticket to work on.

nys-icon size ramp change

<nys-icon> sizes synced between design and code - Read the icon size documentation. This release includes major changes to the icon size system to align with new design tokens and improve consistency between Figma and code.

Relative size updates:

• Added: 5xl
• Removed: 2xs
• md is now the default size (previously sm)
• The size ramp has been shifted up, so if you have been using relative sizes, your icons may be smaller

Literal size updates:

• Added: 14, 18, 20, 40, 50
• Removed: 48, 64

If you reference icon sizes directly in code, Figma, or documentation, please review and update your usage accordingly.
See the updated size documentation →

Robert Chen, Kristin Sorrentino, and Leo Vogel ramped this up!

Other notable code changes

• Keyboard controls work with buttons again - #935.
• New elevation design tokens - Check out the elevation tokens.
• Better accessibility in <nys-globalfooter> - The agencyname value now prints as an <h2>.

Robert Chen and Emily Gorelik, Thank you.

Figma Screen Template changes

Added option to add modal and ability to configure screen size from top of right sidebar before detaching. Also revised layer names for better code generation by AI from Figma Screens.

Other notable Figma changes

• Text input and text area components now have a "readonly" property.
• Fixed prototyping issues in nys-unavheader and nys-unavfooter.
• Size naming in nys-icon have been resolved.

Leo Vogel and Kristin Sorrentino made these changes.

Bug fixes

• <nys-select> now defaults to full width instead of md
• <nys-select> font is now properly Proxima Nova
• <nys-globalfooter> now uses native <nys-divider>

🚨 Breaking changes

• <nys-icon> size scale updated

If you have used or referenced icon sizes directly in code, Figma, or documentation, please review and update your usage accordingly.
See the updated size documentation →

⚠️ Known issues

• None

If you notice any issues, please add them to our GitHub Issue Tracker

That’s it!

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

See the full developer release notes for v.1.11.0 →