diff --git a/src/components/Badge/Badge.test.tsx b/src/components/Badge/Badge.test.tsx
index 3f487da2..3a5d9fd0 100644
--- a/src/components/Badge/Badge.test.tsx
+++ b/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(, "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(
+ ,
+ "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();
});
});
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 6386fb84..18ea52b6 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -24,6 +24,7 @@ export interface CommonBadgeProps extends HTMLAttributes {
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) => (
-
+
{text}
diff --git a/src/components/IconWrapper/IconWrapper.tsx b/src/components/IconWrapper/IconWrapper.tsx
index dad1bf91..56c51ffa 100644
--- a/src/components/IconWrapper/IconWrapper.tsx
+++ b/src/components/IconWrapper/IconWrapper.tsx
@@ -21,6 +21,16 @@ 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",
@@ -28,15 +38,10 @@ const IconWrapper = ({
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 (
)}
- {children}
+
+ {children}
+
{icon && iconDir === "end" && (