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

Label

0.00

Description goes hereCTA

Properties

Type

hasDescription

hasTextLink

Content

Label

Value

Description

Link label

Badge

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

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

Copy Icon

Label

0.00

Description goes hereCTA

Properties

hasDescription

hasTextLink

Properties

Type Copy Icon

hasDescription True

hasTextLink True

Colors

Label #0A2757

Value #445C85

Description #6780A9

Link label #005CE5

Copy icon #445C85

Typography

Label Primary/Label/Light/Base

Value Primary/Label/Light/Base

Description Secondary/Bold/Caption

LinkLabel Secondary/Bold/Caption

Layout

Height 44

Width 368

Radius 0

Padding H —

Padding V —

Gap —

Border 0

Alignment —

EBInlineText("Label", value: "0.00")
    .ebTrailing(.copy)
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

Colors by Type

Role	Element	Token	Value
All types	Label	—	#0A2757
All types	Value	—	#445C85
All types	Description	—	#6780A9
All types	Link label	—	#005CE5
Copy Icon	Copy icon	—	#445C85
Badge	Badge background	—	#E5F1FF
Badge	Badge label	—	#005CE5
Checkmark	Checkmark	—	#445C85

Badge

Label

0.00Label

Description goes hereCTA

Properties

hasDescription

hasTextLink

Properties

Type Badge

hasDescription True

hasTextLink True

Colors

Label #0A2757

Value #445C85

Description #6780A9

Link label #005CE5

Badge background #E5F1FF

Badge label #005CE5

Typography

Label Primary/Label/Light/Base

Value Primary/Label/Light/Base

Description Secondary/Bold/Caption

LinkLabel Secondary/Bold/Caption

Layout

Height 44

Width 368

Radius 0

Padding H —

Padding V —

Gap —

Border 0

Alignment —

EBInlineText("Label", value: "0.00")
    .ebTrailing(.badge("Label"))
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

Checkmark

Label

0.00

Description goes hereCTA

Properties

hasDescription

hasTextLink

Properties

Type Checkmark

hasDescription True

hasTextLink True

Colors

Label #0A2757

Value #445C85

Description #6780A9

Link label #005CE5

Checkmark #445C85

Typography

Label Primary/Label/Light/Base

Value Primary/Label/Light/Base

Description Secondary/Bold/Caption

LinkLabel Secondary/Bold/Caption

Layout

Height 44

Width 368

Radius 0

Padding H —

Padding V —

Gap —

Border 0

Alignment —

EBInlineText("Label", value: "0.00")
    .ebTrailing(.checkmark)
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

Slot

Label

0.00

Description goes hereCTA

Properties

hasDescription

hasTextLink

Properties

Type Slot

hasDescription True

hasTextLink True

Colors

Label #0A2757

Value #445C85

Description #6780A9

Link label #005CE5

Typography

Label Primary/Label/Light/Base

Value Primary/Label/Light/Base

Description Secondary/Bold/Caption

LinkLabel Secondary/Bold/Caption

Layout

Height 44

Width 368

Radius 0

Padding H —

Padding V —

Gap —

Border 0

Alignment —

EBInlineText("Label", value: "0.00")
    .ebTrailing(.slot { Image("custom") })
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:inline-text:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.inlinetext.*

Property Mapping

Type, hasDescription and hasTextLink are the set’s three variant properties. The trailing element routes through a nested Trailing Elements instance whose Slot value holds a Figma Slot. Label, Value, Description and LinkLabel are text layers read from 4419:20913; whether they are exposed on the property panel is not readable with the plugin.

Figma Property	SwiftUI	Compose
Type — Copy Icon, Badge, Checkmark, Slot	`.ebTrailing(.copy / .badge("…") / .checkmark / .slot { … })`	`trailing = EBInlineTextTrailing.Copy / Badge("…") / Checkmark / Slot { … }`
hasDescription — True, False	`.ebDescription("…")` when True	`description = "…"` when True, else `null`
hasTextLink — True, False	`.ebTextLink("CTA") { }` when True	`textLink = EBTextLink("CTA") { }` when True, else `null`
Trailing Elements › Slot (slot)	`.ebTrailing(.slot { Image("custom") })`	`EBInlineTextTrailing.Slot { Icon(…) }`
Label (text)	`EBInlineText("Label", …)`	`label = "…"`
Value (text)	`value: String`	`value = "…"`
Description (text)	`.ebDescription(_:)`	`description = "…"`
LinkLabel (text)	`.ebTextLink(_:action:)`	`EBTextLink("…") { }`

Usage Snippets Planned API

Copy Icon

EBInlineText("Label", value: "0.00")
    .ebTrailing(.copy)
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

EBInlineText(
    label = "Label",
    value = "0.00",
    trailing = EBInlineTextTrailing.Copy,
    description = "Description goes here",
    textLink = EBTextLink("CTA") { }
)

Badge

EBInlineText("Label", value: "0.00")
    .ebTrailing(.badge("Label"))
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

EBInlineText(
    label = "Label",
    value = "0.00",
    trailing = EBInlineTextTrailing.Badge("Label"),
    description = "Description goes here",
    textLink = EBTextLink("CTA") { }
)

Checkmark

EBInlineText("Label", value: "0.00")
    .ebTrailing(.checkmark)
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

EBInlineText(
    label = "Label",
    value = "0.00",
    trailing = EBInlineTextTrailing.Checkmark,
    description = "Description goes here",
    textLink = EBTextLink("CTA") { }
)

Slot

