diff --git a/packages/shoreline/src/components/grid/grid-cell.tsx b/packages/shoreline/src/components/grid/grid-cell.tsx index 758498553f..53cb704f73 100644 --- a/packages/shoreline/src/components/grid/grid-cell.tsx +++ b/packages/shoreline/src/components/grid/grid-cell.tsx @@ -18,31 +18,54 @@ export const GridCell = forwardRef( 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 ( + +type GridCellStyle = NonNullable['style']> & + Record<`--${string}`, string | number | boolean> diff --git a/packages/shoreline/src/components/grid/tests/grid-cell.test.tsx b/packages/shoreline/src/components/grid/tests/grid-cell.test.tsx new file mode 100644 index 0000000000..b3e05d1093 --- /dev/null +++ b/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() + 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() + 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') + }) +}) diff --git a/packages/shoreline/src/themes/sunrise/components/grid.css b/packages/shoreline/src/themes/sunrise/components/grid.css index 4c2db638e9..490238ac99 100644 --- a/packages/shoreline/src/themes/sunrise/components/grid.css +++ b/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);