cannandev commented 2 months ago

Changes proposed in this pull request:

Create a reusable utility class that adds an ellipsis at the end of a block of text. The new dashboard design uses ellipses often. We want to use CSS to change the visual display, without affecting screen reader text.

How to use

Apply text-ellipsis class to any element. It will add an three dots as the text approaches the end of its container.

⚠️ Note: The attribute text-overflow relies on the element's display set to block. For text that has another element following it on the same line, set the parent display to flex.

Example:

<header className="display-flex">
  <strong className="orgs-selector__current text-bold text-base-dark text-ellipsis">
    sandbox-gsa-much-longer-name-goes-here-and-is-very-very-long
  </strong>
  <button>toggle</button>
</header>

Related issues

409

Submitter checklist

[ ] Added logging is not capturing sensitive data and is set to an appropriate level (DEBUG vs INFO etc)
[ ] Updated relevant documentation (README, ADRs, explainers, diagrams)

Security considerations

None. CSS only.

Acceptance criteria

[ ] Ellipsis appears on text longer than its container.
[ ] Full text is still announced by screen readers.

jduss4 commented 2 months ago

[non-blocking question / suggestion] What are your thoughts on adding an example of this to the design-guide page? Maybe that's coming once it's tied to the dropdown, but I could see it being valuable for someone figuring out the right combination of CSS classes that need to exist for the ellipses to work!

echappen commented 2 months ago

@cannandev Please ff to remove the .text-ellipsis selector that I was using provisionally.