fix(suite): Flex naming

packages/components/src/components/Flex/Flex.stories.tsx

@@ -1,10 +1,13 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { ArgTypes, Meta, StoryObj } from '@storybook/react';
 import {
     Flex as FlexComponent,
     FlexProps,
     flexAlignItems,
     flexDirection,
     flexJustifyContent,
+    flexWrap,
+    Row as RowComponent,
+    Column as ColumnComponent,
 } from './Flex';
 import { spacings } from '@trezor/theme';
 import styled from 'styled-components';
@@ -13,6 +16,10 @@ const Container = styled.div`
     width: 100%;
 `;
 
+const Strong = styled.span`
+    color: red;
+    font-weight: 900;
+`;
 const Box = styled.div<{ $color: string }>`
     background: ${({ $color }) => $color};
     padding: 10px 20px;
@@ -21,63 +28,109 @@ const Box = styled.div<{ $color: string }>`
     font-weight: 900;
 `;
 
+const args: Partial<FlexProps> = {
+    children: [
+        <Box key="box-a" $color="salmon">
+            A
+        </Box>,
+        <Box key="box-b" $color="green">
+            B
+        </Box>,
+        <Box key="box-c" $color="royalblue">
+            C
+        </Box>,
+    ],
+
+    gap: 8,
+    margin: { top: undefined, right: undefined, bottom: undefined, left: undefined },
+    flexWrap: 'wrap',
+};
+const argTypes: Partial<ArgTypes<FlexProps>> = {
+    justifyContent: {
+        options: flexJustifyContent,
+        control: {
+            type: 'select',
+        },
+    },
+    alignItems: {
+        options: flexAlignItems,
+        control: {
+            type: 'select',
+        },
+    },
+    gap: {
+        options: Object.values(spacings),
+        control: {
+            type: 'select',
+        },
+    },
+    flex: {
+        type: 'string',
+    },
+    flexWrap: {
+        options: Object.values(flexWrap),
+        control: {
+            type: 'select',
+        },
+    },
+    margin: {
+        table: {
+            category: 'Frame props',
+        },
+    },
+};
+
 const meta: Meta = {
     title: 'Misc/Flex',
     component: FlexComponent,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Flexbox komponenta umožňující snadné nastavení uspořádání prvků.',
+            },
+        },
+    },
 } as Meta;
 export default meta;
 
+export const Row: StoryObj<FlexProps> = {
+    render: args => (
+        <Container>
+            <RowComponent {...args} />
+        </Container>
+    ),
+    args,
+    argTypes,
+};
+
+export const Column: StoryObj<FlexProps> = {
+    render: args => (
+        <Container>
+            <ColumnComponent {...args} />
+        </Container>
+    ),
+    args,
+    argTypes,
+};
+
 export const Flex: StoryObj<FlexProps> = {
     render: args => (
         <Container>
+            <h3>
+                Please prefer using <Strong>Row</Strong> or <Strong>Column</Strong> component
+            </h3>
+            <br />
             <FlexComponent {...args} />
         </Container>
     ),
-    args: {
-        children: [
-            <Box key="box-a" $color="salmon">
-                A
-            </Box>,
-            <Box key="box-b" $color="green">
-                B
-            </Box>,
-            <Box key="box-c" $color="royalblue">
-                C
-            </Box>,
-        ],
-        direction: 'row',
-        gap: 8,
-        margin: { top: undefined, right: undefined, bottom: undefined, left: undefined },
-    },
+    args: { ...args, direction: 'row' },
     argTypes: {
+        ...argTypes,
         direction: {
             options: flexDirection,
             control: {
                 type: 'radio',
             },
         },
-        justifyContent: {
-            options: flexJustifyContent,
-            control: {
-                type: 'select',
-            },
-        },
-        alignItems: {
-            options: flexAlignItems,
-            control: {
-                type: 'select',
-            },
-        },
-        gap: {
-            options: Object.values(spacings),
-            control: {
-                type: 'select',
-            },
-        },
-        margin: {
-            table: {
-                category: 'Frame props',
-            },
-        },
     },
 };

packages/components/src/components/Flex/Flex.tsx

@@ -4,6 +4,7 @@ import { FrameProps, TransientFrameProps, withFrameProps } from '../common/frame
 import { makePropsTransient } from '../../utils/transientProps';
 
 export const flexDirection = ['column-reverse', 'column', 'row-reverse', 'row'] as const;
+export const flexWrap = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 
 export const flexJustifyContent = [
     'center',
@@ -36,7 +37,8 @@ export const flexAlignItems = [
 export type FlexDirection = (typeof flexDirection)[number];
 export type FlexJustifyContent = (typeof flexJustifyContent)[number];
 export type FlexAlignItems = (typeof flexAlignItems)[number];
-export type Flex = string;
+export type Flex = string | number;
+export type FlexWrap = (typeof flexWrap)[number];
 
 const Container = styled.div<
     TransientFrameProps & {
@@ -45,11 +47,12 @@ const Container = styled.div<
         $alignItems: FlexAlignItems;
         $direction: FlexDirection;
         $flex: Flex;
+        $flexWrap: FlexWrap;
     }
 >`
     display: flex;
