3.0.0

Valence 3 is the third major revision of the Valence design system, and includes breaking changes for a large section of the library.

Major changes

• @valence-ui/app has been removed, and many components have been brought into @valence-ui/core or removed entirely.

Valence Core

• Added the App Container from @valence-ui/app. This component has also received significant updates:

  • The Header is no longer accepted as a prop; it is now responsibility of the page to handle any Headers.

  • The App Container also no longer handles centering page content; this is now the responsibility of the page to do this. See the .stories.tsx file for how this can be easily achieved with a Flex Center.

  • The App Context has been removed as its utility is no longer necessary with the removal of the Sidebar.

• Added the Side Sheet, Bottom Sheet and Dynamic Sheet from @valence-ui/app. No other changes were made to these.

• Added the App Nav, which is the old Nav component from @valence-ui/app.

  • The NavButtonProps and NavProps types have consequently been renamed to AppNavButtonProps and AppNavProps, respectively.

• Added the Grid Button from @valence-ui/app. No other changes have been made.

• Added the useFloating hook, which provides shorthand for CSS attributes required to create floating items.

• The OutlineContainer component has been removed; a new Floating Toolbar component has been introduced to replace it. It provides more flexibility, and works with the new useFloating hook.

• All buttons now accept a float property, which allows them to "float" and be positioned relative to their parent or the page. This effectively replaces the need for the FAB component from @valence-ui/app. Floating buttons with the subtle and light fill variant will automatically blur their background.

• Added a .toggle() to the useDisclosure hook.

• Some minor updates were made to the Multi-part Button, including adding a new iconContainerStyle prop.

• Modals now have a 1px outline. This is for continuity with Sheets and to help distinguish foreground and background.

• The Grid component now uses the rows and columns props instead of templateRows and templateColumns.

  • The Grid will now also accept number types for these inputs, in which case it will default to creating that many 1fr columns/rows.

  • The Grid should also no longer bug out on WebKit-based browsers.

Removed components

• The Sidebar component has been removed because it was unreliable and difficult to manage across mobile/desktop.

• The FAB component has been removed as it was effectively replaced by the float property on every button.

• The Column component has been removed as the changes to the Grid have made the Column's utility redundant; simply use a Grid container with Flex components to achieve the same effect.

Housekeeping

• The repository now ignores all /dist folders, which should make the library size much smaller for contributors. This does mean that the npm run build command will need to be run per-device to re-generate these files.

• npm run build now also runs in order of package dependency, thus avoiding issues where @valence-ui/core cannot reference @valence-ui/utils while building for the first time.