Summary

Create a new System Status component in Salt (Messaging) designed to sit edge-to-edge at the top level of an application to present system-related information and RAG/status messages. The initial release should provide a solid appearance with bold styling, using a layout consistent with an app header and aligned to Salt’s default spacing grid.

Context

Salt currently has messaging components (e.g., Banner, Toast, Tooltip) but does not have a dedicated, first-class System Status component intended for top-of-app, edge-to-edge system messaging. This component will establish a consistent baseline for system-level messaging and inform future solid appearance updates across related messaging components for consistency.

Scope

• Create a new System Status component under Salt’s Messaging components.
• Component characteristics:
  • Renders edge-to-edge at the top hierarchy of the application.
  • Intended for system-related information and RAG/status messaging (e.g., red/amber/green).
  • Initial visual treatment:
    • Solid appearance
    • Bold styling
    • Header-like layout (aligns with the structure/affordances of an app header)
    • Aligned to the underlying default spacing grid for Salt-based applications.
• Provide documentation and examples for intended usage and placement.

Out of scope (for this issue)

• A filled appearance (explicitly out-of-scope for initial delivery; keep recorded for future discussion).
• Adding solid appearances to other messaging components (future/related work following this component’s introduction).

Acceptance Criteria

• New component exists: System Status is available as a new Salt Messaging component.
• Placement/layout: Designed to sit edge-to-edge at the top level of the application and aligns to Salt’s default spacing grid.
• Appearance: Initial release includes a solid appearance with bold styling.
• Use case fit: Supports system-related messaging, including RAG/status-type messages (where applicable within Salt semantics).
• Docs & examples: Documentation clearly describes intended usage, placement, and includes examples.

Definition of Done (regular deliverables)

• Design: Figma designs created and signed off (layout, states, spacing-grid alignment, and semantics).
• Code: Component implemented, reviewed, and merged; includes necessary tests.
• Examples: Code examples added/updated to demonstrate top-of-app usage and RAG/system messaging.
• Figma assets: Salt Figma component/assets published/updated.
• Docs: Salt Site documentation added for System Status (usage guidance + do/don’t).
• Accessibility: Accessibility checks completed (contrast on solid appearance, focus visibility for any interactive elements, semantics announced appropriately).

Notes

• Track “filled appearance” as a future enhancement request (separate issue) to revisit once requirements are validated.
• Solid appearances for other messaging components will follow as related future updates for cross-system consistency.