feat: update ListEntries component per UX designs

bluecatengineering · Jul 17, 2024 · cfde3d9 · cfde3d9
1 parent ef0a5ce
commit cfde3d9
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 41 deletions.
diff --git a/packages/pelagos/__tests__/listInput/__snapshots__/ListEntries-test.js.snap b/packages/pelagos/__tests__/listInput/__snapshots__/ListEntries-test.js.snap
@@ -11,10 +11,16 @@ exports[`ListEntries rendering renders expected elements 1`] = `
     id="test"
     onClick={[Function]}
   >
-    <li
+    <Layer
+      as="li"
       className="ListEntries__item"
       data-testid="list-item"
     >
+      <div
+        className="ListEntries__name"
+      >
+        test
+      </div>
       <button
         aria-label="Remove test"
         className="ListEntries__icon"
@@ -24,12 +30,7 @@ exports[`ListEntries rendering renders expected elements 1`] = `
       >
         <Close />
       </button>
-      <div
-        className="ListEntries__name"
-      >
-        test
-      </div>
-    </li>
+    </Layer>
   </ul>
 </React.Fragment>
 `;
@@ -45,10 +46,16 @@ exports[`ListEntries rendering renders expected elements when column is set 1`]
     id="test"
     onClick={[Function]}
   >
-    <li
+    <Layer
+      as="li"
       className="ListEntries__item"
       data-testid="list-item"
     >
+      <div
+        className="ListEntries__name"
+      >
+        test
+      </div>
       <button
         aria-label="Remove test"
         className="ListEntries__icon"
@@ -58,12 +65,7 @@ exports[`ListEntries rendering renders expected elements when column is set 1`]
       >
         <Close />
       </button>
-      <div
-        className="ListEntries__name"
-      >
-        test
-      </div>
-    </li>
+    </Layer>
   </ul>
 </React.Fragment>
 `;
@@ -79,10 +81,16 @@ exports[`ListEntries rendering renders expected elements when highlightKey is se
     id="test"
     onClick={[Function]}
   >
-    <li
+    <Layer
+      as="li"
       className="ListEntries__item ListEntries__item--highlight"
       data-testid="list-item"
     >
+      <div
+        className="ListEntries__name"
+      >
+        test
+      </div>
       <button
         aria-label="Remove test"
         className="ListEntries__icon"
@@ -92,12 +100,7 @@ exports[`ListEntries rendering renders expected elements when highlightKey is se
       >
         <Close />
       </button>
-      <div
-        className="ListEntries__name"
-      >
-        test
-      </div>
-    </li>
+    </Layer>
   </ul>
 </React.Fragment>
 `;
@@ -113,10 +116,16 @@ exports[`ListEntries rendering renders expected elements when renderItem is not
     id="test"
     onClick={[Function]}
   >
-    <li
+    <Layer
+      as="li"
       className="ListEntries__item"
       data-testid="list-item"
     >
+      <div
+        className="ListEntries__name"
+      >
+        test
+      </div>
       <button
         aria-label="Remove test"
         className="ListEntries__icon"
@@ -126,12 +135,7 @@ exports[`ListEntries rendering renders expected elements when renderItem is not
       >
         <Close />
       </button>
-      <div
-        className="ListEntries__name"
-      >
-        test
-      </div>
-    </li>
+    </Layer>
   </ul>
 </React.Fragment>
 `;
@@ -147,10 +151,16 @@ exports[`ListEntries rendering renders expected elements when the item has class
     id="test"
     onClick={[Function]}
   >
-    <li
+    <Layer
+      as="li"
       className="ListEntries__item"
       data-testid="list-item"
     >
+      <div
+        className="TestClass ListEntries__name"
+      >
+        test
+      </div>
       <button
         aria-label="Remove test"
         className="ListEntries__icon"
@@ -160,12 +170,7 @@ exports[`ListEntries rendering renders expected elements when the item has class
       >
         <Close />
       </button>
-      <div
-        className="TestClass ListEntries__name"
-      >
-        test
-      </div>
-    </li>
+    </Layer>
   </ul>
 </React.Fragment>
 `;
diff --git a/packages/pelagos/src/listInput/ListEntries.js b/packages/pelagos/src/listInput/ListEntries.js
@@ -4,6 +4,7 @@ import debounce from 'lodash-es/debounce';
 import {t} from '@bluecateng/l10n.macro';
 import Close from '@carbon/icons-react/es/Close';
 
+import Layer from '../components/Layer';
 import renderListItem from '../listItems/renderListItem';
 import scrollIntoView from '../functions/scrollIntoView';
 
@@ -65,10 +66,12 @@ const ListEntries = ({
 					className = className ? `${className} ListEntries__name` : 'ListEntries__name';
 					const itemKey = getItemKey(item, i);
 					return (
-						<li
+						<Layer
 							key={itemKey}
+							as="li"
 							className={`ListEntries__item${itemKey === highlightKey ? ' ListEntries__item--highlight' : ''}`}
 							data-testid="list-item">
+							{cloneElement(element, {className})}
 							<button
 								className="ListEntries__icon"
 								type="button"
@@ -77,8 +80,7 @@ const ListEntries = ({
 								data-index={i}>
 								<Close />
 							</button>
-							{cloneElement(element, {className})}
-						</li>
+						</Layer>
 					);
 				})}
 			</ul>

diff --git a/packages/pelagos/src/listInput/ListEntries.less b/packages/pelagos/src/listInput/ListEntries.less
@@ -35,16 +35,20 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
+		gap: @sp-12;
 		overflow: hidden;
+		background-color: var(--field);
+		min-height: 32px;
+		padding: 0 @sp-12 0 @sp-16;
 	}
 
 	.ListEntries__item--highlight {
 		animation: highlight-fade 2s ease-out;
 	}
 
 	.ListEntries__icon {
-		@icon-button-nested();
-		padding: @sp-02;
+		@icon-button();
+		padding: @sp-04;
 
 		.ListEntries__item--highlight > & {
 			color: var(--link-primary);
@@ -53,6 +57,5 @@
 
 	.ListEntries__name {
 		flex: 1;
-		padding-left: @sp-04;
 	}
 }