Body text column too wide with when using a “List” Copy should exceed the 8th column

[mjabbink]

The body copy exceeds the 8th column when using a list. The copy should NOT go beyond the normal width of the body copy. So either with body copy and List copy, the rights side (or length of copy) should never exceed the 8th column of the grid.

[mjabbink]

FYI @sadekbazaraa

[mjabbink]

I believe for body copy and list there is also missing padding or percentage setting so the copy never hits the far right edge of the 8th column. @sadekbazaraa maybe you can articulate this better than me.

[sadekbazaraa]

Yes, this is something that has been inconsistent since the early days. I'm not sure of the best technical approach. At one point it was something to the effect of 8 columns minus 2rem (32px). Then I think we went to a percentage approach? Maybe 90% of 8 columns. I think we should confer with @jeanservaas and @shixiedesign

[mjabbink]

same issues here really plus List
carbon-design-system/design-language-website#365

[vpicone]

The body copy exceeds the 8th column when using a list

@mjabbink I think I'm missing something, it doesn't look like the text exceeds the eighth column. Or do you mean it shouldn't even touch the 8th column?

[alisonjoseph]

Looks like we(dev) needs a designer to pair up with on this to get clarity on specifically how to fix this.

[mjabbink]

We’ve always talked about there being padding on the right side of a container to prevent text from going all the way to the end of the grid container. We apply this logic in cards and we’ve defined this a few times for the main body copy block in Gatsby as well. I’m pretty sure this was done in the past but maybe I’m wrong. @sadekbazaraa and @jeanservaas can clarify there. I know the early version of the IDL site had this detail.

maybe @DianaStanciulescu or @jeanservaas has a spec lying around demonstrating this in a Sketch file?

[mjabbink]

In the above image example, the text is actually going beyond the 8-columns it’s supposed to be inside of. SO we have two situations going on. 1. Text going beyond where it’s supposed to and we are lacking padding on the far right edge that prevents text from reaching the far edge of that 8 column space for body copy. I hope this makes sense?

[mjabbink]

This is related to this issue and combined with when a list is used it pushes text beyond the 8 columns when it too should be contained inside the 8-columns carbon-design-system/design-language-website#365 (comment)

[mjabbink]

image above does show text exceeding 8th column.

[mjabbink]

the “question mark”

[DianaStanciulescu]

Initially I thought Gatsby had right padding built in for all text, 32px (instead of a %), except mobile where there is no padding. This is how I am designing even now. (see image below)

But I am not sure what happens in gatsby, it looks like the text in the list component is pushed to the right to make room for bullets/numbers in a sense, so it ends up bleeding into the gutter.

[sadekbazaraa]

Thanks @DianaStanciulescu for the above. Yes, that's how we typically design our files in Sketch. At one point this was how everything was implemented. I'm really not sure why this issue has come up and been resolved multiple times. The resolution may have been custom overrides in the past?

In any case, one of the previous implementations was as Diana spec'd above. The full 8-columns minus 2rem (32px) for body copy. I believe at one point there was another interpretation of 90 or 95% width that may have come from Wonil or the digital design team. Not quite sure...

[shixiedesign]

We are all on the full 8-columns minus 2rem (32px) on digital now! There was a percentage in the past, but if we see it now we should remove as a bug.

[alisonjoseph]

Looking into this now, looks like its actually the headings that are missing the correct right padding.