NYS Design System Release 1.11.3

Community Figma file now publicly available to non-NYS employees

The Figma Library for the New York State Design System is now available in the Figma Community for non-NYS Employees. If you are an NYS Employee, contractor, or vendor of NYS please use the actual Figma library.

The Community library contains all of the components in the system, the project template, and you can even configure a custom theme so local governments within New York State can adopt the design system. Use the NYS Design System Figma file today.

Leo Vogel and Kristin Sorrentino published the Figma file.

Sass under the hood

Our initial setup for the NYS Design System included raw CSS file imports through JavaScript. We have run out of runway with vanilla CSS and have made the conversion to Sass for all style files. Sass gives us more flexibility in generating CSS programatically. All components have been converted to use Sass, and an added benefit, the file size for the package was reduced by 40KB just by including minified CSS instead of expanded. Stay tuned for an extensive utility class expansion coming soon!

Eric Steinborn ended up getting real sassy.

VSCode autocomplete support

To add NYS Design System vscode autocompletion to your editor:

Copy the .vscode/ folder into the root of your project. You can find it in /node_modules/@nysds/components/.vscode

Edit the following file (create it if it doesn't exist)

./vscode/settings.json

Add the following lines and save the file:

"html.customData": [".vscode/vscode.html-custom-data.json"],
"css.customData": [".vscode/vscode.css-custom-data.json"]

If you have existing settings, add the custom data in addition to the files already listed.

Notable bug fixes

• Fix: Pagination edge case bug by @emilygorelik
• Fix: select initial validation by @emilygorelik
• Fix: unavheader aria role by @emilygorelik
• Fix: Typography token weights by @emilygorelik

Emily Gorelik is a verified exterminator.

New icons

expand_all

height

straight

Robert Chen sees icons in his sleep.

🚨 Breaking changes

• None

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