fix: feedbacks

packages/ui/src/components/RowV2/__stories__/Example.stories.tsx

@@ -5,7 +5,7 @@ import { Container, Separator, Stack, Status, Text } from '../..'
 export const Example: Story = () => (
   <Container title="Overview">
     <Stack gap={2}>
-      <RowV2 templateColumns="repeat(4, 1fr)">
+      <RowV2 templateColumns="repeat(4, 1fr)" gap={2}>
         <Stack>
           <Text as="span" variant="bodyStrong">
             Status
@@ -43,7 +43,7 @@ export const Example: Story = () => (
         </Stack>
       </RowV2>
       <Separator />
-      <RowV2 templateColumns="repeat(2, 1fr)">
+      <RowV2 templateColumns="repeat(2, 1fr)" gap={2}>
         <Stack>
           <Stack direction="row" gap={2}>
             <Text as="span" variant="bodyStrong">
@@ -66,7 +66,7 @@ export const Example: Story = () => (
         </Stack>
       </RowV2>
       <Separator />
-      <RowV2 templateColumns="repeat(3, 1fr)">
+      <RowV2 templateColumns="repeat(3, 1fr)" gap={2}>
         <div>
           <Text as="div" variant="bodyStrong">
             IPV6

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 = {

packages/ui/src/components/RowV2/__tests__/__snapshots__/index.tsx.snap

@@ -2,18 +2,17 @@
 
 exports[`RowV2 renders correctly with default props 1`] = `
 <DocumentFragment>
-  .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;
   align-items: normal;
 }
 
 <div
-    class="cache-564oi8-StyledRow e1ddijpe0"
+    class="cache-1dozwql-StyledRow e1ddijpe0"
   >
     <div>
       First col
@@ -27,18 +26,18 @@ exports[`RowV2 renders correctly with default props 1`] = `
 
 exports[`RowV2 renders correctly with specific align 1`] = `
 <DocumentFragment>
-  .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;
   align-items: center;
 }
 
 <div
-    class="cache-1ca4nox-StyledRow e1ddijpe0"
+    class="cache-166r2lt-StyledRow e1ddijpe0"
   >
     <div>
       First col
@@ -52,18 +51,18 @@ exports[`RowV2 renders correctly with specific align 1`] = `
 
 exports[`RowV2 renders correctly with specific gap 1`] = `
 <DocumentFragment>
-  .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;
   align-items: normal;
 }
 
 <div
-    class="cache-ldau5b-StyledRow e1ddijpe0"
+    class="cache-1nb3qk1-StyledRow e1ddijpe0"
   >
     <div>
       First col

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<RowV2Props, 'gap' | 'templateColumns' | 'alignItems'>
@@ -9,46 +8,40 @@ export const StyledRow = styled('div', {
     !['templateColumns', 'gap', 'alignItems'].includes(prop),
 })<StyledRowProps>`
   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};
   `}
 `
 
 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<HTMLDivElement>,
-  ) => (
-    <StyledRow
-      ref={ref}
-      id={id}
-      className={className}
-      data-testid={dataTestId}
-      gap={gap}
-      templateColumns={templateColumns}
-      alignItems={alignItems}
-    >
-      {children}
-    </StyledRow>
-  ),
+export const RowV2 = ({
+  id,
+  className,
+  'data-testid': dataTestId,
+  children,
+  templateColumns,
+  alignItems,
+  gap,
+}: RowV2Props) => (
+  <StyledRow
+    id={id}
+    className={className}
+    data-testid={dataTestId}
+    gap={gap}
+    templateColumns={templateColumns}
+    alignItems={alignItems}
+  >
+    {children}
+  </StyledRow>
 )