fix: checkbox and expandable row max width

packages/ui/src/components/List/HeaderRow.tsx

@@ -2,12 +2,9 @@ import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 import { Checkbox } from '../Checkbox'
-import {
-  EXPANDABLE_COLUMN_SIZE,
-  SELECTABLE_CHECKBOX_SIZE,
-} from '../Table/constants'
 import { HeaderCell } from './HeaderCell'
 import { useListContext } from './ListContext'
+import { EXPANDABLE_COLUMN_SIZE, SELECTABLE_CHECKBOX_SIZE } from './constants'
 
 const StyledHeaderRow = styled.tr`
   /* List itself also apply style about common templating between HeaderRow and other Rows */
@@ -61,7 +58,9 @@ export const HeaderRow = ({ children, hasSelectAllColumn }: RowProps) => {
     <thead>
       <StyledHeaderRow>
         {hasSelectAllColumn ? (
-          <NoPaddingHeaderCell width={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}>
+          <NoPaddingHeaderCell
+            maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}
+          >
             <Checkbox
               name="list-select-checkbox"
               value="all"
@@ -73,7 +72,7 @@ export const HeaderRow = ({ children, hasSelectAllColumn }: RowProps) => {
           </NoPaddingHeaderCell>
         ) : null}
         {expandButton ? (
-          <NoPaddingHeaderCell width={theme.sizing[EXPANDABLE_COLUMN_SIZE]}>
+          <NoPaddingHeaderCell maxWidth={theme.sizing[EXPANDABLE_COLUMN_SIZE]}>
             {null}
           </NoPaddingHeaderCell>
         ) : null}

packages/ui/src/components/List/Row.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { ForwardedRef, ReactNode } from 'react'
 import {
@@ -14,6 +15,7 @@ import { Checkbox } from '../Checkbox'
 import { Tooltip } from '../Tooltip'
 import { Cell } from './Cell'
 import { useListContext } from './ListContext'
+import { SELECTABLE_CHECKBOX_SIZE } from './constants'
 import type { ColumnProps } from './types'
 
 const ExpandableWrapper = styled.tr`
@@ -151,12 +153,18 @@ const StyledCheckboxContainer = styled.div`
   display: flex;
 `
 
-const NoPaddingCell = styled(Cell)`
+const NoPaddingCell = styled(Cell, {
+  shouldForwardProp: prop => !['maxWidth'].includes(prop),
+})<{
+  maxWidth: string
+}>`
   padding: 0;
 
   &:first-of-type {
     padding-left: ${({ theme }) => theme.space['2']};
   }
+
+  max-width: ${({ maxWidth }) => maxWidth};
 `
 
 const ExpandableCell = styled(Cell, {
@@ -216,6 +224,8 @@ export const Row = forwardRef(
       columns,
     } = useListContext()
 
+    const theme = useTheme()
+
     const expandedRowId = useId()
 
     const checkboxRef = useRef<HTMLInputElement>(null)
@@ -296,7 +306,10 @@ export const Row = forwardRef(
           columnsStartAt={(selectable ? 1 : 0) + (expandButton ? 1 : 0)}
         >
           {selectable ? (
-            <NoPaddingCell preventClick={canClickRowToExpand}>
+            <NoPaddingCell
+              preventClick={canClickRowToExpand}
+              maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}
+            >
               <StyledCheckboxContainer>
                 <Tooltip
                   text={
@@ -326,7 +339,7 @@ export const Row = forwardRef(
             </NoPaddingCell>
           ) : null}
           {expandButton ? (
-            <NoPaddingCell>
+            <NoPaddingCell maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}>
               <Button
                 disabled={disabled || !expandable}
                 icon={expandedRowIds[id] ? 'arrow-up' : 'arrow-down'}

packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap

@@ -6852,7 +6852,7 @@ exports[`List > Should render correctly with loading with selectable 1`] = `
   color: #3f4250;
   gap: 0.5rem;
   padding: 0 1rem;
-  width: 2.5rem;
+  max-width: 2.5rem;
   padding: 0;
 }
 
@@ -9175,7 +9175,7 @@ exports[`List > Should render correctly with selectable 1`] = `
   color: #3f4250;
   gap: 0.5rem;
   padding: 0 1rem;
-  width: 2.5rem;
+  max-width: 2.5rem;
   padding: 0;
 }
 
@@ -9588,6 +9588,7 @@ exports[`List > Should render correctly with selectable 1`] = `
   height: 3.75rem;
   padding: 0 1rem;
   padding: 0;
+  max-width: 2.5rem;
 }
 
 .emotion-46:first-of-type {
@@ -10859,7 +10860,7 @@ exports[`List > Should render correctly with selectable then click on first row
   color: #3f4250;
   gap: 0.5rem;
   padding: 0 1rem;
-  width: 2.5rem;
+  max-width: 2.5rem;
   padding: 0;
 }
 
@@ -10889,7 +10890,7 @@ exports[`List > Should render correctly with selectable then click on first row
   color: #3f4250;
   gap: 0.5rem;
   padding: 0 1rem;
-  width: 2.5rem;
+  max-width: 2.5rem;
   padding: 0;
 }
 
@@ -11689,6 +11690,7 @@ exports[`List > Should render correctly with selectable then click on first row
   height: 3.75rem;
   padding: 0 1rem;
   padding: 0;
+  max-width: 2.5rem;
 }
 
 .emotion-46:first-of-type {
@@ -11701,6 +11703,7 @@ exports[`List > Should render correctly with selectable then click on first row
   height: 3.75rem;
   padding: 0 1rem;
   padding: 0;
+  max-width: 2.5rem;
 }
 
 .emotion-46:first-of-type {
@@ -13124,7 +13127,7 @@ exports[`List > Should render correctly with selectable with shift click for mul
   color: #3f4250;
   gap: 0.5rem;
   padding: 0 1rem;
-  width: 2.5rem;
+  max-width: 2.5rem;
   padding: 0;
 }
 
@@ -13154,7 +13157,7 @@ exports[`List > Should render correctly with selectable with shift click for mul
   color: #3f4250;
   gap: 0.5rem;
   padding: 0 1rem;
-  width: 2.5rem;
+  max-width: 2.5rem;
   padding: 0;
 }
 
@@ -13954,6 +13957,7 @@ exports[`List > Should render correctly with selectable with shift click for mul
   height: 3.75rem;
   padding: 0 1rem;
   padding: 0;
+  max-width: 2.5rem;
 }
 
 .emotion-48:first-of-type {
@@ -13966,6 +13970,7 @@ exports[`List > Should render correctly with selectable with shift click for mul
   height: 3.75rem;
   padding: 0 1rem;
   padding: 0;
+  max-width: 2.5rem;
 }
 
 .emotion-48:first-of-type {

packages/ui/src/components/List/constants.tsx

@@ -1,2 +1,2 @@
-export const SELECTABLE_CHECKBOX_SIZE = 24
-export const EXPANDABLE_COLUMN_SIZE = 32
+export const SELECTABLE_CHECKBOX_SIZE = '500' // sizing token from theme
+export const EXPANDABLE_COLUMN_SIZE = '500'