Skip to content

fix(appbar): make back icon respect the icon from Provider settings - #5064

Open
giaBaoJS wants to merge 1 commit into
callstack:mainfrom
giaBaoJS:fix/appbar-back-icon-respects-settings-icon
Open

fix(appbar): make back icon respect the icon from Provider settings#5064
giaBaoJS wants to merge 1 commit into
callstack:mainfrom
giaBaoJS:fix/appbar-back-icon-respects-settings-icon

Conversation

@giaBaoJS

Copy link
Copy Markdown

Motivation

Icon is the only component that reads the icon entry from SettingsContext:

} else if (typeof s === 'string') {
return (
<SettingsConsumer>
{({ icon }) => {
return icon?.({
name: s,
color: iconColor,
size,
direction,
testID,
});
}}
</SettingsConsumer>
);

A number of components import MaterialCommunityIcon directly instead, which bypasses that consumer. Because src/core/settings.tsx#L18 also uses MaterialCommunityIcon as the default context value, those call sites look correct until an app actually passes settings={{ icon }} to PaperProvider — at which point the override is silently ignored.

Appbar.BackAction is one of the two components named in #4760.

Scope

Deliberately narrow: this PR only changes Appbar/AppbarBackIcon.tsx.

The same bypass exists at these call sites, which I left alone because they all sit under active/competing PRs and are better done separately (happy to follow up):

  • Chip/Chip.tsx (2)
  • Snackbar.tsx (1)
  • List/ListAccordion.tsx (1)
  • DataTable/DataTablePagination.tsx (4)
  • DataTable/DataTableTitle.tsx (1)
  • RadioButton/RadioButtonIOS.tsx (1)
  • Searchbar.tsx (2)

Also out of scope on purpose: the Platform.OS === 'ios' branch of AppbarBackIcon renders the bundled back-chevron.png asset rather than an icon-font glyph. Routing that through settings.icon would replace the iOS chevron with an arrow-left glyph for every app that does not customise icons, which is a visual change I did not want to smuggle into a bug fix. Let me know if you'd like it changed and I'll do it here or in a follow-up.

Note on RTL

The object form { source: 'arrow-left', direction } is used rather than the bare string "arrow-left". Icon computes direction as null for a bare string source, which drops the scaleX: -1 mirroring that the previous direction={direction} prop provided — the back arrow is direction-sensitive, so that would have been a regression. There is a dedicated test for both RTL and LTR to keep it that way.

Test plan

Added three cases to src/components/__tests__/Appbar/Appbar.test.tsx (Platform.OS is forced to android because the jest preset defaults to ios, where this branch is not reachable):

  • the icon from PaperProvider settings={{ icon }} is rendered
  • it stays mirrored in RTL
  • it stays unmirrored in LTR

Before the fix all three fail (the default arrow-left glyph renders instead of the custom one). With the bare-string form, the RTL case fails on its own.

yarn test: 55 suites, 738 passed / 1 skipped, 169 snapshots — no snapshot churn. yarn lint and yarn typecheck clean.

Fixes part of #4760.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant