From 5f8d906c64cd91b1703aea33dc513f67046e0140 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 15:17:03 +0200
Subject: [PATCH 01/19] :sparkles: add Flex component file

---
 src/components/flex/Flex.tsx | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/components/flex/Flex.tsx

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
new file mode 100644
index 000000000..e68fc19a2
--- /dev/null
+++ b/src/components/flex/Flex.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Flex = () => {
+  return <div>Flex</div>;
+};
+
+export default Flex;

From 80ac1f7510dd7f77ea8b8802bc1877ba6ae58fdb Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 15:17:37 +0200
Subject: [PATCH 02/19] :sparkles: add index file

---
 src/components/flex/index.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/components/flex/index.ts

diff --git a/src/components/flex/index.ts b/src/components/flex/index.ts
new file mode 100644
index 000000000..b86d29f42
--- /dev/null
+++ b/src/components/flex/index.ts
@@ -0,0 +1,3 @@
+import Flex from './Flex';
+
+export default Flex;

From 7380032d67816cd8868cf3d297032c9126791ae8 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 15:19:59 +0200
Subject: [PATCH 03/19] :sparkles: add theme file

---
 src/components/flex/theme.css | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 src/components/flex/theme.css

diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
new file mode 100644
index 000000000..0bb39b571
--- /dev/null
+++ b/src/components/flex/theme.css
@@ -0,0 +1,2 @@
+@import '@teamleader/ui-colors';
+@import '@teamleader/ui-utilities';

From 2d4ce9cfd6cc86ed054709484a2503e9c2cd977d Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 16:14:11 +0200
Subject: [PATCH 04/19] :sparkles: add Flex story

---
 src/components/flex/flex.stories.tsx | 23 +++++++++++++++++++++++
 src/index.ts                         |  2 ++
 2 files changed, 25 insertions(+)
 create mode 100644 src/components/flex/flex.stories.tsx

diff --git a/src/components/flex/flex.stories.tsx b/src/components/flex/flex.stories.tsx
new file mode 100644
index 000000000..acab8c12d
--- /dev/null
+++ b/src/components/flex/flex.stories.tsx
@@ -0,0 +1,23 @@
+import { ComponentStory } from '@storybook/react';
+import React from 'react';
+import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
+import { Flex, Box, TextBody } from '../../index';
+
+export default {
+  component: Flex,
+  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Flex'),
+};
+
+const COLORS = ['teal', 'mint', 'ruby'];
+
+export const basic: ComponentStory<typeof Flex> = (args) => (
+  <Flex {...args}>
+    {COLORS.map((color, index) => (
+      <Box backgroundColor={color} backgroundTint="lightest" borderColor={color} borderTint="light" borderWidth={1}>
+        <TextBody>Box {index}</TextBody>
+      </Box>
+    ))}
+  </Flex>
+);
+
+basic.args = {};
diff --git a/src/index.ts b/src/index.ts
index cb33c8a60..02df01994 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -75,6 +75,7 @@ import ProgressTracker from './components/progressTracker';
 import Widget from './components/widget';
 import WysiwygEditor from './components/wysiwygEditor';
 import EmailSelector from './components/emailSelector';
