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

Line length guideline update #365

Closed
Tracked by #9756
ghost opened this issue Dec 3, 2019 · 18 comments
Closed
Tracked by #9756

Line length guideline update #365

ghost opened this issue Dec 3, 2019 · 18 comments

Comments

@ghost
Copy link

ghost commented Dec 3, 2019

Detailed description

On the Type basics page under the Line lengths within containers heading, the illustration shows extra padding, but it is much wider than our latest agreement between the Digital team and IDL team, which was around 90–95%. My suggestion is to update the illustration to
show the latest range of 90-95%, as shown in magenta in the image below:

Screen Shot 2019-12-03 at 1 20 18 PM

Steps to reproduce the issue

  1. visit this page: https://www.ibm.com/design/language/elements/type-basics#line-lengths-within-containers
  2. See the illustration that shows recommended right padding.
@ghost
Copy link
Author

ghost commented Dec 3, 2019

I also suggest that the 75% in the copy in the illustration removed, it can cause confusion. :)

@mjabbink
Copy link
Contributor

mjabbink commented Jan 5, 2020

Good find @wonilsuhibm. We need to fix this in IDL site

@mjabbink
Copy link
Contributor

mjabbink commented Jan 5, 2020

We probably need some more detail on this. 95% might work well in a small card container and in a larger container definitely 90%

@mjabbink
Copy link
Contributor

@sadekbazaraa This 95% does not seem to be enough. We should check with dotcom team to see what this is looking like in their components.

@sadekbazaraa
Copy link
Contributor

@mjabbink I was just noticing this throughout Gatsby sites. Still seems like copy is going full width in most places. We've tackled this many times so I'm not sure why it continues to come up. It would be nice to understand the definitive rule so we can update the guidance to be accurate.

@mjabbink
Copy link
Contributor

@sadekbazaraa can you share some of those screen grabs and we can discuss with Vince, Jeannie and Shix.

@sadekbazaraa
Copy link
Contributor

Sure thing @mjabbink here are a handful of examples where body copy is going "full bleed".

Screen Shot 2021-07-20 at 4 22 29 PM

Screen Shot 2021-07-20 at 4 21 36 PM

Screen Shot 2021-07-20 at 4 21 11 PM

Screen Shot 2021-07-20 at 4 18 51 PM

@mjabbink
Copy link
Contributor

Thanks @sadekbazaraa. It’s especially broken with a list as it seems to push beyond the grid in that case.

@vpicone We need to address this since it’s not like a 3-year long issue that has not really ever been resolved. Over the years we’ve had at least 2–3 issues regarding this. I reckon we need to make another with very clear guidance and get this prioritized this time.

@mjabbink
Copy link
Contributor

@alisonjoseph Not sure what keeps happening on this issue but it keeps coming back. Over the last few years, I feel like we have made 3–4 exact issues and it gets fixed but then it goes south again.

@vpicone
Copy link
Contributor

vpicone commented Sep 8, 2021

@mjabbink totally. I'm happy to implement a fix, we just need a design spec.

@vpicone vpicone added the blocked: waiting for design Development can't progress without design input label Sep 8, 2021
@mjabbink
Copy link
Contributor

mjabbink commented Sep 8, 2021

Related to carbon-design-system/gatsby-theme-carbon#1156

@mjabbink mjabbink removed the blocked: waiting for design Development can't progress without design input label Sep 17, 2021
@mjabbink
Copy link
Contributor

I think the relative spec is also here carbon-design-system/gatsby-theme-carbon#1156

@alisonjoseph
Copy link
Member

alisonjoseph commented Oct 1, 2021

@vpicone

Should be 8 col - 32px padding
based on the spec in the link above.
image

@alisonjoseph
Copy link
Member

Should we move this issue to the theme repo @vpicone ?

@vpicone
Copy link
Contributor

vpicone commented Oct 6, 2021

@alisonjoseph @mjabbink I'm a bit confused here. Is this in regards to all body copy on the page? The initial issue seemed to pertain just to cards.

@alisonjoseph
Copy link
Member

I was just looking at this issue, I believe this is asking to update the guidance image? (we just merged in a fix for the actual line length bug in the theme with lists/headings).

Is there an updated image for us to drop into the website? @wonilsuhibm

@mjabbink
Copy link
Contributor

mjabbink commented Oct 6, 2021

This applies to all body copy that spans that 8-columns. By default it should subtract the 32px so it’s not 100% 8-columns. It’s an optical compensation. The same logic is applied to content inside cards as well. It’s all optical adjusting for finessed typography. We apply this when it’s doable and helps make the typography better. We do not do this in the aside for example because the line length is much shorter in those and it does not require the optical adjustment.

And yes, this should move to the them repo.

@alisonjoseph
Copy link
Member

alisonjoseph commented Oct 15, 2021

@mjabbink the body copy was fixed in this PR carbon-design-system/gatsby-theme-carbon#1172

Going to close this issue, please re-open or create a new issue/PR with updated guidance images if needed.

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

No branches or pull requests

5 participants