/
UX Specs: System Console Panels

UX Specs: System Console Panels

  • Rough draft

    • Overview

    The System Console currently relies on inconsistent patterns and components to achieve the same goals. When grouping multiple settings in a section, we use several different methods and components — each with its own unique styling and structure.

    This inconsistency leads to two key issues:

    1. User Experience: Administrators encounter an uneven and sometimes confusing interface, as similar elements look and behave differently across the console.

    2. Developer Overhead: Maintaining multiple approaches to the same UI problem increases code complexity, duplication, and long-term maintenance costs.

    To address these challenges, this proposal outlines a plan to standardize the structure, styling, and composition of System Console panels into a single, flexible component system.

    Current State

    Inconsistent Component Usage

    The same functional goals — such as grouping related settings — are currently achieved using a variety of approaches (e.g., AdminPanel, Card, AccordionCard, .config-section class, EnableSectionContent, EditSection). Each has its own markup, styling, and interaction patterns

    Visual and Structural Fragmentation

    Panel layouts, padding, headers, and section organization differ significantly from one page to another. For example:

    • Inconsistent title styling and spacing

    • Buttons, toggles, and metadata often appear in inconsistent positions.

    • Expansion and collapse behavior varies widely across sections.

    Engineering and Maintenance Costs

    Supporting multiple patterns for the same UI purpose increases complexity in several ways:

    • Duplication of components and logic.

    • Greater difficulty introducing new features or making global UI changes.

    • Harder onboarding for new contributors.

    Examples

    Component: Admin Panel

    image-20251002-145140.png

    Component: Card

    image-20251002-145640.png

    Component: Accordion Card

    image-20251002-145725.png

    Class: config-section

    image-20251002-145913.png

    Component: EnableSectionContent

    image-20251002-184139.png

    Component: EditSection

    image-20251002-184245.png

    Proposed Solution: A Unified Panel System

    The proposal is to consolidate all sectioned console panels into a single, reusable panel component with a consistent structure and shared styling. This unified pattern will support a range of use cases while maintaining visual and functional consistency across the console.

    In addition, we can create a re-usable style for the panel container to ensure it’s applied consistently across the admin console.

    Consolidating Styles for Admin Panels

    For the outer admin panel containers, there is a set of common styles to apply to the container as follows:

    border-radius: var(--radius-m); border: 1px solid rgba(var(--center-channel-color-rgb, 0.12)); background: var(--center-channel-bg); color: var(--center-channel-color); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.08);

    Which translates to a container that looks like this:

    image-20251002-175043.png

    Examples

    Here are a few examples of panels throughout the console that should be using this common style for the container.

    image-20251008-200730.png

    Consolidating Components for sectioned admin panels

    A typical panel has a header, body and footer component to it.

    image-20251008-200744.png

    Panel header (optional)

    The panel header has a number of optional elements. At the very base, it should have the title, but could include a subtitle, icon, button, expandable/collapse icon. Below are a few examples of this.

    image-20251008-200803.png

    Panel body (required)

    The panel body, could almost be any content. Below are some examples:

    AD/LDAP Groups Panel with data table

    image-20251008-200820.png

    Teams panel in the User detail view

    image-20251008-200826.png

    Workspace optimization panel with expandable body

    image-20251008-200839.png

    Feature discovery panel (no header or footer)

    image-20251008-200951.png

    Panel footer (optional)

    The panel footer is optional and may include 1 or more buttons. Here is one such example.

    image-20251008-201005.png

    Next Steps

    1. Finalize the panel component design and collaborate Engineering on implementation details.

    2. Build and test the unified ConsolePanel component.

    3. Begin phased migration, starting with high-impact console areas.

    4. Roll out documentation and communicate changes to contributors.