fix: column width in list

Author: lisalupi

.changeset/clear-steaks-share.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Fix `List.Cell` width when it is in %

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

@@ -6,7 +6,15 @@ import type { CSSProperties, ReactNode } from 'react'
 import { forwardRef } from 'react'
 import { useColumnProvider } from './ColumnProvider'
 import { listCell } from './styles.css'
-import { maxWidthCell, minWidthCell, widthCell } from './variables.css'
+import {
+  listCellPadding,
+  maxWidthCell,
+  maxWidthChildrenCell,
+  minWidthCell,
+  minWidthChildrenCell,
+  widthCell,
+  widthChildrenCell,
+} from './variables.css'
 
 type CellProps = {
   children?: ReactNode
@@ -20,6 +28,17 @@ export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
   ({ children, className, 'data-testid': dataTestid, colSpan, style }, ref) => {
     const { maxWidth, minWidth, width } = useColumnProvider()
 
+    /** Remove padding from width to avoid overflow since boxSizing = 'content-box' */
+    const widthChildren = width?.includes('%')
+      ? '100%'
+      : `calc(${widthCell} - ${listCellPadding} - ${listCellPadding})`
+    const maxWidthChildren = maxWidth?.includes('%')
+      ? '100%'
+      : `calc(${maxWidth} - ${listCellPadding} - ${listCellPadding})`
+    const minWidthChildren = minWidth?.includes('%')
+      ? '100%'
+      : `calc(${minWidth} - ${listCellPadding} - ${listCellPadding})`
+
     return (
       <td
         className={cn(className, listCell)}
@@ -28,9 +47,12 @@ export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
         ref={ref}
         style={{
           ...assignInlineVars({
-            [widthCell]: width,
-            [minWidthCell]: minWidth,
-            [maxWidthCell]: maxWidth,
+            [widthCell]: width ?? 'auto',
+            [minWidthCell]: minWidth ?? 'auto',
+            [maxWidthCell]: maxWidth ?? 'none',
+            [widthChildrenCell]: width ? widthChildren : 'auto',
+            [maxWidthChildrenCell]: maxWidth ? maxWidthChildren : 'none',
+            [minWidthChildrenCell]: minWidth ? minWidthChildren : 'auto',
           }),
           ...style,
         }}

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

@@ -3,9 +3,9 @@ import { createContext, useContext } from 'react'
 
 type ContextType =
   | {
-      width: string
-      maxWidth: string
-      minWidth: string
+      width?: string
+      maxWidth?: string
+      minWidth?: string
     }
   | undefined
 
@@ -25,9 +25,9 @@ export const ColumnProvider = ({
 }: ColumnProviderProps) => (
   <ColumnContext.Provider
     value={{
-      maxWidth: maxWidth ?? 'none',
-      minWidth: minWidth ?? 'auto',
-      width: width ?? 'auto',
+      maxWidth,
+      minWidth,
+      width,
     }}
   >
     {children}
@@ -39,11 +39,7 @@ export const useColumnProvider = () => {
   const context = useContext(ColumnContext)
 
   if (!context) {
-    return {
-      maxWidth: 'none',
-      minWidth: 'auto',
-      width: 'auto',
-    }
+    throw new Error('List.Cell should be inside a List to work properly.')
   }
 
   return context

packages/ui/src/components/List/styles.css.ts

@@ -9,12 +9,16 @@ import { SELECTABLE_CHECKBOX_SIZE } from './constants'
 import { recipe } from '@vanilla-extract/recipes'
 import { SENTIMENTS } from '../../theme'
 import {
+  listCellPadding,
   maxWidthCell,
+  maxWidthChildrenCell,
   maxWidthHeaderCell,
   minWidthCell,
+  minWidthChildrenCell,
   minWidthHeaderCell,
   paddingExpandableCell,
   widthCell,
+  widthChildrenCell,
   widthHeaderCell,
 } from './variables.css'
 
@@ -27,8 +31,6 @@ const colorChange = keyframes({
   },
 })
 
-const listCellPadding = theme.space[2]
-
 function makeRowStyleSentiment(sentiment: (typeof SENTIMENTS)[number]) {
   const color = theme.colors[sentiment]
   const base = {
@@ -234,9 +236,9 @@ export const listCell = style({
 
 globalStyle(`${listCell} > *`, {
   /** Remove padding from width to avoid overflow since boxSizing = 'content-box' */
-  width: `calc(${widthCell} - ${listCellPadding} - ${listCellPadding})`,
-  maxWidth: `calc(${maxWidthCell} - ${listCellPadding} - ${listCellPadding})`,
-  minWidth: `calc(${minWidthCell} - ${listCellPadding} - ${listCellPadding})`,
+  width: widthChildrenCell,
+  maxWidth: maxWidthChildrenCell,
+  minWidth: minWidthChildrenCell,
 })
 
 globalStyle(`${listRowBase} > td:first-child`, {

packages/ui/src/components/List/variables.css.ts

@@ -1,3 +1,4 @@
+import { theme } from '@ultraviolet/themes'
 import { createVar } from '@vanilla-extract/css'
 
 export const widthHeaderCell = createVar()
@@ -8,3 +9,9 @@ export const paddingExpandableCell = createVar()
 export const widthCell = createVar()
 export const maxWidthCell = createVar()
 export const minWidthCell = createVar()
+
+export const widthChildrenCell = createVar()
+export const maxWidthChildrenCell = createVar()
+export const minWidthChildrenCell = createVar()
+
+export const listCellPadding = theme.space[2]