search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

Core Typography - cds-text="truncate" is cutting letter descenders. #5708

Closed Jinnie closed 3 years ago

Jinnie commented 3 years ago

Describe the bug

The "truncate" transform cut too much. It should only cut horizontal overflow and add ellipsis.

How to reproduce

Steps to reproduce the behavior:

  1. Go to https://clarity.design/storybook/core/iframe.html?id=foundation-typography--page&viewMode=story#transforms
  2. Observe "Text Truncation (truncate): The quick brown fox jumps over the lazy dog."
  3. Verify that letters that have descenders (like these: qjpyg) get cut, as in this screenshot: Screenshot 2021-03-10 at 18 39 47

Expected behavior

Letter descenders are intact

Versions

Clarity project:

Clarity version:

Jinnie commented 3 years ago

Research notes:

  1. Trying to set overflow only to X axis won't work, because due to browser implementations of the W3C specs, when one of the axes has overflow different from "visible", the other evaluates to overflow: auto, no matter what is actually written in the CSS. So we can't have hidden on one axis and visible on the other.
  2. The line gets line-height: 20px from the [cds-text*='body'] definition, from this property: 
    --cds-global-typography-body-line-height: 1.2rem;

    CC @mathisscott, I'd appreciate some comment in which direction we should look for a solution. The body line-height looks a bit suspicious to me, but I have no knowledge about the reasoning behind it.

mathisscott commented 3 years ago

@Jinnie You should look into disabling the line height erasers when cds-text is set to truncate

github-actions[bot] commented 3 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.