ConsolidateRequires Rework
Table - Transaction Component link

A transaction row showing label/value pairs in a structured table layout.

Fold into Table as a recipe, not a separate primitive
Table - Transaction is a feature-specific composition of existing DS primitives — a header row (which Table already ships) and a content row that is effectively an Inline Text with a peso-prefixed amount. Publishing it as its own component duplicates the Table variant matrix and introduces a raster peso asset to DS surface. On mobile, "transaction details" render as vertical label / amount stacks — exactly what Generic Transaction Card and Inline Text already cover. Recommend removing from core DS and documenting the pattern as a recipe on Table's page: "For transaction totals, compose an EBInlineText stack; use Table only for multi-column tabular history on wider surfaces."
In Context

Per-variant descriptions cite account limits — e.g. daily / monthly send caps showing used vs. remaining peso amounts in aligned columns. Other GCash surfaces like transaction history and receipts use the Generic Transaction Card vertical stack, not this tabular layout.

Account Limits USED REMAINING TOTAL Daily ₱3,500 ₱6,500 ₱10,000 Monthly ₱42,000 ₱58,000 ₱100,000 Request Increase
Live Preview
Column Label
Column Label
Column Label
Properties
type
no. of columns
icon (header only)
DS Health
Reusable
Warn
Locked to the peso-prefixed amount shape. Any transaction surface that needs a date column, a badge, a status chip, or a non-peso currency has to detach or reach for a different component.
Self-contained
Fail
Content row ships a raster Peso Sign - Proxima image fill, not a DS icon instance or text glyph. Handoff code references a remote figma.com/api/mcp/asset/* URL — not deliverable to native.
Consistent
Fail
Reuses Table's no. of columns string-with-period naming, but drops the 4-column option and the content icon variant — schema diverges from parent for no apparent reason. Label token main/table/color/label-preamble appears only here.
Composable
Warn
Not built from Table, Inline Text, or Generic Transaction Card — re-implements the label and amount stack directly. A true composition would reuse those primitives as nested instances.
Open Issues
  • Duplicate of Table's variant matrix with narrower coverage. Table already ships header / content rows with 2–4 columns and the same icon=yes/no axis. Table - Transaction re-creates that axis but only for 2 and 3 columns, then specializes the content row to peso amounts. The overlap is a maintenance drag and the layer tree is a separate sibling instead of a reuse. C1 · Layer Structure & Naming
  • no. of columns inherits Table's period-in-name string enum. Should be an integer columnCount — or, better, removed altogether in favor of a data-driven columns array on the parent Table. The Transaction fork inherits the anti-pattern without fixing it. C2 · Variant & Property Naming
  • No native mobile primitive matches this layout. Same mobile problem as Table: iOS SwiftUI Table is macOS/iPad only, Material Compose has no Table primitive. Phone-width transaction totals render as stacked EBInlineText rows (label + peso amount) — not a 360px fixed three-column table. C4 · Native Mappability
  • No interaction or semantic-amount states. Content row has no pressed / disabled states and amount cells don't distinguish positive, negative, or zero amounts despite being a transaction surface. C5 · Interaction State Coverage
  • Peso sign ships as a raster image asset. The content row's currency prefix is an <img> pointing at a Figma-hosted bitmap (figma.com/api/mcp/asset/...), not an inline glyph, SF Symbol, or vector icon. Header icon placeholder is still a hardcoded #C2C6CF circle as in Table. C6 · Asset & Icon Quality
  • Code Connect mappings not registered. Blocked until the family consolidation decision lands — Code Connect for Table - Transaction would just duplicate Table's mapping. C7 · Code Connect Linkability
Design Recommendations
  • Remove Table - Transaction from core DS; publish as a Table recipe and a Generic Transaction Card / Inline Text pattern. The component is a feature-specific composition, not a primitive. Document two ready-made paths in the Table page: (a) "For aligned multi-column amount totals on wider surfaces, use Table with amount-formatted column content"; (b) "For phone-width transaction details (receipt, limits, fees), compose EBInlineText rows inside Generic Transaction Card." Eliminates 6 duplicate variants and the raster peso asset from DS surface. Family
  • If Transaction stays, consolidate with Table's row primitive and add an amountFormat column flag. Merge into Table's data-driven row with a per-column format: .text | .amount. Amount formatting would auto-prefix the currency glyph. Collapses Table + Table - Transaction from 3 records / 15 variants into 1 record / 2 variants × data. Composition
  • Replace the raster peso sign with a text glyph or vector icon. Currency prefix should be the native Unicode glyph ₱ (U+20B1) rendered in the row's type style, or — if visual weight needs to match Proxima's peso — a vector SVG shipped as a DS icon (icon/currency/peso-sm). Drop the Figma-hosted bitmap reference. Asset
  • Rename or drop no. of columns. Same fix as Table. If the component is kept, rename to an integer columnCount. If merged into Table's data-driven row, drop it entirely — column count is inferred from the columns array. Rename
  • Align amount label token with Inline Text. The content-row label uses main/table/color/label-preamble (#6780A9) while the amount value uses main/table/color/label (#0A2757). Inline Text covers the same semantic pair with label / value tokens. Merge into a shared token set (main/inline-text/color/label, main/inline-text/color/value) to prevent drift. Token
  • Document amount-sign semantics. If Table - Transaction is kept for account limits, add explicit guidance that amounts are always positive totals (used / remaining / cap). For signed transaction flows (income / expense), direct consumers to Generic Transaction Card. Prevents the component from being mis-used on flows it wasn't designed for. Docs
Types
Header row
DES DEV

Subtle-bg row with bottom border. 10px Proxima Soft Semibold column labels across equal-width flex columns. Optional 24px icon above each label.

Properties
Columns
Icon
Properties
Columns 3
Icon no
Colors
Surface bg #F6F9FD
Border #E5EBF4
Column label #0A2757
Icon placeholder #C2C6CF
Layout
Height 36
Padding H 24
Padding V 12
Icon size 24 × 24
Typography
Preamble style Primary/Multi-line Label/Light/Tiny
Preamble font Proxima Soft Semibold · 10 / 12 · +0.25
Body style Primary/Label/Small
Body font Proxima Soft Bold · 14 / 14 · +0.25
Colors by State
Role Token DefaultPressedDisabled
Header bg main/table/color/bg-subtle #F6F9FD – –
Content bg main/table/color/bg #FFFFFF – –
Row border main/table/color/border #E5EBF4 – –
Header column label main/table/color/label #0A2757 – –
Content preamble label main/table/color/label-preamble #6780A9 – –
Amount value main/table/color/label #0A2757 – –
Currency icon (peso) main/table/color/icon-currency-secondary #183462 – –
Header icon placeholder — (hardcoded) #C2C6CF – –
Content row
DES DEV

White bg with bottom border. Preamble label on top, then equal-width amount cells with a peso glyph + numeric value (<code>X,XXX.XX</code>).

Properties
Columns
Properties
Columns 3
Colors
Surface bg #FFFFFF
Border #E5EBF4
Preamble label #6780A9
Amount value #0A2757
Currency glyph #183462
Layout
Height 72.5
Padding H 24
Padding V 16
Typography
Preamble style Primary/Multi-line Label/Light/Tiny
Preamble font Proxima Soft Semibold · 10 / 12 · +0.25
Body style Primary/Label/Small
Body font Proxima Soft Bold · 14 / 14 · +0.25
Layout
Role Token Value
Row width (fixed) — 360px
Header height (icon=no) — 36px
Header height (icon=yes) — 62px
Content row height — 72.5px
Header horizontal padding space/space-24 24px
Header pt / pb 12 / space/space-12 12 / 12px
Content horizontal padding — 24px
Content py space/space-16 16px
Header column gap — 8px
Content label → amounts gap — 8px
Amount column gap — 16px
Header icon → label gap — 2px
Header icon size — 24 × 24px
Peso glyph size — 15 × 15px (raster)
Peso → amount gap — 2px
Property Mapping
Figma PropertySwiftUICompose
type=header EBTableRow(role: .header, …) EBTableRow(role = Header, …)
type=content (peso amounts) VStack { EBInlineText(…) } Column { EBInlineText(…) }
no. of columns (drop) columns: [Column] columns: List<Column>
icon=yes (header slot) leadingIcon: Image? leadingIcon: @Composable (() -> Unit)?
Peso Sign - Proxima (raster) Text("\u{20B1}" + amount) Text("₱$amount")
Label (preamble) / X,XXX.XX EBInlineText(label:, value:) EBInlineText(label =, value =)
SwiftUI
ios/Components/Table/EBTableTransactionRow.swift
Jetpack Compose
android/components/table/EBTableTransactionRow.kt
Usage Snippets Planned API
Usage
// Recommended — compose with Inline Text (phone-width)
EBGenericTransactionCard {
    EBInlineText(label: "Daily used",      value: "₱3,500.00")
    EBInlineText(label: "Daily remaining", value: "₱6,500.00")
    EBInlineText(label: "Daily cap",       value: "₱10,000.00")
}

// Option B — if multi-column Table row is retained (tablet / wider)
VStack(spacing: 0) {
    EBTableRow(
        role: .header,
        columns: ["Used", "Remaining", "Cap"]
    )
    EBTableRow(
        role: .content,
        label: "Daily",
        columns: [
            .amount("3,500.00"),
            .amount("6,500.00"),
            .amount("10,000.00")
        ]
    )
}
// Recommended — compose with Inline Text (phone-width)
EBGenericTransactionCard {
    EBInlineText(label = "Daily used",      value = "₱3,500.00")
    EBInlineText(label = "Daily remaining", value = "₱6,500.00")
    EBInlineText(label = "Daily cap",       value = "₱10,000.00")
}

// Option B — if multi-column Table row is retained (tablet / wider)
Column {
    EBTableRow(
        role = EBTableRowRole.Header,
        columns = listOf("Used", "Remaining", "Cap")
    )
    EBTableRow(
        role = EBTableRowRole.Content,
        label = "Daily",
        columns = listOf(
            TableColumn.Amount("3,500.00"),
            TableColumn.Amount("6,500.00"),
            TableColumn.Amount("10,000.00")
        )
    )
}
Accessibility
RequirementiOSAndroid
Amount semantics Each amount cell should read as a single element — wrap peso + value and use .accessibilityLabel("Three thousand five hundred pesos"). Merge peso + value with Modifier.semantics(mergeDescendants = true); set contentDescription to a spoken phrase, not the raw glyph.
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.
Header vs content row Header rows carry .accessibilityAddTraits(.isHeader). Header rows use Modifier.semantics { heading() }.
Column label / amount pairing Group the preamble label with each amount column so VoiceOver reads "Daily, three thousand five hundred pesos". Group the preamble label with each amount column so TalkBack reads "Daily, three thousand five hundred pesos".
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Requires Rework Duplicate sibling to Table with narrower column coverage. Should fold in, not stand alone.
C2 Variant & Property Naming Requires Rework Inherits Table's no. of columns string-with-period anti-pattern unchanged.
C3 Token Coverage Needs Refinement bg / border / label / label-preamble / icon-currency-secondary all bound. Header icon placeholder uses hardcoded #C2C6CF.
C4 Native Mappability Requires Rework No native mobile Table primitive; transaction totals render as Inline Text stacks.
C5 Interaction State Coverage Requires Rework No pressed / disabled states; no semantic handling of positive / negative amounts.
C6 Asset & Icon Quality Requires Rework Peso sign ships as a raster <img>; header icon is a hardcoded placeholder circle.
C7 Code Connect Linkability Not Mapped Blocked until the family consolidation decision lands.
Variants Inventory (6 total)

A 2 type × 2 no. of columns × 2 icon matrix, pruned: icon only applies to header rows, so content × icon=yes doesn't exist. Total 6 variants.

typeno. of columnsiconHeightNode ID
header2no36px47:324707
header3no36px47:324703
header2yes62px47:324705
header3yes62px47:324706
content2no72.5px47:324704
content3no72.5px47:324708
1.0.0 — April 2026Major
Initial Assessment · node 47:324709
Family assessed — 6 variants (2 type × 2 columns × 2 icon, pruned). Only used for account-limit surfaces in the sticker sheet. Documented
Initial
Duplicate of Table — Reuses Table's variant schema with narrower column coverage and a peso-specialised content row. Recommend folding into Table as a recipe. Open
C1 Open
no. of columns inherited naming — String enum with a period in the property name, carried over from Table. Open
C2 Open
No native mobile primitive — Same mobile problem as Table; transaction totals should be Inline Text stacks. Open
C4 Open
No interaction or amount-sign states — No pressed / disabled, no positive / negative amount differentiation. Open
C5 Open
Peso sign is a raster asset — Content row currency prefix is an image fill, not a text glyph or vector. Header icon placeholder is still hardcoded #C2C6CF. Open
C6 Open
Code Connect mappings — Not registered. Open
C7 Open