Add Badge Ellipsis content boolean toggle (#531)

* Add Badge Ellipsis content boolean toggle

* Update test

Author: vineethasok

src/components/Badge/Badge.test.tsx

@@ -2,10 +2,30 @@ import { Badge } from "./Badge";
 import { renderCUI } from "@/utils/test-utils";
 
 describe("Badge", () => {
-  test("given a text, should render it", () => {
+  test("given a text, should render ellipsed badge", () => {
     const text = "text to render";
     const rendered = renderCUI(<Badge text={text} />, "light");
 
     expect(rendered.getByText(text).textContent).toEqual(text);
+    expect(rendered.queryByTestId("ellipsed-badge-content")).not.toBeNull();
+    expect(rendered.queryByTestId("ellipsed-icon-wrapper-text")).not.toBeNull();
+    expect(rendered.queryByTestId("normal-badge-content")).toBeNull();
+    expect(rendered.queryByTestId("normal-icon-wrapper-text")).toBeNull();
+  });
+  test("given a text, should render normal badge when ellipsisContent is false", () => {
+    const text = "text to render";
+    const rendered = renderCUI(
+      <Badge
+        text={text}
+        ellipsisContent={false}
+      />,
+      "light"
+    );
+
+    expect(rendered.getByText(text).textContent).toEqual(text);
+    expect(rendered.queryByTestId("ellipsed-badge-content")).toBeNull();
+    expect(rendered.queryByTestId("ellipsed-icon-wrapper-text")).toBeNull();
+    expect(rendered.queryByTestId("normal-badge-content")).not.toBeNull();
+    expect(rendered.queryByTestId("normal-icon-wrapper-text")).not.toBeNull();
   });
 });

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
@@ -103,13 +105,14 @@ export const Badge = ({
     $type={type}
     {...props}
   >
-    <Content>
+    <Content data-testid={`${ellipsisContent ? "ellipsed" : "normal"}-badge-content`}>
       <BadgeContent
         as={IconWrapper}
         icon={icon}
         iconDir={iconDir}
         size={size}
         $state={state}
+        ellipsisContent={ellipsisContent}
       >
         {text}
       </BadgeContent>

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,11 @@ const IconWrapper = ({
           height={height}
         />
       )}
-      <EllipsisContent>{children}</EllipsisContent>
+      <TextWrapper
+        data-testid={`${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`}
+      >
+        {children}
+      </TextWrapper>
       {icon && iconDir === "end" && (
         <Icon
           name={icon}