diff --git a/libraries/core-react/CHANGELOG.md b/libraries/core-react/CHANGELOG.md index 30a06bb20e..187e20beb3 100644 --- a/libraries/core-react/CHANGELOG.md +++ b/libraries/core-react/CHANGELOG.md @@ -5,12 +5,46 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [0.13.0] - 2021-07-XX +## [0.13.0] - 2021-07-15 ### Added -- Compact components part 1 ([#1249](https://github.com/equinor/design-system/issues/1249)): - - `TextField`, `Input`, `Checkbox`, `Menu`, `NativeSelect`, `SingleSelect`, `MultiSelect`, `Button`, `Switch` & `Table` +#### Compact components part 1 ([#1249](https://github.com/equinor/design-system/issues/1249)) + +- Compact mode can be activated by using the `EdsProvider` as a parent component and setting the `density` property to `"compact"`. This will toggle compact mode on all nested components. +- Components with compact support: + - `TextField` + - `Input` + - `Checkbox` + - `Menu` + - `NativeSelect` + - `SingleSelect` + - `MultiSelect` + - `Button` + - `Switch` + - `Table` +- Example: + +```typescript +// This renders a compact Table with compact Button & Checkbox inside + + + + + + + + + + + + + + ... + +
+ +``` ### Fixed diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json index 0bc1ad18c4..1f7ea5707b 100644 --- a/libraries/core-react/package.json +++ b/libraries/core-react/package.json @@ -1,6 +1,6 @@ { "name": "@equinor/eds-core-react", - "version": "0.13.0-dev.20210709", + "version": "0.13.0", "description": "The React implementation of the Equinor Design System", "main": "src/index.ts", "publishConfig": { diff --git a/libraries/core-react/stories/playground/DataTable.tsx b/libraries/core-react/stories/playground/DataTable.tsx index 710c067826..70cc695afd 100644 --- a/libraries/core-react/stories/playground/DataTable.tsx +++ b/libraries/core-react/stories/playground/DataTable.tsx @@ -179,7 +179,7 @@ export const DataTable: Story = (args) => { return ( @@ -250,8 +250,3 @@ export const DataTable: Story = (args) => {
- Fruits cost price - {args.density} + Fruits cost price
) } - -DataTable.bind({}) -DataTable.args = { - density: 'compact', -} diff --git a/libraries/core-react/stories/playground/Examples.stories.tsx b/libraries/core-react/stories/playground/Examples.stories.tsx index c731df5d0f..8fd6ee4a43 100644 --- a/libraries/core-react/stories/playground/Examples.stories.tsx +++ b/libraries/core-react/stories/playground/Examples.stories.tsx @@ -12,6 +12,8 @@ import { Tooltip, Popover, Checkbox, + EdsProvider, + EdsProviderProps, } from '../../src' import { DataTable } from './DataTable' @@ -64,7 +66,9 @@ export const TestPage: Story = (args) => { const [isOpenSnackbar, setOpenSnackbar] = useState(false) const [isPopoverOpen, setPopoverOpen] = useState(false) const [focus, setFocus] = useState(null) - const [density, setDensity] = useState<'comfortable' | 'compact'>('compact') + const [density, setDensity] = useState( + 'comfortable', + ) const menuAnchorRef = useRef(null) const popverAnchorRef = useRef(null) @@ -197,7 +201,9 @@ export const TestPage: Story = (args) => { - + + +