Add wrap property to Container component (#4548)

Add ability to control flex-wrap property of container so it's flexbox support is more complete.
toptal · Sep 12, 2024 · b44b4bb · b44b4bb
1 parent f8e5c8f
commit b44b4bb
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 1 deletion.
diff --git a/.changeset/proud-queens-own.md b/.changeset/proud-queens-own.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-container': minor
+---
+
+- add wrap property to control flex-wrap
diff --git a/packages/base/Container/src/Container/Container.tsx b/packages/base/Container/src/Container/Container.tsx
@@ -15,6 +15,8 @@ type ContainerType = 'div' | 'span'
 
 type DirectionType = 'row' | 'column' | 'row-reverse' | 'column-reverse'
 
+type WrapType = 'wrap' | 'nowrap' | 'wrap-reverse'
+
 type BorderableType = 'transparent' | 'white'
 
 export interface Props<V extends VariantType = VariantType>
@@ -33,6 +35,8 @@ export interface Props<V extends VariantType = VariantType>
   alignItems?: AlignItemsType
   /** Defines the justify-content style property */
   justifyContent?: JustifyContentType
+  /** Defines flex-wrap style property */
+  wrap?: WrapType
   /** Whether (`white`, `transparent`) container has border or not */
   bordered?: V extends BorderableType ? boolean : never
   /** Whether container has 8px border-radius applied or not */
@@ -82,6 +86,7 @@ export const Container: ContainerProps = documentable(
         direction,
         alignItems,
         justifyContent,
+        wrap,
         style,
         bordered = false,
         rounded = false,
@@ -132,6 +137,8 @@ export const Container: ContainerProps = documentable(
 
             justifyContent && alignmentClasses.justifyContent[justifyContent],
 
+            wrap && alignmentClasses.wrap[wrap],
+
             bordered &&
               isBorderedVariant &&
               'border border-solid border-gray-200',

diff --git a/packages/base/Container/src/Container/story/Wrap.example.tsx b/packages/base/Container/src/Container/story/Wrap.example.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { Container, Grid, Typography } from '@toptal/picasso'
+
+const LargeContent = () => {
+  return (
+    <>
+      <Container variant='red' padded='xlarge'>
+        1
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        2
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        3
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        4
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        5
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        6
+      </Container>
+      <Container variant='red' padded='xlarge'>
+        7
+      </Container>
+    </>
+  )
+}
+
+const Example = () => (
+  <Grid>
+    <Grid.Item sm={6} style={{ overflow: 'hidden' }}>
+      <Typography variant='heading' size='medium'>
+        Default (nowrap)
+      </Typography>
+
+      <Container top='small' flex gap='xlarge'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+    <Grid.Item sm={6} style={{ overflow: 'hidden' }}>
+      <Typography variant='heading' size='medium'>
+        Explicit nowrap
+      </Typography>
+
+      <Container top='small' flex gap='xlarge' wrap='nowrap'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+    <Grid.Item sm={6}>
+      <Typography variant='heading' size='medium'>
+        Wrap
+      </Typography>
+      <Container top='small' flex gap='xlarge' wrap='wrap'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+    <Grid.Item sm={6}>
+      <Typography variant='heading' size='medium'>
+        Wrap (reverse)
+      </Typography>
+
+      <Container top='small' flex gap='xlarge' wrap='wrap-reverse'>
+        <LargeContent />
+      </Container>
+    </Grid.Item>
+  </Grid>
+)
+
+export default Example
diff --git a/packages/base/Container/src/Container/story/index.jsx b/packages/base/Container/src/Container/story/index.jsx
@@ -4,7 +4,7 @@ import PicassoBook from '~/.storybook/components/PicassoBook'
 const page = PicassoBook.section('Layout').createPage(
   'Container',
   `Use Container to add space between 2 elements.
-  
+
   ${PicassoBook.createSourceLink(__filename)}
   `
 )
@@ -66,3 +66,4 @@ Spacing is aligned with BASE design and gets transformed into **rem** units in f
     'TextAlign',
     'base/Container'
   )
+  .addExample('Container/story/Wrap.example.tsx', 'Wrap', 'base/Container')
diff --git a/packages/base/Container/src/Container/styles.ts b/packages/base/Container/src/Container/styles.ts
@@ -57,6 +57,11 @@ export const alignmentClasses = {
     'row-reverse': 'flex-row-reverse',
     'column-reverse': 'flex-col-reverse',
   },
+  wrap: {
+    wrap: 'flex-wrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+    nowrap: 'flex-nowrap',
+  },
 } as const
 
 export const variantClassesByColor: Record<VariantType, string> = {