implement red dot support for UIBarButtonItem

[kumarmohit5189]

Platforms Impacted

• iOS
• visionOS
• macOS

Description of changes

As part of this change, I have added red dot support for UIBarButtonItem. Currently UIBarButtonItem supports only Badge label, to make it similar to TabBarItem in Fluent UI I introduced a property called shouldShowRedDot in similar way as we are using for badge. It will work in similar approach to TabBarItem where:

• If user set shouldShowRedDot and badgeValue both, it will show badge value and logic will run as it was before change.
• If user just set shouldShowRedDot, it will display red dot
• If user just set badgeValue, it will show badge label as it was previously.

Binary change

File	Before	After	Delta
Total	3,10,97,936 bytes	3,11,54,096 bytes	🛑 56,160 bytes

Full breakdown

File	Before	After	Delta
UIBarButtonItem+RedDot.o	0 bytes	25,832 bytes	⚠️ 25,832 bytes
BadgeLabelButton.o	1,09,936 bytes	1,30,520 bytes	⚠️ 20,584 bytes
__.SYMDEF	48,49,960 bytes	48,59,232 bytes	⚠️ 9,272 bytes
FocusRingView.o	8,21,464 bytes	8,21,928 bytes	⚠️ 464 bytes
NavigationBar.o	5,49,544 bytes	5,49,552 bytes	⚠️ 8 bytes

Verification

(how the change was tested, including both manual and automated tests)

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

[laminesm]

Also, BadgeLabelButton already supports the red dot. All that is needed is to set BadgeLabelStyle to .system and have no text as badgeValue. Though the style and the control are internal, could we just leverage that?

[laminesm]

Also, how do these changes interact with the existing badge styles? Does the red dot override the badge label style?

[mischreiber]

We generally do not want to create public extensions to system classes in Fluent, as it forces all downstream consumers to deal with our extension in their namespace. Instead, either use a custom UIBarButtonItem subclass, or provide some form of helper class that can perform the mutation for you.

[kumarmohit5189]

But we are following same styling for Badge value as well. I am just adding one extra functionality on top of badge button by using same mechanism.

[mischreiber]

The existence of technical debt does not automatically justify the addition of more. We should move the badge styling away from this pattern as well; adding more that needs to be changed will only increase future work, especially when it comes to public APIs that downstream partners expect to remain supported.

[mischreiber]

spelling

[harrieshin]

the concern i have is that this isn't a design paradigm in fluent design for navigation header. the small dot was only used for controls like pillbuttonbar or segmented control so far. why can't you use "1" to represent the unread notification? it follows most apple navigation standards ..

[kumarmohit5189]

@Harrie

Also, BadgeLabelButton already supports the red dot. All that is needed is to set BadgeLabelStyle to .system and have no text as badgeValue. Though the style and the control are internal, could we just leverage that?

Yes, we can do, but from API prospect it looks weird when we set blank title. So, i though to keep clean API so its clearer on what API is exactly does.

Also, about style as System, this is being set in private method itself, so may be confusing while exposing these things.

If still in case we wanted to use BadgeLabel, what is your suggestion for style thing. We can simply add a property similar to badge value? And pick this if set while creating Badge label button.

Please let me know your input here.

[kumarmohit5189]

the concern i have is that this isn't a design paradigm in fluent design for navigation header. the small dot was only used for controls like pillbuttonbar or segmented control so far. why can't you use "1" to represent the unread notification? it follows most apple navigation standards ..

showing 1 looks weird,

Another option to show red dot is passing blank value, and expose Button style property to App. But passing blank value seems weird here, So I try to make separate path similar to tab bar. Let me know your input for this.

[kumarmohit5189]

Also, how do these changes interact with the existing badge styles? Does the red dot override the badge label style?

its similar to Tab, If we set Badge and Red dot both, preference will be given to Badge and it will work as it was.

[mischreiber]

The existence of technical debt does not automatically justify the addition of more. We should move the badge styling away from this pattern as well; adding more that needs to be changed will only increase future work, especially when it comes to public APIs that downstream partners expect to remain supported.

[laminesm]

@Harrie

Also, BadgeLabelButton already supports the red dot. All that is needed is to set BadgeLabelStyle to .system and have no text as badgeValue. Though the style and the control are internal, could we just leverage that?

Yes, we can do, but from API prospect it looks weird when we set blank title. So, i though to keep clean API so its clearer on what API is exactly does.

Also, about style as System, this is being set in private method itself, so may be confusing while exposing these things.

If still in case we wanted to use BadgeLabel, what is your suggestion for style thing. We can simply add a property similar to badge value? And pick this if set while creating Badge label button.

Please let me know your input here.

You can expose the style as a public property through the control that uses the BadgeLabel. For reference, see how we did it here for the tabbar https://github.com/microsoft/fluentui-apple/pull/1818/files

[kumarmohit5189]

Open another PR as suggested above, please help to review @laminesm @mischreiber @harrieshin

PR link #1977

Closing it.