-
Notifications
You must be signed in to change notification settings - Fork 171
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
implement red dot support for UIBarButtonItem #1974
implement red dot support for UIBarButtonItem #1974
Conversation
ios/FluentUI.Demo/FluentUI.Demo/Demos/NavigationControllerDemoController.swift
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, how do these changes interact with the existing badge styles? Does the red dot override the badge label style?
|
||
import UIKit | ||
|
||
@objc public extension UIBarButtonItem { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
updateAccessibilityLabel() | ||
} | ||
|
||
@objc private func redDotVisibilitDidChanged() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
spelling
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. |
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. |
|
||
import UIKit | ||
|
||
@objc public extension UIBarButtonItem { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
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 |
Open another PR as suggested above, please help to review @laminesm @mischreiber @harrieshin PR link #1977 Closing it. |
Platforms Impacted
Description of changes
As part of this change, I have added red dot support for
UIBarButtonItem
. CurrentlyUIBarButtonItem
supports only Badge label, to make it similar toTabBarItem
in Fluent UI I introduced a property calledshouldShowRedDot
in similar way as we are using for badge. It will work in similar approach toTabBarItem
where:shouldShowRedDot
andbadgeValue
both, it will show badge value and logic will run as it was before change.shouldShowRedDot
, it will display red dotbadgeValue
, it will show badge label as it was previously.Binary change
Full breakdown
Verification
(how the change was tested, including both manual and automated tests)
Visual Verification
| Before | After |
|-------
---------------------------------------|--------------------------------------------|
| |
|
Pull request checklist
This PR has considered:
Microsoft Reviewers: Open in CodeFlow