feat(Truncate): migrate to Tailwind

Closes FEPLT-1728
kiwicom · Nov 16, 2023 · 7f689f3 · 7f689f3
1 parent 268715d
commit 7f689f3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 38 deletions.
diff --git a/docs/src/data/tailwind-migration-status.yaml b/docs/src/data/tailwind-migration-status.yaml
@@ -107,6 +107,6 @@ TimelineStep: false
 Toast: true
 ToastRoot: false
 Tooltip: true
-Truncate: false
+Truncate: true
 Wizard: false
 WizardStep: false
diff --git a/packages/orbit-components/src/Truncate/__tests__/index.test.tsx b/packages/orbit-components/src/Truncate/__tests__/index.test.tsx
@@ -6,28 +6,15 @@ import Text from "../../Text";
 import Heading from "../../Heading";
 
 describe("Truncate", () => {
-  it("should have expected DOM output", () => {
-    const { container } = render(
-      <Truncate maxWidth="10rem" dataTest="test">
-        children
-      </Truncate>,
-    );
-    expect(screen.getByTestId("test")).toBeInTheDocument();
-    expect(screen.getByText("children")).toBeInTheDocument();
-    expect(container.childNodes[1]).toHaveStyle({
-      minWidth: 0,
-      maxWidth: "10rem",
-    });
-  });
-
   it("should truncate children, as well as Text and Heading", () => {
     render(
-      <Truncate>
+      <Truncate dataTest="test">
         children
         <Text>text</Text>
         <Heading>heading</Heading>
       </Truncate>,
     );
+    expect(screen.getByTestId("test")).toBeInTheDocument();
     expect(screen.getByText("children")).toHaveStyle({ textOverflow: "ellipsis" });
     expect(screen.getByText("text")).toHaveStyle({ textOverflow: "ellipsis" });
     expect(screen.getByText("heading")).toHaveStyle({ textOverflow: "ellipsis" });

diff --git a/packages/orbit-components/src/Truncate/index.tsx b/packages/orbit-components/src/Truncate/index.tsx
@@ -1,32 +1,23 @@
 "use client";
 
 import * as React from "react";
-import styled from "styled-components";
+import cx from "clsx";
 
 import type { Props } from "./types";
 
-const StyledTruncate = styled.div<{ maxWidth?: string }>`
-  ${({ maxWidth }) => `
-    min-width: 0;
-    flex: 0 1 ${maxWidth === "none" ? "100%" : maxWidth};
-    max-width: ${maxWidth};
-  `};
-`;
-
-const StyledTruncateContent = styled.div`
-  &,
-  .orbit-text,
-  .orbit-heading {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
 const Truncate = ({ children, maxWidth = "100%", dataTest }: Props) => (
-  <StyledTruncate maxWidth={maxWidth} data-test={dataTest}>
-    <StyledTruncateContent>{children}</StyledTruncateContent>
-  </StyledTruncate>
+  <div
+    data-test={dataTest}
+    className={cx(
+      "min-w-0 max-w-[--truncate-max-width] shrink grow-0",
+      maxWidth === "none" ? "basis-full" : "basis-[--truncate-max-width]",
+    )}
+    style={{ "--truncate-max-width": maxWidth } as React.CSSProperties}
+  >
+    <div className={cx("truncate [&_.orbit-heading]:truncate [&_.orbit-text]:truncate")}>
+      {children}
+    </div>
+  </div>
 );
 
 export default Truncate;