v1.2.1

1.2.1 (2021-05-10)

♻️ Refactor

• core: black and white are system tokens (92afac1)
• core: use data-color-scheme for theming (5220a9d)

📝 Documentation

• link: update component docs with new react API (2186af7)
• react-providers: add initial docs on context providers (ef7d408)

v1.2.0

v1.2.0 is an incremental, developer-focused feature release that introduces new APIs for React context and reusable React hooks, and finally introduces our <Link> component to @wwnds/react. Its goal is to lay the groundwork for future configuration options and a more robust set of hooks. React hooks are reusable functionality that can be used inside any component, allowing you to—for instance—reuse managed focus with a roving tabindex in a consistent, reliable way.

React providers

As the design system grows, the need to make certain aspects of it configurable at a global level has become more important. React Providers are our solution to that problem.

We are starting out small, providing an <AppProvider> that wraps your whole application and can be used to configure global NDS options, and <ThemeProvider>, which can be used anywhere to create a design system theme context (note: theming is very minimal right now but will improve over time).

Links and routers

One of the reasons for introducing context providers now is that we are going to begin building components that have links inside of them very soon. Using the simplest implementation of something like <a href="path/to/thing.html"> would create a problem for applications that use a router to control link-based navigation, such as react-router, because our link navigation would not trigger the application's router-based navigation. Most routers ship their own <Link> component to address this, and we want to make sure that you can use your own link implementation with our components. This is where context providers can help.

Our new <Link> component ships with its own implementation that thinly extends the lowly anchor element, but internally it checks for a LinkContext. If found, it will instead use that context as its own implementation, allowing you to ensure that our <Link> uses your implementation.

The recommended way to set this up is to configure the <AppProvider> to use your link implementation:

// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import { AppProvider } from '@wwnds/react';
import App from './App';

const rootElement = document.getElementById('root');
ReactDOM.render(
    <React.StrictMode>
        {/* use react-router's Link implementation */}
        <AppProvider linkComponent={Link}>
            <App />
        </AppProvider>
    </React.StrictMode>,
    rootElement,
);

// everywhere inside your <App>, the design system's <Link> will now use react-router's implementation
import { Link } from '@wwnds/react';

Complete list of changes in 1.2.0 (2021-04-26)

✨ Features

• link: initial component, context, and hook (1a924db)
• react: add initial ThemeProvider (617830f)
• react: add initial theming context and hook (8bf22a6)
• react: add isomorphic useLayoutEffect hook (880b094)
• react: add main AppProvider for app-level configuration (2c6c42a)
• react: add useMediaQuery hook (5233cfb)
• react: add useSelect hook for multi & single selection (85eea6e)

♻️ Refactor

• callout: simplify title id (176eff3)
• docs: move custom components out of theme (62f462a)
• popover: update dependency lists (f5704f6)
• react: remove popper.js exports (80161ad)
• consolidate utilities (8ca6df6)
• de-memo simple objects (f192152)
• react: simplify main exports (93f9f16)
• theme: all fields should be required (ba90d91)
• remove config & prefixing (06314ca)
• remove unnecessary conditional hook call (84050e5)
• update components to use new utilities (74f764a)

📝 Documentation

• link: add link stories (554960a)
• refactor: use AppProvider for all color scheme needs (596cc45)

💄 Visual design

• typography: update system stack (8becdb0), closes /github.com/twbs/bootstrap/blob/2d2f5b3dfd901bca22133ae25fdcce7afb4042c7/scss/_variables.scss#L419

🐛 Bug Fixes

