Skip to content

Commit

Permalink
Fix ellipsis truncation in Token (#2974)
Browse files Browse the repository at this point in the history 
* Fix ellipsis overflow in `Token`

* Create .changeset/many-bears-bake.md

* Update snapshot
  • Loading branch information
@iansan5653
iansan5653 committed Mar 7, 2023
1 parent 4cfb84a commit 6a795da
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 104 deletions.
5 changes: 5 additions & 0 deletions .changeset/many-bears-bake.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Fix ellipsis truncation in `Token`
3 changes: 1 addition & 2 deletions src/Token/_TokenTextContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@ const TokenTextContainer = styled('span')<Partial<TokenBaseProps>>`
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
// reset anchor styles
color: currentColor;
Expand Down
72 changes: 24 additions & 48 deletions src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,13 +257,12 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -1035,13 +1034,12 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -1653,13 +1651,12 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -2379,13 +2376,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -3105,13 +3101,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -3824,13 +3819,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -4545,13 +4539,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -5266,13 +5259,12 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -5989,13 +5981,12 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -6660,13 +6651,12 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -7156,13 +7146,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -7932,13 +7921,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -8740,13 +8728,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -9525,13 +9512,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -10379,13 +10365,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -11233,13 +11218,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -12081,13 +12065,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -12897,13 +12880,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -13745,13 +13727,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -14575,13 +14556,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -15469,13 +15449,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -16361,13 +16340,12 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -17221,13 +17199,12 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down Expand Up @@ -17936,13 +17913,12 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
color: inherit;
font: inherit;
margin: 0;
overflow: visible;
padding: 0;
width: auto;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
line-height: 1;
line-height: normal;
color: currentColor;
-webkit-text-decoration: none;
text-decoration: none;
Expand Down
Loading

0 comments on commit 6a795da

Please sign in to comment.