Skip to content

feat: Appbar MD3 Expressive improvements - #5075

Open
pawelkata wants to merge 2 commits into
callstack:mainfrom
pawelkata:appbar-improvements
Open

feat: Appbar MD3 Expressive improvements#5075
pawelkata wants to merge 2 commits into
callstack:mainfrom
pawelkata:appbar-improvements

Conversation

@pawelkata

@pawelkata pawelkata commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown

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

  • Run yarn test src/components/__tests__/Appbar.
  • Run yarn lint and yarn typecheck.
  • Verify all Appbar variants in the example app, including search, scrolling, centered headlines, actions, and safe areas.
  • Verify accessibility labels, element order, disabled states, and headline interactions with a screen reader.

JKobrynski
JKobrynski requested changes Aug 25, 2026
View reviewed changes
Comment thread src/components/Appbar/types.ts
Comment thread src/components/Appbar/types.ts
Comment thread src/components/Appbar/types.ts
Comment thread src/components/Appbar/AppbarButton.tsx Outdated
Comment thread src/components/Appbar/Appbar.tsx
Comment thread src/components/Appbar/Appbar.tsx Outdated
Comment thread src/components/Appbar/types.ts
Comment thread src/components/Appbar/AppbarContent.tsx Outdated
Comment thread src/components/Appbar/AppbarButton.tsx Outdated
Comment thread src/components/Appbar/Appbar.tsx Outdated
@JKobrynski

JKobrynski commented Aug 26, 2026

Copy link
Copy Markdown
Collaborator

@pawelkata can you resolve the comments that have been addressed? 🙏

@adam-sajko adam-sajko mentioned this pull request Aug 27, 2026
Closed
adam-sajko added a commit to adam-sajko/react-native-paper that referenced this pull request Aug 27, 2026
@adam-sajko
revert(appbar): drop Appbar from this PR
dd22197 
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.
@adam-sajko adam-sajko mentioned this pull request Aug 27, 2026
Open
@adam-sajko

adam-sajko commented Aug 27, 2026 •
edited
Loading

Copy link
Copy Markdown

docs/6.x/docs/guides/migration.md has no entry for this yet, and dropping Appbar.Header, Appbar.Content, Appbar.Action and Appbar.BackAction is worth mentioning in "before" and "after" there.

@pawelkata pawelkata changed the title Appbar MD3 Expressive improvements feat: Appbar MD3 Expressive improvements Aug 31, 2026
@pawelkata
pawelkata force-pushed the appbar-improvements branch 4 times, most recently from 5a809a4 to 9e83c5c Compare September 7, 2026 11:53
@pawelkata
pawelkata requested a review from JKobrynski September 7, 2026 12:08
JKobrynski
JKobrynski requested changes Sep 9, 2026
View reviewed changes

@JKobrynski JKobrynski left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The docs build fails on this PR, there is also a bunch of conflicts. There are some comments I'd like to post, but can you first address these conflicts and the failing check? I think some of my concerns will be resolved in process.

Paweł Kata @claude
feat(appbar): squash-rebase onto latest main
68973a5 
Squash all appbar-improvements commits and replay them on top of
latest main to avoid replaying 37 commits individually through
main's unrelated history (notably the v2->v3 Appbar rewrite
mid-branch, which produced large, non-semantic conflicts when
rebased commit-by-commit).

Also adapts the new Appbar/AppbarContent code to the testID
conventions established by callstack#5099 (remove derived test IDs for
internal, implementation-only elements): drops the
`${testID}-title-text`/`${testID}-headline-text`/`${testID}-subtitle-text`
derived test IDs on non-interactive text, updating the corresponding
tests to query by text content instead, and updates the migration
guide's "Test IDs" section accordingly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@pawelkata

pawelkata commented Sep 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Author

The docs build fails on this PR, there is also a bunch of conflicts. There are some comments I'd like to post, but can you first address these conflicts and the failing check? I think some of my concerns will be resolved in process.

@JKobrynski Rebased, docs generate and show up fine on my end.

NVM, this needs another rebase... I'll get to it asap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JKobrynski JKobrynski JKobrynski requested changes

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@pawelkata @JKobrynski @adam-sajko