Releases: wwnorton/design-system
v1.8.0
1.8.0 (2023-12-14)
In this version we introduce the Tabs Components, technical documentation is available here.
✨ Features
- add new tabs component (d627b98)
🐛 Bug Fixes
- reports disclosure collapsed state to screen readers (43ef06)
- core: solve low contrast with TextField border and white background (0f0c0e)
- react: solve disappearing checked state in ChoiceField and RadioGroup (adfa78)
- added an extra validation to avoid making focus (0c7bfd)
- link: use default link display value (60da30)
📝 Documentation
- react: improve Tabs stories (6d5a76d)
- react: remove default arg types from Storybook preview (bab933c)
New Contributors
- @lucas-contreras made their first contribution in #315
- @aferro-wwnorton made their first contribution in #332
Contributors
Assets 2
v1.7.1
v1.7.0
1.7.0 (2023-03-03)
This release introduces React 18 support! 🎉 Going forward, React 18 will be the recommended version of React to use with the Norton Design System, though we will continue supporting React 16 and React 17 for the foreseeable future.
Additionally, a new "dot" visual marker has been added for the selected state of a Dropdown's listbox. This should help avoid visual conflicts in settings that also use a checkmark to convey other information, such as in an assessment where using a checkmark may be perceived as "correct." Set this with the new selectedMarker prop: <Dropdown selectedMarker="dot">.
And finally but hardly least of all, we've resolved a variety of accessibility bugs for Callout, Dropdown, and Modal. These fixes improve the experience of these components when using focus and when using a screen reader.
✨ Features
- @wwnds/react: add support for react 18 (d5a68f4)
- dropdown: add "dot" indicator for selected options (0715d02)
🐛 Bug Fixes
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>
</>
);
};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)
v1.5.0
1.5.0 (2022-04-25)
This small release improves modular usage of our design tokens as CSS custom properties by introducing the design-tokens Sass mixin.
Prior to this release, the only way to access design tokens was to use them from the :root element, where they were declared as global CSS custom properties. But with this release, you can set them anywhere you like! This is especially important when working in a shadow DOM, which provides isolation from the :root context.
In addition to the new design-tokens mixin, every foundation now exports its own *-tokens mixin in case you don't need all of them in your isolated context:
@use '@wwnds/core' as nds';
// set all design tokens on :host (or any other element that doesn't have access to :root)
:host {
@include nds.design-tokens;
}
// set only the design tokens you need
// note: the design-tokens mixin includes all of these, so you'd only want to do this if you don't need all of them
:host {
@include nds.color-tokens;
@include nds.elevation-tokens;
@include nds.motion-tokens;
@include nds.spacing-tokens;
@include nds.typography-tokens;
@include nds.miscellaneous-tokens;
}Complete list of changes in 1.5.0 (2022-04-25)
🐛 Bug Fixes
- ship dependent types (2efdbda)
♻️ Refactor
✨ Features
- add mixin to set tokens on any selector (de3847e)
v1.4.0
1.4.0 (2022-04-06)
✨ Features
- initial step indicator component (36e2224)
🐛 Bug Fixes
- core: remove listbox dependency in dropdown (61eb3bf)
- core: restore bottom-margin-only typesets (bf1a737)
- modal: don't close when a click starts in dialog but ends outside (db1e943)
- motion: ensure that motion durations scale with the scalar unit (2631c35)
- storybook: children select for callout story (7f36f55)
- visual: use correct modal vertical spacing (eec06da)
📝 Documentation
v1.3.2
1.3.2 (2021-12-21)
💄 Visual design
- button: change the cursor to "not-allowed" when disabled (d597250)
♻️ Refactor
- dropdown: add distance to inherited popper props (ccae87a)
- dropdown: add transition prop inherited from Popper (639be87)
- dropdown: prefer distance to default modifiers (c5f491b)
- dropdown: reimagine style mixin extension (430858e)
- dropdown: reorganize exports (0793c57)
- dropdown: switch to new Listbox & Popper (2710a2a)
- dropdown: tighten the main interface (77f4074)
- dropdown: use isOpen/isOpenProp convention (1552a48)
- listbox: emit the index of the selected option on change (f3c3a91)
📝 Documentation
- add seach usage to text field (6b5c8b1)
- callout: tighten description according to UX team feedback (135efae)
- initial table documentation (8d24af7), closes #152
- link: add to anatomy, improve usage, and add interactions (6b967b9)
- progress indicators: add usage docs to progress bar and spinner (5f22bb8)
- publish first draft of the usable writing guidelines (fbb0313)
- remove card images from components list (4e44609)
- use nds Callouts (dada84f)
🐛 Bug Fixes
v1.3.1
1.3.1 (2021-08-25)
📝 Documentation
- website: fix pagination display (7244856)
🐛 Bug Fixes
- core: make all component tokens configurable using "with" (4fb0221)
- core: make [email protected] an optional peer dependency (11eaf3f)
- core: prevent duplicate dependency errors on customization (6e2ef54)
- textfield: allow the Textfield multiline component to expand vertically and horizontally (c02b1ee)
v1.3.0
1.3.0 (2021-08-17)
Our first minor release since v1.2.0 includes two new components, updated documentation, and a variety of fixes and improvements. A complete list of changes is listed below, but here are the highlights:
New Components
- Badge brings attention to information about a related component.
- Tag allows you to interact with or dismiss a status or classification.
Feature Enhancements and Improvements
This release also has some exciting improvements and updates.
- Text Field now supports multiline input! This update allows the user to enter multiple lines of text in one edit box. Automatic resizing was also added as part of this change to ensure that the Text Field continues to grow as the user inputs text.
- Tooltips provide a more user-friendly experience with added transitions, and the ability to set a delay before showing or hiding the Tooltip. By default, tooltips have a
400msdelay before opening and a200msdelay before closing, but these can be fully configured. - We've made significant improvements to some of the internals of our React implementation. These changes are the first step to decoupling our more complex components in order to give developers greater control over the composition of their UI.
- Our component for positioning elements relative to other elements has been completely rewritten. This component, Popper, is now used by our Tooltips and Popover, and can be used directly by developers.
- A new Listbox component allows the user to select one or more items from a list of choices. It will be used in an upcoming Combobox component, as well as a Dropdown update.
- Server-side renders should no longer see errors about
useLayoutEffect.
Complete list of changes in 1.3.0 (2021-08-17)
⚡️ Performance
- listbox: memoize the options map (d0655e2)
🐛 Bug Fixes
- button: pass ARIA labelling attributes to button (af7b12c)
- core: remove default focus z-index (2ccae23)
- disclosure: properly render flex summary on Safari [NDS-93] (#187) (1fd081a)
- replace React.useLayoutEffect with isomorphic useLayoutEffect (12256a8)
- select-hook: use the correct form target (a2b432b), closes /github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
✨ Features
- button: set a default tooltip show delay when iconOnly (877f07d)
- hooks: add initial stepper hook (90bdbed)
- hooks: add roving tabindex hook (a5a44e8)
- initial badge implementation (97a5e23)
- listbox: add default listbox and option styling (aae5942)
- listbox: initial standalone listbox (f4450b4)
- motion: add fade transition (71124e5)
- popper: add show delay (ead1e5d)
- react: add children utilities (ea148c6)
- tag: initial tag implementation (2590936)
- text-field: add multiline and auto resizing (38b1c53)
- tooltip: set a default show delay of 400ms (7365cff)
📝 Documentation
- button: add intro to react api (00905d4)
- initial badge and tag documentation (0aa70ef)
- link: update component docs with new react API (b4b6e26)
- listbox: add custom marker story (a835c4d)
- popover: add distance knob to minimal story (2b3aeb1)
- react-providers: add initial docs on context providers (1b70c3d)
- storybook: add initial listbox stories (ff00e6e)
- text-field: update section on multiline (bde00ac)
- tooltip: add showDelay knob to applicable stories (d6b9848)
- website: initial content guidelines (acb0f42)
♻️ Refactor
- button: destructure props in one place (e237e72)
- core: black and white are system tokens (0ceb830)
- core: remove default selection styling (5af2a09)
- core: undeclared properties cannot be null (ed0426d)
- core: use data-color-scheme for theming (0bda516)
- core: use new sass div syntax (219ee4d)
- error if onChange triggers without a checked attribute (d18e030)
- hooks: rewrite the useSelect hook (6b87075)
- import TooltipCoreProps from the new types file (aa287f8)
- popover: use "distance" for offset token (a221bf4)
- popover: use new Popper component (6077554)
- popover: use updated popper tokens (f444f48)
- popper: add new Popper implementation (ebdece0)
- popper: promote popper sass to real component (74d2f46)
- reference can be an SVGElement (3d0a6b7)
- remove Element check (0e10fc0)
- text-field: update email regex (431ce8d), closes #152
- tooltip: use "distance" for offset token (f3ccc6a)
- tooltip: use new Popper component (4aa08f6)
- tooltip: use updated popper tokens ([b21f868](https://github.com/wwnorton/desig...