fix: table and list to hide scroll bar is no overflow

scaleway · Dec 16, 2024 · 27dfa74 · 27dfa74
1 parent 9d056b3
commit 27dfa74
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 49 deletions.
diff --git a/.changeset/dry-cats-hope.md b/.changeset/dry-cats-hope.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Hide scroll bar on `Table` and `List` if there is no overflow on x
diff --git a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,12 +4,12 @@ exports[`List > Should expand a row by pressing Space 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -708,12 +708,12 @@ exports[`List > Should not collapse a row by clicking on expandable content 1`]
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -1462,7 +1462,7 @@ exports[`List > Should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -2001,12 +2001,12 @@ exports[`List > Should render correctly with bad sort value 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -2694,7 +2694,7 @@ exports[`List > Should render correctly with disabled rows 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -3243,7 +3243,7 @@ exports[`List > Should render correctly with expandable rows 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -3802,12 +3802,12 @@ exports[`List > Should render correctly with info 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -4602,12 +4602,12 @@ exports[`List > Should render correctly with isExpandable and autoClose rows the
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -5356,12 +5356,12 @@ exports[`List > Should render correctly with isExpandable rows then click 1`] =
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -6079,7 +6079,7 @@ exports[`List > Should render correctly with loading 1`] = `
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -6810,7 +6810,7 @@ exports[`List > Should render correctly with loading with selectable 1`] = `
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -7901,12 +7901,12 @@ exports[`List > Should render correctly with preventClick cell then click but ev
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -8594,7 +8594,7 @@ exports[`List > Should render correctly with row expanded 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -9133,7 +9133,7 @@ exports[`List > Should render correctly with selectable 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -10783,12 +10783,12 @@ exports[`List > Should render correctly with selectable then click on first row
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -13048,12 +13048,12 @@ exports[`List > Should render correctly with selectable with shift click for mul
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -15311,7 +15311,7 @@ exports[`List > Should render correctly with sentiment rows 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -15865,7 +15865,7 @@ exports[`List > Should render correctly with sort 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -16404,12 +16404,12 @@ exports[`List > Should render correctly with sort then click 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {

diff --git a/packages/ui/src/components/List/index.tsx b/packages/ui/src/components/List/index.tsx
@@ -12,7 +12,7 @@ import type { ColumnProps } from './types'
 
 const TableContainer = styled.div`
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 `
 
 const StyledTable = styled.table`

diff --git a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Table > Should render correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -491,12 +491,12 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -1098,12 +1098,12 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -1679,12 +1679,12 @@ exports[`Table > Should render correctly with info 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -2265,7 +2265,7 @@ exports[`Table > Should render correctly with loading 1`] = `
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -2904,12 +2904,12 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -3501,12 +3501,12 @@ exports[`Table > Should render correctly with selectable and shift click 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -5164,12 +5164,12 @@ exports[`Table > Should render correctly with selectable then click on first row
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -6829,12 +6829,12 @@ exports[`Table > Should render correctly with sort then click 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {
@@ -7561,12 +7561,12 @@ exports[`Table > Should render correctly with stipped 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-0 {
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .emotion-2 {

diff --git a/packages/ui/src/components/Table/index.tsx b/packages/ui/src/components/Table/index.tsx
@@ -16,7 +16,7 @@ import type { ColumnProps } from './types'
 
 const TableContainer = styled.div`
   min-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
 `
 
 type StyledTableProps = {