Add Slim Density

.changeset/rotten-gorillas-brush.md

@@ -0,0 +1,6 @@
+---
+'minifront': minor
+'@penumbra-zone/ui': minor
+---
+
+Add Slim Density

apps/minifront/src/components/v2/dashboard-layout/assets-page/index.tsx

@@ -90,7 +90,7 @@ export const AssetsPage = () => {
                     to={getTradeLink(balance)}
                     className='block translate-x-full opacity-0 transition [tr:hover>td>div>&]:translate-x-0 [tr:hover>td>div>&]:opacity-100'
                   >
-                    <Density compact>
+                    <Density density='compact'>
                       <Button icon={ArrowRightLeft} iconOnly>
                         Trade
                       </Button>

apps/minifront/src/components/v2/header/desktop-nav.tsx

@@ -11,7 +11,7 @@ export const DesktopNav = () => {
 
   return (
     <nav className='hidden rounded-full bg-v2-other-tonalFill5 px-4 py-1 backdrop-blur-xl lg:flex'>
-      <Density compact>
+      <Density density='compact'>
         <Tabs
           value={getV2Link(pagePath)}
           onChange={value => navigate(value)}

apps/minifront/src/components/v2/header/index.tsx

@@ -12,7 +12,7 @@ export const Header = () => {
 
       <DesktopNav />
 
-      <Density compact>
+      <Density density='compact'>
         <div className='hidden gap-2 lg:flex'>
           <StatusPopover />
           <ProviderPopover />

apps/minifront/src/components/v2/header/status-popover.tsx

@@ -51,7 +51,7 @@ export const StatusPopover = () => {
       </Popover.Trigger>
       {status?.isCatchingUp !== undefined && (
         <Popover.Content context={popoverContext} align='end' side='bottom'>
-          <Density compact>
+          <Density density='compact'>
             <div className='flex flex-col gap-4'>
               <div className='flex flex-col gap-2'>
                 <Text technical>Status</Text>

packages/ui/.storybook/preview.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import globalsCssUrl from '../styles/globals.css?url';
 import penumbraTheme from './penumbraTheme';
-import { ConditionalWrap } from '../src/ConditionalWrap';
 import { PenumbraUIProvider } from '../src/PenumbraUIProvider';
 import { Density } from '../src/Density';
 import { Tabs } from '../src/Tabs';
@@ -22,18 +21,15 @@ const DensityWrapper = ({ children, showDensityControl }) => {
   const [density, setDensity] = useState('sparse');
 
   return (
-    <ConditionalWrap
-      if={density === 'sparse'}
-      then={children => <Density sparse>{children}</Density>}
-      else={children => <Density compact>{children}</Density>}
-    >
+    <Density density={density}>
       <Column>
         {showDensityControl && (
-          <Density sparse>
+          <Density density='sparse'>
             <Tabs
               options={[
                 { label: 'Sparse', value: 'sparse' },
                 { label: 'Compact', value: 'compact' },
+                { label: 'Slim', value: 'slim' },
               ]}
               value={density}
               onChange={setDensity}
@@ -43,7 +39,7 @@ const DensityWrapper = ({ children, showDensityControl }) => {
 
         {children}
       </Column>
-    </ConditionalWrap>
+    </Density>
   );
 };
 

packages/ui/README.md

@@ -26,12 +26,12 @@ import { ValueViewComponent } from '@penumbra-zone/ui/ValueViewComponent';
 
 ### Density
 
-Many Penumbra UI components come in two densities: `sparse` and `compact`. This feature allows Penumbra UI consumers to choose how to present data based on the context. For example, a table with dozens or hundreds of rows would be well suited to a `compact` density, while an interactive form could use the `sparse` density.
+Many Penumbra UI components come in different densities: `sparse`, `compact` and `slim`. This feature allows Penumbra UI consumers to choose how to present data based on the context. For example, a table with dozens or hundreds of rows would be well suited to a `slim` density, while an interactive form could use the `sparse` density.
 
-To control density, use the `<Density />` component with either the `sparse` or `compact` prop:
+To control density, use the `<Density />` component with the density prop: `sparse`, `compact` or `slim`:
 
 ```tsx
-<Density compact>
+<Density density='compact'>
   <Table>{/* ... */}</Table>
 </Density>
 ```
@@ -48,7 +48,7 @@ const MyComponent = () => {
 };
 ```
 
-That way, `<MyComponent />` will have looser padding when wrapped with `<Density sparse />`, and tighter when wrapped with `<Density compact />`.
+That way, `<MyComponent />` will have looser padding when wrapped with `<Density densitiy='sparse' />`, and tighter when wrapped with `<Density densitiy='compact' />`.
 
 ## Development
 

packages/ui/src/AccountSelector/index.tsx

@@ -135,7 +135,7 @@ export const AccountSelector = (props: AccountSelectorProps) => {
         }
         endAdornment={
           <EndAdornment>
-            <Density compact>
+            <Density density='compact'>
               <Button
                 icon={ArrowLeft}
                 iconOnly

packages/ui/src/Density/index.test.tsx

@@ -12,7 +12,7 @@ const MockUseDensityConsumerComponent = () => {
 describe('<Density />', () => {
   it('sets `sparse` density for child components', () => {
     const { container } = render(
-      <Density sparse>
+      <Density density='sparse'>
         <MockUseDensityConsumerComponent />
       </Density>,
     );
@@ -22,11 +22,21 @@ describe('<Density />', () => {
 
   it('sets `compact` density for child components', () => {
     const { container } = render(
-      <Density compact>
+      <Density density='compact'>
         <MockUseDensityConsumerComponent />
       </Density>,
     );
 
     expect(container).toHaveTextContent('compact');
   });
+
+  it('sets `slim` density for child components', () => {
+    const { container } = render(
+      <Density density='slim'>
+        <MockUseDensityConsumerComponent />
+      </Density>,
+    );
+
+    expect(container).toHaveTextContent('slim');
+  });
 });

packages/ui/src/Density/index.tsx

@@ -2,11 +2,10 @@ import { ReactNode } from 'react';
 import { Density as TDensity } from '../types/Density';
 import { DensityContext } from '../utils/DensityContext';
 
-export type DensityProps<SelectedDensity extends TDensity> = {
+export interface DensityProps {
   children?: ReactNode;
-} & (SelectedDensity extends 'sparse'
-  ? { sparse: true; compact?: never }
-  : { compact: true; sparse?: never });
+  density: TDensity;
+}
 
 /**
  * Use the `<Density />` component to set the density for all descendants in the
@@ -22,12 +21,12 @@ export type DensityProps<SelectedDensity extends TDensity> = {
  * which contain nested components with density variants. If we used a `density`
  * prop, you'd need to set that prop on every single component in that tree.
  *
- * Instead, you can simply wrap the entire `<Table />` with `<Density sparse />`
- * or `<Density compact />`, and it will set a density context value for all
+ * Instead, you can simply wrap the entire `<Table />` with `<Density density='sparse' />`
+ * or `<Density density='compact' />`, and it will set a density context value for all
  * descendant components:
  *
  * ```tsx
- * <Density compact>
+ * <Density density='compact'>
  *   <Table>
  *     <Table.Tbody>
  *       <Table.Tr>
@@ -59,25 +58,20 @@ export type DensityProps<SelectedDensity extends TDensity> = {
  * example, let's say you have an icon-only button as the `startAdornment` for a
  * `<TextInput />`, and you want to make sure that icon-only button always
  * renders as `compact` density. In that case, simply wrap the button in
- * `<Density compact />`. Then, it will always be compact, even if there's a
- * higher-up `<Density sparse />`:
+ * `<Density density='compact' />`. Then, it will always be compact, even if there's a
+ * higher-up `<Density density='sparse' />`:
  *
  * ```tsx
  * <TextInput
  *   // ...
  *   startAdornment={
- *     <Density compact>
+ *     <Density density='compact'>
  *       <Button iconOnly icon={Search}>Search</Button>
  *     </Density>
  *   }
  * />
  * ```
  */
-export const Density = <SelectedDensity extends TDensity>({
-  children,
-  sparse,
-}: DensityProps<SelectedDensity>) => (
-  <DensityContext.Provider value={sparse ? 'sparse' : 'compact'}>
-    {children}
-  </DensityContext.Provider>
+export const Density = ({ children, density }: DensityProps) => (
+  <DensityContext.Provider value={density}>{children}</DensityContext.Provider>
 );

packages/ui/src/Dialog/index.tsx

@@ -312,7 +312,7 @@ const Content = <IconOnlyButtonGroupProps extends boolean | undefined>({
                 </DialogChildrenWrap>
 
                 {showCloseButton && (
-                  <Density compact>
+                  <Density density='compact'>
                     <RadixDialog.Close asChild>
                       <DialogClose>
                         <Button icon={X} iconOnly priority='secondary'>

packages/ui/src/Popover/index.stories.tsx

@@ -53,7 +53,7 @@ export const Basic: Story = {
               elit. Ut et massa mi.
             </Text>
             <div>
-              <Density compact>
+              <Density density='compact'>
                 <Button icon={Shield} onClick={() => setIsOpen(false)}>
                   Action
                 </Button>

packages/ui/src/Table/index.tsx

@@ -115,14 +115,20 @@ interface CellStyledProps {
   $vAlign?: VAlign;
 }
 
+const cellPaddingMapping = {
+  sparse: 4,
+  compact: 3,
+  slim: 2,
+};
+
 const cell = css<CellStyledProps>`
   box-sizing: border-box;
 
   padding-left: ${props => props.theme.spacing(3)};
   padding-right: ${props => props.theme.spacing(3)};
 
-  padding-top: ${props => props.theme.spacing(props.$density === 'sparse' ? 4 : 3)};
-  padding-bottom: ${props => props.theme.spacing(props.$density === 'sparse' ? 4 : 3)};
+  padding-top: ${props => props.theme.spacing(cellPaddingMapping[props.$density])};
+  padding-bottom: ${props => props.theme.spacing(cellPaddingMapping[props.$density])};
 
   ${props => props.$width && `width: ${props.$width};`}
   ${props => props.$hAlign && `text-align: ${props.$hAlign};`};

packages/ui/src/TextInput/index.stories.tsx

@@ -8,7 +8,7 @@ import { Button } from '../Button';
 import { Density } from '../Density';
 
 const SampleButton = () => (
-  <Density compact>
+  <Density density='compact'>
     <Button icon={Send} iconOnly>
       Validate
     </Button>

packages/ui/src/ValueInput/index.tsx

@@ -94,7 +94,7 @@ export const ValueInput = ({
         onChange={onValueChange}
         endAdornment={
           <SelectorWrapper>
-            <Density compact>
+            <Density density='compact'>
               <AssetSelector
                 value={selection}
                 assets={assets}

packages/ui/src/types/Density.ts

@@ -6,4 +6,4 @@
  *
  * See `<DensityContext />`
  */
-export type Density = 'compact' | 'sparse';
+export type Density = 'slim' | 'compact' | 'sparse';