fix: column width in list (#5875)

* fix: column width in list

* fix: tests

* feat: colMode

* style: make colMode deprecated

---------

Co-authored-by: Dorian Maliszewski <[email protected]>

Author: lisalupi

.changeset/clear-steaks-share.md

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

packages/plus/src/components/OfferList/__tests__/__snapshots__/index.test.tsx.snap

@@ -5,8 +5,17 @@ import { assignInlineVars } from '@vanilla-extract/dynamic'
 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 { useListContext } from './ListContext'
+import { listCell, listCellStrict } from './styles.css'
+import {
+  listCellPadding,
+  maxWidthCell,
+  maxWidthChildrenCell,
+  minWidthCell,
+  minWidthChildrenCell,
+  widthCell,
+  widthChildrenCell,
+} from './variables.css'
 
 type CellProps = {
   children?: ReactNode
@@ -18,19 +27,41 @@ type CellProps = {
 
 export const Cell = forwardRef<HTMLTableCellElement, CellProps>(
   ({ children, className, 'data-testid': dataTestid, colSpan, style }, ref) => {
-    const { maxWidth, minWidth, width } = useColumnProvider()
+    const context = useColumnProvider()
+    const { colMode } = useListContext()
+    const width = context?.width
+    const maxWidth = context?.width
+    const minWidth = context?.width
+
+    /** 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)}
+        className={cn(
+          className,
+          listCell,
+          colMode === 'strict' ? listCellStrict : '',
+        )}
         colSpan={colSpan}
         data-testid={dataTestid}
         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/Cell.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,26 +25,14 @@ export const ColumnProvider = ({
 }: ColumnProviderProps) => (
   <ColumnContext.Provider
     value={{
-      maxWidth: maxWidth ?? 'none',
-      minWidth: minWidth ?? 'auto',
-      width: width ?? 'auto',
+      maxWidth,
+      minWidth,
+      width,
     }}
   >
     {children}
   </ColumnContext.Provider>
 )
 
 // oxlint-disable-next-line react/only-export-components
-export const useColumnProvider = () => {
-  const context = useContext(ColumnContext)
-
-  if (!context) {
-    return {
-      maxWidth: 'none',
-      minWidth: 'auto',
-      width: 'auto',
-    }
-  }
-
-  return context
-}
+export const useColumnProvider = () => useContext(ColumnContext)

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

@@ -50,6 +50,7 @@ export type ListContextValue = {
   refList: RefObject<HTMLInputElement>[]
   setRefList: Dispatch<SetStateAction<RefObject<HTMLInputElement>[]>>
   handleOnChange: (value: string, checked: boolean) => void
+  colMode?: 'strict' | 'flexible'
 }
 
 const ListContext = createContext<ListContextValue | undefined>(undefined)
@@ -61,6 +62,7 @@ export type ListProviderProps = {
   expandButton: boolean
   onSelectedChange?: Dispatch<SetStateAction<string[]>>
   columns: ColumnProps[]
+  colMode?: 'strict' | 'flexible'
 }
 
 const checkStateOfCheckboxs = (ids: RowState) => {
@@ -86,6 +88,7 @@ export const ListProvider = ({
   expandButton,
   onSelectedChange,
   columns,
+  colMode,
 }: ListProviderProps) => {
   const [expandedRowIds, setExpandedRowIds] = useState<RowState>({})
   const [selectedRowIds, setSelectedRowIds] = useState<RowState>({})
@@ -331,6 +334,7 @@ export const ListProvider = ({
     () => ({
       allRowSelectValue,
       collapseRow,
+      colMode,
       columns,
       expandButton,
       expandedRowIds,
@@ -370,6 +374,7 @@ export const ListProvider = ({
       unselectAll,
       unselectRow,
       handleOnChange,
+      colMode,
     ],
   )