fix: text ellipsing (#422)

qlik-oss · Oct 19, 2023 · 4515bfa · 4515bfa
1 parent 6e4953a
commit 4515bfa
Show file tree

Hide file tree

Showing 12 changed files with 6 additions and 13 deletions.
diff --git a/src/pivot-table/components/cells/PseudoDimensionCell.tsx b/src/pivot-table/components/cells/PseudoDimensionCell.tsx
@@ -29,8 +29,6 @@ interface LabelCellProps {
 
 const getTextStyle = (clampCount: number): React.CSSProperties => ({
   ...textStyle,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
   ...getLineClampStyle(clampCount),
 });
 
@@ -75,7 +73,7 @@ const PseudoDimensionCell = ({
       }}
       data-testid={testId}
     >
-      <div
+      <span
         style={{
           ...getTextStyle(lineClamp),
           ...stickyCell,
@@ -88,7 +86,7 @@ const PseudoDimensionCell = ({
         }}
       >
         {cell.ref.qText}
-      </div>
+      </span>
       {columnAdjuster}
     </div>
   );

diff --git a/src/pivot-table/components/cells/utils/get-dimension-cell-style.ts b/src/pivot-table/components/cells/utils/get-dimension-cell-style.ts
@@ -155,8 +155,6 @@ export const getTextStyle = ({
     ...totalValueStyling,
     ...nullValueStyling,
     ...(isCellSelected && { color: selectedStyle.color }),
-    overflow: "hidden",
-    textOverflow: "ellipsis",
     ...getLineClampStyle(isLeftColumn ? styleService.grid.lineClamp : DEFAULT_LINE_CLAMP),
   };
 };
diff --git a/src/pivot-table/components/cells/utils/get-measure-cell-style.ts b/src/pivot-table/components/cells/utils/get-measure-cell-style.ts
@@ -21,12 +21,6 @@ export const containerStyle: React.CSSProperties = {
   justifyContent: "center",
 };
 
-const getGridTextClampStyle = (clampCount: number): React.CSSProperties => ({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  ...getLineClampStyle(clampCount),
-});
-
 export const getCellStyle = (
   styleService: StyleService,
   isNull: boolean,
@@ -62,7 +56,7 @@ export const getTextStyle = (
   const { fontFamily, fontSize } = styleService.measureValues;
   const sharedStyle = {
     ...textStyle,
-    ...(!isNumeric && getGridTextClampStyle(styleService.grid.lineClamp)),
+    ...(!isNumeric && getLineClampStyle(styleService.grid.lineClamp)),
     ...(expressionColor && { color: expressionColor }),
     alignSelf: "flex-start",
     fontFamily,

diff --git a/src/pivot-table/components/shared-styles.ts b/src/pivot-table/components/shared-styles.ts
@@ -48,6 +48,9 @@ export const getLineClampStyle = (clampCount: number): React.CSSProperties => ({
   WebkitLineClamp: clampCount,
   WebkitBoxOrient: "vertical",
   lineBreak: "auto",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  wordBreak: "break-all",
 });
 
 export const stickyCell: Pick<React.CSSProperties, "width" | "maxWidth" | "position" | "left" | "top"> = {

diff --git a/test/rendering/render.mjs-snapshots/scenario-2-chromium-linux.png b/test/rendering/render.mjs-snapshots/scenario-2-chromium-linux.png
diff --git a/test/rendering/render.mjs-snapshots/scenario-2-firefox-linux.png b/test/rendering/render.mjs-snapshots/scenario-2-firefox-linux.png
diff --git a/test/rendering/render.mjs-snapshots/scenario-2-snapshot-chromium-linux.png b/test/rendering/render.mjs-snapshots/scenario-2-snapshot-chromium-linux.png
diff --git a/test/rendering/render.mjs-snapshots/scenario-2-snapshot-firefox-linux.png b/test/rendering/render.mjs-snapshots/scenario-2-snapshot-firefox-linux.png
diff --git a/test/rendering/render.mjs-snapshots/scenario-9-chromium-linux.png b/test/rendering/render.mjs-snapshots/scenario-9-chromium-linux.png
diff --git a/test/rendering/render.mjs-snapshots/scenario-9-firefox-linux.png b/test/rendering/render.mjs-snapshots/scenario-9-firefox-linux.png
diff --git a/.../rendering/render.mjs-snapshots/scenario-color-by-expression-chromium-linux.png b/.../rendering/render.mjs-snapshots/scenario-color-by-expression-chromium-linux.png
diff --git a/test/rendering/render.mjs-snapshots/scenario-color-by-expression-firefox-linux.png b/test/rendering/render.mjs-snapshots/scenario-color-by-expression-firefox-linux.png