Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] Fix issues setting Shell TabBar appearance #15748

Merged
merged 14 commits into from Sep 7, 2023
Merged

[iOS] Fix issues setting Shell TabBar appearance #15748

merged 14 commits into from Sep 7, 2023

Conversation

jsuarezruiz
Copy link
Contributor

@jsuarezruiz jsuarezruiz commented Jun 20, 2023

Description of Change

iOS portion of the following PR
#15447

Priority of how the colors are applied.

The APIs available to us are fairly limiting in scope. Ideally, we would make this all work through the VSM and just use two APIs (IconColor/TitleColor) but for now we are just making these APIs consistent between the platforms.

The three properties users have to influence the TabItem coloring are: TabBarUnselectedColor, TabBarTitleColor, and TabBarForegroundColor

  • If the user only sets Shell.TabBarTitleColor that will color the Title and Icon of the selected item. I realize this is a bit weird for TitleColor to change Icon color but this is currently how Android works and it's not really worth breaking this until we just introduce new APIs.
  • If Shell.TabBarTitleColor is not set then the TitleColor will match the TabBarForegroundColor
  • If TabBarForegroundColor is set and TabBarUnselectedColor isn't set then TabBarForegroundColor will be the color used for the text/icon of the selected TabItem
  • If TabBarUnselectedColor is the only thing set then that will be used for the text/icon color on the unselected Tab Item.

Examples

  • TabBarTitleColor: Green
    • Selected Icon is Green, Selected Text is Green, Unselected item matches system colors
  • TabBarForegroundColor: Blue
  • Selected Icon is Blue, Selected Text is Blue, Unselected item matches system colors
  • TabBarForegroundColor: Blue, TabBarTitleColor: Green
  • Selected Icon is Blue, Selected Text is Green, Unselected item matches system colors
  • Shell.ForegroundColor: Blue, TabBarTitleColor: Green (ForegroundColor propagates to TabBarForegroundColor).
  • Selected Icon is Blue, Selected Text is Green, Unselected item matches system colors
  • TabBarForegroundColor: Blue, TabBarTitleColor: Green, TabBarUnselectedColor: Pink
  • Selected Icon is Blue, Selected Text is Green, Unselected text and Icon is Pink

Breaking changes

  • Shell.ForegroundColor and Shell.TabBarForeGroundColor will now affect the android tab colors. If a user has ForegroundColor set, then the tab will match according to that color.

Fixes (partially) #6718
Fixes #16551

@jsuarezruiz jsuarezruiz added t/bug Something isn't working platform/iOS 🍎 area/shell 🐢 Shell Navigation, Routes, Tabs, Flyout labels Jun 20, 2023
@jsuarezruiz jsuarezruiz marked this pull request as ready for review June 26, 2023 14:24
@jsuarezruiz jsuarezruiz marked this pull request as draft June 26, 2023 14:24
@jsuarezruiz jsuarezruiz marked this pull request as ready for review August 3, 2023 14:14
@samhouts samhouts removed the request for review from PureWeen August 10, 2023 19:07
@samhouts samhouts added this to the Under Consideration milestone Aug 18, 2023
@PureWeen PureWeen self-requested a review August 31, 2023 23:54
@PureWeen PureWeen requested review from jfversluis and removed request for PureWeen September 6, 2023 21:47
jfversluis
jfversluis previously approved these changes Sep 7, 2023
Copy link
Member

@jfversluis jfversluis left a comment

Choose a reason for hiding this comment

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

Agreed that there is some weirdness in how the API works, but love the detailed explanation. Something we need to fix down the road with improved/new APIs.

Already pinged @davidbritch to maybe make things a bit more clearer through documentation.

Added a couple of nits to be more consistent with the use of != null vs is not null, otherwise I thinks looks good

@PureWeen PureWeen merged commit 3bc8c37 into main Sep 7, 2023
38 checks passed
@PureWeen PureWeen deleted the fix-12386-ios branch September 7, 2023 14:04
@github-actions github-actions bot locked and limited conversation to collaborators Dec 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area/shell 🐢 Shell Navigation, Routes, Tabs, Flyout platform/iOS 🍎 t/bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Custom color for selected bottom tabbar in Shell not working.
4 participants