Merge pull request #29 from BSoDium/main

Prevent unwanted badge wrap by modifying overflow behaviour

Author: jimdrury

src/components/badge.component.tsx

@@ -23,6 +23,9 @@ export const StyledBadge = styled.span<StyledBadgeProps>(
     textTransform: styles?.textTransform || "uppercase",
     paddingInline: styles?.paddingInline || "5px",
     paddingBlock: styles?.paddingBlock || "2px",
+    whiteSpace: styles?.whiteSpace || "nowrap",
+    overflow: styles?.overflow || "hidden",
+    textOverflow: styles?.textOverflow || "ellipsis",
     display: "block",
   }),
 );

src/typings.interface.ts

@@ -21,6 +21,9 @@ export type BadgeConfig = {
         paddingBlock?: Property.PaddingBlock,
         paddingInline?: Property.PaddingInline,
         textTransform?: Property.TextTransform,
+        whiteSpace?: Property.WhiteSpace,
+        overflow?: Property.Overflow,
+        textOverflow?: Property.TextOverflow,
     };
     location?: Array<'toolbar' | 'toolbar-extra' | 'sidebar'>;
     title?: string;