NYS Design System Release 1.13.0 “TableTop”

Why “TableTop?” 🏔️

When we name our releases, we pick from a list of Adirondack high peaks. For this release, we felt it appropriate to name it after the <nys-table> component. TableTop is the 19th highest peak in New York, with an elevation of 4,427 feet (1,349 m)!

Learn more about TableTop Mountain.

New `<nys-datepicker>` component

The user experience for scheduling appointments, and selecting future dates, can be confusing without a calendar view. The new <nys-datepicker> component provides you a way to give users a quick calendar view of dates. Importantly, do not use this for “memorable dates” such as “date of birth” or “anniversary date,” instead use a textinput for entering the date manually. Read the datepicker documentation.

<nys-datepicker></nys-datepicker>

Robert Chen saved the date!

New `<nys-table>` component

Tables are very useful for displaying structured data on the web. The new <nys-table> component aims to standardize the look, feel, and functionality of a table element. You'll find features such as zebra striping, column sorting, and more. Read the table documentation

New York State High Peaks and Popular Hikes
Mountain	Peak Height (ft)	Hike Name
Marcy	5,344	Van Hoevenberg Trail
Algonquin	5,114	Northeast Trail
Haystack	4,960	Johns Brook Trail
Skylight	4,926	Lake Tear Trail
Whiteface	4,867	Whiteface Mountain Trail

<nys-table id="table3" name="table3" bordered sortable striped>
  <table>
    <caption>
    New York State High Peaks and Popular Hikes
    </caption>
    <thead>
      <tr>
        <th>Mountain</th>
        <th>Peak Height (ft)</th>
        <th>Hike Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Marcy</td>
        <td>5,344</td>
        <td>Van Hoevenberg Trail</td>
      </tr>
      <tr>
        <td>Algonquin</td>
        <td>5,114</td>
        <td>Northeast Trail</td>
      </tr>
      <tr>
        <td>Haystack</td>
        <td>4,960</td>
        <td>Johns Brook Trail</td>
      </tr>
      <tr>
        <td>Skylight</td>
        <td>4,926</td>
        <td>Lake Tear Trail</td>
      </tr>
      <tr>
        <td>Whiteface</td>
        <td>4,867</td>
        <td>Whiteface Mountain Trail</td>
      </tr>
    </tbody>
  </table>
</nys-table>

Emily Gorelik tabled this component.

“User Actions” in `<nys-globalheader>`

Based on community feedback, we identified a need to allow engineers to add a “user” menu to the global header. The <nys-globalheader> component includes a named slot called user-actions. This slot allows you to insert custom HTML content, such as user profile links, settings, or logout buttons, into the header. Read the user actions documentation

<nys-globalheader 
  appName="User Registration Form" 
  agencyName="Office of Information Technology Services"
>
  <nys-button slot="user-actions" label="Sign out" prefixIcon="slotted">
    <nys-avatar
      slot="prefix-icon"
      ariaLabel="User avatar"
      initials="NY"
    ></nys-avatar>
  </nys-button>
</nys-globalheader>

Emily Gorelik modified this component.

Figma updates

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

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!

Kristin Sorrentino updated these important components!

Bug fixes

Fixed some heading tokens to align with Figma library
<nys-select> now has a default height applied
<nys-select> now has a proper disabled state color applied
<nys-table> has a default filled background color now
Clicking the description on an <nys-checkbox> or <nys-radiobutton> now properly selects the element
Many JSDoc updates for better Custom Element Manifest integration

Emily Gorelik and Robert Chen fix broken things.