feat: added wrappers to Flex children components if spacing enabled (#…

…573)
gravity-ui · Mar 22, 2023 · 0a44309 · 0a44309
1 parent 0f49e6b
commit 0a44309
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/components/layout/Flex/Flex.tsx b/src/components/layout/Flex/Flex.tsx
@@ -38,9 +38,11 @@ export interface FlexProps<T extends React.ElementType> extends QAProps {
     alignItems?: AdaptiveProp<'alignItems'>;
     /**
      * `flex-wrap` property
+     *
+     * If value equals `true`, add css property `flex-wrap: wrap`;
      */
-    wrap?: React.CSSProperties['flexWrap'];
-    width?: React.CSSProperties['width'];
+    wrap?: true | React.CSSProperties['flexWrap'];
+    width?: number;
     /**
      * display: inline-flex;
      */
@@ -179,7 +181,7 @@ export const Flex = React.forwardRef(
                     flexDirection:
                         typeof direction === 'function' ? direction(isMediaActive) : direction,
                     flexGrow: grow === true ? 1 : grow,
-                    flexWrap: wrap,
+                    flexWrap: wrap === true ? 'wrap' : wrap,
                     flexBasis: basis,
                     flexShrink: shrink,
                     gap: g ? SPACE_TO_PIXEL[g] : undefined,
@@ -197,7 +199,12 @@ export const Flex = React.forwardRef(
                 data-qa={qa}
                 {...restProps}
             >
-                {children}
+                {space
+                    ? React.Children.map(children, (child) => (
+                          // `space` uses negative margins under the hood. This is hack to prevent wrong background position appearance.
+                          <div className={b('wr')}>{child}</div>
+                      ))
+                    : children}
             </Tag>
         );
     },

diff --git a/src/components/layout/Flex/__stories__/Flex.stories.tsx b/src/components/layout/Flex/__stories__/Flex.stories.tsx
@@ -6,6 +6,7 @@ import {Row} from '../../Row/Row';
 import {Box, LayoutPresenter} from '../../demo';
 import {Container} from '../..';
 import {Text} from '../../../Text';
+import {Button} from '../../../Button/Button';
 
 export default {
     title: 'Layout (unstable)/Flex',
@@ -69,3 +70,21 @@ GapAndRowGap.args = {
     gap: 'l',
     rowGap: 'nano',
 };
+
+const ChildrenWithBgColorTemplate: Story<FlexProps<'div'>> = (args) => (
+    <LayoutPresenter title="Change screen size to 's' to see result">
+        <Container>
+            <Row>
+                <Col>
+                    <Flex {...args} space wrap>
+                        <Button>Some element with background</Button>
+                        <Button>Some element with background</Button>
+                    </Flex>
+                </Col>
+            </Row>
+        </Container>
+    </LayoutPresenter>
+);
+
+export const ChildrenWithBgColor = ChildrenWithBgColorTemplate.bind({});
+ChildrenWithBgColor.args = {};