Constraining listview icon height (deephaven#1890)

bmingles · Apr 29, 2024 · 4ce1c16 · 4ce1c16
1 parent 35b7935
commit 4ce1c16
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/packages/components/src/spectrum/listView/ListViewNormalized.tsx b/packages/components/src/spectrum/listView/ListViewNormalized.tsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import cl from 'classnames';
+import { LIST_VIEW_ICON_SIZES } from '@deephaven/utils';
 import {
   NormalizedItem,
   normalizeTooltipOptions,
@@ -8,6 +9,7 @@ import {
 } from '../utils';
 import type { ListViewProps } from './ListView';
 import { ListViewWrapper } from './ListViewWrapper';
+import { useSpectrumThemeProvider } from '../../theme';
 
 export interface ListViewNormalizedProps
   extends Omit<ListViewProps, 'children'> {
@@ -29,6 +31,10 @@ export function ListViewNormalized({
   onSelectionChange,
   ...props
 }: ListViewNormalizedProps): JSX.Element {
+  const { scale } = useSpectrumThemeProvider();
+
+  const iconSize = LIST_VIEW_ICON_SIZES[props.density ?? 'regular'][scale];
+
   const tooltipOptions = useMemo(
     () => normalizeTooltipOptions(tooltip, 'bottom'),
     [tooltip]
@@ -39,6 +45,7 @@ export function ListViewNormalized({
     showItemDescriptions,
     showItemIcons,
     tooltipOptions,
+    iconSize,
   });
 
   // Spectrum doesn't re-render if only the `renderNormalizedItems` function

diff --git a/packages/components/src/spectrum/utils/itemWrapperUtils.tsx b/packages/components/src/spectrum/utils/itemWrapperUtils.tsx
@@ -25,11 +25,13 @@ import { Text } from '../Text';
  * the vsBlank icon will be used.
  * @param maybeIconKey The content to wrap
  * @param slot The slot to use for the Icon component
+ * @param iconSize The size of the icon
  * @returns The wrapped content or original content if not a string
  */
 export function wrapIcon(
   maybeIconKey: ReactNode,
-  slot: ItemIconSlot
+  slot: ItemIconSlot,
+  iconSize?: number
 ): ReactNode {
   // eslint-disable-next-line no-param-reassign
   maybeIconKey = maybeIconKey ?? '';
@@ -39,7 +41,7 @@ export function wrapIcon(
   }
 
   return (
-    <Icon slot={slot}>
+    <Icon height={iconSize} slot={slot}>
       <FontAwesomeIcon icon={dhIcons[maybeIconKey] ?? dhIcons.vsBlank} />
     </Icon>
   );

diff --git a/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx b/packages/components/src/spectrum/utils/useRenderNormalizedItem.tsx
@@ -15,6 +15,7 @@ export interface UseRenderNormalizedItemOptions {
   showItemDescriptions: boolean;
   showItemIcons: boolean;
   tooltipOptions: TooltipOptions | null;
+  iconSize?: number;
 }
 
 /**
@@ -28,6 +29,7 @@ export function useRenderNormalizedItem({
   showItemDescriptions,
   showItemIcons,
   tooltipOptions,
+  iconSize,
 }: UseRenderNormalizedItemOptions): (
   normalizedItem: NormalizedItem
 ) => JSX.Element {
@@ -42,7 +44,7 @@ export function useRenderNormalizedItem({
         : null;
 
       const icon = showItemIcons
-        ? wrapIcon(normalizedItem.item?.icon, itemIconSlot)
+        ? wrapIcon(normalizedItem.item?.icon, itemIconSlot, iconSize)
         : null;
 
       return (
@@ -71,7 +73,13 @@ export function useRenderNormalizedItem({
         </Item>
       );
     },
-    [itemIconSlot, showItemDescriptions, showItemIcons, tooltipOptions]
+    [
+      iconSize,
+      itemIconSlot,
+      showItemDescriptions,
+      showItemIcons,
+      tooltipOptions,
+    ]
   );
 }
 

diff --git a/packages/utils/src/UIConstants.ts b/packages/utils/src/UIConstants.ts
@@ -32,6 +32,21 @@ export const LIST_VIEW_ROW_HEIGHTS = {
   },
 } as const;
 
+export const LIST_VIEW_ICON_SIZES = {
+  compact: {
+    medium: 24,
+    large: 30,
+  },
+  regular: {
+    medium: 26,
+    large: 32,
+  },
+  spacious: {
+    medium: 32,
+    large: 40,
+  },
+} as const;
+
 export const LIST_VIEW_ROW_HEIGHTS_WITH_DESCRIPTIONS = {
   compact: {
     medium: 48,