Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mjabbink opened this issue Jul 29, 2021 · 15 comments · Fixed by #1172
Closed

Comments

@mjabbink
Copy link
Contributor

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.

image (104).png

@mjabbink
Copy link
Contributor Author

FYI @sadekbazaraa

@mjabbink
Copy link
Contributor Author

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
Copy link

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
Copy link
Contributor Author

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

@vpicone
Copy link
Collaborator

vpicone commented Aug 23, 2021

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?

@vpicone vpicone added the status: needs design spec Development can't progress without a design spec label Sep 8, 2021
@alisonjoseph
Copy link
Member

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

@mjabbink
Copy link
Contributor Author

mjabbink commented Sep 8, 2021

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
Copy link
Contributor Author

mjabbink commented Sep 8, 2021

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
Copy link
Contributor Author

mjabbink commented Sep 8, 2021

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
Copy link
Contributor Author

mjabbink commented Sep 8, 2021

image above does show text exceeding 8th column.
Screen Shot 2021-09-08 at 6 52 02 PM

@mjabbink
Copy link
Contributor Author

mjabbink commented Sep 8, 2021

the “question mark”

@DianaStanciulescu
Copy link

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.

Screenshot 2021-09-09 at 10 57 57

@sadekbazaraa
Copy link

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
Copy link

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.

@mjabbink mjabbink removed the status: needs design spec Development can't progress without a design spec label Sep 17, 2021
@alisonjoseph
Copy link
Member

alisonjoseph commented Oct 5, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants