Item heights (deephaven#1909)

bmingles · Apr 11, 2024 · a111d5a · a111d5a
1 parent c964da7
commit a111d5a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/jsapi-components/src/spectrum/ListView.tsx b/packages/jsapi-components/src/spectrum/ListView.tsx
@@ -1,11 +1,12 @@
+import { useProvider } from '@adobe/react-spectrum';
 import {
   ListView as ListViewBase,
   ListViewProps as ListViewPropsBase,
   NormalizedItemData,
 } from '@deephaven/components';
 import { dh as DhType } from '@deephaven/jsapi-types';
 import { Settings } from '@deephaven/jsapi-utils';
-import { LIST_VIEW_ROW_HEIGHT } from '@deephaven/utils';
+import { LIST_VIEW_ROW_HEIGHTS } from '@deephaven/utils';
 import useFormatter from '../useFormatter';
 import useViewportData from '../useViewportData';
 import { useItemRowDeserializer } from './utils';
@@ -29,6 +30,9 @@ export function ListView({
   settings,
   ...props
 }: ListViewProps): JSX.Element {
+  const { scale } = useProvider();
+  const itemHeight = LIST_VIEW_ROW_HEIGHTS[props.density ?? 'regular'][scale];
+
   const { getFormattedString: formatValue } = useFormatter(settings);
 
   const deserializeRow = useItemRowDeserializer({
@@ -44,7 +48,7 @@ export function ListView({
   >({
     reuseItemsOnTableResize: true,
     table,
-    itemHeight: LIST_VIEW_ROW_HEIGHT,
+    itemHeight,
     deserializeRow,
   });
 

diff --git a/packages/utils/src/UIConstants.ts b/packages/utils/src/UIConstants.ts
@@ -2,7 +2,6 @@ export const ACTION_ICON_HEIGHT = 24;
 export const COMBO_BOX_ITEM_HEIGHT = 32;
 export const COMBO_BOX_TOP_OFFSET = 4;
 export const ITEM_KEY_PREFIX = 'DH_ITEM_KEY';
-export const LIST_VIEW_ROW_HEIGHT = 32;
 export const PICKER_ITEM_HEIGHT = 32;
 export const PICKER_TOP_OFFSET = 4;
 export const TABLE_ROW_HEIGHT = 33;
@@ -12,3 +11,19 @@ export const VIEWPORT_SIZE = 500;
 export const VIEWPORT_PADDING = 250;
 
 export const SPELLCHECK_FALSE_ATTRIBUTE = { spellCheck: false } as const;
+
+// Copied from https://github.com/adobe/react-spectrum/blob/b2d25ef23b827ec2427bf47b343e6dbd66326ed3/packages/%40react-spectrum/list/src/ListView.tsx#L78
+export const LIST_VIEW_ROW_HEIGHTS = {
+  compact: {
+    medium: 32,
+    large: 40,
+  },
+  regular: {
+    medium: 40,
+    large: 50,
+  },
+  spacious: {
+    medium: 48,
+    large: 60,
+  },
+} as const;