# 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](https://valence.isaacshea.com/valence-core/components/layout/the-appcontainer) from `@valence-ui/app`. This component has also received significant updates:
  * The [Header](https://valence.isaacshea.com/valence-core/components/layout/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](https://valence.isaacshea.com/valence-core/components/layout/flex/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](https://valence.isaacshea.com/valence-core/components/overlays/sheets/side-sheet), [Bottom Sheet](https://valence.isaacshea.com/valence-core/components/overlays/sheets/bottom-sheet) and [Dynamic Sheet](https://valence.isaacshea.com/valence-core/components/overlays/sheets/dynamic-sheet) from `@valence-ui/app`. No other changes were made to these.
* Added the [App Nav](https://valence.isaacshea.com/valence-core/components/navigation/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](https://valence.isaacshea.com/valence-core/components/buttons/grid-button) from `@valence-ui/app`. No other changes have been made.
* Added the [`useFloating`](https://valence.isaacshea.com/valence-core/hooks/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`](https://valence.isaacshea.com/valence-core/hooks/usedisclosure) hook.
* Some minor updates were made to the [Multi-part Button](https://valence.isaacshea.com/valence-core/components/buttons/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 ](https://valence.isaacshea.com/valence-core/components/layout/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.