fix: table and row to take in account checkbox and expandable

scaleway · Dec 11, 2024 · 6cea019 · 6cea019
1 parent 53a0586
commit 6cea019
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 79 deletions.
diff --git a/packages/ui/src/components/List/Row.tsx b/packages/ui/src/components/List/Row.tsx
@@ -53,10 +53,12 @@ const StyledCheckbox = styled(Checkbox, {
 `
 
 export const StyledRow = styled('tr', {
-  shouldForwardProp: prop => !['sentiment', 'columns'].includes(prop),
+  shouldForwardProp: prop =>
+    !['sentiment', 'columns', 'columnsStartAt'].includes(prop),
 })<{
   sentiment: (typeof SENTIMENTS)[number]
   columns: ColumnProps[]
+  columnsStartAt?: number
 }>`
   /* List itself also apply style about common templating between HeaderRow and other Rows */
 
@@ -133,10 +135,10 @@ export const StyledRow = styled('tr', {
     cursor: not-allowed;
   }
 
-  ${({ columns }) =>
+  ${({ columns, columnsStartAt }) =>
     columns.map(
       (column, index) => `
-    td:nth-of-type(${index + 1}) {
+    td:nth-of-type(${index + 1 + (columnsStartAt ?? 0)}) {
       ${column.width ? `width: ${column.width};` : ''}
       ${column.minWidth ? `min-width: ${column.minWidth};` : ''}
       ${column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
@@ -291,6 +293,7 @@ export const Row = forwardRef(
           data-highlight={selectable && !!selectedRowIds[id]}
           data-testid={dataTestid}
           columns={columns}
+          columnsStartAt={(selectable ? 1 : 0) + (expandButton ? 1 : 0)}
         >
           {selectable ? (
             <NoPaddingCell preventClick={canClickRowToExpand}>

diff --git a/packages/ui/src/components/Table/Row.tsx b/packages/ui/src/components/Table/Row.tsx
@@ -48,16 +48,21 @@ const colorChange = (theme: Theme) => keyframes`
 `
 
 const StyledTr = styled('tr', {
-  shouldForwardProp: prop => !['highlightAnimation', 'columns'].includes(prop),
-})<{ highlightAnimation?: boolean; columns: ColumnProps[] }>`
+  shouldForwardProp: prop =>
+    !['highlightAnimation', 'columns', 'columnsStartAt'].includes(prop),
+})<{
+  highlightAnimation?: boolean
+  columns: ColumnProps[]
+  columnsStartAt?: number
+}>`
   animation: ${({ highlightAnimation, theme }) =>
     highlightAnimation ? colorChange(theme) : undefined}
     3s linear;
 
-  ${({ columns }) =>
+  ${({ columns, columnsStartAt }) =>
     columns.map(
       (column, index) => `
-    td:nth-of-type(${index + 1}) {
+    td:nth-of-type(${index + 1 + (columnsStartAt ?? 0)}) {
       ${column.width ? `width: ${column.width};` : ''}
       ${column.minWidth ? `min-width: ${column.minWidth};` : ''}
       ${column.maxWidth ? `max-width: ${column.maxWidth};` : ''}
@@ -172,6 +177,7 @@ export const Row = ({
         highlightAnimation={highlightAnimation}
         role={canClickRowToExpand ? 'button row' : 'row'}
         columns={columns}
+        columnsStartAt={(selectable ? 1 : 0) + (expandButton ? 1 : 0)}
       >
         {selectable ? (
           <NoPaddingCell maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}>

diff --git a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -3931,12 +3931,6 @@ exports[`Table > Should render correctly with selectable and shift click 1`] = `
   animation: 3s linear;
 }
 
-.emotion-50 td:nth-of-type(1) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
 .emotion-50 td:nth-of-type(2) {
   width: 100px;
   min-width: 100px;
@@ -3961,36 +3955,7 @@ exports[`Table > Should render correctly with selectable and shift click 1`] = `
   max-width: 200px;
 }
 
-.emotion-50 {
-  -webkit-animation: 3s linear;
-  animation: 3s linear;
-}
-
-.emotion-50 td:nth-of-type(1) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-50 td:nth-of-type(2) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-50 td:nth-of-type(3) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-50 td:nth-of-type(4) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-50 td:nth-of-type(5) {
+.emotion-50 td:nth-of-type(6) {
   width: 100px;
   min-width: 100px;
   max-width: 200px;
@@ -5629,12 +5594,6 @@ exports[`Table > Should render correctly with selectable then click on first row
   animation: 3s linear;
 }
 
-.emotion-48 td:nth-of-type(1) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
 .emotion-48 td:nth-of-type(2) {
   width: 100px;
   min-width: 100px;
@@ -5659,36 +5618,7 @@ exports[`Table > Should render correctly with selectable then click on first row
   max-width: 200px;
 }
 
-.emotion-48 {
-  -webkit-animation: 3s linear;
-  animation: 3s linear;
-}
-
-.emotion-48 td:nth-of-type(1) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-48 td:nth-of-type(2) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-48 td:nth-of-type(3) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-48 td:nth-of-type(4) {
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-.emotion-48 td:nth-of-type(5) {
+.emotion-48 td:nth-of-type(6) {
   width: 100px;
   min-width: 100px;
   max-width: 200px;