Status Breakdown Bar

Overview

• The Status Breakdown Bar (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

Token	Description
displayName	Display name shown in the structure panel
size	Controls the height of the bar and label text size. Values: XS, M, XL
type	Controls layout style: Relaxed shows labels above segments; Compact hides labels; Relaxed_tooltip / Compact_Tooltip add an overflow tooltip for the last segment
visibleStatus	Determines how many status segments are rendered. Values: None, 2, 3, 4, 4+
segmentData	Array of segment objects, each containing a percentage, count, label, and colour token for a status category
tooltipContent	Text content displayed inside the overflow tooltip when type is Relaxed_tooltip or Compact_Tooltip (supports i18n)
paddingClass	CSS spacing classes applied around the component
visibilityPolicySetId	Determines visibility based on policy sets
displayConditions	Conditions for displaying the component
dataTestId	Testing hook identifier for automated testing
enableAsHotspot	Enables the component as a guided tour hotspot
guidedTourHotSpotTitle	Title for the guided tour hotspot (i18n)
guidedTourHotSpotDescription	Description for the guided tour hotspot (i18n)
ON_INIT (Events)	Triggered when the component is initialized
ON_DESTROY (Events)	Triggered when the component is removed from the DOM

Sizing

Property	Values	Default
Height (Relaxed / Relaxed_tooltip)	XS: 24 px · M: 40 px · XL: 56 px	56 px (XL)
Height (Compact / Compact_Tooltip)	XS: 24 px · M: 40 px · XL: 56 px	56 px (XL)
Width (Relaxed / tooltip variants)	350 px fixed	350 px
Width (Compact variants)	250 px fixed	250 px
Progress bar track height	XS: 6 px · M: 8 px · XL: 10 px	10 px (XL)
size	XS / M / XL	XL

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.
• Tooltip (optional) — an 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.

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.

Styling

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

Segment position	Colour token	Hex
1st (always present)	generic/chart/lime-04	#1db31d (green)
2nd	generic/chart/blue-04 (via asset)	Blue
3rd	generic/chart/yellow-01	#f1ba33 (amber)
4th	generic/chart/green-04	#32a382 (teal)
4+ overflow	theme-20 grey track (tooltip variant)	#e7e6e6
Empty / None state	generic/theme/theme-20	#e7e6e6 (grey)

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

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

Do	Don't
Set visibleStatus to match the exact number of distinct states in your data model	Hard-code visibleStatus: "4+" when your data never produces more than 3 states — unnecessary segments confuse users
Use type: "Compact" in dense tables where row height is limited and colour coding alone is sufficient	Use type: "Relaxed" in rows shorter than 40 px — labels will clip or overflow
Always provide tooltipContent when using Relaxed_tooltip or Compact_Tooltip to explain the overflow bucket	Leave tooltipContent empty for tooltip variants — a blank tooltip undermines user trust
Show visibleStatus: "None" for rows awaiting status assignment	Render a zero-value bar for unassigned rows — a grey empty track communicates pending state more accurately
Match size consistently across all rows of the same table	Mix size values within a single table — inconsistent row heights break visual rhythm

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.