diff --git a/packages/ui/src/components/RowV2/__stories__/Example.stories.tsx b/packages/ui/src/components/RowV2/__stories__/Example.stories.tsx index 6dfd8cd5de..53bb2be0e9 100644 --- a/packages/ui/src/components/RowV2/__stories__/Example.stories.tsx +++ b/packages/ui/src/components/RowV2/__stories__/Example.stories.tsx @@ -5,7 +5,7 @@ import { Container, Separator, Stack, Status, Text } from '../..' export const Example: Story = () => ( - + Status @@ -43,7 +43,7 @@ export const Example: Story = () => ( - + @@ -66,7 +66,7 @@ export const Example: Story = () => ( - +
IPV6 diff --git a/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx b/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx index b4c6b1c3a0..4de50067ab 100644 --- a/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx +++ b/packages/ui/src/components/RowV2/__stories__/Gap.stories.tsx @@ -3,7 +3,7 @@ import { Template } from './Template.stories' export const Gap = Template.bind({}) Gap.args = { - gap: 6, + gap: 2, } Gap.parameters = { diff --git a/packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap index e71d394b4f..aea43624c2 100644 --- a/packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap +++ b/packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap @@ -2,10 +2,9 @@ exports[`RowV2 renders correctly with default props 1`] = ` - .cache-564oi8-StyledRow { + .cache-1dozwql-StyledRow { display: grid; grid-template-columns: repeat(2, 1fr); - grid-gap: 16px; -webkit-align-items: normal; -webkit-box-align: normal; -ms-flex-align: normal; @@ -13,7 +12,7 @@ exports[`RowV2 renders correctly with default props 1`] = ` }
First col @@ -27,10 +26,10 @@ exports[`RowV2 renders correctly with default props 1`] = ` exports[`RowV2 renders correctly with specific align 1`] = ` - .cache-1ca4nox-StyledRow { + .cache-166r2lt-StyledRow { display: grid; grid-template-columns: repeat(2, 1fr); - grid-gap: 8px; + gap: 8px; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -38,7 +37,7 @@ exports[`RowV2 renders correctly with specific align 1`] = ` }
First col @@ -52,10 +51,10 @@ exports[`RowV2 renders correctly with specific align 1`] = ` exports[`RowV2 renders correctly with specific gap 1`] = ` - .cache-ldau5b-StyledRow { + .cache-1nb3qk1-StyledRow { display: grid; grid-template-columns: repeat(2, 1fr); - grid-gap: 8px; + gap: 8px; -webkit-align-items: normal; -webkit-box-align: normal; -ms-flex-align: normal; @@ -63,7 +62,7 @@ exports[`RowV2 renders correctly with specific gap 1`] = ` }
First col diff --git a/packages/ui/src/components/RowV2/index.tsx b/packages/ui/src/components/RowV2/index.tsx index aa9644d548..541ddefdce 100644 --- a/packages/ui/src/components/RowV2/index.tsx +++ b/packages/ui/src/components/RowV2/index.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled' -import type { CSSProperties, ForwardedRef, ReactNode } from 'react' -import { forwardRef } from 'react' +import type { CSSProperties, ReactNode } from 'react' import type { SCWUITheme } from '../../theme' type StyledRowProps = Pick @@ -9,9 +8,9 @@ export const StyledRow = styled('div', { !['templateColumns', 'gap', 'alignItems'].includes(prop), })` display: grid; - ${({ theme, gap = 2, alignItems = 'normal', templateColumns }) => ` + ${({ theme, gap, alignItems = 'normal', templateColumns }) => ` grid-template-columns: ${templateColumns}; - grid-gap: ${theme.space[gap]}; + ${gap ? `gap: ${theme.space[gap]};` : ''} align-items: ${alignItems}; `} ` @@ -19,36 +18,30 @@ export const StyledRow = styled('div', { type RowV2Props = { id?: string className?: string - dataTestId?: string + 'data-testid'?: string children: ReactNode templateColumns: string gap?: keyof SCWUITheme['space'] alignItems?: CSSProperties['alignItems'] } -export const RowV2 = forwardRef( - ( - { - id, - className, - dataTestId, - children, - templateColumns, - alignItems, - gap, - }: RowV2Props, - ref: ForwardedRef, - ) => ( - - {children} - - ), +export const RowV2 = ({ + id, + className, + 'data-testid': dataTestId, + children, + templateColumns, + alignItems, + gap, +}: RowV2Props) => ( + + {children} + )