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]

This API is unclear and relies on very specific behaviors about Style. That class describes the entire notification bar, not just the label style, so we are making two assumptions:

1. Callers of this API will understand exactly what will happen to the badge label if they specify a different nav bar style.
2. We will never change what label styles are associated with each navigation bar style.

If we are going to provide a way to change the color of the label, we should expose the final outcome of this: the button's BadgeLabelStyle, and have people override that.

[kumarmohit5189]

making that property optional direct not allowed as it seems optional Enum in swift with property marked as @objc not allowed. My thought process here is to use this property only when not nil. Assigning default value will create some confusion.

[kumarmohit5189]

@mischreiber Have used wrapper class to fix this, please have a look.

[anandrajeswaran]

We definitely don't want to have to create a wrapper class just to expose to objC. One question first - do we actually need to consume this from objC? Assuming we do, still need to go towards the suggestion in this thread of exposing a BadgeLabelStyle rather than a Style

[kumarmohit5189]

Yes, we need to access this in Objective C class, making it optional (since override happening, user can reset too) we need to add wrapper as Enum optional is not compliable.

Not clear with point - Assuming we do, still need to go towards the suggestion in this thread of exposing a BadgeLabelStyle rather than a Style, can you please explain bit more.

[anandrajeswaran]

Style (exposed to objC with MSFNavigationBarTitleAccessoryStyle) and BadgeLabelStyle (exposed to objC with MSFBadgeLabelStyle) are 2 different types, right?

[kumarmohit5189]

BadgeLabelButton is created internally in this class. So we won't have access to that object, ideally main app not aware about this thing.

[kumarmohit5189]

Updated code to override badgeLabelStyle instead of Style. But still we require wrapper to make sure we can set to nil if we don't want override.

[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.