• core: correction Purple-70 (#131) (c4ba15d)
• dropdown: use current ids for aria-labelledby (efec188)
• modal: modal does not remove scroll: none; when unmounted(#108) (ec8d197)
• modal: vqa (#104) (dadf0af)
• popover: auto scrolling issue (df06117)

v1.1.0

Our first minor release since 1.0 comes with four new components, lots of fixes and tweaks, more consistent and complete documentation, and an updated Sass API.

New components & foundations

• Popover - a great new tool for progressive disclosure and a complement to our Tooltip and Modal. The popover is a non-modal dialog that is ideal for displaying non-essential information or tasks related to an element on the screen.
• Two components to help you convey loading or progressing. Both come in two modes: determinate (known duration from 0 to 100%), or indeterminate (unknown duration). Simply set or omit the progress value to choose a mode.
  • Progress Bar - convey progress left to right or right to left.
  • Spinner - convey progress with a spinning circle.
• Our first real content presentation component, the Callout, is used to bring attention to information related to the main content.

A new experimental "elevation" foundation has been added to help you add a third dimension to your application. This comes with both z-index tokens and shadow tokens for greater consistency in layering. As always, use experimental, undocumented features at your own risk as they may change in a future update.

Updated Sass API

@wwnds/core comes with an update to its main API for styling, helping you use the styles you want without adding anything you don't want. This is accomplished through a small number of mixins that will output CSS declarations when @included.

• tokens - All foundational design tokens set as CSS custom properties on the :root.
• reset - The global HTML reset. Forked from the Bootstrap reboot to use the Norton Design System foundations.
• components - Declarations for every component.
• helpers - Helper declarations that set a composed style uncoupled from any component.
• utilities - Utility declarations that set one property per class.
• complete - The complete design system set in a single global stylesheet.

Read more about this in the updated Core API docs.

Note that this change may break styling under some use cases. We fixed an issue where :root declarations were leaking on @use or @forward, resulting in duplicate token declarations. To fix this, we've introduced the tokens mixin that should be included in any project that wants to use our design tokens.

If you find that some things don't look quite right after updating @wwnds/core, you may need to add the following line to your global stylesheet:

@use '@wwnds/core';

// add the tokens
@include core.tokens;

All of our other styles use our design tokens, so including the tokens once is required if you intend to use modular stylesheets. Full stylesheet usage (@use '@wwnds/core/full';) is unaffected by this change.

Improvements

This release also made some significant non-breaking improvements to Dropdown, Tooltip, and our underlying positioning engine that powers absolutely-positioned elements like tooltip, popover, and dropdown.

• Dropdown options can now be disabled. Disabled options can still be seen but are marked as disabled and can't be selected.
• Focus improvements all around:
  • Dropdown options now uses the blue color family.
  • The focus halo's inner ring will now do its best to match your current background color.
• Tooltips provide a more consistent screen reader experience.
  • As a reminder, tooltips can only be used to name or describe a related element. Use a Popover for more complex content.
• Improved server-side rendering all around.

Complete list of changes in 1.1.0 (2021-02-23)

🐛 Bug Fixes

• choice-field: prevent control from shrinking (4078dfb)
• core: prevent accidental root declarations (463152b)
• dropdown: expose Option as an export (a0cfc5f)
• icon: default size should be in rem, not em (e353910)
• icon: set min-width to prevent shrinking (b87c7cc)
• modal: disable body scroll when modal is open (f42018f)
• modal: enable server-side rendering (2d9b6f0)
• typography: thin weight should be 100 (ec25444)
• disable the not-focus-visible for now (ef33289)

📝 Documentation

• callout: initial anatomy, minimal usage, presets, and React API (bffcf9a)
• add (disabled) feature link arrow (744f3b1)
• add components landing page (59f4dd9)
• add initial image abstracts to components landing page (e40f05a)
• add light choice field documentation (3c0bae6)
• set system colors as a table (c06e019)
• modal: make all modal stories closable (c4b93a4)
• text-field: add field components to react api (76681bd)
• add link arrows to landing page cards (591a3fc)
• add linkArrow to feature card (1d551bb)
• add optional media to feature card (f998bbb)
• add reasoning for CSS best practices (6b4b3b3)
• clean up anatomy copy (1223787)
• create feature tiles/card component (771ce5f)
• disable the blog for now (fdb3a1a)
• don't navigate to empty links (cf32a09)
• move foundations to its own category (d0f0169)
• remove redundant "toggle" (dd7d98e)
• rename "radio buttons" to "radio group" for consistency (3b675d1)
• restructure and tighten component docs (5c553f1)
• tighten up choice field & related docs (a4eb170)
• use media for component cards (0de6dcc)
• use more consistent anatomy language (845e497)
• use shadow token for feature card ([c3df9b9](https://github.com/wwnorton/design-sys...

v1.0.1

1.0.1 (2020-12-17)

✨ Features

• core: add tokens.css to build artifacts (d01e314)

🐛 Bug Fixes

• react: update build script (1c4a1d4), closes #55

🛠 Maintenance

• yarn upgrade & force update broken package (636003e)
• core: add tokens.css to build artifacts (94517cb)
• switch to lodash-es for lodash methods (a5080c3)
• use lodash, not lodash-es (746be7c)
• use relative lodash packages (952250c)
• build: split non-umd and umd builds (497b170)
• core: update build to use umd name (5be3f0b)
• yarn upgrade & force update broken package (6d61721)

v1.0.0

1.0.0 (2020-11-30)

📝 Documentation

• add color utilities (e4e500c)
• add ColorChip component (b4e8124)
• add default values to the motion table (7767f9b)
• add focus-visible polyfill (9eee99e)
• add heading utilities (86a15b4)
• add initial color scheme details (f702870)
• add type utilities and empty spacing docs (de47f9c)
• don't wrap code inside tables (eedc109)
• improve color docs (56aea6b)
• initial typeset docs (a9fa510)
• more selectively apply non-breaking code (63e28bf)
• outline token conventions (dc97bef)
• simplify typesets (a2823fa)
• update link (c96eede)
• update principles (ee2ee9c)
• update to react 17 (21916ab)

✨ Features

• core: add button color role variants (3604b0e)
• react: add color prop to button (8abd9b0)
• react: add custom email validation (f3441ca), closes #43
• react: add label to checked options (a2b106a), closes #14
• react: add support for react 17 (a9cf00f), closes #32
• react: allow maxLength to restrict input (bad62d3)
• react: make it easier to disble TextField's counter (6b48fff)

💄 Visual

• core: don't let disclosure markers shrink (8c7ad7d)
• core: invalid TextField border should be error-color (137f3b8)

🐛 Bug Fixes

• core: ensure that focus is visible above other z-index (ec365b1)
• core: make button color grade configurable (8c1b16e)
• core: modal title shouldn't have a bottom margin (c44cf94)
• core: set modal z-index (b4114f4)
• core: use correct selection text color (f7615c8)
• react: ensure counter works in controlled Textfield (fd6afd1)
• react: ensure counter works in uncontrolled TextField (a6bcc50)
• react: remove prefix from state changes (db68ad0)

♻️ Refactor

• core: consolidate color utilities (a689920)
• core: make scheme maps customizable (74e942a)
• core: reorganize token :root declarations (1a501f1)
• core: use token, not property (d62a6ec)
• react: explicitly pass validation attributes (84005ee)
• react: improve popper types (0e7a0fb)
• react: move useValidation to src/hooks (158c110)
• react: simplify useColorScheme's return (b300c82)

🛠 Maintenance

• yarn upgrade (a7304bb)
• storybook: remove logging (cf4304b)
• storybook: use target, not currentTarget (328f418)
• don't use .mdx (7d23ff3)
• fix note formatting (7e96948)
• ignore spelling in node_modules (eababce)
• remove development support for node 10 (c04d4f3), closes #31
• remove test story (ba0f944)
• update button stories to use new color prop (d45280b)
• update storybook deps (0353e94)
• upgrade del to v6 (7acc57b)
• yarn upgrade (d481f0a)
• yarn upgrade (aca4688)
• docs: update docusaurus (f1de108)

v1.0.0-rc.1

1.0.0-rc.1 (2020-10-02)

🐛 Bug Fixes

• react: bind value to the BaseInput in TextField (1a209f4)

v1.0.0-rc.0

1.0.0-rc.0 (2020-09-25)

⚠ BREAKING CHANGES

• react: TextField can no longer be uncontrolled.
  To use in an uncontrolled way, use the new TextFieldUncontrolled.
• core: role color tokens have been renamed to include the
  -color suffix. See the migration guide for details.
• core: the $namespace config option has been removed. All
  tokens and declarations are now hard-coded with the nds namespace.
• core: the prop function has been removed. Custom properties
  are now used and declared directly.
• core: remove custom property fallbacks
• core: remove optional namespacing

♻️ Refactor

• core: add typing and improve config comments (21b657d)
• core: change "utilities" to "helpers" (7109a44)
• core: make device tokens overrideable (1a46ce9)
• core: remove device tokens (d37659b)
• core: simplify structure and api (88b4a2d)
• core: swap root/src entrypoints (984c943)
• core: update components to use new api (568a2a2)
• core: update main export to use helpers/utilities (1de7da8)
• core: use values in media queries (9b2befb)
• react: use updated TextField in stories and tests (3507dc2)

🐛 Bug Fixes

• core: use correct default duration (01d094b)
• react: allow >maxLength text field input (84c97e5), closes #11
• react: correctly focus the dropdown button on close (51ad297)
• react: make TextField and input fully controlled (a39ba8d)

✨ Features

• core: add color utilities (57a62f2)
• core: add config for :focus-visible polyfill (7641a2d)
• core: add configs for link styling; remove unused configs (acfad2b)
• core: add configurable link component styles (a8d3ff3)
• core: add modal keys to spacer map (00ae10d)
• core: add spacing utilities (8f5b186)
• core: add tokens entrypoint (0a4990d)
• core: add tokens entrypoint (fb83c28)
• core: add utility api (0ad9428)
• core: remove custom property fallbacks (a429dc1)
• core: remove optional namespacing (0410649)
• react: add uncontrolled variant of TextField (8cc63ca)

📝 Documentation

• (hopefully) fix pwa resolution (92991ab)
• add changelog to footer (044957a)
• add design tokens section to color foundation (1f02bdd)
• add initial accessibility foundations (ba875e8)
• add initial design token foundations (8cde973)
• add motion design tokens and duration-scalar docs (f683083)
• add rc.0 migration guide (1cb0ea4)
• add styling for Infima secondary alerts (3941db1)
• fix bad a11y in search (5e931eb)
• fix changelog headings (e5b50f6)
• improve infima dark footer (a350010)
• remove unnecessary word (36d7475)
• update react readme (84bc525)
• core: update core readme (cafb97a)
• minor copy edits (dee70c5), closes #12
• re-enable link underlines (df2d125)
• switch to frontmatter slug (d4f6b54)
• tweak getting started structure (48092ad)
• fix: set color scheme as layout effect (a2de5f9)
• storybook: add focus-visible polyfill (16598ea)
• update main styles to use new core api (06aa6e6)
• website: add initial tooltip component docs (1dcf7f6)
• website: create a11y admonition (911b08a)

🛠 Maintenance

• add development browserslist (414726c)
• add some spellings (47f2cdc)
• freeze eslint-config-norton at beta.0 (35019ae)
• remove empty files (eea1aa2)
• remove non-existent imports (dcc00a7)
• temporarily disable broken stylelint properties (744d0d4)
• update formatting of previous migration guide (61d41d4)
• update sassdoc groups (0667eb9)
• update storybook core config (1043cbb)
• update stylelint and restore formerly-broken rules (a967eaa)
• upgrade @testing-library/react to v11 (34b71a8)
• upgrade commitlint to v11 (7b781c7)
• upgrade gulp-postcss & add postcss (3bc92fa)
• upgrade ts-node to v9 (dedf852)
• use full color tokens (7807c5d)
• yarn upgrade ([c6fc2a0]...