UI shell option for no padding on content

[mattrosno]

2rem padding was introduced on bx--content in 10.3.0.

If you're using grid in UI shell, bx--grid sets the outermost 2rem padding.

UI shell should have an option to not add padding to bx--content to give the application full control over its layout. Or, default to no padding and have an option (class) to add padding.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[mattrosno]

Not stale

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[mattrosno]

Not stale

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[fabpico]

I ran in to the same issue, there is even a comment linked to this issue in the official Carbon React tutorial's index.scss.

/// Padding was introduced in 10.3.0, needs an option to let grid set the viewport gutter
/// @link https://github.com/carbon-design-system/carbon/issues/3010
.bx--content {
  padding: 0;
}

Even if i use bx--grid--narrow, the additional left padding is still there. IMO the problem is more on the combined usage of the Content component and the Carbon Grid classes, not the UI Shell (which only consists in Header, Left-/Right Panel as far i can see).

I see it can be compensated:

Each column has horizontal padding (aka a gutter) that defines the space between them. You can negate this padding at the row level with negative margins, allowing the content within your columns to be aligned along the left side.

But for me this is a workaround, not an option.

[mattrosno]

Hi @FabianPiconeDev - thanks for your comment. I agree that this override should not be required by everyone who uses the Content component with the grid.

We are currently evaluating CSS Grid as part of our 2021 release. See #7538

CC @joshblack @tay1orjones can we make sure to look at the Content component to make sure it plays nicely with our updated grid, so we can then remove this override used in the tutorial?