diff --git a/.changeset/many-bears-bake.md b/.changeset/many-bears-bake.md new file mode 100644 index 00000000000..6c771b29f5a --- /dev/null +++ b/.changeset/many-bears-bake.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Fix ellipsis truncation in `Token` diff --git a/src/Token/_TokenTextContainer.tsx b/src/Token/_TokenTextContainer.tsx index 17e81298923..db14873627d 100644 --- a/src/Token/_TokenTextContainer.tsx +++ b/src/Token/_TokenTextContainer.tsx @@ -14,13 +14,12 @@ const TokenTextContainer = styled('span')>` 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; diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 7327d3b10c9..2555c4cbfff 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -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; @@ -1045,13 +1044,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; @@ -1665,13 +1663,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; @@ -2399,13 +2396,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; @@ -3133,13 +3129,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; @@ -3860,13 +3855,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; @@ -4589,13 +4583,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; @@ -5318,13 +5311,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; @@ -6049,13 +6041,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; @@ -6728,13 +6719,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; @@ -7224,13 +7214,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; @@ -8008,13 +7997,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; @@ -8824,13 +8812,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; @@ -9617,13 +9604,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; @@ -10480,13 +10466,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; @@ -11343,13 +11328,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; @@ -12200,13 +12184,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; @@ -13025,13 +13008,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; @@ -13882,13 +13864,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; @@ -14721,13 +14702,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; @@ -15625,13 +15605,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; @@ -16527,13 +16506,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; @@ -17397,13 +17375,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; @@ -18120,13 +18097,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; diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap index 9515faa8dc6..6c7dde5b897 100644 --- a/src/__tests__/__snapshots__/Token.test.tsx.snap +++ b/src/__tests__/__snapshots__/Token.test.tsx.snap @@ -128,13 +128,12 @@ exports[`Token components AvatarToken renders all 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; @@ -353,13 +352,12 @@ exports[`Token components AvatarToken renders all 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; @@ -578,13 +576,12 @@ exports[`Token components AvatarToken renders all 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; @@ -805,13 +802,12 @@ exports[`Token components AvatarToken renders all 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; @@ -1032,13 +1028,12 @@ exports[`Token components AvatarToken renders all 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; @@ -1174,13 +1169,12 @@ exports[`Token components AvatarToken renders consistently 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; @@ -1275,13 +1269,12 @@ exports[`Token components AvatarToken renders isSelected 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; @@ -1464,13 +1457,12 @@ exports[`Token components AvatarToken renders with a remove button 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; @@ -1667,13 +1659,12 @@ exports[`Token components IssueLabelToken renders all 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; @@ -1842,13 +1833,12 @@ exports[`Token components IssueLabelToken renders all 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; @@ -2017,13 +2007,12 @@ exports[`Token components IssueLabelToken renders all 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; @@ -2194,13 +2183,12 @@ exports[`Token components IssueLabelToken renders all 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; @@ -2371,13 +2359,12 @@ exports[`Token components IssueLabelToken renders all 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; @@ -2485,13 +2472,12 @@ exports[`Token components IssueLabelToken renders consistently 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; @@ -2627,13 +2613,12 @@ exports[`Token components IssueLabelToken renders custom fill color 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; @@ -2802,13 +2787,12 @@ exports[`Token components IssueLabelToken renders default fill color 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; @@ -2945,13 +2929,12 @@ exports[`Token components IssueLabelToken renders isSelected 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; @@ -3089,13 +3072,12 @@ exports[`Token components IssueLabelToken renders with a remove button 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; @@ -3266,13 +3248,12 @@ exports[`Token components Token renders all 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; @@ -3448,13 +3429,12 @@ exports[`Token components Token renders all 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; @@ -3630,13 +3610,12 @@ exports[`Token components Token renders all 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; @@ -3814,13 +3793,12 @@ exports[`Token components Token renders all 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; @@ -3998,13 +3976,12 @@ exports[`Token components Token renders all 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; @@ -4117,13 +4094,12 @@ exports[`Token components Token renders consistently 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; @@ -4198,13 +4174,12 @@ exports[`Token components Token renders isSelected 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; @@ -4289,13 +4264,12 @@ exports[`Token components Token renders with a leadingVisual 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; @@ -4446,13 +4420,12 @@ exports[`Token components Token renders with a remove button 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;