+    flex-flow: ${({ $direction, $flexWrap }) => `${$direction} ${$flexWrap}`};
     flex: ${({ $flex }) => $flex};
-    flex-direction: ${({ $direction }) => $direction};
     gap: ${({ $gap }) => $gap}px;
     justify-content: ${({ $justifyContent }) => $justifyContent};
     align-items: ${({ $alignItems }) => $alignItems};
@@ -64,6 +67,7 @@ export type FlexProps = FrameProps & {
     children: React.ReactNode;
     direction?: FlexDirection;
     flex?: Flex;
+    flexWrap?: FlexWrap;
 };
 
 export const Flex = ({
@@ -74,6 +78,7 @@ export const Flex = ({
     direction = 'row',
     margin,
     flex = 'auto',
+    flexWrap = 'nowrap',
 }: FlexProps) => {
     const frameProps = {
         margin,
@@ -86,12 +91,13 @@ export const Flex = ({
             $alignItems={alignItems}
             $direction={direction}
             $flex={flex}
+            $flexWrap={flexWrap}
             {...makePropsTransient(frameProps)}
         >
             {children}
         </Container>
     );
 };
 
-export const Rows = (props: FlexProps) => <Flex {...props} direction="column" />;
-export const Columns = (props: FlexProps) => <Flex {...props} direction="row" />;
+export const Column = (props: FlexProps) => <Flex {...props} direction="column" />;
+export const Row = (props: FlexProps) => <Flex {...props} direction="row" />;

packages/components/src/components/Passphrase/PassphraseTypeCardHeading.tsx

@@ -4,7 +4,7 @@ import styled, { useTheme } from 'styled-components';
 import { Tooltip, TooltipProps } from '../Tooltip/Tooltip';
 import { WalletType } from './types';
 import { Icon } from '../assets/Icon/Icon';
-import { Columns, Rows } from '../Flex/Flex';
+import { Column, Row } from '../Flex/Flex';
 import { ReactNode } from 'react';
 
 const IconWrapper = styled.div<{ $type: WalletType }>`
@@ -26,7 +26,7 @@ const Description = styled.div<{ $hasTopMargin?: boolean }>`
     ${typography.label}
 `;
 
-const ArrowCol = styled(Rows)`
+const ArrowCol = styled(Column)`
     flex: 0 0 auto;
     height: 100%;
     justify-content: center;
@@ -58,15 +58,15 @@ export const PassphraseTypeCardHeading = ({
     const theme = useTheme();
 
     return (
-        <Columns gap={spacings.xl}>
+        <Row gap={spacings.xl}>
             <IconWrapper $type={type}>
                 {type === 'standard' ? (
                     <Icon size={24} icon="WALLET" color={theme.iconPrimaryDefault} />
                 ) : (
                     <Icon size={24} icon="LOCK" color={theme.iconSubdued} />
                 )}
             </IconWrapper>
-            <Rows justifyContent="center" flex="1">
+            <Column justifyContent="center" flex="1">
                 <WalletTitle
                     $withMargin={type === 'hidden'}
                     data-test={type === 'hidden' && '@tooltip/passphrase-tooltip'}
@@ -86,12 +86,12 @@ export const PassphraseTypeCardHeading = ({
                     )}
                 </WalletTitle>
                 <Description>{description}</Description>
-            </Rows>
+            </Column>
             {type === 'standard' && (
                 <ArrowCol>
                     <Icon icon="ARROW_RIGHT" color={theme.iconSubdued} />
                 </ArrowCol>
             )}
-        </Columns>
+        </Row>
     );
 };

packages/suite/src/components/suite/modals/ReduxModal/DeviceContextModal/PassphraseWalletConfirmationStep1.tsx

@@ -1,4 +1,4 @@
-import { Rows, Card, Columns, Button, Text } from '@trezor/components';
+import { Column, Card, Row, Button, Text } from '@trezor/components';
 import { HELP_CENTER_PASSPHRASE_URL } from '@trezor/urls';
 import { Translation } from 'src/components/suite/Translation';
 import { TrezorLink } from 'src/components/suite/TrezorLink';
@@ -19,11 +19,11 @@ export const PassphraseWalletConfirmationStep1 = ({
         <PassphraseHeading>
             <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_TITLE" />
         </PassphraseHeading>
-        <Rows gap={8}>
+        <Column gap={8}>
             <Card
                 paddingType="small"
                 label={
-                    <Columns justifyContent="space-between">
+                    <Row justifyContent="space-between">
                         <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_HINT" />
                         <TrezorLink type="hint" variant="nostyle" href={HELP_CENTER_PASSPHRASE_URL}>
                             <Button
@@ -35,10 +35,10 @@ export const PassphraseWalletConfirmationStep1 = ({
                                 <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_HINT_LINK" />
                             </Button>
                         </TrezorLink>
-                    </Columns>
+                    </Row>
                 }
             >
-                <Rows gap={12}>
+                <Column gap={12}>
                     <Text typographyStyle="highlight">
                         <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_UNUSED_WALLET_DESCRIPTION" />
                     </Text>
@@ -52,10 +52,10 @@ export const PassphraseWalletConfirmationStep1 = ({
                     >
                         <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_UNUSED_WALLET_BUTTON" />
                     </Button>
-                </Rows>
+                </Column>
             </Card>
             <Card paddingType="small">
-                <Rows gap={12}>
+                <Column gap={12}>
                     <Text typographyStyle="highlight">
                         <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_WITH_FUNDS_DESCRIPTION" />
                     </Text>
@@ -68,8 +68,8 @@ export const PassphraseWalletConfirmationStep1 = ({
                     >
                         <Translation id="TR_PASSPHRASE_WALLET_CONFIRMATION_STEP1_OPEN_WITH_FUNDS_BUTTON" />
                     </Button>
-                </Rows>
+                </Column>
             </Card>
-        </Rows>
+        </Column>
     </>
 );

packages/suite/src/views/backup/index.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Paragraph, Button, Image, Flex } from '@trezor/components';
+import { Paragraph, Button, Image, Row } from '@trezor/components';
 import { HELP_CENTER_FAILED_BACKUP_URL } from '@trezor/urls';
 import { selectDevice } from '@suite-common/wallet-core';
 
@@ -221,12 +221,12 @@ export const Backup = ({ cancelable, onCancel }: ForegroundAppProps) => {
             )}
 
             {backup.status === 'error' && (
-                <Flex justifyContent="center">
+                <Row justifyContent="center">
                     <VerticalCenter>
                         <StyledImage image="UNI_ERROR" />
                         <StyledP data-test="@backup/error-message">{backup.error}</StyledP>
                     </VerticalCenter>
-                </Flex>
+                </Row>
             )}
         </StyledModal>
     );