Skip to content

feat: modernize App bar to MD3 #4973

Description

@adrcotfas

The goal is to modernize the current App bar implementation according to the latest MD3 specs. Reuse the already existing theme tokens (typography, colors etc).

Current state

Appbar

MD3 spec: App bars (Top app bar)
Specs link: https://m3.material.io/components/app-bars/specs

Color tokens

  • Container background surface (flat) ✅
  • surfaceContainer when elevated prop is set ✅
  • Leading icon onSurface
  • Trailing icons onSurfaceVariant
  • Headline onSurface

Spacing / sizing

  • Small height 64dp ✅
  • Baseline medium height 112dp ✅
  • Baseline large height 152dp ✅
  • Typography per mode (titleLarge / headlineSmall / headlineMedium) ✅

Behavior

  • Medium flexible and Large flexible variants not implemented. Both are part of the M3 Expressive spec (Search app bar is covered by the separate Searchbar component)
  • medium and large modes implement the baseline variants, which are explicitly not recommended in M3 Expressive. Flexible counterparts should be added and baselines deprecated
  • center-aligned is a separate mode value. M3 Expressive merges it into small as a text-alignment configuration
  • elevated is a static boolean. MD3 specifies the container color transitions reactively on scroll (surface to surfaceContainer); no scroll-reactive API is provided
  • Subtitle support is @deprecated in v5. M3 Expressive medium flexible and large flexible variants restore subtitle as a supported element
  • Image/logo in the container not supported. M3 Expressive anatomy includes image/logo as an optional element
  • Filled trailing icon button not supported. M3 Expressive allows a single filled (primary or tonal) icon button in the trailing area

Notes

  • Current implementation covers the original M3 set (small, center-aligned, medium baseline, large baseline) but is missing the full M3 Expressive set
  • Should be renamed to TopAppBar

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions