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
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 label→title 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
Feature summary
Add an optional
subtitleprop to theScorecardcomponent (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
Scorecardhaslabel(metric name) andtrendLabel(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
subtitle?: stringtoScorecardProps.ScorecardSubtitleText, built viacreateComponent(TamaguiText, ...)following the exact pattern ofScorecardLabelText, size variants mapping toSECONDARY_SIZE_PX.$placeholderColor,SECONDARY_SIZE_PX[size],fontWeight: '400',textAlign: 'center'.marginTop: VALUE_TO_TREND_GAP_PXabove it — below the trend row when present, else directly below the value row.Required states, flows, and behaviors
sm/md/lgsizes and bothbare/cardvariants, and render on React web, React Native, and Web Components.Acceptance criteria
subtitleprop accepted, renders below trend row (or value row if no trend)$placeholderColor,SECONDARY_SIZE_PX,fontWeight: '400', centeredVALUE_TO_TREND_GAP_PXbare/cardvariantstrendScorecardSubtitleTextcreated viacreateComponent, no new dependenciesAdditional context
Scope limited to
packages/ui/src/components/Scorecard.tsxandexamples/storybook/src/stories/design-system/Scorecard.stories.tsxonly — do not touchCard.ts,index.tsexports, theme files, or any other component. Do not renamelabel→titleor add a separatedescriptionprop. 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:
[DRAFT][PLAN] <what issue is being planned>Task<sub-issue title>Instructions when creating the plan:
Plan specification required sections: