Inline Text — GCash DS Assessment

KeepNeeds Refinement

A label-and-value row with an optional trailing element, description line and text link — used for inline detail pairs within lists and cards.

Keep — all findings resolved

Rebuilt on node 4419:24515 in the 2026 Working File as Type (Copy Icon · Badge · Checkmark · Slot) × hasDescription × hasTextLink = 16 variants. The enum that hid five compositions is split into orthogonal axes, so clipboard plus description plus link is now a real combination rather than an unreachable one. The trailing element routes through a shared Trailing Elements instance holding a real Badge or DS icon, and every layer carries a distinct semantic name mapping onto §3. All four DS Health traits pass; the only item still open is Code Connect, blocked until the native library exists.

In Context

Inline Text is a composition primitive. You'll find stacks of it inside Generic Transaction Card's detail modal, Send Money confirmation screens, receipt summaries, and fee-breakdown list items. Rarely used standalone.

Live Preview

Amount

PHP 1,500.00

Content

label

value

description

cta

badge

Properties

type

DS Health

Reusable

Pass

Genuinely reused across transaction cards, modal summaries, and list items. A strong primitive.

Self-contained

Pass

Binds tokens cleanly and routes the trailing element through a shared Trailing Elements instance holding a real Badge or DS icon, so styling propagates rather than being redrawn here.

Consistent

Pass

Type × hasDescription × hasTextLink are orthogonal, boolean values are genuine True/False, and every layer carries a distinct semantic name — the text layers mapping onto §3 as Label, Value, Description, plus LinkLabel. Type=Slot is a deliberate, documented choice.

Composable

Pass

Stacks inside transaction cards, modal summaries and list items, and the three axes combine freely — clipboard plus description plus link is now a real combination rather than an unreachable one. Type=Slot accepts arbitrary trailing content.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	type=Default	Label leading, value trailing. The baseline receipt row.
With Clipboard	Yes	Yes	type=with Clipboard	Value + 24 × 24 copy icon. Tapping the icon copies the value to clipboard.
With Badge	Yes	Yes	type=with Badge	Replaces the value with a trailing badge pill. Used for voucher / discount selection.
With Description	Yes	Yes	type=with Description	Adds a second row below the label with secondary caption text.
With Text Link	Yes	Yes	type=with Text Link	Second row adds a trailing text link (CTA) next to the description.
Pressed (copy icon)	N/A	N/A	Not built	Copy icon has no pressed state or success toast hook — users get no feedback when the tap lands.

Issues

Code Connect mappings not registered. Blocked — no native library exists yet. The schema is clean: one enum, two booleans, three text layers and a swappable trailing instance. C7 · Code Connect Linkability

type enum split into orthogonal axes. v2.0: Rebuilt on node 4419:24515 in the 2026 Working File. The single enum that hid five layouts is now Type (Copy Icon · Badge · Checkmark · Slot) × hasDescription × hasTextLink = 16 variants. Trailing-element kind, description presence and link presence are independent, so no combination is unreachable. (C2 · Property) C2 · Variant & Property Naming
Enum values cleaned up. v2.0: The "with X" phrasing is gone — values are now Copy Icon, Badge, Checkmark and Slot, each naming the trailing element rather than describing a composite layout. (C2 · Rename) C2 · Variant & Property Naming
Badge is instance-swapped, not drawn inline. v2.0: The trailing element goes through a shared Trailing Elements instance which in turn holds a real Badge instance. Badge styling changes now propagate rather than needing to be redrawn here. (C6 · Composition) C6 · Asset & Icon Quality
Copy icon uses the shared wrapper. v2.1: Confirmed by the component owner — Type=Copy Icon routes through the same Trailing Elements instance as Badge rather than drawing the glyph inline, so it inherits the DS icon. (C6) C6 · Asset & Icon Quality
Clipboard property renamed to describe the element. v2.0: The property value now reads Type=Copy Icon, naming what appears rather than the clipboard mechanism behind it. (C2 · Rename) C2 · Variant & Property Naming
Layer naming completed. v2.1: Seven renames — the 16px #label → Label, the 12px link #label → LinkLabel, #amount → Value, description → Description, the two container frames → ValueGroup and DescriptionGroup, and bottom-container → SupportingRow. Resolves the duplicate #label and duplicate container collisions, and the text names now map onto §3 — Label, Value, Description. (C1) C1 · Layer Structure & Naming
Row frame renamed to MainRow. v2.2: The top row no longer shares the component set's own name, pairing cleanly with SupportingRow below it. Every layer this component owns now carries a distinct semantic name. (C1) C1 · Layer Structure & Naming
Type=Slot confirmed intentional. v2.2: Closed by owner decision — Slot stays. The team treats Slot as a first-class concept in the system rather than an implementation detail, so the value reads as a named content mode to anyone working in the library. (C2) C2 · Variant & Property Naming
Pressed state ruled out of scope. v2.2: Closed by owner decision — nested buttons and links across the system do not currently carry pressed states, so adding one here would make Inline Text the outlier rather than the standard. Revisit at family level if pressed states are introduced for nested interactive elements generally. (C5) C5 · Interaction State Coverage
Stacking and typography documented. v2.2: Documented rather than deferred. Stacking — rows carry no separator of their own and no vertical padding: a row is 24px tall without a description and 44px with one, at 368 wide. The containing list or card supplies the gap between rows and any dividers, so a run of Inline Text rows sits flush unless the parent spaces them. Typography reconciliation with Generic Transaction Card — the supporting scale is already shared: Description and the card's Metadata are both BarkAda Semibold 12/18 at #6780A9, identical. The primary scale differs deliberately: the card's own title is Proxima Soft Semibold 18/18 while Inline Text's Label and Value are 16/16. That gap is the hierarchy — the card heading sits above the detail rows beneath it — not a drift to correct. (Docs) C1 · Layer Structure & Naming

Styles

Default — label + value

DES DEV

The baseline row. Leading label, trailing value, 25 px tall, full-width auto-layout.

Amount

PHP 1,500.00

Properties

Type

Label

State

Properties

type default

label Amount

state default

value "0.00"

Colors

Label #0A2757

Value #445C85

Description #6780A9

Link #005CE5

Icon #445C85

Disabled opacity 40%

Layout

Width 368 (fill)

Height 25

Padding 0 (row) · 5 0 5 0 (value cell)

Gap 0 (fill + hug)

Typography

Label style Primary/Label/Light/Base

Label font Proxima Soft Semibold

Size / Line / Tracking 16 / 16 / +0.25

EBInlineText(label: "Amount", value: "PHP 1,500.00")

Variant 1 — Colors

Label · value pairs used inline within paragraphs and cards.

Role	Token	Default
Label	inline-text/color/label	#0A2757
Value	inline-text/color/label-value	#445C85
Description	inline-text/color/description	#6780A9
Link	inline-text/color/label-link	#005CE5
Icon	inline-text/color/icon	#445C85

With Clipboard — value + copy icon

DES DEV

Adds a 24 × 24 copy icon to the right of the value. Tapping the icon copies the value to clipboard. Icon uses <code>inline-text/icon</code> token.

Reference No

GC123456789

Properties

Type

Label

State

Properties

type with-clipboard

label Reference No

state default

Layout Label-left, Value+icon-right

Colors

Label color #3C4A5C

Value color #0A2757

Icon color #005CE5

Layout

Row height auto

Gap 8

Icon size 20 × 20

Padding 0

Typography

Label style Body/Small

Value style Body/Medium · Bold

EBInlineText(
    label: "Reference no.",
    value: "1234567890",
    trailing: .clipboard
)

Variant 2 — Colors

Label · value pairs used inline within paragraphs and cards.

Role	Token	Default
Label	inline-text/color/label	#0A2757
Value	inline-text/color/label-value	#445C85
Description	inline-text/color/description	#6780A9
Link	inline-text/color/label-link	#005CE5
Icon	inline-text/color/icon	#445C85

With Badge — label + trailing badge

DES DEV

Replaces the value cell with a Badge pill. Used on voucher / discount rows. Today the badge is drawn inline (information/light hardcoded) rather than instance-swapped from the Badge component.

Voucher

Applied

Properties

Type

Label

State

Properties

type with-badge

label Voucher

state default

Badge style Brand

Colors

Label color #3C4A5C

Badge bg #E8F1FF

Badge label #005CE5

Layout

Row height auto

Gap 8

Badge height 20

Badge padding (h) 8

Typography

Label style Body/Small

Badge style Caption/Bold

EBInlineText(
    label: "Status",
    trailing: .badge("Active"))
)

Variant 3 — Colors

Label · value pairs used inline within paragraphs and cards.

Role	Token	Default
Label	inline-text/color/label	#0A2757
Value	inline-text/color/label-value	#445C85
Description	inline-text/color/description	#6780A9
Link	inline-text/color/label-link	#005CE5
Icon	inline-text/color/icon	#445C85

With Description

DES DEV

Adds a second row below the label/value with a description caption. Description uses BarkAda Semibold 12/18.

Service fee

Includes ₱10 service fee

PHP 10.00

Properties

Type

Label

State

Properties

type with-description

label Service fee

state default

Layout Vertical stack

Colors

Label color #3C4A5C

Value color #0A2757

Description color #3C4A5C

Layout

Row height auto

Gap 4

Description gap 2

Padding 0

Typography

Label style Body/Small

Value style Body/Medium · Bold

Description style Caption/Regular

EBInlineText(
    label: "Total amount",
    value: "₱1,250.00",
    description: "Includes ₱25 service fee"
)

Variant 4 — Colors

Label · value pairs used inline within paragraphs and cards.

Role	Token	Default
Label	inline-text/color/label	#0A2757
Value	inline-text/color/label-value	#445C85
Description	inline-text/color/description	#6780A9
Link	inline-text/color/label-link	#005CE5
Icon	inline-text/color/icon	#445C85

With Text Link

DES DEV

Adds a trailing link (CTA) to the description row. Link uses <code>inline-text/label-link</code> token.

Promo code

Saved PHP 50.00

GC50OFF

Change

Properties

Type

Label

State

Properties

type with-text-link

label Promo code

state default

Link label View details

Colors

Label color #3C4A5C

Value color #0A2757

Link color #005CE5

Layout

Row height auto

Gap 8

Padding 0

Typography

Label style Body/Small

Value style Body/Medium · Bold

Link style Body/Small · Bold

EBInlineText(
    label: "Order #1234",
    trailing: .link("View details", action: { }))
)

Variant 5 — Colors

Label · value pairs used inline within paragraphs and cards.

Role	Token	Default
Label	inline-text/color/label	#0A2757
Value	inline-text/color/label-value	#445C85
Description	inline-text/color/description	#6780A9
Link	inline-text/color/label-link	#005CE5
Icon	inline-text/color/icon	#445C85

Property Mapping

Figma Property	SwiftUI	Compose
(hardcoded)	`label: String`	`label: String`
`type=Default / with Clipboard`	`trailing = .value(String)`	`trailing: EBInlineTextTrailing`
`type=with Badge`	`trailing = .badge(Badge)` (instance)	同上
`type=with Clipboard`	`hasCopy: Bool`	`onCopy: (() -> Void)?`
`type=with Description`	`description?: String`	`description: String?`
`type=with Text Link`	`ctaLabel?: String` + `onCtaTap?`	`cta: EBInlineTextCTA?`
(not modeled)	`trailingIcon?: Icon` (slot)	`trailingIcon: Image?`

Requirement	iOS	Android
Row reads as "label, value"	Merge children: `.accessibilityElement(children: .combine)`. Announces "Amount, 1,500 pesos".	`Modifier.semantics(mergeDescendants = true)` on the row.
Copy button	Dedicated `Button` around the icon with `accessibilityLabel: "Copy reference number"`. Announce success via `UIAccessibility.post(.announcement, "Copied")`.	`IconButton` with `contentDescription`. On click, call `view.announceForAccessibility("Copied")`.
Text link as link	Use `Button` with `accessibilityAddTraits(.isLink)`. Minimum 44 × 44 touch target.	`TextButton` or clickable text with role `Role.Button`. Minimum 48 dp touch target.
Currency announcement	Use localized currency formatter on `accessibilityValue`, not raw "PHP 1,500.00".	Same — announce via `contentDescription` with currency formatter applied.
Dynamic Type / font scaling	Text uses `.font(.custom(..., relativeTo: .body))` so it scales with Dynamic Type.	Use `sp` units for text size; respect system font scale.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Requires Rework	`type` enum conflates two axes — split into orthogonal booleans + slot.
C2	Variant & Property Naming	Requires Rework	Enum values use "with X" phrasing and describe features, not semantics.
C3	Token Coverage	Ready	All colors bound to `main/inline-text/color/*`. Spacing + typography tokens intact.
C4	Native Mappability	Needs Refinement	No 1:1 native primitive — it's a styled HStack. Maps cleanly as `EBInlineText` wrapper once restructured.
C5	Interaction State Coverage	Needs Refinement	No pressed state on the copy icon or text link.
C6	Asset & Icon Quality	Needs Refinement	Badge drawn inline; copy icon appears one-off — confirm + instance-swap both.
C7	Code Connect Linkability	Not Mapped	Blocked on restructure — mapping today's enum would bake the anti-pattern.

Variants Inventory (5 total)

type is a single enum with 5 values — each a structurally different trailing-slot composition.

#	Node	type	Layout	Dimensions
1	`21:138493`	Default	label · value	368 × 25
2	`21:138497`	with Clipboard	label · value · copy-icon	368 × 24
3	`21:138503`	with Badge	label · trailing badge	368 × 24
4	`21:138506`	with Description	[label · value] / description	368 × 38
5	`21:138512`	with Text Link	[label · value] / [description · CTA]	368 × 41

1.0.0 — April 2026Major

Initial Assessment · node 18652:71101

Verdict: Restructure — Replace type enum (5 layouts) with orthogonal booleans + unified trailing slot. Instance-swap Badge. Add pressed state on copy icon. Open

Architecture

C1 — Type enum hides compositions — 5 type values conflate two axes (trailing slot + sub-row). Split into hasCopy, hasDescription, hasTextLink, unified trailing slot. Open

C2 — "with X" value phrasing — Figma enum values describe what's added, not what the row IS. Rename under boolean-prop schema. Open

C6 — Badge drawn inline — with Badge hardcodes information/light fill + label instead of instance-swapping Badge. Parallel source of truth. Open

C5 — Copy / link pressed states — Copy icon and text link have no pressed tint, focus ring, or success feedback hook. Open

Tokens ✓ — All four semantic color roles (label, label-value, description, label-link) plus icon bound correctly. Noted

Praise

C7 — Code Connect — Blocked on restructure. Open