Page History

...

Overview

• The Status Breakdown Bar (ADK Progress Capsule Bar) is a compact, multi-segment horizontal progress indicator designed for use inside table row items.
• It visualises the distribution of record states across up to four+ distinct categories, each rendered as a proportionally-sized colour-coded capsule segment.
• Supports three sizes (XS, M, XL), two layout types (Relaxed and Compact), and an optional tooltip overlay to surface overflow data for the 4+ visible-status variant.
• Typical use cases include pipeline summaries, approval-flow overviews, and any row-level KPI that requires at-a-glance state breakdown without navigating to a detail view.

...

• Row Cell background — full-bleed white fill that aligns the bar with the parent table row.
• Progress Capsule Bar container — horizontal flex container that stretches to fill the cell padding area.
• Segment groups — one flex child per visible status, each containing an optional text label above and a colour-coded capsule bar below. The first segment uses rounded-left caps; the last uses rounded-right caps; middle segments are flush.
• Overflow tooltip Tooltip (optional) — an ADK Tooltip tooltip positioned absolutely above the last segment; appears for Relaxed_tooltip and Compact_Tooltip types to surface the 4+ breakdown detail.

...

• segmentData — Provides the percentage, absolute count, colour, and label text for each segment. For example, [{ pct: 50, count: 55, color: "lime-04", label: "Approved" }, ...] drives the proportional width and tooltip text for each capsule.

Tooltips

(Configured in Non-Visual Properties)

• tooltip trigger — The overflow tooltip (visible for Relaxed_tooltip / Compact_Tooltip types) is rendered via the ADK Tooltip component. It is positioned absolutely above the last segment and is shown by the host application's hover/focus logic — no additional event wiring is required inside the Status-bar itself.
• tooltipContent — Sets the multi-line text rendered inside the overflow tooltip for the 4+ variant. For example, {"en-US": "20% (4) - Under Evaluation\n5% (1) - Rejected"} surfaces the breakdown of the overflow bucket.

...

• paddingClass — Adds CSS spacing around the outer container. For example, "px-2" gives horizontal breathing room without changing the bar's internal proportions.

...

Actions & Variants

(Configured in Event Actions Properties)

• events — Configures the events the component can trigger and respond to:
• ON_INIT — Triggered when the component is initialized. Use to fetch segment data and populate segmentData before the row renders.
• ON_DESTROY — Triggered when the component is removed from the DOM. Use for cleanup, such as cancelling pending data requests.

...

• .

Authorization

(Configured in Authorization Properties)

...