vtex / shoreline

VTEX Design System for back-office experiences. Currently available for internal usage at VTEX.
https://shoreline.vtex.com
24 stars 1 forks source link

GridCell not reflecting the `area` prop #1880

Open vaporwavie opened 2 months ago

vaporwavie commented 2 months ago

Problem

On a given Grid:


import { Grid, GridCell } from '@vtex/shoreline'

        {...}
        <GridCell>
          <Grid
            areas={`"header header" "general-info cms-info"`}
            columns="1fr 1fr"
            className={styles.overviewSection}
          >
            <GridCell area="header">
              <Heading className={styles.overviewTitle}>
           {...}

The prop area passed to GridCell isn't being applied. Notice that it should, given that the parent Grid does enable it for the grid template layer.

To supersede that, I had to create a custom class name for it to then apply grid-area: header; there.

Expected behavior

I should be able to inform the grid area corresponding to that grid cell, since it is a child of a grid.

Reproducible Example

https://codesandbox.io/p/sandbox/vibrant-neumann-klkrkz

Suggested solution

GridCell should take the areas defined from its parent Grid and apply it by context.

Additional context

No response

Package

@vtex/shoreline

Packages version

^1.4.0

Browser

Arc (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36)

Package Manager

yarn

lucasaarcoverde commented 2 months ago

Hey @vaporwavie, thanks for reporting this bug and good catch! Do you have a proposal to solve this problem?

I'm moving this issue to the backlog, feel free to investigate and solve it if you want!

vaporwavie commented 2 months ago

@lucasaarcoverde I wanna tackle this, yes 😄

I'll take a look at the backlog later today!