microsoft
add property to override badge style in navigation bar
Platforms Impacted
- [x] 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 |
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:
- [x] Light and Dark appearances
- [x] iOS supported versions (all major versions greater than or equal current target deployment version)
- [x] VoiceOver and Keyboard Accessibility
- [x] Internationalization and Right to Left layouts
- [x] Different resolutions (1x, 2x, 3x)
- [x] Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
- [x] iPad Pointer interaction
- [x] SwiftUI consumption (validation or new demo scenarios needed)
- [x] Objective-C exposure (provide it only if needed)
Microsoft Reviewers: Open in CodeFlow
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
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.
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.
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 https://github.com/microsoft/fluentui-apple/pull/1977#discussion_r1501177320, I will update UI accordingly. Can you please let me know your feedback for my comment? How we should handle this case?
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.
https://github.com/microsoft/fluentui-apple/assets/102029000/4d1bf0b1-43e8-4e99-b411-0ebeef3b9cec
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?
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 https://github.com/microsoft/fluentui-apple/pull/1974 for this to keep red dot as separate. But came with suggestion to leverage https://github.com/microsoft/fluentui-apple/pull/1974#pullrequestreview-1883723233 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?
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.