v1.6.0

1.6.0 (2022-09-08)

This release contains an assortment of bug fixes, a new hook for ID generation, and finally updates our Storybook to use controls instead of knobs, which have been deprecated by Storybook.

useId Hook

This release fixes a long-standing issue where ids generated by the design system would not always match in applications that used server-side rendering. Additionally, this fix is now part of our public API as the useId() hook, making it usable by design system users. This new hook has the same call signature as React 18's useId() hook. We do not yet support React 18, so this hook will work with React 16 or 17. When we do add support for React 18 in a future release, this hook will internally just call React's own implementation.

useId() allows you to generate internal ids, which can be especially helpful for connecting related elements via HTML or ARIA semantics, such as <label>'s for attribute or aria-labelledby.

import { useId } from '@wwnds/react';

const MyComponent = () => {
	const id = useId();

	return (
		<>
			<h2 id={id}>The Early Romantics</h2>
			<ul aria-labelledby={id}>
				<li>Franz Schubert (1797–1828)</li>
				<li>Robert Schumann (1810–1856)</li>
				<li>Clara Schumann (1819–1896)</li>
				<li>Felix Mendelssohn (1809–1847)</li>
				<li>Fanny Mendelssohn Hensel (1805–1847)</li>
				<li>Fryderyk Chopin (1810–1849)</li>
				<li>Hector Berlioz (1803–1869)</li>
			</ul>
		</>
	);
};

Example source: Concise History of Western Music.

Complete list of changes in 1.6.0 (2022-04-25)

✨ Features

• add React 18-compatible useId hook for isomorphic id generation (11491cf)
• disclosure: allow summary to be any React Node (8714011)

🐛 Bug Fixes

• badge: use a font size relative to adjacent text (f3792eb)
• disclosure: make disclosure title full-width (d8262ae)
• modal: avoid shifting when body scrollbar is removed (2025ee2)
• use new useId hook to ensure that server and client ids match (0bbd5db)

📝 Documentation

• callout: set examples in an example box (0fbf221)
• de-pluralize dos & don'ts (16c067f)
• fix: use React history when navigating on card click (ceaba4a)
• make example styling more obvious (8c49167)
• refactor: use admonition syntax for callouts (5c6a948)
• refactor: use default NavBar & swizzle our own color switch (baec227)
• sassdoc: make sure elevation section exists (fd56280)
• swizzle our own admonition to use the NDS Callout (1877d40)
• update docusaurus to v2 stable! (1c090e2)
• update extended interfaces (12776d5)

♻️ Refactor

• always set ref first in base components (f90feea)
• badge: fix horizontal/vertical padding (e97c650)
• badge: prefer default vertical alignment (106fa8e)
• badge: spacers should only be used for spacing (c740d15)
• BaseDialog: don't allow overriding role or aria-modal (5246771)
• BaseProgress: don't allow overriding role or aria attributes (36cba5b)
• BaseSVG: don't allow overriding xmlns or data-source (f7afd36)
• BaseTextArea: don't allow overriding rows (d6ab6d3)
• button: clarify error and update link (203223f)
• disclosure: prefer inline element for title (7a116f4)
• dropdown: account for missing children (5f93d02)
• dropdown: create new object instead of assigning (256909f)
• standardize conventions for all base components (ea4f65e)
• standardize conventions for component files (c90ccfe)
• storybook: migrate Checkbox to controls (138c00d)
• storybook: migrate ChoiceField to controls (0ed9504)
• storybook: migrate Disclosure to controls (6f48fce)
• storybook: migrate Dropdown to controls (0e78ec0)
• storybook: update Badge stories and migrate to controls (532a555)
• switch to no-motion-first (04771b3)