feat: add delta display cell by FaithAdekunle · Pull Request #3574 · factorialco/f0

FaithAdekunle · 2026-03-03T12:02:55Z

Description

Adds a new delta value-display renderer to the React value-display system, enabling rendering of positive/negative deltas with directional icons for use in data-collection/table contexts.

Screenshots (if applicable)

Link to Figma Design

Implementation details

Introduces DeltaCell renderer and registers it under the delta renderer type.
Adds Storybook stories and MDX docs for the new delta value type.
Extends shared Storybook mock data with positive/negative delta examples.

Copilot

Pull request overview

Adds a new delta value-display renderer to the React value-display system, enabling rendering of positive/negative deltas with directional icons for use in data-collection/table contexts.

Changes:

Introduces DeltaCell renderer and registers it under the delta renderer type.
Adds Storybook stories and MDX docs for the new delta value type.
Extends shared Storybook mock data with positive/negative delta examples.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/src/components/value-display/types/delta/index.tsx	Barrel export for the new delta value-display type.
packages/react/src/components/value-display/types/delta/delta.tsx	Implements `DeltaCell` UI (icon + label with status-based color).
packages/react/src/components/value-display/types/delta/stories/delta.stories.tsx	Adds Storybook stories demonstrating positive/negative delta rendering.
packages/react/src/components/value-display/types/delta/stories/delta.mdx	Adds MDX documentation for the delta value type.
packages/react/src/components/value-display/renderers.tsx	Registers `delta: DeltaCell` in the renderer map.
packages/react/src/components/value-display/stories/shared.tsx	Adds `positiveDelta` / `negativeDelta` to Storybook mock item data.

Copilot · 2026-03-03T12:07:54Z

packages/react/src/components/value-display/renderers.tsx

 import { TagListCell } from "./types/tagList"
 import { TeamCell } from "./types/team"
 import { TextCell } from "./types/text"
+import { DeltaCell } from "./types/delta/index.tsx"


The DeltaCell import path is inconsistent with the other value-display type imports in this file (it’s the only one importing an explicit /index.tsx). Prefer importing the folder (./types/delta) like the other renderers to keep import style consistent and avoid coupling to the barrel filename/extension.

Suggested change

import { DeltaCell } from "./types/delta/index.tsx"

import { DeltaCell } from "./types/delta"

Copilot · 2026-03-03T12:07:54Z

packages/react/src/ui/value-display/types/delta/delta.tsx

