Action List - with Counter — GCash DS Assessment

ConsolidateNot Applicable

Action List - with Counter Component link

Action-list row with a 32px leading icon, label, trailing chevron, and a trailing Counter pill.

Consolidate — merged into Action Row

This component no longer exists on its own. It is merged into Action Row (node 4628:19843), where the trailing counter is now a Trailing=Counter value. Assessment for this pattern lives on the Action Row page.

In Context

Used where a row needs to surface a pending count alongside the action — inbox folders, notification categories, or settings entries with outstanding items.

Live Preview

Notifications

Properties

Density

State

label

count

DS Health

Reusable

Warn

Historical rating from the standalone assessment. This component is merged into Action Row — see that page for current DS Health.

Self-contained

Pass

Historical rating from the standalone assessment. This component is merged into Action Row — see that page for current DS Health.

Consistent

Warn

Historical rating from the standalone assessment. This component is merged into Action Row — see that page for current DS Health.

Composable

Fail

Historical rating from the standalone assessment. This component is merged into Action Row — see that page for current DS Health.

Behavior

State	iOS	Android	Figma Property	Notes
Default	Yes	Yes	State=Default	Brand-blue label, brand-blue chevron, filled Counter pill (`#072592` on `#EEF2F9`).
Disabled	Yes	Yes	State=Disabled	Muted label (`#C2CFE5`), muted chevron (`#9BC5FD`), empty Counter pill.
Loading	Yes	Yes	State=Loading	Avatar circle, long label skeleton, trailing 46 × 16 strip. The strip doesn't actually match the Counter pill shape — see open issue.
Pressed / Focused	N/A	N/A	Not modeled	No pressed / focused variants on the row. Inherited gap — same issue as base Transaction row.

Issues

Merged into Action Row. v2.0: Confirmed by the component owner — this no longer exists as a standalone component. It is merged into Action Row (node 4628:19843), where the trailing counter is now a Trailing=Counter value. This page is kept as a pointer; all assessment for this pattern lives on Action Row. (Family) C4 · Native Mappability

Variants

Compact · Default — brand label + filled Counter

DES DEV

360 × 56. 32 px icon, brand-blue label, chevron, trailing 24 × 24 filled Counter pill.

Label

Properties

State

Density

Properties

Density Compact

State Default

Colors

Bg #FFFFFF

Label #005CE5

Counter #EEF2F9

Chevron #005CE5

Layout

Row height 56px

Padding H 12px

Padding V 11px

Corner radius 6px

Chevron size 24 × 24

Typography

Label style Primary/Label/Light/Large

Font Proxima Soft Bold

Size 18px / 20px

Tracking +0.25

EBActionRow("Account settings", icon: icon)
    .ebState(.default)
    .onTap{ }

Colors by State

