fix: infotable oneLine bug (#5799)

Author: lisalupi

.changeset/vast-chefs-act.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": patch
+---
+
+`InfoTable`: oneLine created a visual issue

packages/plus/src/components/InfoTable/__tests__/__snapshots__/index.test.tsx.snap

@@ -29,7 +29,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -52,7 +52,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -75,7 +75,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -103,7 +103,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell with more text
             </div>
@@ -126,7 +126,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -154,7 +154,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -182,7 +182,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell
             </div>
@@ -205,7 +205,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -228,7 +228,7 @@ exports[`infoTable > should work with default props 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -269,7 +269,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -292,7 +292,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -315,7 +315,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -343,7 +343,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell with more text
             </div>
@@ -366,7 +366,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -394,7 +394,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -422,7 +422,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5  uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell
             </div>
@@ -445,7 +445,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -468,7 +468,7 @@ exports[`infoTable > should work with multiLine 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -509,7 +509,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -532,7 +532,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -555,7 +555,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -583,7 +583,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell with more text
             </div>
@@ -606,7 +606,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -634,7 +634,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -662,7 +662,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell cell
             </div>
@@ -685,7 +685,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>
@@ -708,7 +708,7 @@ exports[`infoTable > should work with width 1`] = `
             class="styles__h6pvpm4"
           >
             <div
-              class="styles__h6pvpm5 styles__h6pvpm6 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+              class="styles__h6pvpm5 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow7 uv_m4c9owb uv_m4c9owi uv_m4c9owm uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
             >
               cell
             </div>

packages/plus/src/components/InfoTable/components/Cell.tsx

@@ -2,7 +2,7 @@
 
 import { Stack, Text } from '@ultraviolet/ui'
 import type { CSSProperties, ReactNode } from 'react'
-import { cellText, cellTextOneLine, desc, term } from '../styles.css'
+import { cellText, desc, term } from '../styles.css'
 
 type CellProps = {
   children: ReactNode
@@ -31,7 +31,7 @@ export const InfoTableCell = ({
     <dd className={desc}>
       <Text
         as="div"
-        className={`${cellText} ${!multiline ? cellTextOneLine : ''}`}
+        className={`${cellText}`}
         oneLine={!multiline}
         prominence="default"
         sentiment="neutral"

packages/plus/src/components/InfoTable/styles.css.ts

@@ -58,12 +58,3 @@ globalStyle(`${cellText} > *`, {
   alignItems: 'center',
   marginRight: theme.space[1],
 })
-
-export const cellTextOneLine = style({})
-
-globalStyle(`${cellTextOneLine} > *`, {
-  overflow: 'hidden',
-  display: 'inline-block',
-  textOverflow: 'ellipsis',
-  width: '100%',
-})