fix(angular): fix ellipsis issue in safari - Githubissues

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 763 forks source link

fix(angular): fix ellipsis issue in safari #6569

Closed mathisscott closed 2 years ago

mathisscott commented 2 years ago

Signed-off-by: Scott Mathis smathis@vmware.com

PR Checklist

Please check if your PR fulfills the following requirements:

[ ] Tests for the changes have been added (for bug fixes / features)
[ ] Docs have been added / updated (for bug fixes / features)
[ ] If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] clarity.design website / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Dropdown toggles in Clarity Angular get a weird ellipsis in Safari.

Screen Shot 2022-01-11 at 4 18 34 PM

Issue Number: N/A

What is the new behavior?

Unsetting text-overflow for just the dropdown toggle buttons fixes this issue.

Screen Shot 2022-01-11 at 4 19 05 PM

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

@steve-haar : this is the issue we saw yesterday when I was working on the release. It wound up being an easy fix, just hard to figure out at first.

Once this PR is 👍 , I can backport to v12.

netlify[bot] commented 2 years ago

✔️ Deploy Preview for zzz-angular-clarity-design-old ready!

🔨 Explore the source changes: cdb99ce6d6289599828bcf9f5209085b23a155ae

🔍 Inspect the deploy log: https://app.netlify.com/sites/zzz-angular-clarity-design-old/deploys/61ddf68f0147f10008cb7b60

😎 Browse the preview: https://deploy-preview-6569--zzz-angular-clarity-design-old.netlify.app