Skip to content

[Feature] Scorecard: add subtitle prop #223

Description

@goodbounties-nanoclaw-agent

Feature summary

Add an optional subtitle prop to the Scorecard component (packages/ui) so consumers can provide short contextual text beneath the metric (e.g. "Last 30 days", "From AntSeed vault", "Cumulative since launch").

Problem or opportunity

Scorecard has label (metric name) and trendLabel (accompanies the trend arrow) but no way to add a one-line qualifier/source note. The GoodData widget (PR #179) renders three scorecards (Total G$ Spent, AI Credits Used, Flow Rate) that would each benefit from this.

Proposed solution

  • Add subtitle?: string to ScorecardProps.
  • New styled component ScorecardSubtitleText, built via createComponent(TamaguiText, ...) following the exact pattern of ScorecardLabelText, size variants mapping to SECONDARY_SIZE_PX.
  • Style: $placeholderColor, SECONDARY_SIZE_PX[size], fontWeight: '400', textAlign: 'center'.
  • Renders last, marginTop: VALUE_TO_TREND_GAP_PX above it — below the trend row when present, else directly below the value row.
  • Undefined subtitle → no extra space, layout unchanged.

Required states, flows, and behaviors

  • With trend: Label → Value → Trend row → Subtitle.
  • Without trend: Label → Value → Subtitle.
  • Without subtitle: current layout, byte-for-byte.
  • Must work across sm/md/lg sizes and both bare/card variants, and render on React web, React Native, and Web Components.

Acceptance criteria

  • subtitle prop accepted, renders below trend row (or value row if no trend)
  • No subtitle → no extra whitespace, layout unchanged
  • Subtitle uses $placeholderColor, SECONDARY_SIZE_PX, fontWeight: '400', centered
  • Gap above subtitle = VALUE_TO_TREND_GAP_PX
  • Works in all 3 size variants and both bare/card variants
  • Works with and without trend
  • Storybook story demonstrates subtitle with and without trend
  • ScorecardSubtitleText created via createComponent, no new dependencies

Additional context

Scope limited to packages/ui/src/components/Scorecard.tsx and examples/storybook/src/stories/design-system/Scorecard.stories.tsx only — do not touch Card.ts, index.ts exports, theme files, or any other component. Do not rename labeltitle or add a separate description prop. Requested by Thales Barbosa (Bounty Lead) in #goodbounties-lead, "scorecard-subtitle-prop" thread, 2026-08-31 — standalone from the GoodData widget work, motivated only by its use in PR #179.

Create the plan (keep this section in the issue body)

Create the plan

Based on the above description create an execution plan in a new sub-issue and preserve the original issue content unchanged.
Do not execute the plan until given instructions to do so.

Sub-issue requirements:

  • Title format: [DRAFT][PLAN] <what issue is being planned>
  • Type: Task
  • Description must start with: <sub-issue title>
  • Link the sub-issue back to this parent issue.

Instructions when creating the plan:

  • Map relevant files that are too be used as reference from all repos mentioned
  • import existing @GoodDollar packages
  • Map new components that should be created. Assess when a new component should be created in the new savings widget package or made part of the reusable packages/ui

Plan specification required sections:

  • Required states, flows, and behaviors
  • Execution plan
  • acceptance criteria
  • human-reviewer checklist

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions