Fix GridCell area placement

packages/shoreline/src/components/grid/grid-cell.tsx

@@ -18,31 +18,54 @@ export const GridCell = forwardRef<HTMLDivElement, GridCellProps>(
   function GridCell(props, ref) {
     const {
       asChild = false,
-      columnStart = 'auto',
-      columnEnd = 'auto',
-      rowStart = 'auto',
-      rowEnd = 'auto',
-      column = 'auto',
-      row = 'auto',
-      area = 'auto',
+      columnStart,
+      columnEnd,
+      rowStart,
+      rowEnd,
+      column,
+      row,
+      area,
       style: styleObject = {},
       ...domProps
     } = props
 
     const Comp = asChild ? Compose : 'div'
+    const placementStyle: GridCellStyle = {}
+
+    if (columnStart !== undefined) {
+      placementStyle['--sl-grid-cell-column-start'] = columnStart
+    }
+
+    if (columnEnd !== undefined) {
+      placementStyle['--sl-grid-cell-column-end'] = columnEnd
+    }
+
+    if (rowStart !== undefined) {
+      placementStyle['--sl-grid-cell-row-start'] = rowStart
+    }
+
+    if (rowEnd !== undefined) {
+      placementStyle['--sl-grid-cell-row-end'] = rowEnd
+    }
+
+    if (column !== undefined) {
+      placementStyle['--sl-grid-cell-column'] = column
+    }
+
+    if (row !== undefined) {
+      placementStyle['--sl-grid-cell-row'] = row
+    }
+
+    if (area !== undefined) {
+      placementStyle['--sl-grid-cell-area'] = area
+    }
 
     return (
       <Comp
         data-sl-grid-cell
         ref={ref}
         style={style({
-          '--sl-grid-cell-column-start': columnStart,
-          '--sl-grid-cell-column-end': columnEnd,
-          '--sl-grid-cell-row-start': rowStart,
-          '--sl-grid-cell-row-end': rowEnd,
-          '--sl-grid-cell-column': column,
-          '--sl-grid-cell-row': row,
-          '--sl-grid-cell-area': area,
+          ...placementStyle,
           ...styleObject,
         })}
         {...domProps}
@@ -102,3 +125,6 @@ export interface GridCellOptions {
 }
 
 export type GridCellProps = GridCellOptions & ComponentPropsWithoutRef<'div'>
+
+type GridCellStyle = NonNullable<ComponentPropsWithoutRef<'div'>['style']> &
+  Record<`--${string}`, string | number | boolean>

packages/shoreline/src/components/grid/tests/grid-cell.test.tsx

@@ -0,0 +1,28 @@
+import { describe, expect, it, render } from '@vtex/shoreline-test-utils'
+
+import { GridCell } from '../grid-cell'
+
+describe('grid-cell', () => {
+  it('emits only the placement variables that were provided', () => {
+    const { container } = render(<GridCell area="header" />)
+    const cell = container.querySelector('[data-sl-grid-cell]')
+
+    expect(cell).toBeInTheDocument()
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-area')).toBe('header')
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-column')).toBe('')
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-row')).toBe('')
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-column-start')).toBe('')
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-column-end')).toBe('')
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-row-start')).toBe('')
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-row-end')).toBe('')
+  })
+
+  it('keeps explicit placement overrides available', () => {
+    const { container } = render(<GridCell area="header" column="1 / 3" />)
+    const cell = container.querySelector('[data-sl-grid-cell]')
+
+    expect(cell).toBeInTheDocument()
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-area')).toBe('header')
+    expect(cell?.style.getPropertyValue('--sl-grid-cell-column')).toBe('1 / 3')
+  })
+})

packages/shoreline/src/themes/sunrise/components/grid.css

@@ -18,14 +18,6 @@
 }
 
 [data-sl-grid-cell] {
-  --sl-grid-cell-area: auto;
-  --sl-grid-cell-column: auto;
-  --sl-grid-cell-row: auto;
-  --sl-grid-cell-column-start: auto;
-  --sl-grid-cell-column-end: auto;
-  --sl-grid-cell-row-start: auto;
-  --sl-grid-cell-row-end: auto;
-
   grid-area: var(--sl-grid-cell-area);
   grid-column: var(--sl-grid-cell-column);
   grid-row: var(--sl-grid-cell-row);