cloud-gov / cg-ui

for the 2024 18F-supported cloud.gov product UI formerly known as the Stratos Dashboard
Other
4 stars 0 forks source link

Add text-ellipsis utility class. #453

Closed cannandev closed 2 months ago

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.

image

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

Security considerations

None. CSS only.

Acceptance criteria

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.

cannandev commented 2 months ago

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

@echappen Can you approve the PR again so I can merge it! Thank you.