NYS Design System Release 1.12.0 “Skylight”

This release completely revamped the tooltip component to be more accessible and easier to use. The old tooltip wrapper has been removed from the package. We also introduced new responsive variants for our popular utility classes.

Eric Steinborn
2 min read time

Why “Skylight?” 🏔️

When we name our releases, we pick from a list of Adirondack high peaks. For this release, we held a vote in our teams channel and Office Hours. After a total of 34 responses, our winner is Skylight with 17 votes! Skylight is the fourth-highest peak in New York, with an elevation of 4,924 feet (1,501 m)!

Learn more about Mount Skylight.

Hello new tooltip!

We realized soon after releasing the <nys-tooltip> component that is was too limited in scope. It was only able to be wrapped around buttons and icons. So we took a look at other design systems and decided to implement tooltip as a stand-alone component. Using a for attribute to target an id will display tooltips on the following elements:

  • <nys-button>
  • <nys-icon>
  • <nys-textinput> (appears as a hint icon)
  • <nys-textarea> (appears as a hint icon)
  • <nys-select> (appears as a hint icon)
  • <nys-checkboxgroup> (appears as a hint icon)
  • <nys-checkbox> (appears as a hint icon)
  • <nys-radiogroup> (appears as a hint icon)
  • <nys-fileinput> (appears as a hint icon)

Tooltip demo

Copy Code
<nys-tooltip for="my-textinput" text="I am a tooltip."></nys-tooltip>
<nys-textinput id="my-textinput" name='fullName' label="Full name" description="Enter your full legal name" width="md"></nys-textinput>

Robert Chen was tipped off about this change.

New responsive utility classes

We have added new responsive variants for our popular utility classes. You can now apply certain utility classes at specific breakpoints as written below:

1
2
3
4
5
6
7
8
9
10
11
12
12 columns at mobile size
6 columns at tablet size
4 columns at desktop size
Copy Code
<div class="nys-grid-row">
  <div class="nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">12 columns at mobile size.</div>
  <div class="nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">6 columns at tablet size.</div>
  <div class="nys-tablet:nys-grid-col-6 nys-desktop:nys-grid-col-4">4 columns at desktop size.</div>
</div>

You can read the full documentation for the new responsive utility classes on our responsive utility documentation page.

Eric Steinborn was responsible for these.

Figma updates

  • Table - The table component is ready to use in your Figma designs!
  • Datepicker - The datepicker component is ready to use in your Figma designs, too!

Leo Vogel and Kristin Sorrentino rose to the challenge!

Updates to Custom Element Manifest (CEM)

  • Added missing events to several components including <nys-textinput>, <nys-textarea>, and <nys-select>.
  • Improved descriptions and typings for various properties and methods across multiple components.
  • VSCode intellisense now properly reports back options for properties like size in <nys-icon> and width in <nys-button>.

Emily Gorelik insisted on improving intellisense.

🚨 Breaking changes

  • <nys-tooltip> is now a standalone component. The old tooltip wrapper has been removed from the package. If you are using it, please update your code to use the new standalone tooltip component.

⚠️ 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.12.0 →

  • release
  • custom element manifest
  • figma

Edit this page on GitHub (Permissions required)

Last updated: December 11, 2025