Add Badge Ellipsis content boolean toggle

ClickHouse · Jan 29, 2025 · 66a09e9 · 66a09e9
1 parent 002599a
commit 66a09e9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -24,6 +24,7 @@ export interface CommonBadgeProps extends HTMLAttributes<HTMLDivElement> {
   type?: BadgeType;
   icon?: ImageName;
   iconDir?: HorizontalDirection;
+  ellipsisContent?: boolean;
 }
 
 export interface DismissibleBadge extends CommonBadgeProps {
@@ -95,6 +96,7 @@ export const Badge = ({
   type,
   dismissible,
   onClose,
+  ellipsisContent = true,
   ...props
 }: BadgeProps) => (
   <Wrapper
@@ -110,6 +112,7 @@ export const Badge = ({
         iconDir={iconDir}
         size={size}
         $state={state}
+        ellipsisContent={ellipsisContent}
       >
         {text}
       </BadgeContent>

diff --git a/src/components/IconWrapper/IconWrapper.tsx b/src/components/IconWrapper/IconWrapper.tsx
@@ -21,22 +21,27 @@ const LabelContainer = styled.div<{ $hasIcon: boolean; $iconDir: HorizontalDirec
   gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};
 `;
 
+interface IconWrapperProps {
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
+  size?: IconSize;
+  width?: number | string;
+  height?: number | string;
+  children: ReactNode;
+  ellipsisContent?: boolean;
+}
+
 const IconWrapper = ({
   icon,
   iconDir = "start",
   size = "sm",
   width,
   height,
   children,
+  ellipsisContent = true,
   ...props
-}: {
-  icon?: IconName;
-  iconDir?: HorizontalDirection;
-  children: ReactNode;
-  size?: IconSize;
-  width?: number | string;
-  height?: number | string;
-}) => {
+}: IconWrapperProps) => {
+  const TextWrapper = ellipsisContent ? EllipsisContent : "div";
   return (
     <LabelContainer
       $hasIcon={typeof icon === "string"}
@@ -51,7 +56,7 @@ const IconWrapper = ({
           height={height}
         />
       )}
-      <EllipsisContent>{children}</EllipsisContent>
+      <TextWrapper>{children}</TextWrapper>
       {icon && iconDir === "end" && (
         <Icon
           name={icon}