(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Status Breakdown Bar

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.

Specs

Tokens

Sizing

Structure

• 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 (optional) — an ADK Tooltip positioned absolutely above the last segment; appears for Relaxed_tooltip and Compact_Tooltip types to surface the 4+ breakdown detail.

(Configured in General Properties)

• displayName — Sets the label shown in the structure panel. For example, "Pipeline Status Bar" makes the component easy to identify when multiple rows share the same template.

(Configured in Visual Properties)

• size — Controls the overall height of the bar and the font size of segment labels. For example, setting to "XS" renders a 24 px row-height bar with 10 px (body-00) labels, suitable for dense data tables. "M" uses 40 px height with 12 px labels, and "XL" (default) uses 56 px with 14 px labels.
• type — Controls whether percentage and count labels are shown and whether a tooltip is attached to the final segment. "Relaxed" displays labels above each segment; "Compact" hides all labels for a pure-bar view; "Relaxed_tooltip" and "Compact_Tooltip" additionally render an overflow tooltip on hover for the 4+ status group.
• visibleStatus — Specifies how many status segments are rendered simultaneously. "None" shows an empty grey track (0 % state); "2" renders two segments (green + blue); "3" adds an amber segment; "4" adds a teal segment; "4+" adds a grey overflow segment for uncategorised items.
• paddingClass — Configures spacing around the component using CSS utility classes. For example, "px-2" gives horizontal breathing room without changing the bar's internal proportions.

(Configured in Non-Visual Properties)

• 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.
• 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.

Styling

The component uses a fixed colour palette drawn from GE chart tokens. Segment colours are driven by visibleStatus position:

(Configured in Visual Properties)

• 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.

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.

Authorization

(Configured in Authorization Properties)

• visibilityPolicySetId — Determines the visibility of the component based on specified policy sets. For example, setting to "analyticsViewerPolicy" ensures the progress bar is only visible to users with analytics-view permissions.

Tests

(Configured in Testing Hooks Properties)

• dataTestId — Sets the testing hook ID for automated testing. For example, "row-status-bar-test" lets test scripts reliably target the component regardless of surrounding markup changes.
• enableAsHotspot — Enables the component as a guided tour hotspot. When enabled, the bar can be highlighted during onboarding flows to explain pipeline status at a glance.
• guidedTourHotSpotTitle — Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Pipeline Status", "de-DE": "Pipeline-Status"}.
• guidedTourHotSpotDescription — Sets the description for the guided tour hotspot, supporting translations.

Links

• Figma: GE Astronaut Design System — Status Breakdown Bar
• Live style guide:

Guidelines

Usage

• Use the Status Breakdown Bar inside table rows to summarise the distribution of item states; set visibleStatus to match the number of distinct states your data model produces.
• Choose type: "Relaxed" when the table has enough row height for labels and users need precise percentage and count values at a glance. Choose "Compact" for dense tables where colour alone is sufficient to communicate relative proportions.
• Add type: "Relaxed_tooltip" or "Compact_Tooltip" when visibleStatus is "4+" so that overflow categories remain discoverable without cluttering the row.
• Always populate segmentData from the same data source that drives the parent list or table — never derive segment widths from independent API calls per row.
• Set visibleStatus: "None" for rows where the status has not yet been assigned; the grey empty track communicates pending state without showing misleading zeros.

Sizing & Layout

• Match size to the row height of the parent table: use "XS" (24 px) for compact data grids, "M" (40 px) for standard tables, and "XL" (56 px) for wide-format or dashboard tables.
• Do not override the fixed widths (350 px Relaxed / 250 px Compact) with custom CSS — segment proportions are calculated relative to these fixed containers and will break at other widths.
• Use paddingClass to add horizontal breathing room inside the cell; do not apply external margins directly to the component root.
• In XL Relaxed mode each segment label uses body-02 (14 px SemiBold); in M it uses body-01 (12 px); in XS it uses body-00 (10 px). Do not reduce font sizes below these values.

States & Feedback

• Use visibleStatus: "None" to represent a row where no status data is available — the grey track communicates an empty state without rendering phantom segments.
• When transitioning from one status count to another, update visibleStatus and segmentData together in a single state change to avoid a visual flash of mismatched segment count and data.
• Pair the tooltip (Relaxed_tooltip / Compact_Tooltip) with a meaningful tooltipContent value; an empty tooltip renders a blank pop-over on hover.

Visibility & Authorization

• Gate visibility with visibilityPolicySetId for tables where status detail is restricted to certain roles (e.g., managers only).
• Use displayConditions to hide the bar in row templates where a progress breakdown is not applicable, such as header rows or group-level aggregation rows.

Content & Localization

• Segment labels are derived from segmentData and should be locale-formatted before being passed to the component — the component itself does not apply locale-aware number formatting.
• Tooltip text (tooltipContent) supports i18n objects; always provide at minimum en-US and de-DE keys.

Dos & Don'ts

Accessibility

• Provide descriptive segment labels via segmentData[n].label so that assistive technologies can announce each status category by name rather than only by colour or percentage.
• Never rely on colour alone to convey segment meaning — ensure that percentage and count values in segmentData are always visible (type: "Relaxed") or exposed via a tooltip (Relaxed_tooltip) for users who cannot distinguish chart colours.
• In Compact mode, where labels are hidden, add an ARIA label or title attribute at the container level summarising the overall status distribution for screen-reader users.
• Ensure the overflow tooltip is keyboard-accessible: the last segment should be focusable and the tooltip should appear on both focus and hover events.
• Use dataTestId to expose a stable selector for automated accessibility audits (e.g. axe-core integration in CI pipelines).
• Maintain the minimum 6 px bar track height even at XS size to ensure sufficient colour contrast surface area — do not reduce the track below this value.