A scheduled-payment row with a date-and-amount headline plus an optional grid of label/value detail pairs.
Fold into the Table consolidation; compose from Inline Text, not re-author
Table - Scheduling is the third feature-specific composition in the Table family (after Table - Transaction). It re-creates a date + peso-amount primary line and a grid of label/value pairs — layouts the DS already covers with Inline Text stacked inside a Generic Transaction Card or native List cell. Three records for three product surfaces (generic table, transaction limits, scheduled payments) is a family-level smell: the base pattern is "label / value rows with optional peso prefix," and every sibling duplicates it with narrower coverage. Recommend removing Table - Scheduling from core DS and documenting a "scheduled payment" recipe on the Table page that composes
EBInlineText rows — same guidance as Table - Transaction. Mobile scheduling surfaces (auto-debit plans, installment schedules) already render as vertical lists on iOS and Android; no phone surface needs this fixed 360px grid.In Context
Scheduled payments screen (auto-debit, installment plans, standing orders): a list of upcoming payment rows stamped with a date, the total debit amount, and — where relevant — a breakdown of principal / interest / fee components.
Live Preview
MMM DD, YYYY
₱X,XXX.XX
Label
Label
PHP X,XXX.XX
Label
PHP X,XXX.XX
Label
PHP X,XXX.XX
Label
PHP X,XXX.XX
Properties
type
DS Health
Reusable
Warn
Locked to date + peso-prefixed amount + optional 2/4-cell label/value grid. Any scheduling surface that needs 1, 3, or N detail cells, a status chip, or a non-peso currency has to detach.
Self-contained
Fail
Primary amount renders a raster
Peso Sign - Proxima image fill (same remote figma.com/api/mcp/asset/* URL as Table - Transaction). Detail cells prefix amounts with the literal string "PHP", mixing glyph and text prefixes inside one component.Consistent
Fail
Does not reuse Table's
type × no. of columns × icon schema — introduces a brand-new type enum whose values embed the detail count in a sentence ("2 amounts display"). Third family member, third shape.Composable
Warn
Not built from Table, Inline Text, or Generic Transaction Card — re-implements the label / value cell inline. A true composition would nest
EBInlineText instances for each detail pair.Open Issues
- Third parallel Table-family record with a new schema. After Table (
type × no. of columns × icon) and Table - Transaction (type × no. of columns × icon, peso content), Scheduling introduces another axis shape: a singletypeenum that gates a fixed 0 / 2 / 4 detail count. Three records, three different schemas for the same underlying "rows of label/value pairs" idea. C1 · Layer Structure & Naming -
typevalues embed the detail count in a sentence. Values are"no display amount","2 amounts display","4 amounts display"— natural-language strings that bake the count into the property. Should be an integerdetailCount: 0 | 2 | 4, or — better — replaced by a data-drivendetails: [Pair]array that accepts any length. C2 · Variant & Property Naming - No native mobile primitive matches the layout. Payment schedules on iOS and Android render as list cells (
List/LazyColumn) — a date header, an accessory amount, and optional secondary label/value rows. The 360px fixed grid is a desktop pattern; on phone width the two-cell detail row already crowds at the 12px type scale used here. C4 · Native Mappability - No tap, pressed, or disabled states. A scheduled payment row is typically tappable — to view, edit, or cancel the scheduled entry — and can be visually disabled (past / cancelled / skipped). None of that coverage exists. C5 · Interaction State Coverage
- Peso sign is a raster image asset. Primary amount's currency prefix is an
<img>pointing at a Figma-hosted bitmap, same remote URL as Table - Transaction. Detail amounts, meanwhile, use the literal string"PHP"— two different currency-prefix treatments in one component. C6 · Asset & Icon Quality - Code Connect mappings not registered. Blocked until the family consolidation decision lands — Code Connect for Scheduling would just duplicate the Inline Text mapping. C7 · Code Connect Linkability
Design Recommendations
- Remove Table - Scheduling from core DS; publish as a recipe on Table's page composing Inline Text rows. Same guidance as Table - Transaction. Recipe reads: "For scheduled-payment lists (auto-debit, installments, standing orders), compose a date / primary-amount header row with
EBInlineText, then stack additionalEBInlineTextrows for breakdown details inside aGeneric Transaction Cardor nativeListcell." Eliminates 3 variants, a raster peso asset, and the mixed₱/PHPprefix inconsistency. Family - Collapse the Table family (Table + Table - Transaction + Table - Scheduling) into one data-driven row primitive. If the family is retained for wider surfaces, publish a single
EBTableRowwithrole: .header | .contentand acolumns: [Column]array where each column carries its ownformat: .text | .amount | .date. Scheduling's date-header + amount + detail-grid becomes: one row with two columns (date / amount), followed by N rows with detail pairs. Collapses 18 family variants into 2 role variants × data. Family - Rename
typevalues to integers, or drop the property. If Scheduling is kept, rename todetailCount: 0 | 2 | 4(no sentence fragments in property values). If merged into Inline Text / Table's data-driven row, drop the property entirely — the count is inferred from the details array. Rename - Unify the currency prefix treatment. Primary amount uses a raster peso glyph; detail amounts use the literal string
"PHP". Pick one. Preferred: the Unicode₱glyph (U+20B1) everywhere, rendered in the row's type style — drop the raster asset and drop the"PHP"literal. Alternative: ship a vector peso icon (icon/currency/peso-sm) for the primary line and an optional"PHP"prefix for breakdown values, wired up as real tokens / slots. Asset - Compose each detail cell from Inline Text. The component already matches Inline Text's
label+valueshape (main/table/color/label-preambleon top,main/table/color/labelbelow). Instance-swap toInline Textso the tokens consolidate undermain/inline-text/*and state / a11y improvements flow through to every consumer. Composition - Add row interaction states if Scheduling stays. A scheduled-payment row is tappable — add
State=PressedandState=Disabledvariants (disabled = past / cancelled with muted labels and a strike or tag). Without these, every consumer re-invents the tap target. State - Document scheduling semantics. If Scheduling is kept, add guidance on which amounts belong on the primary line (total debit) vs. breakdown cells (principal / interest / fee / tax). Prevents the component from being used as a generic 3-amount row on non-scheduling surfaces. Docs
Types
Default
DES DEV
Date-amount row with optional detail rows. Flip the Type control to add 2 or 4 detail cells (label / value pairs).
Properties
Type
Properties
Type 4 amounts display
Colors
Surface bg #FFFFFF
Date label #0A2757
Primary amount #005CE5
Currency glyph #005CE5
Detail label #6780A9
Detail value #0A2757
Layout
Height 132.5
Padding H 24
Padding V 16
Date column width 108
Detail leading width 111
Typography
Date label Proxima Soft Semibold · 12 / 12 · +0.5
Primary amount Proxima Soft Bold · 14 / 14 · +0.25
Detail label Proxima Soft Semibold · 12 / 14 · +0.5
Detail value Proxima Soft Semibold · 12 / 12 · +0.5
Colors by State
| Role | Token | Default | Pressed | Disabled |
|---|---|---|---|---|
| Row bg | main/table/color/bg | #FFFFFF | – | – |
| Date label | main/table/color/label | #0A2757 | – | – |
| Primary amount | main/table/color/label-amount | #005CE5 | – | – |
| Currency glyph (peso, primary) | main/table/color/icon-currency-primary | #005CE5 | – | – |
| Detail preamble label | main/table/color/label-preamble | #6780A9 | – | – |
| Detail value | main/table/color/label | #0A2757 | – | – |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
| type (drop) | details: [EBInlineText] | details: List<EBInlineText> |
| Date label (MMM DD, YYYY) | EBInlineText(label:, value:) | EBInlineText(label =, value =) |
| Primary amount (peso + X,XXX.XX) | Text("\u{20B1}" + amount).ebAmountStyle(.primary) | Text("₱$amount", style = EBAmountStyle.Primary) |
| Detail Label / PHP X,XXX.XX | EBInlineText(label:, value:) | EBInlineText(label =, value =) |
| Row tap target | .onTapGesture { … } / Button | Modifier.clickable { … } |
SwiftUI
ios/Components/Table/EBTableSchedulingRow.swift
Jetpack Compose
android/components/table/EBTableSchedulingRow.kt
Usage Snippets Planned API
Usage
// Recommended — compose with Inline Text (phone-width) EBGenericTransactionCard { EBInlineText(label: "MAY 10, 2026", value: "₱1,250.00") .ebAmountStyle(.primary) HStack { EBInlineText(label: "Principal", value: "PHP 1,100.00") EBInlineText(label: "Interest", value: "PHP 150.00") } } // Option B — if Scheduling row is retained EBTableSchedulingRow( date: Date(), amount: 1250.00, details: [ .init("Principal", "PHP 1,100.00"), .init("Interest", "PHP 150.00") ] )
// Recommended — compose with Inline Text (phone-width) EBGenericTransactionCard { EBInlineText(label = "MAY 10, 2026", value = "₱1,250.00", style = EBAmountStyle.Primary) Row { EBInlineText(label = "Principal", value = "PHP 1,100.00") EBInlineText(label = "Interest", value = "PHP 150.00") } } // Option B — if Scheduling row is retained EBTableSchedulingRow( date = LocalDate.now(), amount = 1250.00, details = listOf( SchedulingDetail("Principal", "PHP 1,100.00"), SchedulingDetail("Interest", "PHP 150.00") ) )
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Row semantics | If tappable, wrap as Button with .accessibilityLabel("Scheduled payment, May 10 2026, 1,250 pesos") — combine the date and amount into one spoken phrase. | Wrap in Modifier.clickable + Modifier.semantics(mergeDescendants = true); set contentDescription to a full spoken phrase. |
| Currency glyph fallback | Use Unicode \u{20B1} inline — avoid a raster image that won't scale with Dynamic Type. | Use Unicode ₱ inline — avoid a bitmap that won't respect font-scale settings. |
| Date formatting | Use Date.FormatStyle with the user's locale; don't hardcode MMM DD, YYYY. | Use DateTimeFormatter.ofLocalizedDate(FormatStyle.MEDIUM); don't hardcode format string. |
| Detail label / value pairing | Group each detail cell so VoiceOver reads "Principal, 1,100 pesos" as one element, not two. | Group each detail cell so TalkBack reads "Principal, 1,100 pesos" as one element, not two. |
| Disabled / past rows | Past or cancelled schedules: .accessibilityHint("Past payment") + muted label tokens. | Past or cancelled schedules: Modifier.semantics { stateDescription = "Past payment" } + muted label tokens. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | Third parallel record in the Table family with yet another schema. Should fold in, not stand alone. |
| C2 | Variant & Property Naming | Requires Rework | type values embed the detail count in sentence fragments ("2 amounts display"). |
| C3 | Token Coverage | Needs Refinement | bg / label / label-amount / label-preamble / icon-currency-primary bound. The literal "PHP" string prefix on detail amounts has no token indirection. |
| C4 | Native Mappability | Requires Rework | Scheduled payments are a List / LazyColumn pattern on mobile, not a fixed-width grid. |
| C5 | Interaction State Coverage | Requires Rework | No tap, pressed, or disabled states — rows are typically tappable (edit / cancel) or disabled (past / cancelled). |
| C6 | Asset & Icon Quality | Requires Rework | Peso glyph is a raster image; detail amounts use a literal "PHP" prefix. Two currency-prefix treatments in one component. |
| C7 | Code Connect Linkability | Not Mapped | Blocked until the family consolidation decision lands. |
Variants Inventory (3 total)
A single type axis with 3 values. No cross-axis matrix — detail count is the only variant driver.
| type | Detail cells | Height | Node ID |
|---|---|---|---|
| no display amount | 0 | 50.5px | 47:324362 |
| 2 amounts display | 2 (1 row × 2 cells) | 89.5px | 47:324363 |
| 4 amounts display | 4 (2 rows × 2 cells) | 132.5px | 47:324364 |
1.0.0 — April 2026Major
Initial Assessment · node 47:324365
Family assessed — 3 variants selected by a single
Initialtype enum. Third parallel Table-family record (Table, Table - Transaction, Table - Scheduling). DocumentedThird family schema divergence — Introduces a new
C1 Opentype enum instead of reusing Table's type × no. of columns × icon or Transaction's schema. Recommend folding into Inline Text / Table data-driven row. OpenSentence-fragment enum values —
C2 Open"no display amount" / "2 amounts display" / "4 amounts display" bake the detail count into natural-language strings. OpenNo native mobile primitive — Scheduled payments are a List / LazyColumn pattern on mobile, not a fixed 360px grid. Open
C4 OpenNo interaction / disabled states — Scheduling rows are typically tappable or visually muted for past / cancelled entries. Open
C5 OpenMixed currency prefix treatments — Primary amount ships as a raster peso glyph; detail amounts use a literal
C6 Open"PHP" string. OpenCode Connect mappings — Not registered. Open
C7 Open