New flex container (#466)

* new flex container * fix gaps typing, refactor * Fix * deprecate old version, bump version * Fix formatting * Fix closing tags * Fix piechart * CR fixes * CR fixes * fix typing
nordcloud · Jun 22, 2022 · 4e6e247 · 4e6e247
1 parent 6ee02e0
commit 4e6e247
Show file tree

Hide file tree

Showing 25 changed files with 727 additions and 609 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "5.8.1",
+  "version": "5.9.0",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/components/box/Box.stories.mdx b/src/components/box/Box.stories.mdx
@@ -8,7 +8,7 @@ import {
 } from "@storybook/addon-docs";
 import { Box } from ".";
 import { Spacer } from "../spacer";
-import { GnuiContainer, Flex } from "../container";
+import { GnuiContainer, FlexContainer } from "../container";
 import theme from "../../theme";
 
 <Meta title="Components/Box" component={Box} />
@@ -53,12 +53,12 @@ import theme from "../../theme";
 
 <Canvas>
   <Story name="boxStyle">
-    <Flex justifyContent="space-evenly">
+    <FlexContainer justifyContent="space-evenly">
       <Box boxStyle="lightGrey">Light grey box</Box>
-    </Flex>
-    <Flex justifyContent="space-evenly" mt="1rem">
+    </FlexContainer>
+    <FlexContainer justifyContent="space-evenly" mt="1rem">
       <Box boxStyle="grey">Grey box</Box>
-    </Flex>
+    </FlexContainer>
   </Story>
 </Canvas>
 

diff --git a/src/components/button/Button.stories.mdx b/src/components/button/Button.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas } from "@storybook/addon-docs";
 import { Button } from ".";
-import { GnuiContainer, Flex } from "../container";
+import { GnuiContainer, FlexContainer } from "../container";
 
 <Meta title="Components/Button" component={Button} />
 
@@ -38,10 +38,10 @@ import { GnuiContainer, Flex } from "../container";
 
 <Canvas>
   <Story name="button/severity">
-    <Flex justifyContent="space-evenly">
+    <FlexContainer justifyContent="space-evenly">
       <Button severity="medium">Secondary button</Button>
       <Button severity="low">Button for use as an icon</Button>
-    </Flex>
+    </FlexContainer>
   </Story>
 </Canvas>
 
@@ -51,11 +51,11 @@ import { GnuiContainer, Flex } from "../container";
 
 <Canvas>
   <Story name="size">
-    <Flex justifyContent="space-evenly">
+    <FlexContainer justifyContent="space-evenly">
       <Button size="sm">Size SM</Button>
       <Button size="md">Size MD</Button>
       <Button>Size Default</Button>
-    </Flex>
+    </FlexContainer>
   </Story>
 </Canvas>
 
@@ -65,12 +65,12 @@ import { GnuiContainer, Flex } from "../container";
 
 <Canvas>
   <Story name="icons">
-    <Flex justifyContent="space-evenly">
+    <FlexContainer justifyContent="space-evenly">
       <Button icon="plus" severity="low">
         Label
       </Button>
       <Button icon="plus" severity="low" />
-    </Flex>
+    </FlexContainer>
   </Story>
 </Canvas>
 
@@ -80,11 +80,11 @@ import { GnuiContainer, Flex } from "../container";
 
 <Canvas>
   <Story name="iconRight">
-    <Flex justifyContent="space-evenly">
+    <FlexContainer justifyContent="space-evenly">
       <Button iconRight severity="low" icon="trash">
         Delete Item
       </Button>
-    </Flex>
+    </FlexContainer>
   </Story>
 </Canvas>
 
@@ -94,14 +94,14 @@ import { GnuiContainer, Flex } from "../container";
 
 <Canvas>
   <Story name="initialState">
-    <Flex justifyContent="space-evenly">
+    <FlexContainer justifyContent="space-evenly">
       <Button initialState="loading">Save changes</Button>
       <Button initialState="success">Save changes</Button>
       <Button initialState="error">Save changes</Button>
       <Button initialState="loading" />
       <Button initialState="success" />
       <Button initialState="error" />
-    </Flex>
+    </FlexContainer>
   </Story>
 </Canvas>
 
@@ -111,7 +111,7 @@ import { GnuiContainer, Flex } from "../container";
 
 <Canvas>
   <Story name="color">
-    <Flex justifyContent="space-evenly">
+    <FlexContainer justifyContent="space-evenly">
       <Button color="danger" icon="danger">
         Danger color
       </Button>
@@ -122,7 +122,7 @@ import { GnuiContainer, Flex } from "../container";
       <Button color="warning">Warning color</Button>
       <Button color="notification">Notification color</Button>
       <Button color="#FF1493">HEX color</Button>
-    </Flex>
+    </FlexContainer>
   </Story>
 </Canvas>
 

diff --git a/src/components/checkboxTree/components/RenderComposition.tsx b/src/components/checkboxTree/components/RenderComposition.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import theme from "../../../theme";
 import { HeaderIcon as ToggleIcon } from "../../accordion";
 import { Checkbox } from "../../checkbox";
-import { Flex } from "../../container";
+import { FlexContainer } from "../../container";
 import { SVGIcon } from "../../svgicon";
 
 import { Composition, RenderCompositionProps } from "../types";
@@ -72,7 +72,7 @@ export function RenderComposition({
       isRootElement={uid.split(preferredSeparator).length === 1}
     >
       <Styled.TreeItem isTopItem={!!isFirstElement}>
-        <Flex>
+        <FlexContainer>
           <div css={{ width: theme.spacing.spacing04 }}>
             {children && children.length > 0 ? (
               <ToggleIcon
@@ -99,7 +99,7 @@ export function RenderComposition({
               onChange={() => handleSelect({ uid, label, children })}
             />
           </Styled.CheckboxWrap>
-        </Flex>
+        </FlexContainer>
       </Styled.TreeItem>
       {expandedList.includes(uid) &&
         children &&

diff --git a/src/components/container/Container.tsx b/src/components/container/Container.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import styled, { css } from "styled-components";
 import { space, SpaceProps } from "styled-system";
 import theme from "../../theme";
+import { LengthUnitSuffix, Unit } from "./types";
 
 type StyledContainerProps = {
   width?: string;
@@ -35,6 +36,9 @@ type FlexProps = {
   margin?: string;
 } & SpaceProps;
 
+/**
+ * @deprecated Please use FlexContainer
+ */
 export const Flex = styled(Container)<FlexProps>`
   display: flex;
 
@@ -47,3 +51,69 @@ export const Flex = styled(Container)<FlexProps>`
 
   ${space}
 `;
+
+// New implementation of FlexContainer to replace Flex in the future.
+type FlexContainerProps = {
+  alignItems?:
+    | "stretch"
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "start"
+    | "end"
+    | "self-start"
+    | "self-end";
+  alignContent?:
+    | "stretch"
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "start"
+    | "end"
+    | "self-start"
+    | "self-end";
+  justifyContent?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "start"
+    | "end"
+    | "left"
+    | "right";
+  grow?: number;
+  wrap?: "nowrap" | "wrap" | "wrap-reverse";
+  direction?: "row" | "row-reverse" | "column" | "column-reverse";
+  gap?: Unit<LengthUnitSuffix> | "0" | 0;
+  columnGap?: Unit<LengthUnitSuffix> | "0" | 0;
+  rowGap?: Unit<LengthUnitSuffix> | "0" | 0;
+} & SpaceProps;
+
+function getFlexCss(props: FlexContainerProps) {
+  return css`
+    align-items: ${props.alignItems ?? "center"};
+    align-content: ${props.alignContent ?? "center"};
+    justify-content: ${props.justifyContent ?? "flex-start"};
+    flex-wrap: ${props.wrap ?? "no-wrap"};
+    flex-direction: ${props.direction ?? "row"};
+    flex-grow: ${props.grow ?? 0};
+    gap: ${props.gap ?? 0};
+    column-gap: ${props.columnGap ?? 0};
+    row-gap: ${props.rowGap ?? 0};
+  `;
+}
+
+export const FlexContainer = styled.div<FlexContainerProps>`
+  display: flex;
+  ${getFlexCss}
+
+  ${space}
+`;
diff --git a/src/components/container/index.tsx b/src/components/container/index.tsx
@@ -1,3 +1,3 @@
 export { Container as GnuiContainer } from "./Container";
 export type { ContainerProps as GnuiContainerProps } from "./Container";
-export { Flex } from "./Container";
+export { Flex, FlexContainer } from "./Container";
diff --git a/src/components/container/types.ts b/src/components/container/types.ts
@@ -0,0 +1,44 @@
+const AbsoluteLengthUnitSuffix = {
+  Pixel: "px",
+  Centimeter: "cm",
+  Millimeter: "mm",
+  Quarter: "Q",
+  Inch: "in",
+  Pica: "pc",
+  Point: "pt",
+} as const;
+type AbsoluteLengthUnitSuffix =
+  typeof AbsoluteLengthUnitSuffix[keyof typeof AbsoluteLengthUnitSuffix];
+
+const RelativeLengthUnitSuffix = {
+  REM: "rem",
+  EM: "em",
+  ViewWidth: "vw",
+  ViewHeight: "vh",
+  ViewMin: "vmin",
+  ViewMax: "vmax",
+} as const;
+type RelativeLengthUnitSuffix =
+  typeof RelativeLengthUnitSuffix[keyof typeof RelativeLengthUnitSuffix];
+
+const MultiplicationUnitSuffix = {
+  Percent: "%",
+  Magnification: "",
+} as const;
+type MultiplicationUnitSuffix =
+  typeof MultiplicationUnitSuffix[keyof typeof MultiplicationUnitSuffix];
+
+const LengthUnitSuffix = {
+  ...AbsoluteLengthUnitSuffix,
+  ...RelativeLengthUnitSuffix,
+};
+export type LengthUnitSuffix =
+  typeof LengthUnitSuffix[keyof typeof LengthUnitSuffix];
+
+const UnitSuffix = {
+  ...LengthUnitSuffix,
+  ...MultiplicationUnitSuffix,
+};
+type UnitSuffix = typeof UnitSuffix[keyof typeof UnitSuffix];
+
+export type Unit<Suffix extends UnitSuffix> = `${number}${Suffix}`;
diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import styled from "styled-components";
 import theme from "../../theme";
 import { Button, ButtonProps } from "../button";
-import { GnuiContainer, Flex, GnuiContainerProps } from "../container";
+import { GnuiContainer, FlexContainer, GnuiContainerProps } from "../container";
 import { StyledInputProps } from "../input/types";
 
 const StyledSubmit = styled.input`
@@ -48,9 +48,13 @@ type FormButtonsProps = {
 
 export function FormButtons({ children, ...props }: FormButtonsProps) {
   return (
-    <Flex margin="1rem 0" justifyContent="flex-end" {...props}>
+    <FlexContainer
+      css={{ margin: `${theme.spacing.spacing04} 0` }}
+      justifyContent="flex-end"
+      {...props}
+    >
       {children}
-    </Flex>
+    </FlexContainer>
   );
 }
 

diff --git a/src/components/input/Label.tsx b/src/components/input/Label.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled, { css } from "styled-components";
 import theme from "../../theme";
-import { Flex } from "../container";
+import { FlexContainer } from "../container";
 
 type Props = React.LabelHTMLAttributes<HTMLLabelElement> & {
   required?: boolean;
@@ -27,10 +27,10 @@ const StyledLabel = styled.label<Pick<Props, "required">>`
 
 export function Label({ name = "Label", required = false, ...props }: Props) {
   return (
-    <Flex>
+    <FlexContainer>
       <StyledLabel required={required} {...props}>
         {name}
       </StyledLabel>
-    </Flex>
+    </FlexContainer>
   );
 }