fix(List): spacing

packages/ui/src/components/Checkbox/index.tsx

@@ -400,49 +400,51 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             </StyledIcon>
           ) : null}
 
-          <Stack gap={0.5} flex={1}>
-            <Stack gap={0.5} direction="row" alignItems="center" flex={1}>
-              {children ? (
-                <>
-                  {typeof children === 'string' ? (
-                    <StyledTextLabel
-                      as="label"
-                      variant="body"
-                      sentiment="neutral"
-                      prominence="default"
-                      htmlFor={localId}
-                    >
-                      {children}
-                    </StyledTextLabel>
-                  ) : (
-                    <StyledLabel htmlFor={localId}>{children}</StyledLabel>
-                  )}
-                </>
+          {!!children || required || !!helper || !!error ? (
+            <Stack gap={0.5} flex={1}>
+              <Stack gap={0.5} direction="row" alignItems="center" flex={1}>
+                {children ? (
+                  <>
+                    {typeof children === 'string' ? (
+                      <StyledTextLabel
+                        as="label"
+                        variant="body"
+                        sentiment="neutral"
+                        prominence="default"
+                        htmlFor={localId}
+                      >
+                        {children}
+                      </StyledTextLabel>
+                    ) : (
+                      <StyledLabel htmlFor={localId}>{children}</StyledLabel>
+                    )}
+                  </>
+                ) : null}
+                {required ? (
+                  <sup>
+                    <AsteriskIcon size={8} sentiment="danger" />
+                  </sup>
+                ) : null}
+              </Stack>
+
+              {helper ? (
+                <Text
+                  variant="caption"
+                  as="span"
+                  prominence="weak"
+                  sentiment="neutral"
+                >
+                  {helper}
+                </Text>
               ) : null}
-              {required ? (
-                <sup>
-                  <AsteriskIcon size={8} sentiment="danger" />
-                </sup>
+
+              {error && typeof error !== 'boolean' ? (
+                <ErrorText variant="caption" as="span" sentiment="danger">
+                  {error}
+                </ErrorText>
               ) : null}
             </Stack>
-
-            {helper ? (
-              <Text
-                variant="caption"
-                as="span"
-                prominence="weak"
-                sentiment="neutral"
-              >
-                {helper}
-              </Text>
-            ) : null}
-
-            {error && typeof error !== 'boolean' ? (
-              <ErrorText variant="caption" as="span" sentiment="danger">
-                {error}
-              </ErrorText>
-            ) : null}
-          </Stack>
+          ) : null}
         </CheckboxContainer>
       </Tooltip>
     )

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

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react'
 import { Checkbox } from '../Checkbox'
 import { HeaderCell } from './HeaderCell'
 import { useListContext } from './ListContext'
-import { SELECTABLE_CHECKBOX_SIZE } from './constants'
+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 */
@@ -27,14 +27,20 @@ const StyledHeaderRow = styled.tr`
   }
 `
 
-const NoPaddingHeaderCell = styled(HeaderCell)`
+const SelectRowHeaderCell = styled(HeaderCell)`
   padding: 0;
+  padding-left: ${({ theme }) => theme.space['2']};
 
-  &:first-of-type {
-    padding-left: ${({ theme }) => theme.space['2']};
-  }
+  width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+  min-width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+`
+
+const ExpandableHeaderCell = styled(HeaderCell)`
+  padding: 0;
+  padding-left: ${({ theme }) => theme.space['2']};
 
-  max-width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]}
+  width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
+  min-width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
 `
 
 type RowProps = {
@@ -52,7 +58,7 @@ export const HeaderRow = ({ children, hasSelectAllColumn }: RowProps) => {
     <thead>
       <StyledHeaderRow>
         {hasSelectAllColumn ? (
-          <NoPaddingHeaderCell>
+          <SelectRowHeaderCell>
             <Checkbox
               name="list-select-checkbox"
               value="all"
@@ -61,10 +67,10 @@ export const HeaderRow = ({ children, hasSelectAllColumn }: RowProps) => {
               onChange={selectAllHandler}
               disabled={selectableRowCount === 0}
             />
-          </NoPaddingHeaderCell>
+          </SelectRowHeaderCell>
         ) : null}
         {expandButton ? (
-          <NoPaddingHeaderCell>{null}</NoPaddingHeaderCell>
+          <ExpandableHeaderCell>{null}</ExpandableHeaderCell>
         ) : null}
         {children}
       </StyledHeaderRow>

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

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 import {
@@ -15,7 +14,7 @@ import { Checkbox } from '../Checkbox'
 import { Tooltip } from '../Tooltip'
 import { Cell } from './Cell'
 import { useListContext } from './ListContext'
-import { SELECTABLE_CHECKBOX_SIZE } from './constants'
+import { EXPANDABLE_COLUMN_SIZE, SELECTABLE_CHECKBOX_SIZE } from './constants'
 import type { ColumnProps } from './types'
 
 const ExpandableWrapper = styled.tr`
@@ -167,18 +166,20 @@ const StyledCheckboxContainer = styled.div`
   display: flex;
 `
 
-const NoPaddingCell = styled(Cell, {
-  shouldForwardProp: prop => !['maxWidth'].includes(prop),
-})<{
-  maxWidth: string
-}>`
+const SelectRowCell = styled(Cell)`
   padding: 0;
+  padding-left: ${({ theme }) => theme.space['2']};
 
-  &:first-of-type {
-    padding-left: ${({ theme }) => theme.space['2']};
-  }
+  width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+  min-width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+`
 
-  max-width: ${({ maxWidth }) => maxWidth};
+const ExpandableButtonCell = styled(Cell)`
+  padding: 0;
+  padding-left: ${({ theme }) => theme.space['2']};
+
+  width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
+  min-width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
 `
 
 const ExpandableCell = styled(Cell, {
@@ -236,8 +237,6 @@ export const Row = forwardRef<HTMLTableRowElement, RowProps>(
       columns,
     } = useListContext()
 
-    const theme = useTheme()
-
     const expandedRowId = useId()
 
     const checkboxRef = useRef<HTMLInputElement>(null)
@@ -321,10 +320,7 @@ export const Row = forwardRef<HTMLTableRowElement, RowProps>(
           columnsStartAt={(selectable ? 1 : 0) + (expandButton ? 1 : 0)}
         >
           {selectable ? (
-            <NoPaddingCell
-              preventClick={canClickRowToExpand}
-              maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}
-            >
+            <SelectRowCell preventClick={canClickRowToExpand}>
               <StyledCheckboxContainer>
                 <Tooltip
                   text={
@@ -344,10 +340,10 @@ export const Row = forwardRef<HTMLTableRowElement, RowProps>(
                   />
                 </Tooltip>
               </StyledCheckboxContainer>
-            </NoPaddingCell>
+            </SelectRowCell>
           ) : null}
           {expandButton ? (
-            <NoPaddingCell maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}>
+            <ExpandableButtonCell>
               <Button
                 disabled={disabled || !expandable}
                 icon={expandedRowIds[id] ? 'arrow-up' : 'arrow-down'}
@@ -358,7 +354,7 @@ export const Row = forwardRef<HTMLTableRowElement, RowProps>(
                 aria-label="expand"
                 data-testid="list-expand-button"
               />
-            </NoPaddingCell>
+            </ExpandableButtonCell>
           ) : null}
           {children}
         </StyledRow>

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

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

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

@@ -1,26 +1,40 @@
-import { useTheme } from '@emotion/react'
+import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 import { Checkbox } from '../Checkbox'
-import { HeaderCell } from './HeaderCell'
 import { useTableContext } from './TableContext'
-import { SELECTABLE_CHECKBOX_SIZE } from './constants'
+import { EXPANDABLE_COLUMN_SIZE, SELECTABLE_CHECKBOX_SIZE } from './constants'
 
 type HeaderRowProps = {
   children: ReactNode
   hasSelectAllColumn: boolean
 }
 
+const SelectableHeaderCell = styled.th`
+    padding-left: ${({ theme }) => theme.space['2']};
+
+    width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+    min-width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+`
+
+const ExpandableHeaderCell = styled('th', {
+  shouldForwardProp: prop => !['nextToSelectableRow'].includes(prop),
+})<{ nextToSelectableRow: boolean }>`
+    padding-left: ${({ theme, nextToSelectableRow }) => theme.space[nextToSelectableRow ? '1' : '2']};
+
+    width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
+    min-width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
+`
+
 export const HeaderRow = ({ children, hasSelectAllColumn }: HeaderRowProps) => {
   const { allRowSelectValue, selectAllHandler, selectedRowIds, expandButton } =
     useTableContext()
-  const theme = useTheme()
 
   const selectableRowCount = Object.keys(selectedRowIds).length
 
   return (
     <tr role="row">
       {hasSelectAllColumn ? (
-        <HeaderCell maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}>
+        <SelectableHeaderCell>
           <Checkbox
             name="table-select-all-checkbox"
             value="all"
@@ -29,9 +43,13 @@ export const HeaderRow = ({ children, hasSelectAllColumn }: HeaderRowProps) => {
             onChange={selectAllHandler}
             disabled={selectableRowCount === 0}
           />
-        </HeaderCell>
+        </SelectableHeaderCell>
+      ) : null}
+      {expandButton ? (
+        <ExpandableHeaderCell nextToSelectableRow={hasSelectAllColumn}>
+          {null}
+        </ExpandableHeaderCell>
       ) : null}
-      {expandButton ? <HeaderCell>{null}</HeaderCell> : null}
       {children}
     </tr>
   )

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

@@ -1,5 +1,5 @@
 import type { Theme } from '@emotion/react'
-import { keyframes, useTheme } from '@emotion/react'
+import { keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
 import { Children, useCallback, useEffect, useRef } from 'react'
@@ -8,7 +8,7 @@ import { Checkbox } from '../Checkbox'
 import { Tooltip } from '../Tooltip'
 import { Cell } from './Cell'
 import { useTableContext } from './TableContext'
-import { SELECTABLE_CHECKBOX_SIZE } from './constants'
+import { EXPANDABLE_COLUMN_SIZE, SELECTABLE_CHECKBOX_SIZE } from './constants'
 import type { ColumnProps } from './types'
 
 const ExpandableWrapper = styled.tr`
@@ -87,16 +87,20 @@ const StyledTr = styled('tr', {
     )}
 `
 
-const NoPaddingCell = styled(Cell, {
-  shouldForwardProp: prop => !['maxWidth'].includes(prop),
-})<{ maxWidth?: string }>`
-  padding: 0;
-
-  &:first-of-type {
+const SelectableCell = styled.th`
     padding-left: ${({ theme }) => theme.space['2']};
-  }
 
-  max-width: ${({ maxWidth }) => maxWidth};
+    width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+    min-width: ${({ theme }) => theme.sizing[SELECTABLE_CHECKBOX_SIZE]};
+`
+
+const ExpandableButtonCell = styled('th', {
+  shouldForwardProp: prop => !['nextToSelectableRow'].includes(prop),
+})<{ nextToSelectableRow: boolean }>`
+    padding-left: ${({ theme, nextToSelectableRow }) => theme.space[nextToSelectableRow ? '1' : '2']};
+
+    width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
+    min-width: ${({ theme }) => theme.sizing[EXPANDABLE_COLUMN_SIZE]};
 `
 
 type RowProps = {
@@ -182,8 +186,6 @@ export const Row = ({
     }
   }, [mapCheckbox, id])
 
-  const theme = useTheme()
-
   const childrenLength =
     Children.count(children) + (selectable ? 1 : 0) + (expandButton ? 1 : 0)
 
@@ -198,7 +200,7 @@ export const Row = ({
         columnsStartAt={(selectable ? 1 : 0) + (expandButton ? 1 : 0)}
       >
         {selectable ? (
-          <NoPaddingCell maxWidth={theme.sizing[SELECTABLE_CHECKBOX_SIZE]}>
+          <SelectableCell>
             <StyledCheckboxContainer>
               <Tooltip
                 text={
@@ -218,10 +220,10 @@ export const Row = ({
                 />
               </Tooltip>
             </StyledCheckboxContainer>
-          </NoPaddingCell>
+          </SelectableCell>
         ) : null}
         {expandButton ? (
-          <NoPaddingCell>
+          <ExpandableButtonCell nextToSelectableRow={selectable}>
             <Button
               disabled={!expandable}
               icon={expandedRowIds[id] ? 'arrow-up' : 'arrow-down'}
@@ -232,7 +234,7 @@ export const Row = ({
               aria-label="expand"
               data-testid="list-expand-button"
             />
-          </NoPaddingCell>
+          </ExpandableButtonCell>
         ) : null}
         {children}
       </StyledTr>

packages/ui/src/components/Table/constants.ts

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