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" && (