fix(Buttons, Chips, Tags, Sheets, Snackbar): Remove label truncation

src/__stories__/chip-story.tsx

@@ -26,6 +26,7 @@ type Args = {
     active: boolean;
     badge: string;
     href: string;
+    label: string;
 };
 
 type Props = {
@@ -57,6 +58,7 @@ export const Default: StoryComponent<Args> = ({
     badge,
     active: chipActive,
     href: hrefProp,
+    label,
 }) => {
     const props = {
         Icon: icon ? IconLightningFilled : undefined,
@@ -71,10 +73,10 @@ export const Default: StoryComponent<Args> = ({
         <ChipBackgroundContainer dataAttributes={{testid: 'chip'}} inverse={inverse}>
             {closable ? (
                 <Chip onClose={() => window.alert('closed')} {...rest}>
-                    Chip
+                    {label}
                 </Chip>
             ) : (
-                <Chip {...props}>Chip</Chip>
+                <Chip {...props}>{label}</Chip>
             )}
         </ChipBackgroundContainer>
     );
@@ -177,6 +179,7 @@ export const NavigableChip: StoryComponent<{
 };
 
 const defaultArgs = {
+    label: 'Chip',
     inverse: false,
     active: false,
     badge: '0',

src/button.tsx

@@ -29,18 +29,11 @@ import type {ExclusifyUnion} from './utils/utility-types';
 const ButtonTextRenderer = ({element, small}: {element: React.ReactNode; small?: boolean}) => {
     const {textPresets} = useTheme();
     return small ? (
-        <Text
-            size={14}
-            lineHeight={20}
-            weight={textPresets.button.weight}
-            truncate={1}
-            color="inherit"
-            as="div"
-        >
+        <Text size={14} lineHeight={20} weight={textPresets.button.weight} color="inherit" as="div">
             {element}
         </Text>
     ) : (
-        <Text3 weight={textPresets.button.weight} truncate={1} color="inherit" as="div">
+        <Text3 weight={textPresets.button.weight} color="inherit" as="div">
             {element}
         </Text3>
     );

src/chip.tsx

@@ -71,7 +71,7 @@ const Chip = (props: ChipProps): JSX.Element => {
                 </div>
             )}
             <Box paddingRight={badge ? 8 : 0 || onClose ? 4 : 0}>
-                <Text2 id={id} weight={textPresets.indicator.weight} truncate={1} color="currentColor">
+                <Text2 id={id} weight={textPresets.indicator.weight} color="currentColor">
                     {children}
                 </Text2>
             </Box>

src/skins/blau.tsx

@@ -362,7 +362,7 @@ export const getBlauSkin: GetKnownSkin = () => {
             button: '4px',
             checkbox: '2px',
             container: '8px',
-            indicator: '999px',
+            indicator: '24px',
             input: '8px',
             legacyDisplay: '16px',
             popup: '8px',

src/skins/esimflag.tsx

@@ -363,7 +363,7 @@ export const getEsimflagSkin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '999px',
-            button: '999px',
+            button: '32px',
             checkbox: '4px',
             container: '20px',
             indicator: '8px',

src/skins/movistar.tsx

@@ -378,7 +378,7 @@ export const getMovistarSkin: GetKnownSkin = () => {
             button: '4px',
             checkbox: '2px',
             container: '8px',
-            indicator: '999px',
+            indicator: '24px',
             input: '8px',
             legacyDisplay: '16px',
             popup: '8px',

src/skins/o2-new.tsx

@@ -366,10 +366,10 @@ export const getO2NewSkin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '999px',
-            button: '999px',
+            button: '32px',
             checkbox: '2px',
             container: '16px',
-            indicator: '999px',
+            indicator: '24px',
             input: '12px',
             legacyDisplay: '16px',
             popup: '8px',

src/skins/o2.tsx

@@ -365,7 +365,7 @@ export const getO2Skin: GetKnownSkin = () => {
             button: '4px',
             checkbox: '2px',
             container: '8px',
-            indicator: '999px',
+            indicator: '24px',
             input: '8px',
             legacyDisplay: '16px',
             popup: '8px',

src/skins/telefonica.tsx

@@ -367,10 +367,10 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '0px',
-            button: '999px',
+            button: '32px',
             checkbox: '0px',
             container: '0px',
-            indicator: '999px',
+            indicator: '24px',
             input: '0px',
             legacyDisplay: '0px',
             popup: '0px',

src/skins/tu.tsx

@@ -360,10 +360,10 @@ export const getTuSkin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '999px',
-            button: '999px',
+            button: '32px',
             checkbox: '2px',
             container: '16px',
-            indicator: '999px',
+            indicator: '24px',
             input: '12px',
             legacyDisplay: '16px',
             popup: '8px',

src/skins/vivo-new.tsx

@@ -356,10 +356,10 @@ export const getVivoNewSkin: GetKnownSkin = () => {
         borderRadii: {
             avatar: '50%',
             bar: '999px',
-            button: '999px',
+            button: '32px',
             checkbox: '2px',
             container: '16px',
-            indicator: '999px',
+            indicator: '24px',
             input: '12px',
             legacyDisplay: '16px',
             popup: '8px',

src/skins/vivo.tsx

@@ -358,7 +358,7 @@ export const getVivoSkin: GetKnownSkin = () => {
             button: '4px',
             checkbox: '2px',
             container: '8px',
-            indicator: '999px',
+            indicator: '24px',
             input: '8px',
             legacyDisplay: '16px',
             popup: '8px',

src/tag.tsx

@@ -117,13 +117,7 @@ const Tag = ({
                 </Box>
             )}
             <ThemeVariant isInverse={false}>
-                <Text
-                    color={textColor}
-                    size={14}
-                    lineHeight={20}
-                    weight={textPresets.indicator.weight}
-                    truncate
-                >
+                <Text color={textColor} size={14} lineHeight={20} weight={textPresets.indicator.weight}>
                     {children}
                 </Text>
                 {badgeValue !== 0 && (