Role	Token	Default	Disabled	Loading
Row bg	main/action-list/color/default/bg	#FFFFFF	#FFFFFF	#FFFFFF
Label	main/action-list/color/default/label-brand	#005CE5	–	–
Label (disabled)	main/action-list/color/disabled/label	–	#C2CFE5	–
Chevron	main/action-list/color/default/chevron	#005CE5	#9BC5FD	–
Counter bg	main/counter/color/filled/bg	#EEF2F9	#EEF2F9	–
Counter label (filled)	main/counter/color/filled/label	#072592	–	–
Counter label (empty)	main/counter/color/empty/label	–	#C2CFE5	–
Skeleton bar	bg/color-bg-strong	–	–	#EEF2F9
Row shadow	Depth/D0	drop-shadow(0 1 3 0 #E8EEF2C9)

Expanded · Default — taller row variant

DES DEV

360 × 64. Same composition; 15 px vertical padding vs 11 px on Compact.

Label

Properties

State

Density

Properties

Density Expanded

State Default

Colors

Bg #FFFFFF

Label #005CE5

Counter #EEF2F9

Chevron #005CE5

Layout

Row height 64px

Padding H 12px

Padding V 15px

Corner radius 6px

Chevron size 24 × 24

Typography

Label style Primary/Label/Light/Large

Font Proxima Soft Bold

Size 18px / 20px

Tracking +0.25

EBActionRow("Account settings", icon: icon)
    .ebState(.default)
    .onTap{ }

Layout

Role	Token	Value
Row width	—	360px
Row height (Compact)	—	56px
Row height (Expanded)	—	64px
Row padding H	space/space-12	12px
Row padding V (Compact)	—	11px
Row padding V (Expanded)	—	15px
Icon → label gap	space/space-12	12px
Label → trailing gap	space/space-16	16px
Icon size	—	32 × 32
Chevron size	—	32 × 32
Counter size	—	24 × 24 (min) · hugs digits
Counter pad H	space/space-8	8px
Counter radius	radius/radius-round	pill (99999)
Row radius	radius/radius-2	6px

Compact · Disabled — muted tokens

DES DEV

Muted label, muted chevron, empty Counter pill.

Label

Properties

State

Density

Properties

Density Compact

State Disabled

Colors

Bg #FFFFFF

Label #C2CFE5

Counter #E5EBF4

Chevron #9BC5FD

Layout

Row height 56px

Padding H 12px

Padding V 11px

Corner radius 6px

Chevron size 24 × 24

Typography

Label style Primary/Label/Light/Large

Font Proxima Soft Bold

Size 18px / 20px

Tracking +0.25

EBActionRow("Account settings", icon: icon)
    .ebState(.disabled)
    .onTap{ }

Typography

Role	Token	Spec
Label	Primary/Label/Large	Proxima Soft Bold · 18 / 18 · +0.25
Counter	Primary/Label/Small	Proxima Soft Bold · 14 / 14 · +0.25

Expanded · Disabled — taller muted variant

DES DEV

Expanded height + Disabled tokens.

Label

Properties

State

Density

Properties

Density Expanded

State Disabled

Colors

Bg #FFFFFF

Label #C2CFE5

Counter #E5EBF4

Chevron #9BC5FD

Layout

Row height 64px

Padding H 12px

Padding V 15px

Corner radius 6px

Chevron size 24 × 24

Typography

Label style Primary/Label/Light/Large

Font Proxima Soft Bold

Size 18px / 20px

Tracking +0.25

EBActionRow("Account settings", icon: icon)
    .ebState(.disabled)
    .onTap{ }

Compact · Loading — skeleton row

DES DEV

Avatar circle + label line + 46 × 16 trailing strip. Strip shape doesn't match the Counter pill.

Properties

State

Density

Properties

Density Compact

State Loading

Colors

Bg #FFFFFF

Skeleton #EEF2F9

Layout

Row height 56px

Padding H 12px

Padding V 11px

Corner radius 6px

Chevron size 24 × 24

Typography

Label style Primary/Label/Light/Large

Font Proxima Soft Bold

Size 18px / 20px

Tracking +0.25

EBActionRow("Account settings", icon: icon)
    .ebState(.loading)
    .onTap{ }

Expanded · Loading — taller skeleton row

DES DEV

Same skeleton with 16 px padding.

Properties

State

Density

Properties

Density Expanded

State Loading

Colors

Bg #FFFFFF

Skeleton #EEF2F9

Layout

Row height 64px

Padding H 12px

Padding V 16px

Corner radius 6px

Chevron size 24 × 24

Typography

Label style Primary/Label/Light/Large

Font Proxima Soft Bold

Size 18px / 20px

Tracking +0.25

EBActionRow("Account settings", icon: icon)
    .ebState(.loading)
    .onTap{ }

Installation Planned API

iOS — Swift Package Manager

// In Xcode: File → Add Package Dependencies
"https://github.com/AY-Org/eb-ds-ios"

import EBDesignSystem

Android — Gradle (Kotlin DSL)

dependencies {
    implementation("com.eastblue.ds:list:1.0.0")
}

import com.eastblue.ds.components.EBListItemTransaction

Property Mapping

Figma Property	SwiftUI	Compose
(separate component)	`trailing` Slot on base row	@ViewBuilder trailing
Density	`density` (renamed)	density: .compact \| .expanded
State	`state` (renamed)	state: .default \| .disabled \| .loading
icon (bool)	`leading` Slot	@ViewBuilder leading
label	`label`	label: String
chevron (bool)	`chevron`	chevron: Bool = true
counter (bool)	derived from trailing slot	—

SwiftUI

ios/Components/List/EBListItemTransaction.swift

Jetpack Compose

android/components/list/EBListItemTransaction.kt

Usage Snippets Planned API

Usage

// Default — Compact density, trailing Counter
EBListItemTransaction(label: "Notifications") {
    EBAvatar(initials: "N")
} trailing: {
    EBCounter(count: unreadCount)
}

// Expanded density
EBListItemTransaction(label: "Promos") {
    EBAvatar(initials: "P")
} trailing: {
    EBCounter(count: 2)
}
.density(.expanded)

// Disabled row — counter stays in empty state
EBListItemTransaction(label: "Archive") {
    EBAvatar(initials: "A")
} trailing: {
    EBCounter(count: 0)
}
.disabled(true)

// Loading — trailing slot omitted; skeleton fills
EBListItemTransaction.loading()

// Default — Compact density, trailing Counter
EBListItemTransaction(
    label = "Notifications",
    leading = { EBAvatar(initials = "N") },
    trailing = { EBCounter(count = unreadCount) }
)

// Expanded density
EBListItemTransaction(
    label = "Promos",
    density = EBListDensity.Expanded,
    leading = { EBAvatar(initials = "P") },
    trailing = { EBCounter(count = 2) }
)

// Disabled row
EBListItemTransaction(
    label = "Archive",
    enabled = false,
    leading = { EBAvatar(initials = "A") },
    trailing = { EBCounter(count = 0) }
)

// Loading — trailing slot omitted; skeleton fills
EBListItemTransaction(state = EBListState.Loading)

Requirement	iOS	Android
Row role	Wrap in `Button` / `NavigationLink` for tappable semantics	Apply `Modifier.clickable(...)` + `Role.Button`
Counter label	Compose accessibility label: `"Notifications, 5 unread"` — don't let VoiceOver read the digit alone	Merge into row: `contentDescription = "Notifications, 5 unread"`
Disabled	`.disabled(true)` — drops from hit-testing + dims label/chevron/counter	`enabled = false` on clickable modifier
Loading	Announce `"Loading"`; hide skeleton children from a11y tree	`Modifier.semantics { liveRegion = Polite }` + hide skeletons
Chevron	Decorative — `.accessibilityHidden(true)`	`contentDescription = null`

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Requires Rework	Sibling duplicates the base Transaction row matrix. Consolidate via trailing slot.
C2	Variant & Property Naming	Needs Refinement	`Density`/`State` PascalCase mismatches lowercase Counter and most of DS.
C3	Token Coverage	Ready	All colors + spacing bound. Uses `main/action-list/` + `main/counter/`.
C4	Native Mappability	Needs Refinement	HStack/Row maps cleanly. Loading skeleton's 46 × 16 trailing strip doesn't match a Counter pill.
C5	Interaction State Coverage	Needs Refinement	No pressed / focused variants — inherited from base row.
C6	Asset & Icon Quality	Ready	Chevron is a vector instance; icon is a swap placeholder — same pattern as other List Items.
C7	Code Connect Linkability	Not Mapped	Do not wire this sibling — map the base row with trailing slot after consolidation.

Variants Inventory (6 total)

Density (2) × State (3) = 6 variants. Identical matrix to the base Transaction row.

#	Density	State	Node ID	Dimensions
1	Compact	Default	18577:14638	360 × 56
2	Expanded	Default	18577:14647	360 × 64
3	Compact	Disabled	18577:14656	360 × 56
4	Expanded	Disabled	18577:14665	360 × 64
5	Compact	Loading	18577:14674	360 × 56
6	Expanded	Loading	18577:14679	360 × 64

1.0.0 — April 2026Major

Initial Assessment · node 18577:14637

Verdict: Consolidate — Sibling of base Action List; duplicates the 2 × 3 density/state matrix just to add a trailing Counter. Fold into base via a trailing slot. Open

Family

C1 — Duplicated matrix — 6 variants re-created instead of using a slot on the base. Open

C2 — PascalCase naming — Density/State mismatch lowercase state on composed Counter. Open

C4 — Loading skeleton shape — 46 × 16 trailing strip doesn't match a 24 × 24 Counter pill. Open

C7 — Code Connect — Not mapped; wait for consolidation so the mapping targets the base row. Open