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

@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': minor
+---
+
+Updates for Positions Table

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 {

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 (

packages/ui/src/Table/index.tsx

@@ -3,13 +3,16 @@ 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. */
   title?: ReactNode;
   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,23 +91,30 @@ 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,
   colSpan,
   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

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 },
 };
 
 /**

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>>;

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(

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');