From 8b4e31e936693fdfb676417d6e025679cc63122b Mon Sep 17 00:00:00 2001
From: "Jason M. Hasperhoven" <martijn.hasperhoven@gmail.com>
Date: Tue, 24 Dec 2024 19:37:47 +0400
Subject: [PATCH] Updates for Positions Table (#1960)

* Updates for Positions Table

* Add changeset

* Add Density to ButtonProps

* Update icon size for slim

* Address PR comments
---
 .changeset/heavy-ghosts-remain.md   |  5 ++++
 packages/ui/src/AssetIcon/index.tsx |  2 +-
 packages/ui/src/Button/index.tsx    |  7 ++++--
 packages/ui/src/Table/index.tsx     | 39 ++++++++++++++++++++++-------
 packages/ui/src/Text/index.tsx      | 12 +++++++++
 packages/ui/src/Text/types.ts       |  8 +++++-
 packages/ui/src/ValueView/index.tsx | 26 ++++++++++++++++---
 packages/ui/src/utils/typography.ts |  2 +-
 8 files changed, 83 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/heavy-ghosts-remain.md

diff --git a/.changeset/heavy-ghosts-remain.md b/.changeset/heavy-ghosts-remain.md
new file mode 100644
index 000000000..1d10273b4
--- /dev/null
+++ b/.changeset/heavy-ghosts-remain.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Updates for Positions Table
diff --git a/packages/ui/src/AssetIcon/index.tsx b/packages/ui/src/AssetIcon/index.tsx
index cf7a1cf22..c3dde0d67 100644
--- a/packages/ui/src/AssetIcon/index.tsx
+++ b/packages/ui/src/AssetIcon/index.tsx
@@ -12,7 +12,7 @@ type Size = 'lg' | 'md' | 'sm';
 const sizeMap: Record<Size, string> = {
   lg: cn('w-8 h-8'),
   md: cn('w-6 h-6'),
-  sm: cn('w-4 h-4'),
+  sm: cn('w-6 h-6'),
 };
 
 export interface AssetIconProps {
diff --git a/packages/ui/src/Button/index.tsx b/packages/ui/src/Button/index.tsx
index e7e0251de..1f454e29c 100644
--- a/packages/ui/src/Button/index.tsx
+++ b/packages/ui/src/Button/index.tsx
@@ -11,7 +11,7 @@ import {
   getSize,
   getIconSize,
 } from '../utils/button';
-import { useDensity } from '../utils/density';
+import { Density, useDensity } from '../utils/density';
 
 interface BaseButtonProps {
   type?: HTMLButtonElement['type'];
@@ -32,6 +32,7 @@ interface BaseButtonProps {
   disabled?: boolean;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   priority?: Priority;
+  density?: Density;
 }
 
 interface IconOnlyProps {
@@ -102,13 +103,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       actionType = 'default',
       type = 'button',
       priority = 'primary',
+      density: densityProp,
       ...attrs
       // needed for the Radix's `asChild` prop to work correctly
       // https://www.radix-ui.com/primitives/docs/guides/composition#composing-with-your-own-react-components
     },
     ref,
   ) => {
-    const density = useDensity();
+    const densityContext = useDensity();
+    const density = densityProp ?? densityContext;
     const styleAttrs = { actionType, iconOnly, density, priority };
 
     return (
diff --git a/packages/ui/src/Table/index.tsx b/packages/ui/src/Table/index.tsx
index f4c23a75d..e6e9d399d 100644
--- a/packages/ui/src/Table/index.tsx
+++ b/packages/ui/src/Table/index.tsx
@@ -3,6 +3,7 @@ import cn from 'clsx';
 import { tableHeading, tableItem } from '../utils/typography';
 import { Density, useDensity } from '../utils/density';
 import { ConditionalWrap } from '../ConditionalWrap';
+import { getThemeColorClass, ThemeColor } from '../utils/color';
 
 export interface TableProps {
   /** Content that will appear above the table. */
@@ -10,6 +11,8 @@ export interface TableProps {
   children: ReactNode;
   /** Which CSS `table-layout` property to use. */
   tableLayout?: 'fixed' | 'auto';
+  /** The background color of the table. */
+  bgColor?: ThemeColor;
 }
 
 /**
@@ -53,7 +56,12 @@ export interface TableProps {
  * </Table>
  * ```
  */
-export const Table = ({ title, children, tableLayout }: TableProps) => (
+export const Table = ({
+  title,
+  children,
+  tableLayout,
+  bgColor = 'other.tonalFill5',
+}: TableProps) => (
   <ConditionalWrap
     if={!!title}
     then={children => (
@@ -67,7 +75,8 @@ export const Table = ({ title, children, tableLayout }: TableProps) => (
       cellSpacing={0}
       cellPadding={0}
       className={cn(
-        'w-full bg-other-tonalFill5 pl-3 pr-3 rounded-sm',
+        getThemeColorClass(bgColor).bg,
+        'w-full pl-3 pr-3 rounded-sm',
         tableLayout === 'fixed' ? 'table-fixed' : 'table-auto',
       )}
     >
@@ -82,16 +91,22 @@ Table.Thead = Thead;
 const Tbody = ({ children }: PropsWithChildren) => <tbody>{children}</tbody>;
 Table.Tbody = Tbody;
 
-const Tr = ({ children }: PropsWithChildren) => (
-  <tr className='[&>td:last-child]:border-b-0'>{children}</tr>
-);
+const Tr = ({ children }: PropsWithChildren) => <tr>{children}</tr>;
 Table.Tr = Tr;
 
 type HAlign = 'left' | 'center' | 'right';
 type VAlign = 'top' | 'middle' | 'bottom';
 
-const getCell = (density: Density) =>
-  cn('box-border', 'pl-3 pr-3', density === 'sparse' ? 'pt-4 pb-4' : 'pt-3 pb-3');
+const densityPaddingMapping = {
+  slim: 'px-3 py-2',
+  compact: 'px-3 py-3',
+  sparse: 'px-3 py-4',
+};
+
+const getCell = (density: Density) => {
+  const padding = densityPaddingMapping[density];
+  return cn('box-border', padding);
+};
 
 const Th = ({
   children,
@@ -99,6 +114,7 @@ const Th = ({
   hAlign,
   vAlign,
   width,
+  density: densityProp,
 }: PropsWithChildren<{
   colSpan?: number;
   /** A CSS `width` value to use for this cell. */
@@ -107,8 +123,10 @@ const Th = ({
   hAlign?: HAlign;
   /** Controls the CSS `vertical-align` property for this cell. */
   vAlign?: VAlign;
+  density?: Density;
 }>) => {
-  const density = useDensity();
+  const densityContext = useDensity();
+  const density = densityProp ?? densityContext;
 
   return (
     <th
@@ -133,6 +151,7 @@ const Td = ({
   hAlign,
   vAlign,
   width,
+  density: densityProp,
 }: PropsWithChildren<{
   colSpan?: number;
   /** A CSS `width` value to use for this cell. */
@@ -141,8 +160,10 @@ const Td = ({
   hAlign?: HAlign;
   /** Controls the CSS `vertical-align` property for this cell. */
   vAlign?: VAlign;
+  density?: Density;
 }>) => {
-  const density = useDensity();
+  const densityContext = useDensity();
+  const density = densityProp ?? densityContext;
 
   return (
     <td
diff --git a/packages/ui/src/Text/index.tsx b/packages/ui/src/Text/index.tsx
index 4565294cb..36fb7f1d8 100644
--- a/packages/ui/src/Text/index.tsx
+++ b/packages/ui/src/Text/index.tsx
@@ -16,6 +16,12 @@ import {
   p,
   getTextBase,
   xxs,
+  tableHeading,
+  tableHeadingMedium,
+  tableHeadingSmall,
+  tableItem,
+  tableItemSmall,
+  tableItemMedium,
 } from '../utils/typography';
 import { ElementType, ReactNode } from 'react';
 import { ThemeColor } from '../utils/color';
@@ -135,6 +141,12 @@ const VARIANT_MAP: Record<TextVariant, { element: ElementType; classes: string }
   detailTechnical: { element: 'span', classes: detailTechnical },
   technical: { element: 'span', classes: technical },
   body: { element: 'span', classes: body },
+  tableHeading: { element: 'span', classes: tableHeading },
+  tableHeadingMedium: { element: 'span', classes: tableHeadingMedium },
+  tableHeadingSmall: { element: 'span', classes: tableHeadingSmall },
+  tableItem: { element: 'span', classes: tableItem },
+  tableItemMedium: { element: 'span', classes: tableItemMedium },
+  tableItemSmall: { element: 'span', classes: tableItemSmall },
 };
 
 /**
diff --git a/packages/ui/src/Text/types.ts b/packages/ui/src/Text/types.ts
index c10246b72..f86727aed 100644
--- a/packages/ui/src/Text/types.ts
+++ b/packages/ui/src/Text/types.ts
@@ -12,7 +12,13 @@ export type TextVariant =
   | 'small'
   | 'detailTechnical'
   | 'technical'
-  | 'body';
+  | 'body'
+  | 'tableHeading'
+  | 'tableHeadingMedium'
+  | 'tableHeadingSmall'
+  | 'tableItem'
+  | 'tableItemMedium'
+  | 'tableItemSmall';
 
 type TextType = {
   [K in TextVariant]: Record<K, true> & Partial<Record<Exclude<TextVariant, K>, never>>;
diff --git a/packages/ui/src/ValueView/index.tsx b/packages/ui/src/ValueView/index.tsx
index ff08836bc..510a99649 100644
--- a/packages/ui/src/ValueView/index.tsx
+++ b/packages/ui/src/ValueView/index.tsx
@@ -18,6 +18,10 @@ const ValueText = ({ children, density }: { children: ReactNode; density: Densit
     return <Text body>{children}</Text>;
   }
 
+  if (density === 'slim') {
+    return <Text detailTechnical>{children}</Text>;
+  }
+
   return <Text detail>{children}</Text>;
 };
 
@@ -35,6 +39,10 @@ export interface ValueViewComponentProps<SelectedContext extends Context> {
    * numeraire.
    */
   priority?: PillProps['priority'];
+  /**
+   * If true, the asset icon will be visible.
+   */
+  showIcon?: boolean;
   /**
    * If true, the asset symbol will be visible.
    */
@@ -51,6 +59,11 @@ export interface ValueViewComponentProps<SelectedContext extends Context> {
    * If true, the amount will have trailing zeros.
    */
   trailingZeros?: boolean;
+  /**
+   * The density to use for the component. If not provided, the density will be
+   * determined by the `Density` context.
+   */
+  density?: Density;
 }
 
 /**
@@ -64,12 +77,15 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
   valueView,
   context,
   priority = 'primary',
+  showIcon = true,
   showSymbol = true,
   abbreviate = false,
   showValue = true,
   trailingZeros = false,
+  density: densityProps,
 }: ValueViewComponentProps<SelectedContext>) => {
-  const density = useDensity();
+  const densityContext = useDensity();
+  const density = densityProps ?? densityContext;
 
   if (!valueView) {
     return null;
@@ -102,9 +118,11 @@ export const ValueViewComponent = <SelectedContext extends Context = 'default'>(
       )}
     >
       <span className={cn('flex w-max max-w-full items-center text-ellipsis', getGap(density))}>
-        <div className='shrink-0'>
-          <AssetIcon size={getIconSize(density)} metadata={metadata} />
-        </div>
+        {showIcon && (
+          <div className='shrink-0'>
+            <AssetIcon size={getIconSize(density)} metadata={metadata} />
+          </div>
+        )}
 
         <div
           className={cn(
diff --git a/packages/ui/src/utils/typography.ts b/packages/ui/src/utils/typography.ts
index 126f4ece3..94ee730d2 100644
--- a/packages/ui/src/utils/typography.ts
+++ b/packages/ui/src/utils/typography.ts
@@ -61,4 +61,4 @@ export const button = cn('font-default text-textBase font-medium leading-textBas
 
 export const buttonMedium = cn('font-default text-textBase font-medium leading-textBase');
 
-export const buttonSmall = cn('font-default text-textBase font-medium leading-textBase');
+export const buttonSmall = cn('font-default text-textSm font-medium leading-textBase');