🔖 Release core react@0.13.0 (#1493)

* 🐛 Fixed Table in example pages * 📝 Updated changelog * 🔖 Bump version
equinor · Jul 15, 2021 · 19286eb · 19286eb
1 parent f8536d3
commit 19286eb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 12 deletions.
diff --git 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
+<EdsProvider density="compact">
+  <Table>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>
+          <Button>Compact</Button>
+        </Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>
+          <Checkbox />
+        </Table.Cell>
+      </Table.Row>
+      ...
+    </Table.Body>
+  </Table>
+</EdsProvider>
+```
 
 ### Fixed
 

diff --git 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
@@ -179,7 +179,7 @@ export const DataTable: Story<TableProps> = (args) => {
   return (
     <Table {...args}>
       <Caption>
-        <Typography variant="h2">Fruits cost price - {args.density}</Typography>
+        <Typography variant="h2">Fruits cost price</Typography>
       </Caption>
       <Head>
         <Row>
@@ -250,8 +250,3 @@ export const DataTable: Story<TableProps> = (args) => {
     </Table>
   )
 }
-
-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
@@ -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<boolean>(false)
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false)
   const [focus, setFocus] = useState<MenuProps['focus']>(null)
-  const [density, setDensity] = useState<'comfortable' | 'compact'>('compact')
+  const [density, setDensity] = useState<EdsProviderProps['density']>(
+    'comfortable',
+  )
   const menuAnchorRef = useRef<HTMLButtonElement>(null)
   const popverAnchorRef = useRef<HTMLButtonElement>(null)
 
@@ -197,7 +201,9 @@ export const TestPage: Story = (args) => {
               <Button onClick={() => setPopoverOpen(false)}>OK</Button>
             </Popover>
           </Toolbar>
-          <DataTable density={density} />
+          <EdsProvider density={density}>
+            <DataTable />
+          </EdsProvider>
         </Middle>
       </Content>
     </Container>