Skip to content

GridCell not reflecting the area prop #1880

@vaporwavie

Description

@vaporwavie

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

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingdevIndicates that the issue or pull request involves engineering considerationsgood first issueGreat for new-comers

Type

No type

Projects

Status

Active

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions