add property to override badge style in navigation bar

[kumarmohit5189]

Platforms Impacted

• iOS
• visionOS
• macOS

Description of changes

For NavigationBar currently we don't have a way in case we want to change background color for BadgeLabel. It is picking using NavigationBar theme defined. As part of this change, added capability to override BadgeLableStyle for a particular screen, If this override happen then BadgeLabel will be using updated style for its UIBarButtonItems else it will follow NavigationBar style to set background.

Binary change

Total increase: 5,360 bytes
Total decrease: 0 bytes

File	Before	After	Delta
Total	3,10,97,936 bytes	3,11,03,296 bytes	⚠️ 5,360 bytes

Full breakdown

File	Before	After	Delta
NavigationBar.o	5,49,544 bytes	5,53,480 bytes	⚠️ 3,936 bytes
__.SYMDEF	48,49,960 bytes	48,50,824 bytes	⚠️ 864 bytes
FocusRingView.o	8,21,464 bytes	8,22,024 bytes	⚠️ 560 bytes

### Verification

Validated this change by manual testing with different mode like dark mode / light mode etc. Since this change is using existing UI and flows, so is safe fix.

Visual Verification

Before	After

|
|

|

Pull request checklist

This PR has considered:

• Light and Dark appearances
• iOS supported versions (all major versions greater than or equal current target deployment version)
• VoiceOver and Keyboard Accessibility
• Internationalization and Right to Left layouts
• Different resolutions (1x, 2x, 3x)
• Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
• iPad Pointer interaction
• SwiftUI consumption (validation or new demo scenarios needed)
• Objective-C exposure (provide it only if needed)

Microsoft Reviewers: Open in CodeFlow

[anandrajeswaran]

Do we really want to expose this? Good to add an example to the Demo app and that should help with Before/After screenshots to justify why this is a desirable experience

[kumarmohit5189]

Do we really want to expose this? Good to add an example to the Demo app and that should help with Before/After screenshots to justify why this is a desirable experience

We need this to make Badgelabel style to designed format, without making any change in navigationBar.
Example if we keep navigationBar ar eprimary but want badge to system design (red color).

With primary nav style text and badge is of white color. Please refer attached screenshot.

[mischreiber]

Additional thought: the UI changes in your "before" and "after" images, but there are no new changes in the Demo app. If the default behavior of the button has changed, that is a major design change and can't be submitted. Otherwise, we should expose a toggle in the navigation controller demo to replicate the change you illustrated.

[kumarmohit5189]

Additional thought: the UI changes in your "before" and "after" images, but there are no new changes in the Demo app. If the default behavior of the button has changed, that is a major design change and can't be submitted. Otherwise, we should expose a toggle in the navigation controller demo to replicate the change you illustrated.

I wanted to close on #1977 (comment), I will update UI accordingly. Can you please let me know your feedback for my comment? How we should handle this case?

[kumarmohit5189]

Additional thought: the UI changes in your "before" and "after" images, but there are no new changes in the Demo app. If the default behavior of the button has changed, that is a major design change and can't be submitted. Otherwise, we should expose a toggle in the navigation controller demo to replicate the change you illustrated.

@mischreiber here is UI changes demo, please have a look.

Screen.Recording.2024-03-01.at.9.54.49.AM.mov

[anandrajeswaran]

Do we really want to expose this? Good to add an example to the Demo app and that should help with Before/After screenshots to justify why this is a desirable experience

We need this to make Badgelabel style to designed format, without making any change in navigationBar. Example if we keep navigationBar ar eprimary but want badge to system design (red color).

With primary nav style text and badge is of white color. Please refer attached screenshot.

Do we have design input on this - is it really intended that both are possible? Or is one of those the actual design and the other is just a bug?

[kumarmohit5189]

Do we really want to expose this? Good to add an example to the Demo app and that should help with Before/After screenshots to justify why this is a desirable experience

We need this to make Badgelabel style to designed format, without making any change in navigationBar. Example if we keep navigationBar ar eprimary but want badge to system design (red color).
With primary nav style text and badge is of white color. Please refer attached screenshot.

Do we have design input on this - is it really intended that both are possible? Or is one of those the actual design and the other is just a bug?

@anandrajeswaran This is an addition to support unread dot like tab bar item. Generally unread dot should be Red. I raised another PR #1974 for this to keep red dot as separate. But came with suggestion to leverage #1974 (review) badgeLabel itself. Its just we need to expose property.
Please let me know your input for this. Any other better approach we can take here?

[anandrajeswaran]

Do we really want to expose this? Good to add an example to the Demo app and that should help with Before/After screenshots to justify why this is a desirable experience

We need this to make Badgelabel style to designed format, without making any change in navigationBar. Example if we keep navigationBar ar eprimary but want badge to system design (red color).
With primary nav style text and badge is of white color. Please refer attached screenshot.

Do we have design input on this - is it really intended that both are possible? Or is one of those the actual design and the other is just a bug?

@anandrajeswaran This is an addition to support unread dot like tab bar item. Generally unread dot should be Red. I raised another PR #1974 for this to keep red dot as separate. But came with suggestion to leverage #1974 (review) badgeLabel itself. Its just we need to expose property. Please let me know your input for this. Any other better approach we can take here?

Let's chat offline with designers as well - presumably there was a reason for this existing design to not be red in this case.

[kumarmohit5189]

Do we really want to expose this? Good to add an example to the Demo app and that should help with Before/After screenshots to justify why this is a desirable experience

We need this to make Badgelabel style to designed format, without making any change in navigationBar. Example if we keep navigationBar ar eprimary but want badge to system design (red color).
With primary nav style text and badge is of white color. Please refer attached screenshot.

Do we have design input on this - is it really intended that both are possible? Or is one of those the actual design and the other is just a bug?

We have it now in another discussion.