NYS Design System Release 1.15.0 “Nye”

“Nye” 🏔️

This is our 35^th release of the New York State Design System. Nye is the 45^th highest peak in New York, with an elevation of 3,895 ft (1,187 m)!

Learn more about Nye Mountain.

<nys-combobox> now available

The new <nys-combobox> combines a text box with a dropdown list, allowing users to either select a predefined option or type to select a value from the list.

Read the full combobox documentation.

<nys-combobox label="Choose a county" id='my-combobox'>
  <option value="albany">Albany</option>
  <option value="allegany">Allegany</option>
  <option value="bronx">Bronx</option>
  <option value="broome">Broome</option>
  ...rest of options...
</nys-combobox>

Emily Gorelik combo'd these boxes.

<nys-dropdownmenu> now available

The new <nys-dropdownmenu> is a highly rquested feature for the NYS Design System. Featuring a trigger element, and dropdown content you can either assign URL's to the dropdown items, or listen to their JavaScript events to fire off a script. Give it a try today in the <nys-globalheader>.

Read the full dropdownmenu documentation.

<nys-button id="my-trigger-id" label="Dropdown Menu"></nys-button>
<nys-dropdownmenu id="my-dropdownmenu" for="my-trigger-id">
  <nys-dropdownmenuitem label="Profile" href="/profile"></nys-dropdownmenuitem>
  <nys-dropdownmenuitem label="Repositories & Github Pages" href="/repos"></nys-dropdownmenuitem>
  <nys-dropdownmenuitem label="Organizations" href="/organizations"></nys-dropdownmenuitem>
  <nys-dropdownmenuitem label="Sign out" href="/logout"></nys-dropdownmenuitem>
</nys-dropdownmenu>

Robert Chen dropped this hot new component!

Custom language list in <nys-unavheader>

Different agencies solve the multi-lingual issue in different ways. Initially the unavheader component only supported specifically formatted URLs with subdomains for each language. The latest update to <nys-unavheader> allows you to customize the language list in the "translate" dropdown.

Read the full custom language endpoint documentation.

<nys-unavheader id="my-header" hideSearch></nys-unavheader>
<script>
  const header = document.querySelector('#my-header');
  header.languages = [
    { code: 'en', label: 'Custom' },
    { code: 'es', label: 'Language' , url: '?lang=es'},
    { code: 'fr', label: 'Support', url: '?lang=fr'},
    { code: 'fr', label: 'in v1.15.0', url: '?lang=js'},
  ];
</script>

Emily Gorelik customized the header!

Three new icons available:

Check out the new icons in <nys-icon>: filter_list, filter_alt, and sort are now available for use!

View the full icon list.

Robert Chen sorted this out!

Figma updates

Today we’re launching the official versions of our new combobox and dropdown components in our design library.

• Combobox - Give your users a type-ahead list of values to search and select
• Dropdown - A trigger with a dropdown attached to it
• Video Player now available in Figma

Kristin Sorrentino is creating important components!

Bug fixes

• Fix form field ability to be focused programatically
• Dispatch unique events for both <nys-checkbox> and <nys-radiobutton> “other” fields
• Fixed buttons that were taking up too much horizontal space in the DOM
• De-duplicate the build script to only build each component once
• Re-apply version numbers to build JS and CSS files
• Fixed Sass errors in utility scripts
• <nys-radiobutton> and <nys-checkbox> with no label no longer prints "false"
• Dispatch an input event when typing in <nys-datepicker>

Emily Gorelik, Robert Chen, and Eric Steinborn fix broken things.

🚨 Breaking changes

• none

⚠️ Known issues

• <nys-dropdownmenu> in v1.15.0 has z-index issues. They have been resolved in a hotfix, but will not be released until next release.

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.15.0 →