Fix ListView drag preview density (#3493)

adobe · Sep 9, 2022 · 5f16c3f · 5f16c3f · adobe-bot · Sep 9, 2022
1 parent dcd95c3
commit 5f16c3f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/packages/@react-spectrum/list/src/DragPreview.tsx b/packages/@react-spectrum/list/src/DragPreview.tsx
@@ -14,25 +14,38 @@ import {Grid} from '@react-spectrum/layout';
 import {GridNode} from '@react-types/grid';
 import listStyles from './styles.css';
 import React from 'react';
+import {SpectrumListViewProps} from '@react-types/list';
 import {Text} from '@react-spectrum/text';
 
-interface DragPreviewProps {
+interface DragPreviewProps<T> {
   item: GridNode<any>,
   itemCount: number,
-  itemHeight: number
+  itemHeight: number,
+  density: SpectrumListViewProps<T>['density']
 }
 
-export function DragPreview(props: DragPreviewProps) {
+export function DragPreview(props: DragPreviewProps<unknown>) {
   let {
     item,
     itemCount,
-    itemHeight
+    itemHeight,
+    density
   } = props;
 
   let isDraggingMultiple = itemCount > 1;
 
   return (
-    <div style={{height: itemHeight}} className={classNames(listStyles, 'react-spectrum-ListViewItem', 'react-spectrum-ListViewItem-dragPreview', {'react-spectrum-ListViewItem-dragPreview--multiple': isDraggingMultiple})}>
+    <div
+      style={{height: itemHeight}}
+      className={
+        classNames(
+          listStyles,
+          'react-spectrum-ListViewItem',
+          'react-spectrum-ListViewItem-dragPreview',
+          {'react-spectrum-ListViewItem-dragPreview--multiple': isDraggingMultiple},
+          `react-spectrum-ListViewItem-dragPreview--${density}`
+          )
+      }>
       <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>
         <SlotProvider
           slots={{

diff --git a/packages/@react-spectrum/list/src/ListView.tsx b/packages/@react-spectrum/list/src/ListView.tsx
@@ -266,7 +266,7 @@ function ListView<T extends object>(props: SpectrumListViewProps<T>, ref: DOMRef
             let item = state.collection.getItem(dragState.draggedKey);
             let itemCount = dragState.draggingKeys.size;
             let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;
-            return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight}  />;
+            return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} density={density}  />;
           }}
         </DragPreview>
       }

diff --git a/packages/@react-spectrum/list/src/styles.css b/packages/@react-spectrum/list/src/styles.css
@@ -399,6 +399,16 @@
     border-radius: var(--spectrum-alias-border-radius-regular);
     background-color: var(--spectrum-table-background-color, var(--spectrum-global-color-gray-50));
 
+    &.react-spectrum-ListViewItem-dragPreview--compact {
+      padding-top: var(--spectrum-listview-item-compact-padding-y);
+      padding-bottom: var(--spectrum-listview-item-compact-padding-y);
+    }
+
+    &.react-spectrum-ListViewItem-dragPreview--spacious {
+      padding-top: var(--spectrum-listview-item-spacious-padding-y);
+      padding-bottom: var(--spectrum-listview-item-spacious-padding-y);
+    }
+
     .react-spectrum-ListViewItem-grid {
       grid-template-areas:
         "thumbnail content     . badge"