Appbar MD3 Expressive improvements - #5075
Conversation
| /** Headline and subtitle alignment. */ | ||
| headlineAlignment?: AppbarHeadlineAlignment; | ||
| /** Trailing actions. */ | ||
| trailingActions?: AppbarTrailingActions; |
There was a problem hiding this comment.
trailingActions takes config objects, so nothing can wrap an action any more. The examples in this PR show the cost - TooltipExample drops four Tooltips, and MenuExample, BottomNavigationExample and react-navigation.md all switch Menu from an element anchor to raw coordinates. Composition is what #4954 set out to fix.
| contentStyle?: never; | ||
| }; | ||
|
|
||
| export type Props = AppbarBaseProps & |
There was a problem hiding this comment.
Running the docs generator produces four props for Appbar - headlineAlignment, isScrolled, testID, trailingActions - with no types and no descriptions. headline, variant, leadingButton, searchBar and the rest are missing because react-docgen can't read the union, so the published prop table is effectively empty.
| /** Override for the automatic top safe-area inset. */ | ||
| statusBarHeight?: number; | ||
| /** Safe-area inset overrides. Unspecified values use the detected insets. */ | ||
| safeAreaInsets?: { |
There was a problem hiding this comment.
safeAreaInsets.bottom is gone and children is no longer accepted, so the documented bottom app bar can't be built any more. Deliberate? The spec's replacement is the docked toolbar, which isn't here either.
There was a problem hiding this comment.
There is a clear separation between top and bottom bars outlined in MD3 docs, hence I decided to drop bottom bar support in the PR. The Toolbar is, in my opinion, out of the scope of these adjustments and should be tackled as a separate task. I'll adjust the documentation to clearly state that.
| elevation={elevation} | ||
| ref={ref} | ||
| testID={`${testID}-root-layer`} | ||
| elevation={0} |
There was a problem hiding this comment.
md.comp.app-bar.on-scroll.container.elevationresolves tolevel2, butelevationis pinned to0-isScrolledonly changes the container colour. Intentional?
There was a problem hiding this comment.
I'm probably missing something here, but... according to MD3 guidelines here: https://m3.material.io/components/app-bars/guidelines and the Figma kit, there's no elevation in appbars -- just the color indication that content was scrolled.
|
@pawelkata can you resolve the comments that have been addressed? 🙏 |
callstack#4934 proposes an `actions` prop API for Appbar and callstack#5075 implements it, so the children refactor here is superseded. Appbar sources, tests and snapshots go back to their state on main.
|
|
3 participants
Motivation
Replace the legacy compound Appbar API with a prop-driven Material 3 implementation. This adds small, flexible, and search variants; filled actions; scroll-aware colors; safe-area handling; and improved accessibility. Documentation, examples, and downstream usages are updated accordingly.
Related issue
Related issue: #4934
Also based on comments on Appbar from here: #4949 (comment) .
Caveats
The search bar is dropped in verbatim as it needs a separate pool of work to properly handle the "search" variant. Deliberately skipped any animations related work at this stage due to lack of testing device and the PR already being quite big. Can be tackled at a later stage.
NOTE: The PR drops support for the bottom app bar variant, which is now - according to the official docs - part of the
Toolbars.Test plan
yarn test src/components/__tests__/Appbar.yarn lintandyarn typecheck.