EBInlineText("Label", value: "0.00")
    .ebTrailing(.slot { Image("custom") })
    .ebDescription("Description goes here")
    .ebTextLink("CTA") { }

EBInlineText(
    label = "Label",
    value = "0.00",
    trailing = EBInlineTextTrailing.Slot { Icon(…) },
    description = "Description goes here",
    textLink = EBTextLink("CTA") { }
)

Requirement	iOS	Android
Label and value read together	`.accessibilityElement(children: .combine)` on the row — "Label, 0.00".	`Modifier.semantics(mergeDescendants = true)` on the row.
Copy Icon action	`Button` with `accessibilityLabel("Copy Label")`; announce "Copied" via `UIAccessibility.post(notification: .announcement)`.	`IconButton` with `contentDescription = "Copy Label"`; announce "Copied" through `LiveRegionMode.Polite`.
Checkmark meaning	`.accessibilityValue("Verified")` — the glyph alone is not announced.	`stateDescription = "Verified"` on the row.
Text link	`Button` role with the LinkLabel text; `.accessibilityAddTraits(.isLink)`.	`Modifier.clickable` with `role = Role.Button` and the LinkLabel as `contentDescription`.
Minimum target	The 24 pt copy icon and the 18 pt text link need a 44 pt hit area.	The 24 dp copy icon and the 18 dp text link need a 48 dp touch target.

Usage Guidelines

Do

Use Copy Icon for references and IDs the user needs to paste elsewhere.

Don't

Don’t put Copy Icon on an amount or a date.

Do

Use Badge when the value is a status, and keep the badge text to one word.

Don't

Don’t use Badge to restyle a plain value.

Do

Keep the Label to one line — it shares the 368 px row with the value.

Don't

Don’t wrap the label; move the detail into Description.

Do

Put a DS icon in the Slot at 24 × 24.

Don't

Don’t place text or a second value in the Slot.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	`MainRow` / `SupportingRow`, `ValueGroup`, `DescriptionGroup` and the four text layers `Label`, `Value`, `Description`, `LinkLabel` — read on 4419:20913.
C2	Variant & Property Naming	Ready	`Type` with Title Case values; `hasDescription` and `hasTextLink` are real True / False booleans.
C3	Token Coverage	Ready	Label and Value resolve to `Primary/Label/Light/Base`, Description and LinkLabel to `Secondary/Bold/Caption`. Colour variable bindings are not readable with the plugin — confirm in Dev Mode.
C4	Native Mappability	Ready	One enum, two booleans, one slot and four text values — maps 1:1 onto `EBInlineText`.
C5	Interaction State Coverage	Needs Refinement	No State property: the copy icon and the text link have no pressed or disabled variant in the set.
C6	Asset & Icon Quality	Ready	Copy and Checkmark are icon-library instances inside `Trailing Elements`; Badge is a Badge instance.

Variants Inventory (16 total)

4 Type × 2 hasDescription × 2 hasTextLink = 16 variants

Type	hasDescription × hasTextLink	Count
Copy Icon	True · True, True · False, False · True, False · False	4
Badge	True · True, True · False, False · True, False · False	4
Checkmark	True · True, True · False, False · True, False · False	4
Slot	True · True, True · False, False · True, False · False	4

View full Type × hasDescription × hasTextLink breakdown (16 rows)

Type	hasDescription	hasTextLink	Node	Dimensions
Copy Icon	True	True	`4419:20913`	368 × 44
Copy Icon	True	False	`5643:34601`	368 × 44
Copy Icon	False	True	`4419:24516`	368 × 44
Copy Icon	False	False	`5643:34623`	368 × 24
Badge	True	True	`5652:36979`	368 × 44
Badge	True	False	`5652:36989`	368 × 44
Badge	False	True	`5652:36998`	368 × 44
Badge	False	False	`5652:37006`	368 × 24
Checkmark	True	True	`5652:37190`	368 × 44
Checkmark	True	False	`5652:37200`	368 × 44
Checkmark	False	True	`5652:37209`	368 × 44
Checkmark	False	False	`5652:37217`	368 × 24
Slot	True	True	`5652:37563`	368 × 44
Slot	True	False	`5652:37573`	368 × 44
Slot	False	True	`5652:37582`	368 × 44
Slot	False	False	`5652:37590`	368 × 24

1.0.2 — September 2026Patch

Style and Code tabs re-read · node 4419:24515

Style tab rebuilt from the 16 live variants. Cards follow Type — Copy Icon, Badge, Checkmark, Slot — with hasDescription and hasTextLink as panel toggles; colours, text styles and the 44 / 24 heights read off 4419:20913 and the four base variants. Padding, gap, alignment and colour tokens are not readable with the plugin and stay —.

Docs

Code tab regrouped on the Type × hasDescription × hasTextLink schema. Installation added on the solo coordinates, Property Mapping is one row per property, Usage Snippets and Guidelines added, Scorecard regraded, Variants Inventory moved from the five type nodes to the 16 live nodes with a summary and full breakdown.

Docs

1.0.1 — September 2026Patch

Documentation backfill · node 4419:24515

Resolved issues recorded. 10 resolved issues on the Overview tab had no changelog row: type enum split into orthogonal axes; Enum values cleaned up; Badge is instance-swapped, not drawn inline; Copy icon uses the shared wrapper; Clipboard property renamed to describe the element; Layer naming completed; Row frame renamed to MainRow; Type=Slot confirmed intentional; Pressed state ruled out of scope; Stacking and typography documented.

Docs

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