+
+  return (
+    <div className={cn("flex items-center gap-1", colorClass)}>
+      {icon ? <F0Icon icon={icon} /> : null}


The arrow icon conveys the delta direction (positive/negative) but currently has no accessible name and isn’t marked decorative. This can result in screen readers missing the direction information (or announcing an unlabeled graphic). Add an aria-label (e.g., based on deltaStatus) or mark the icon aria-hidden and include the direction in accessible text.

Suggested change

{icon ? <F0Icon icon={icon} /> : null}

{icon ? (

<F0Icon

icon={icon}

aria-label={args.deltaStatus === "positive" ? "Positive change" : "Negative change"}

/>

) : null}

github-actions · 2026-03-03T13:00:57Z

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

github-actions · 2026-03-03T13:02:10Z

🔍 Visual review for your branch is published 🔍

Here are the links to:

github-actions · 2026-03-03T13:02:19Z

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-3574 to install the package

Use pnpm i github:factorialco/f0#4eca5e2669fb5e6cabc150397e1064ece45f1802 to install this specific commit

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Copilot · 2026-03-03T13:06:09Z

packages/react/src/ui/value-display/types/delta/delta.tsx

+export const DeltaCell = (args: DeltaCellValue) => {
+  const icon = iconMap[args.deltaStatus]
+  const colorClass = colorMap[args.deltaStatus]
+
+  return (


This PR introduces a new renderer type ("delta") but there are no unit tests for DeltaCell. Similar value-display renderers like IconCell have tests; adding a small test suite (positive/negative render + icon presence + color class) would help prevent regressions.

Copilot · 2026-03-03T13:06:09Z

packages/react/src/ui/value-display/types/delta/delta.tsx

+const iconMap: Record<DeltaStatus, IconType | undefined> = {
+  positive: ArrowUp,
+  negative: ArrowDown,
+}


iconMap is typed as Record<DeltaStatus, IconType | undefined>, but DeltaStatus only includes "positive" and "negative" and both entries are always defined. This makes icon non-optional in practice and the conditional rendering branch unnecessary; either remove | undefined or add a status that can map to undefined.

Copilot · 2026-03-03T13:06:10Z

packages/react/src/ui/value-display/types/delta/delta.tsx

+
+  return (
+    <div className={cn("flex items-center gap-1", colorClass)}>
+      {icon ? <F0Icon icon={icon} /> : null}


The arrow icon is decorative because the label is always rendered. Consider setting aria-hidden on the F0Icon here (or providing an accessible label) to avoid screen readers announcing an unlabeled SVG.

Suggested change

{icon ? <F0Icon icon={icon} /> : null}

{icon ? <F0Icon icon={icon} aria-hidden /> : null}

Copilot · 2026-03-03T13:06:10Z

packages/react/src/ui/value-display/types/delta/delta.tsx

+  return (
+    <div className={cn("flex items-center gap-1", colorClass)}>
+      {icon ? <F0Icon icon={icon} /> : null}
+      <span className={colorClass}>{args.label}</span>


colorClass is applied to the wrapper div and again to the span. Since text color is inherited, the span class is redundant and can be removed to avoid duplication.

Suggested change

<span className={colorClass}>{args.label}</span>

<span>{args.label}</span>

github-actions · 2026-03-03T13:06:55Z

Coverage Report for packages/react

Status	Category	Percentage	Covered / Total
🔵	Lines	40.65%	8112 / 19951
🔵	Statements	40.03%	8323 / 20791
🔵	Functions	31.73%	1769 / 5574
🔵	Branches	30.32%	4786 / 15781

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
packages/react/src/ui/value-display/renderers.tsx	81.81%	60%	100%	81.81%	123, 127
packages/react/src/ui/value-display/__stories__/shared.tsx	0%	100%	0%	0%	8-86
packages/react/src/ui/value-display/types/delta/delta.tsx	50%	0%	0%	50%	28-35
packages/react/src/ui/value-display/types/delta/index.tsx	100%	100%	100%	100%

Generated in workflow #11450 for commit cae3bbb by the Vitest Coverage Report Action

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Copilot · 2026-03-03T15:03:19Z

packages/react/src/ui/value-display/types/delta/__stories__/delta.stories.tsx

+import { Meta, StoryObj } from "@storybook/react-vite"
+
+import { Cell, mockItem } from "../../../__stories__/shared"
+
+const meta = {
+  title: "Value Display/Delta",
+  component: Cell,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Renders a single delta value with an icon indicating the direction of change. Used for displaying changes or differences in data collections.",
+      },
+      source: {
+        code: null,
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DeltaType: Story = {
+  args: {
+    item: mockItem,
+    property: {
+      label: "Delta",
+      render: (item) => ({
+        type: "delta",
+        value: item.positiveDelta,
+      }),
+    },
+  },
+}
+
+export const NegativeDeltaType: Story = {
+  args: {
+    item: mockItem,
+    property: {
+      label: "Delta",
+      render: (item) => ({
+        type: "delta",
+        value: item.negativeDelta,
+      }),
+    },
+  },
+}


Storybook stories for components/renderer types in this repo commonly include a dedicated Snapshot story using withSnapshot({}) (often wrapped with withSkipA11y) for Chromatic visual regression. Adding a Snapshot story for both positive and negative delta variants would help prevent regressions.

sauldom102

Could we better use TagBalance and rename delta to balance? Just to reuse what we already have

https://ds.factorial.dev/?path=/docs/components-tags-tagbalance--documentation

As an example, you can see how we reused it in DetailsItemsList https://ds.factorial.dev/?path=/docs/components-list-detailsitemslist--documentation

Copilot AI review requested due to automatic review settings March 3, 2026 12:02

Copilot started reviewing on behalf of FaithAdekunle March 3, 2026 12:03 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

FaithAdekunle force-pushed the value-display-delta-cell branch from 1e181d6 to 769d385 Compare March 3, 2026 12:58

github-actions bot added feat react Changes affect packages/react labels Mar 3, 2026

Copilot AI review requested due to automatic review settings March 3, 2026 13:02

FaithAdekunle force-pushed the value-display-delta-cell branch from 769d385 to 9cc732d Compare March 3, 2026 13:02

Copilot started reviewing on behalf of FaithAdekunle March 3, 2026 13:02 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

feat: add delta display cell

cae3bbb

FaithAdekunle force-pushed the value-display-delta-cell branch from 9cc732d to cae3bbb Compare March 3, 2026 13:09

FaithAdekunle marked this pull request as ready for review March 3, 2026 14:56

FaithAdekunle requested a review from a team as a code owner March 3, 2026 14:56

Copilot AI review requested due to automatic review settings March 3, 2026 14:56

Copilot started reviewing on behalf of FaithAdekunle March 3, 2026 14:57 View session

Copilot AI reviewed Mar 3, 2026

View reviewed changes

sauldom102 requested changes Mar 4, 2026

View reviewed changes

	import { DeltaCell } from "./types/delta/index.tsx"
	import { DeltaCell } from "./types/delta"

-      {icon ? <F0Icon icon={icon} /> : null}
+      {icon ? (
+        <F0Icon
+          icon={icon}
+          aria-label={args.deltaStatus === "positive" ? "Positive change" : "Negative change"}
+        />
+      ) : null}

	{icon ? <F0Icon icon={icon} /> : null}
	{icon ? <F0Icon icon={icon} aria-hidden /> : null}

	<span className={colorClass}>{args.label}</span>
	<span>{args.label}</span>

Conversation

FaithAdekunle commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots (if applicable)

Implementation details

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ No New Circular Dependencies

Uh oh!

github-actions bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Visual review for your branch is published 🔍

Uh oh!

github-actions bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Alpha Package Version Published

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage Report for packages/react

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

Uh oh!

sauldom102 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

FaithAdekunle commented Mar 3, 2026 •

edited

Loading

github-actions bot commented Mar 3, 2026 •

edited

Loading

github-actions bot commented Mar 3, 2026 •

edited

Loading

github-actions bot commented Mar 3, 2026 •

edited

Loading

github-actions bot commented Mar 3, 2026 •

edited

Loading

sauldom102 left a comment •

edited

Loading