feat(Flex): add new Flex layout component

dnbexperience · Oct 12, 2023 · db1c627 · db1c627
1 parent cf0d5b6
commit db1c627
Show file tree

Hide file tree

Showing 99 changed files with 827 additions and 820 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../shared/tags/ComponentBox'
-import { Card, Layout, P } from '@dnb/eufemia/src'
+import { Card, Flex, P } from '@dnb/eufemia/src'
 import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
@@ -34,10 +34,10 @@ export const VerticalFields = () => {
   return (
     <ComponentBox scope={{ Field }}>
       <Card>
-        <Layout.Vertical>
+        <Flex.Vertical>
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
-        </Layout.Vertical>
+        </Flex.Vertical>
       </Card>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/info.mdx
@@ -8,7 +8,7 @@ import * as Examples from './Examples'
 
 `Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.
 
-It uses [Layout.FlexItem](/uilib/components/layout/FlexItem) under the hood. When one of these props where given, `stack`, `direction` or `spacing` – the [Layout.FlexContainer](/uilib/components/layout/FlexContainer) will be used.
+It uses [Flex.Item](/uilib/components/flex/item) under the hood. When one of these props where given, `stack`, `direction` or `spacing` – the [Flex.Container](/uilib/components/flex/container) will be used.
 
 **BETA:** The design is not 100% finalised and may change to be officially approved by UX through an RFC.
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card/properties.mdx
@@ -4,12 +4,12 @@ showTabs: true
 
 ## Properties
 
-| Property                                                       | Type                        | Description                                                                                               |
-| -------------------------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `stack`                                                        | `boolean`                   | _(optional)_ True to stack the sub components with lines between. The `spacing` will default to `medium`. |
-| `direction`                                                    | `string`                    | _(optional)_ Defaults to `vertical`.                                                                      |
-| `alignSelf`                                                    | `string`                    | _(optional)_ Defaults to `stretch`.                                                                       |
-| `element`                                                      | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `section`.                                           |
-| [Layout.FlexContainer](/uilib/components/layout/FlexContainer) | Various                     | _(optional)_ FlexContainer properties.                                                                    |
-| [Layout.FlexItem](/uilib/components/layout/FlexItem)           | Various                     | _(optional)_ FlexItem properties.                                                                         |
-| [Space](/uilib/components/space/properties)                    | Various                     | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                     |
+| Property                                           | Type                        | Description                                                                                               |
+| -------------------------------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `stack`                                            | `boolean`                   | _(optional)_ True to stack the sub components with lines between. The `spacing` will default to `medium`. |
+| `direction`                                        | `string`                    | _(optional)_ Defaults to `vertical`.                                                                      |
+| `alignSelf`                                        | `string`                    | _(optional)_ Defaults to `stretch`.                                                                       |
+| `element`                                          | `string` or `React.Element` | _(optional)_ Define the type of element. Defaults to `section`.                                           |
+| [Flex.Container](/uilib/components/flex/container) | Various                     | _(optional)_ Flex.Container properties.                                                                   |
+| [Flex.Item](/uilib/components/flex/item)           | Various                     | _(optional)_ Flex.Item properties.                                                                        |
+| [Space](/uilib/components/space/properties)        | Various                     | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                     |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/flex/container.mdx
@@ -0,0 +1,24 @@
+---
+title: 'Flex.Container'
+description: '`Flex.Container` is a building block for CSS Grid based layouts.'
+hideInMenu: true
+showTabs: true
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+breadcrumb:
+  - text: Layout
+    href: /uilib/components/layout/
+  - text: Flex.Container
+    href: /uilib/components/flex/container/
+---
+
+import Info from 'Docs/uilib/components/flex/container/info'
+import Demos from 'Docs/uilib/components/flex/container/demos'
+
+<Info />
+<Demos />
diff --git a/...ponents/layout/FlexContainer/Examples.tsx → ...ib/components/flex/container/Examples.tsx b/...ponents/layout/FlexContainer/Examples.tsx → ...ib/components/flex/container/Examples.tsx
@@ -1,24 +1,24 @@
 import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { Card, Layout } from '@dnb/eufemia/src'
+import { Card, Flex } from '@dnb/eufemia/src'
 import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
-      <Layout.FlexContainer>
-        <Layout.FlexItem>
+      <Flex.Container>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-      </Layout.FlexContainer>
+        </Flex.Item>
+      </Flex.Container>
     </ComponentBox>
   )
 }
@@ -29,106 +29,106 @@ export const HorizontalWithFieldString = () => {
       scope={{ TestElement, Field }}
       data-visual-test="layout-flex-container-field"
     >
-      <Layout.FlexContainer>
+      <Flex.Container>
         <Field.String label="Label" value="Foo" />
         <Field.String label="Label" value="Foo" width="medium" />
-      </Layout.FlexContainer>
+      </Flex.Container>
     </ComponentBox>
   )
 }
 
 export const HorizontalWithFlexItem = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
-      <Layout.FlexContainer>
-        <Layout.FlexItem>
+      <Flex.Container>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-      </Layout.FlexContainer>
+        </Flex.Item>
+      </Flex.Container>
     </ComponentBox>
   )
 }
 
 export const HorizontalWithFlexItemJustifyCenter = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
-      <Layout.FlexContainer justify="center">
-        <Layout.FlexItem>
+      <Flex.Container justify="center">
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-      </Layout.FlexContainer>
+        </Flex.Item>
+      </Flex.Container>
     </ComponentBox>
   )
 }
 
 export const HorizontalWithFlexItemJustifyFlexEnd = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
-      <Layout.FlexContainer justify="flex-end">
-        <Layout.FlexItem>
+      <Flex.Container justify="flex-end">
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-      </Layout.FlexContainer>
+        </Flex.Item>
+      </Flex.Container>
     </ComponentBox>
   )
 }
 
 export const VerticalWithFlexItem = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
-      <Layout.FlexContainer direction="vertical">
-        <Layout.FlexItem>
+      <Flex.Container direction="vertical">
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-        <Layout.FlexItem>
+        </Flex.Item>
+        <Flex.Item>
           <TestElement>FlexItem</TestElement>
-        </Layout.FlexItem>
-      </Layout.FlexContainer>
+        </Flex.Item>
+      </Flex.Container>
     </ComponentBox>
   )
 }
 
 export const VerticalWithCard = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
-      <Layout.FlexContainer direction="vertical">
+      <Flex.Container direction="vertical">
         <Card>Card contents</Card>
         <Card>Card contents</Card>
         <Card>Card contents</Card>
-      </Layout.FlexContainer>
+      </Flex.Container>
     </ComponentBox>
   )
 }
@@ -137,10 +137,10 @@ export const VerticalWithFieldString = () => {
   return (
     <ComponentBox scope={{ TestElement, Field }}>
       <Card>
-        <Layout.FlexContainer direction="vertical">
+        <Flex.Container direction="vertical">
           <Field.String label="Label" value="Foo" />
           <Field.String label="Label" value="Foo" />
-        </Layout.FlexContainer>
+        </Flex.Container>
       </Card>
     </ComponentBox>
   )
@@ -153,10 +153,10 @@ export const VerticalSpaceDivider = () => {
       data-visual-test="layout-flex-container-divider"
     >
       <Card>
-        <Layout.FlexContainer direction="vertical" divider="space">
+        <Flex.Container direction="vertical" divider="space">
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
-        </Layout.FlexContainer>
+        </Flex.Container>
       </Card>
     </ComponentBox>
   )
@@ -165,26 +165,26 @@ export const VerticalSpaceDivider = () => {
 export const LayoutHorizontalFlexGrowItems = () => {
   return (
     <ComponentBox>
-      <Layout.Horizontal>
-        <Layout.FlexItem size={3}>
+      <Flex.Horizontal>
+        <Flex.Item size={3}>
           <Card>Card contents</Card>
-        </Layout.FlexItem>
-        <Layout.FlexItem size={4}>
+        </Flex.Item>
+        <Flex.Item size={4}>
           <Card>Card contents</Card>
-        </Layout.FlexItem>
-        <Layout.FlexItem size={5}>
+        </Flex.Item>
+        <Flex.Item size={5}>
           <Card>Card contents</Card>
-        </Layout.FlexItem>
-        <Layout.FlexItem grow>
+        </Flex.Item>
+        <Flex.Item grow>
           <Card>Card contents</Card>
-        </Layout.FlexItem>
-        <Layout.FlexItem grow>
+        </Flex.Item>
+        <Flex.Item grow>
           <Card>Card contents</Card>
-        </Layout.FlexItem>
-        <Layout.FlexItem grow>
+        </Flex.Item>
+        <Flex.Item grow>
           <Card>Card contents</Card>
-        </Layout.FlexItem>
-      </Layout.Horizontal>
+        </Flex.Item>
+      </Flex.Horizontal>
     </ComponentBox>
   )
 }
diff --git a/...components/layout/FlexContainer/demos.mdx → ...uilib/components/flex/container/demos.mdx b/...components/layout/FlexContainer/demos.mdx → ...uilib/components/flex/container/demos.mdx
@@ -10,15 +10,15 @@ import * as Examples from './Examples'
 
 <Examples.Default />
 
-### Horizontal FlexItem
+### Horizontal Flex.Item
 
 <Examples.HorizontalWithFlexItem />
 
-### Horizontal FlexItem, `justify="center"`
+### Horizontal Flex.Item, `justify="center"`
 
 <Examples.HorizontalWithFlexItemJustifyCenter />
 
-### Horizontal FlexItem, `justify="flex-end"`
+### Horizontal Flex.Item, `justify="flex-end"`
 
 <Examples.HorizontalWithFlexItemJustifyFlexEnd />
 
@@ -32,7 +32,7 @@ Will wrap on small screens.
 
 <Examples.HorizontalWithFieldString />
 
-### Vertical FlexItem
+### Vertical Flex.Item
 
 <Examples.VerticalWithFlexItem />
 

diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/flex/container/info.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/flex/container/info.mdx
@@ -0,0 +1,41 @@
+---
+showTabs: true
+---
+
+## Description
+
+`Flex.Container` is a building block for [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout) based layout of contents and components.
+
+Ideally, use [Flex.Item](/uilib/components/flex/item) or [Card](/uilib/components/card) for you inner wrappers.
+
+## How spacing is applied
+
+Nested components should preferably support [spacing properties](/uilib/components/space/).
+
+When a element or component was given, that does not support spacing, it will still work out of the box as it gets wrapped in a spacing block.
+
+You may else wrap your custom component in a `Flex.Item` – this way, you still can change the spacing per component basis.
+
+Technically, `Flex.Container` checks if a nested component has a property called `_supportsEufemiaSpacingProps`. So if you have a component that supports the [spacing properties](/uilib/components/space/), you can add this property `ComponentName._supportsEufemiaSpacingProps = true`.
+
+### Horizontal and Vertical aliases
+
+For shortening the usage of `direction="..."`, you can use:
+
+- `<Flex.Vertical>` instead of `<Flex.Container direction="vertical">`
+
+```jsx
+<Flex.Vertical>
+  <Flex.Item>part of vertical alignment</Flex.Item>
+  <Flex.Item>part of vertical alignment</Flex.Item>
+</Flex.Vertical>
+```
+
+- `<Flex.Horizontal>` instead of `<Flex.Container direction="horizontal">`
+
+```jsx
+<Flex.Horizontal>
+  <Flex.Item>part of horizontal alignment</Flex.Item>
+  <Flex.Item>part of horizontal alignment</Flex.Item>
+</Flex.Horizontal>
+```