+import Flex from './components/flex';
 
 import {
   COLOR,
@@ -121,6 +122,7 @@ export {
   EmptyState,
   ErrorText,
   FilterSelection,
+  Flex,
   Heading1,
   Heading2,
   Heading3,

From 6b5b8489d4e74ca86a939b62880956f443ead41c Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 16:14:51 +0200
Subject: [PATCH 05/19] :lipstick: add basic flex style

---
 src/components/flex/Flex.tsx  | 18 +++++++++++++++---
 src/components/flex/theme.css |  5 +++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index e68fc19a2..7b9686708 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -1,7 +1,19 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import cx from 'classnames';
+import theme from './theme.css';
 
-const Flex = () => {
-  return <div>Flex</div>;
+interface FlexProps {
+  children: ReactNode;
+}
+
+const Flex = ({ children, ...otherProps }: FlexProps) => {
+  const classNames = cx(theme['flex']);
+
+  return (
+    <div className={classNames} {...otherProps}>
+      {children}
+    </div>
+  );
 };
 
 export default Flex;
diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index 0bb39b571..dc358f4b7 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -1,2 +1,7 @@
 @import '@teamleader/ui-colors';
 @import '@teamleader/ui-utilities';
+
+.flex {
+  box-sizing: border-box;
+  display: flex;
+}

From 16c423f1bd040c87e6ea328845113cd716401102 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 16:31:23 +0200
Subject: [PATCH 06/19] :sparkles: add direction to Flex component

---
 src/components/flex/Flex.tsx  | 5 +++--
 src/components/flex/theme.css | 8 ++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 7b9686708..dbd175a81 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -4,10 +4,11 @@ import theme from './theme.css';
 
 interface FlexProps {
   children: ReactNode;
+  direction?: 'row' | 'column';
 }
 
-const Flex = ({ children, ...otherProps }: FlexProps) => {
-  const classNames = cx(theme['flex']);
+const Flex = ({ children, direction = 'row', ...otherProps }: FlexProps) => {
+  const classNames = cx(theme['flex'], theme[`${direction}`]);
 
   return (
     <div className={classNames} {...otherProps}>
diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index dc358f4b7..4deaa9202 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -5,3 +5,11 @@
   box-sizing: border-box;
   display: flex;
 }
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}

From bc267f7a4e5b1e237217fa6758e5135cec451971 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 17:46:18 +0200
Subject: [PATCH 07/19] :sparkles: add gap property to Flex component

---
 src/components/flex/Flex.tsx         |  7 +++++--
 src/components/flex/flex.stories.tsx | 26 ++++++++++++++++++--------
 src/components/flex/theme.css        |  8 ++++++++
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index dbd175a81..7d106c575 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -2,13 +2,16 @@ import React, { ReactNode } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 
+const gaps = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
+export type Gap = typeof gaps[number];
 interface FlexProps {
   children: ReactNode;
   direction?: 'row' | 'column';
+  gap?: Gap;
 }
 
-const Flex = ({ children, direction = 'row', ...otherProps }: FlexProps) => {
-  const classNames = cx(theme['flex'], theme[`${direction}`]);
+const Flex = ({ children, direction = 'row', gap = 0, ...otherProps }: FlexProps) => {
+  const classNames = cx(theme['flex'], theme[`${direction}`], { [theme[`gap-${gap}`]]: gap > 0 });
 
   return (
     <div className={classNames} {...otherProps}>
diff --git a/src/components/flex/flex.stories.tsx b/src/components/flex/flex.stories.tsx
index acab8c12d..b8362d30b 100644
--- a/src/components/flex/flex.stories.tsx
+++ b/src/components/flex/flex.stories.tsx
@@ -8,16 +8,26 @@ export default {
   title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Flex'),
 };
 
-const COLORS = ['teal', 'mint', 'ruby'];
-
+const PreppedBox = () => (
+  <Box
+    backgroundColor={'mint'}
+    backgroundTint="lightest"
+    borderColor={'mint'}
+    borderTint="light"
+    borderWidth={1}
+    padding={2}
+  >
+    <TextBody>Box Content</TextBody>
+  </Box>
+);
 export const basic: ComponentStory<typeof Flex> = (args) => (
   <Flex {...args}>
-    {COLORS.map((color, index) => (
-      <Box backgroundColor={color} backgroundTint="lightest" borderColor={color} borderTint="light" borderWidth={1}>
-        <TextBody>Box {index}</TextBody>
-      </Box>
-    ))}
+    <PreppedBox />
+    <PreppedBox />
   </Flex>
 );
 
-basic.args = {};
+basic.args = {
+  direction: 'row',
+  gap: 0,
+};
diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index 4deaa9202..cde92cb47 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -13,3 +13,11 @@
 .column {
   flex-direction: column;
 }
+
+/* prettier-ignore */
+@each
+  $factor, $spacer in (1, 2, 3, 4, 5, 6, 7, 8), (var(--spacer-smallest), var(--spacer-smaller), var(--spacer-small), var(--spacer-regular), var(--spacer-medium), var(--spacer-big), var(--spacer-bigger), var(--spacer-biggest)) {
+  .gap-$(factor) {
+    gap: $spacer;
+  }
+}

From f2e5a09130bb14044288a0cb0208a5e2a53c4118 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 21:45:26 +0200
Subject: [PATCH 08/19] :sparkles: add alignItems property to Flex component

---
 src/components/flex/Flex.tsx  | 8 ++++++--
 src/components/flex/theme.css | 8 ++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 7d106c575..40f7af7a2 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -8,10 +8,14 @@ interface FlexProps {
   children: ReactNode;
   direction?: 'row' | 'column';
   gap?: Gap;
+  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
 }
 
-const Flex = ({ children, direction = 'row', gap = 0, ...otherProps }: FlexProps) => {
-  const classNames = cx(theme['flex'], theme[`${direction}`], { [theme[`gap-${gap}`]]: gap > 0 });
+const Flex = ({ children, direction = 'row', gap = 0, alignItems, ...otherProps }: FlexProps) => {
+  const classNames = cx(theme['flex'], theme[`${direction}`], {
+    [theme[`gap-${gap}`]]: gap > 0,
+    [theme[`align-items-${alignItems}`]]: alignItems,
+  });
 
   return (
     <div className={classNames} {...otherProps}>
diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index cde92cb47..3c3b6e9ff 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -4,6 +4,8 @@
 .flex {
   box-sizing: border-box;
   display: flex;
+  background-color: black;
+  height: 200px;
 }
 
 .row {
@@ -21,3 +23,9 @@
     gap: $spacer;
   }
 }
+
+@each $item-alignment in (center, flex-start, flex-end, baseline, stretch) {
+  .align-items-$(item-alignment) {
+    align-items: $item-alignment;
+  }
+}

From 7966f84c4c41b1673dd1711e32bc9f2819e45854 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 22:17:53 +0200
Subject: [PATCH 09/19] :sparkles: add style property to Flex component

---
 src/components/flex/Flex.tsx         |  7 ++++---
 src/components/flex/flex.stories.tsx | 23 +++++++++++++++++------
 src/components/flex/theme.css        |  2 --
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 40f7af7a2..3e00c691a 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 
@@ -9,16 +9,17 @@ interface FlexProps {
   direction?: 'row' | 'column';
   gap?: Gap;
   alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
+  style?: CSSProperties;
 }
 
-const Flex = ({ children, direction = 'row', gap = 0, alignItems, ...otherProps }: FlexProps) => {
+const Flex = ({ children, direction = 'row', gap = 0, alignItems, style, ...otherProps }: FlexProps) => {
   const classNames = cx(theme['flex'], theme[`${direction}`], {
     [theme[`gap-${gap}`]]: gap > 0,
     [theme[`align-items-${alignItems}`]]: alignItems,
   });
 
   return (
-    <div className={classNames} {...otherProps}>
+    <div className={classNames} style={style} {...otherProps}>
       {children}
     </div>
   );
diff --git a/src/components/flex/flex.stories.tsx b/src/components/flex/flex.stories.tsx
index b8362d30b..73b1eb930 100644
--- a/src/components/flex/flex.stories.tsx
+++ b/src/components/flex/flex.stories.tsx
@@ -6,25 +6,36 @@ import { Flex, Box, TextBody } from '../../index';
 export default {
   component: Flex,
   title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Flex'),
+
+  argTypes: {
+    style: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 const PreppedBox = () => (
   <Box
-    backgroundColor={'mint'}
+    backgroundColor="mint"
     backgroundTint="lightest"
-    borderColor={'mint'}
+    borderColor="mint"
     borderTint="light"
     borderWidth={1}
     padding={2}
+    borderRadius="rounded"
   >
     <TextBody>Box Content</TextBody>
   </Box>
 );
 export const basic: ComponentStory<typeof Flex> = (args) => (
-  <Flex {...args}>
-    <PreppedBox />
-    <PreppedBox />
-  </Flex>
+  <Box borderColor="neutral" borderWidth={1} borderRadius="rounded">
+    <Flex style={{ minHeight: '100px' }} {...args}>
+      <PreppedBox />
+      <PreppedBox />
+    </Flex>
+  </Box>
 );
 
 basic.args = {
diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index 3c3b6e9ff..6928fc7d0 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -4,8 +4,6 @@
 .flex {
   box-sizing: border-box;
   display: flex;
-  background-color: black;
-  height: 200px;
 }
 
 .row {

From 551b51a81ea58efd203696febaa19b6fab38cb7a Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 22:48:12 +0200
Subject: [PATCH 10/19] :sparkles: add justifyContent property to Flex
 component

---
 src/components/flex/Flex.tsx         | 14 +++++++++++++-
 src/components/flex/flex.stories.tsx | 17 +++++++++++------
 src/components/flex/theme.css        |  6 ++++++
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 3e00c691a..0e42a8c5a 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -9,13 +9,23 @@ interface FlexProps {
   direction?: 'row' | 'column';
   gap?: Gap;
   alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
+  justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
   style?: CSSProperties;
 }
 
-const Flex = ({ children, direction = 'row', gap = 0, alignItems, style, ...otherProps }: FlexProps) => {
+const Flex = ({
+  children,
+  direction = 'row',
+  gap = 0,
+  alignItems,
+  justifyContent,
+  style,
+  ...otherProps
+}: FlexProps) => {
   const classNames = cx(theme['flex'], theme[`${direction}`], {
     [theme[`gap-${gap}`]]: gap > 0,
     [theme[`align-items-${alignItems}`]]: alignItems,
+    [theme[`justify-content-${justifyContent}`]]: justifyContent,
   });
 
   return (
@@ -25,4 +35,6 @@ const Flex = ({ children, direction = 'row', gap = 0, alignItems, style, ...othe
   );
 };
 
+Flex.displayName = 'Flex';
+
 export default Flex;
diff --git a/src/components/flex/flex.stories.tsx b/src/components/flex/flex.stories.tsx
index 73b1eb930..eebb9df7e 100644
--- a/src/components/flex/flex.stories.tsx
+++ b/src/components/flex/flex.stories.tsx
@@ -2,6 +2,7 @@ import { ComponentStory } from '@storybook/react';
 import React from 'react';
 import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
 import { Flex, Box, TextBody } from '../../index';
+import { Heading3 } from '../typography';
 
 export default {
   component: Flex,
@@ -26,15 +27,19 @@ const PreppedBox = () => (
     padding={2}
     borderRadius="rounded"
   >
-    <TextBody>Box Content</TextBody>
+    <TextBody>Content</TextBody>
   </Box>
 );
 export const basic: ComponentStory<typeof Flex> = (args) => (
-  <Box borderColor="neutral" borderWidth={1} borderRadius="rounded">
-    <Flex style={{ minHeight: '100px' }} {...args}>
-      <PreppedBox />
-      <PreppedBox />
-    </Flex>
+  <Box>
+    <Heading3>Flex Box</Heading3>
+    <Box borderColor="neutral" borderWidth={1} borderRadius="rounded" backgroundColor="neutral" backgroundTint="light">
+      <Flex style={{ minHeight: '100px' }} {...args}>
+        <PreppedBox />
+        <PreppedBox />
+        <PreppedBox />
+      </Flex>
+    </Box>
   </Box>
 );
 
diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index 6928fc7d0..bff2acfe9 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -27,3 +27,9 @@
     align-items: $item-alignment;
   }
 }
+
+@each $justify in (center, flex-start, flex-end, space-around, space-between, space-evenly) {
+  .justify-content-$(justify) {
+    justify-content: $justify;
+  }
+}

From bc61c15a3d201d884808546e45e8dbcba9f0888e Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Tue, 31 May 2022 22:52:57 +0200
Subject: [PATCH 11/19] :label: expand Flex prop types

---
 src/components/flex/Flex.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 0e42a8c5a..3ccac4b71 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -1,17 +1,20 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 
 const gaps = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
 export type Gap = typeof gaps[number];
-interface FlexProps {
-  children: ReactNode;
-  direction?: 'row' | 'column';
-  gap?: Gap;
-  alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
-  justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
-  style?: CSSProperties;
-}
+
+type FlexProps = Partial<
+  {
+    children: ReactNode;
+    direction: 'row' | 'column';
+    gap: Gap;
+    alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
+    justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
+    style: CSSProperties;
+  } & HTMLProps<HTMLDivElement>
+>;
 
 const Flex = ({
   children,

From da8ddb3b698fe2787da0795ea5fcfa4d27d4aa38 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 10:22:04 +0200
Subject: [PATCH 12/19] :fire: remove extra properties from Flex component

---
 src/components/flex/Flex.tsx         | 35 ++++++++--------------------
 src/components/flex/flex.stories.tsx | 21 +++++++++--------
 2 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 3ccac4b71..25fb4db88 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -1,41 +1,26 @@
-import React, { CSSProperties, HTMLProps, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 
 const gaps = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
 export type Gap = typeof gaps[number];
 
-type FlexProps = Partial<
-  {
-    children: ReactNode;
-    direction: 'row' | 'column';
-    gap: Gap;
-    alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
-    justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
-    style: CSSProperties;
-  } & HTMLProps<HTMLDivElement>
->;
+type FlexProps = Partial<{
+  children: ReactNode;
+  direction: 'row' | 'column';
+  gap: Gap;
+  alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
+  justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
+}>;
 
-const Flex = ({
-  children,
-  direction = 'row',
-  gap = 0,
-  alignItems,
-  justifyContent,
-  style,
-  ...otherProps
-}: FlexProps) => {
+const Flex = ({ children, direction = 'row', gap = 0, alignItems, justifyContent }: FlexProps) => {
   const classNames = cx(theme['flex'], theme[`${direction}`], {
     [theme[`gap-${gap}`]]: gap > 0,
     [theme[`align-items-${alignItems}`]]: alignItems,
     [theme[`justify-content-${justifyContent}`]]: justifyContent,
   });
 
-  return (
-    <div className={classNames} style={style} {...otherProps}>
-      {children}
-    </div>
-  );
+  return <div className={classNames}>{children}</div>;
 };
 
 Flex.displayName = 'Flex';
diff --git a/src/components/flex/flex.stories.tsx b/src/components/flex/flex.stories.tsx
index eebb9df7e..7b59e59c5 100644
--- a/src/components/flex/flex.stories.tsx
+++ b/src/components/flex/flex.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentStory } from '@storybook/react';
 import React from 'react';
 import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
-import { Flex, Box, TextBody } from '../../index';
+import { Flex, Box } from '../../index';
 import { Heading3 } from '../typography';
 
 export default {
@@ -17,27 +17,28 @@ export default {
   },
 };
 
-const PreppedBox = () => (
+const MintBox = ({ size }: { size: number }) => (
   <Box
     backgroundColor="mint"
     backgroundTint="lightest"
     borderColor="mint"
     borderTint="light"
     borderWidth={1}
-    padding={2}
     borderRadius="rounded"
-  >
-    <TextBody>Content</TextBody>
-  </Box>
+    style={{
+      minHeight: `${size / 2}px`,
+      width: `${size}px`,
+    }}
+  />
 );
 export const basic: ComponentStory<typeof Flex> = (args) => (
   <Box>
     <Heading3>Flex Box</Heading3>
     <Box borderColor="neutral" borderWidth={1} borderRadius="rounded" backgroundColor="neutral" backgroundTint="light">
-      <Flex style={{ minHeight: '100px' }} {...args}>
-        <PreppedBox />
-        <PreppedBox />
-        <PreppedBox />
+      <Flex {...args}>
+        <MintBox size={50} />
+        <MintBox size={150} />
+        <MintBox size={100} />
       </Flex>
     </Box>
   </Box>

From e25d9b35f4f00d7dcb0e9bac71fd6ccddcda6bad Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 11:31:04 +0200
Subject: [PATCH 13/19] :recycle: move properties from class names to inline
 styles

---
 src/components/flex/Flex.tsx  | 16 +++++++++++-----
 src/components/flex/theme.css | 12 ------------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index 25fb4db88..fa2d0e5df 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -2,13 +2,15 @@ import React, { ReactNode } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 
-const gaps = [0, 1, 2, 3, 4, 5, 6, 7, 8] as const;
-export type Gap = typeof gaps[number];
+type Gap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
 type FlexProps = Partial<{
   children: ReactNode;
   direction: 'row' | 'column';
   gap: Gap;
+  // Ideally CSSProperties should be used as the type.
+  // However because of the two-value sytnax of these properties the type includes (string & {}) which is not suitable for us.
+  // The library can be fixed with template literal types.
   alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
   justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
 }>;
@@ -16,11 +18,15 @@ type FlexProps = Partial<{
 const Flex = ({ children, direction = 'row', gap = 0, alignItems, justifyContent }: FlexProps) => {
   const classNames = cx(theme['flex'], theme[`${direction}`], {
     [theme[`gap-${gap}`]]: gap > 0,
-    [theme[`align-items-${alignItems}`]]: alignItems,
-    [theme[`justify-content-${justifyContent}`]]: justifyContent,
   });
 
-  return <div className={classNames}>{children}</div>;
+  const flexStyles = { alignItems, justifyContent };
+
+  return (
+    <div className={classNames} style={flexStyles}>
+      {children}
+    </div>
+  );
 };
 
 Flex.displayName = 'Flex';
diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index bff2acfe9..cde92cb47 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -21,15 +21,3 @@
     gap: $spacer;
   }
 }
-
-@each $item-alignment in (center, flex-start, flex-end, baseline, stretch) {
-  .align-items-$(item-alignment) {
-    align-items: $item-alignment;
-  }
-}
-
-@each $justify in (center, flex-start, flex-end, space-around, space-between, space-evenly) {
-  .justify-content-$(justify) {
-    justify-content: $justify;
-  }
-}

From 779f8935de5909cb59fba744a8e45ac7aef5c208 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 11:53:24 +0200
Subject: [PATCH 14/19] :memo: add nesting story

---
 src/components/flex/flex.stories.tsx | 72 ++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/src/components/flex/flex.stories.tsx b/src/components/flex/flex.stories.tsx
index 7b59e59c5..32e39c490 100644
--- a/src/components/flex/flex.stories.tsx
+++ b/src/components/flex/flex.stories.tsx
@@ -31,6 +31,7 @@ const MintBox = ({ size }: { size: number }) => (
     }}
   />
 );
+
 export const basic: ComponentStory<typeof Flex> = (args) => (
   <Box>
     <Heading3>Flex Box</Heading3>
@@ -48,3 +49,74 @@ basic.args = {
   direction: 'row',
   gap: 0,
 };
+
+export const nesting: ComponentStory<typeof Flex> = () => (
+  <Box borderColor="neutral" borderWidth={1} borderRadius="rounded" backgroundColor="neutral" backgroundTint="light">
+    <Flex gap={5} direction="column">
+      <Box
+        backgroundColor="mint"
+        backgroundTint="lightest"
+        borderColor="mint"
+        borderTint="light"
+        borderWidth={1}
+        borderRadius="rounded"
+        style={{
+          minHeight: '50px',
+          width: '100%',
+        }}
+      />
+      <Flex gap={5} alignItems="flex-start">
+        <Box
+          backgroundColor="teal"
+          backgroundTint="lightest"
+          borderColor="teal"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '100px',
+            width: '20%',
+          }}
+        />
+        <Box
+          backgroundColor="teal"
+          backgroundTint="lightest"
+          borderColor="teal"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '150px',
+            width: '80%',
+          }}
+        />
+      </Flex>
+      <Flex gap={5} justifyContent="center" alignItems="center">
+        <Box
+          backgroundColor="ruby"
+          backgroundTint="lightest"
+          borderColor="ruby"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '100px',
+            width: '50%',
+          }}
+        />
+        <Box
+          backgroundColor="ruby"
+          backgroundTint="lightest"
+          borderColor="ruby"
+          borderTint="light"
+          borderWidth={1}
+          borderRadius="rounded"
+          style={{
+            minHeight: '150px',
+            width: '30%',
+          }}
+        />
+      </Flex>
+    </Flex>
+  </Box>
+);

From 32ca9b4a048828c0f27ac4fac3be7cda693768ac Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 12:01:28 +0200
Subject: [PATCH 15/19] :sparkles: forward ref in Flex component

---
 src/components/flex/Flex.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/flex/Flex.tsx b/src/components/flex/Flex.tsx
index fa2d0e5df..705cebd33 100644
--- a/src/components/flex/Flex.tsx
+++ b/src/components/flex/Flex.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
 import cx from 'classnames';
 import theme from './theme.css';
 
@@ -13,9 +13,10 @@ type FlexProps = Partial<{
   // The library can be fixed with template literal types.
   alignItems: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
   justifyContent: 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly';
+  ref: ForwardedRef<HTMLDivElement>;
 }>;
 
-const Flex = ({ children, direction = 'row', gap = 0, alignItems, justifyContent }: FlexProps) => {
+const Flex = forwardRef(({ children, direction = 'row', gap = 0, alignItems, justifyContent, ref }: FlexProps) => {
   const classNames = cx(theme['flex'], theme[`${direction}`], {
     [theme[`gap-${gap}`]]: gap > 0,
   });
@@ -23,11 +24,11 @@ const Flex = ({ children, direction = 'row', gap = 0, alignItems, justifyContent
   const flexStyles = { alignItems, justifyContent };
 
   return (
-    <div className={classNames} style={flexStyles}>
+    <div className={classNames} style={flexStyles} ref={ref}>
       {children}
     </div>
   );
-};
+});
 
 Flex.displayName = 'Flex';
 

From a28283375bb65578b98200554ae60cc01090c1cd Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 13:57:43 +0200
Subject: [PATCH 16/19] :fire: remove redundant UI color import

---
 src/components/flex/theme.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/flex/theme.css b/src/components/flex/theme.css
index cde92cb47..b8583bb02 100644
--- a/src/components/flex/theme.css
+++ b/src/components/flex/theme.css
@@ -1,4 +1,3 @@
-@import '@teamleader/ui-colors';
 @import '@teamleader/ui-utilities';
 
 .flex {

From 234d658dccb8e95ff7b317e06a1c2d75bdd76bc9 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 13:59:18 +0200
Subject: [PATCH 17/19] :fire: remove redundant storybook style control disable

---
 src/components/flex/flex.stories.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/flex/flex.stories.tsx b/src/components/flex/flex.stories.tsx
index 32e39c490..fb21b83b9 100644
--- a/src/components/flex/flex.stories.tsx
+++ b/src/components/flex/flex.stories.tsx
@@ -7,14 +7,6 @@ import { Heading3 } from '../typography';
 export default {
   component: Flex,
   title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Flex'),
-
-  argTypes: {
-    style: {
-      table: {
-        disable: true,
-      },
-    },
-  },
 };
 
 const MintBox = ({ size }: { size: number }) => (

From 179eb9f2e6ac38b2dc5e01148fc454dc00f5ff2a Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 15:51:14 +0200
Subject: [PATCH 18/19] :memo: update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ed9531da..bbd48be58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [14.6.0]
+
+### Added
+
+- `Flex`: a new component used for layouts ([@farazatarodi](https://github.com/farazatarodi) in [#2185](https://github.com/teamleadercrm/ui/pull/2185))
+
 ## [14.5.7] - 2022-05-26
 
 ### Fixed

From 55de2e4bd8fffb3de7468bca3fb3febeac7c3cc7 Mon Sep 17 00:00:00 2001
From: Faraz <78449551+farazatarodi@users.noreply.github.com>
Date: Wed, 1 Jun 2022 15:57:45 +0200
Subject: [PATCH 19/19] :memo: move changes to unreleased

---
 CHANGELOG.md | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bbd48be58..62d46884c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ### Added
 
+- `Flex`: a new component used for layouts ([@farazatarodi](https://github.com/farazatarodi) in [#2185](https://github.com/teamleadercrm/ui/pull/2185))
+
 ### Changed
 
 ### Deprecated
@@ -12,12 +14,6 @@
 
 ### Dependency updates
 
-## [14.6.0]
-
-### Added
-
-- `Flex`: a new component used for layouts ([@farazatarodi](https://github.com/farazatarodi) in [#2185](https://github.com/teamleadercrm/ui/pull/2185))
-
 ## [14.5.7] - 2022-05-26
 
 ### Fixed