fix: element overlapping box shadow in large mode for the list (#5181)

* fix: element overlapping box shadow in large mode for the list * Update class name in List.test.js.snap
Talend · Feb 14, 2024 · 63ec624 · 63ec624
1 parent 9426a79
commit 63ec624
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/.changeset/cuddly-files-pump.md b/.changeset/cuddly-files-pump.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+fix: element does not goes over the box shadow in large mode for the list
diff --git a/packages/components/src/List/List.component.js b/packages/components/src/List/List.component.js
@@ -1,11 +1,12 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
 
-import Toolbar from './Toolbar';
+import Inject from '../Inject';
 import ListToVirtualizedList from './ListToVirtualizedList';
+import Toolbar from './Toolbar';
+
 import theme from './List.module.scss';
-import Inject from '../Inject';
 
 const SelectAll = Toolbar.SelectAll;
 
@@ -166,7 +167,9 @@ function List({
 			{injected('after-toolbar')}
 			{selectAllCheckbox && <SelectAll {...selectAllCheckbox} />}
 			{injected('before-list-wrapper')}
-			<div className="tc-list-display-virtualized">
+			<div
+				className={classNames('tc-list-display-virtualized', theme[`display-mode-${displayMode}`])}
+			>
 				{injected('before-list')}
 				<ListToVirtualizedList
 					id={id}

diff --git a/packages/components/src/List/List.module.scss b/packages/components/src/List/List.module.scss
@@ -10,6 +10,10 @@
 	width: 100%;
 	overflow: hidden;
 
+	.display-mode-large {
+		padding-top: 2px;
+	}
+
 	:global(.tc-list-toolbar) {
 		flex-grow: 0;
 		flex-shrink: 0;

diff --git a/packages/components/src/List/__snapshots__/List.test.js.snap b/packages/components/src/List/__snapshots__/List.test.js.snap
@@ -170,7 +170,7 @@ exports[`List should render 1`] = `
     </div>
   </div>
   <div
-    class="tc-list-display-virtualized"
+    class="tc-list-display-virtualized theme-display-mode-table"
   >
     <div
       style="overflow: visible; height: 0px; width: 0px;"
-Original file line number
+Diff line change
@@ Expand Up / @@ -170,7 +170,7 @@ exports[`List should render 1`] = ` @@
         </div>
       </div>
       <div
-        class="tc-list-display-virtualized"
+        class="tc-list-display-virtualized theme-display-mode-table"
       >
         <div
           style="overflow: visible; height: 0px; width: 0px;"
@@ Expand Down @@