Add modification for wrapping text with ellipsis

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

packages/technical-features/ui-components/src/element/element.tsx

@@ -3,6 +3,7 @@ import { pipeline } from "@ogre-tools/fp";
 import { flexParentModification } from "./prop-modifications/flex/flex-parent";
 import { classNameModification } from "./prop-modifications/class-names/class-names";
 import { vanillaClassNameAdapterModification } from "./prop-modifications/class-names/vanilla-class-name-adapter";
+import { wordWrapModification } from "./prop-modifications/word-wrap/word-wrap";
 
 export const ElementFor =
   <T extends HTMLElement, Y extends HTMLAttributes<T>>(TagName: React.ElementType) =>
@@ -11,6 +12,7 @@ export const ElementFor =
       props,
       vanillaClassNameAdapterModification,
       flexParentModification,
+      wordWrapModification,
       classNameModification,
     );
 

packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.test.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Div } from "../../elements";
+import { render } from "@testing-library/react";
+import { discoverFor } from "@k8slens/react-testing-library-discovery";
+
+describe("word-wrap", () => {
+  it("given word wrap wit, renders with class name", () => {
+    const rendered = render(
+      <Div _wordWrap _className={["some-class-name"]} data-some-element-test />,
+    );
+
+    const discover = discoverFor(() => rendered);
+
+    const { discovered } = discover.getSingleElement("some-element");
+
+    expect(discovered.className).toBe("overflow-hidden text-ellipsis some-class-name");
+  });
+});

packages/technical-features/ui-components/src/element/prop-modifications/word-wrap/word-wrap.ts

@@ -0,0 +1,24 @@
+import type { ClassName } from "../class-names/class-names";
+
+declare global {
+  interface ElementProps {
+    _className?: ClassName;
+    _wordWrap?: boolean;
+  }
+}
+
+export const wordWrapModification = <T extends ElementProps>({
+  _wordWrap,
+  _className,
+  ...props
+}: T) => {
+  if (!_wordWrap) {
+    return { _className, ...props };
+  }
+
+  return {
+    ...props,
+
+    _className: ["overflow-hidden", "text-ellipsis", _className],
+  };
+};