Platform

• iOS
• macOS

Describe the feature that you would like added

The current Fluent-UI has support for expanding and collapsing UITableViews via the header. However, with SwiftUI's new update to the List, we are able to create nested Lists that allow us to expand/collapse within the parent list itself, which can allow for multiple nested Lists (unlike our current UITableView). [1] [2]

While nested Lists use a parent cell as an anchor, our current expand/collapse feature relies on the header. We should consider both options and discuss further for ListVnext.

What component or utility would this be added to

ListVnext

Additional context/screenshots

Examples of expand/collapse on SwiftUI can be seen on source 2 above. Our current expand/collapse can be seen on our app in TableViewHeaderFooterView.

Platform

• iOS
• macOS

Describe the feature that you would like added

Cells can expand/collapse children cells; sections headers should be able to do the same (#270).

What component or utility would this be added to

List

Platform

• iOS
• macOS

Describe the feature that you would like added

#365 allows apps using Swift/Objc to inject any UIView into the List's leadingView property. However, we should also create an option for apps using full SwiftUI environment to use their Views for the property as well.

What component or utility would this be added to

ListVnext

I saw a lot of UIScreen.main in the codebase. As a UI framework, I don't think this is a good implementation.

iOS devices can use external screens, it means your view will not alway in the main screen, we should get screen form window:

extension UIView {
   var screen: UIScreen { window?.screen ?? .main }
}

And screen should be accessed from methods like layoutSubviews, sizeThatFits. For example, Separator should access screen in sizeThatFits:

class Separator: UIView {
  ...

  override func sizeThatFits(_ size: CGSize) -> CGSize {
    switch orientation {
      case .horizontal:
        return CGSize(width: size.width, height: screen.devicePixel)
      case .vertical:
        return CGSize(width: screen.devicePixel, height: size.height)
    }
  }

Environment Information

• Platform:
  • iOS
  • macOS

Priorities and help requested:

Are you willing to submit a PR to fix? Neutral

Requested priority: Normal

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): 1.16
• Xcode and OS versions: 12.2_beta_2

Please provide a reproduction of the bug:

Internally in our office codebase, we use FluentUI Apple on iOS as a static library, and not a framework. This means we link "libFluentUILib.a" which contains symbols that looks like this:

# From libFluentUILib.a
$ swift demangle s11FluentUILib11ShimmerViewCMa
$s11FluentUILib11ShimmerViewCMa ---> type metadata accessor for FluentUILib.ShimmerView

On FluentUI React Native, we consume FluentUI as a framework via cocoapods, and wrap some FluentUI Apple controls to create FluentUI React Native controls.

The corresponding FluentUI React Native static libraries reference symbols from FluentUI Apple that look like this:

# From libFluentUI-React-Native-Shimmer.a
$ swift demangle s8FluentUI11ShimmerViewCMa
$s8FluentUI11ShimmerViewCMa ---> type metadata accessor for FluentUI.ShimmerView

We import both libFluentUILib.a and libFluentUI-React-Native-Shimmer.a into our office codebase via NuGet packages, and attempt to link the libraries.

Actual behavior:

We run into a linker error, and cannot use our FluentUI React Native libraries.
This is because

s11FluentUILib11ShimmerViewCMa != s8FluentUI11ShimmerViewCMa

Expected behavior:

Both libraries should link fine, allowing us to use FluentUI React Native internally in our office codebase

Proposed Solution

At the current moment, we *must * use FluentUI as a framework, because importing FluentUI as a static library fails because we can't find the header "FluentUI-Swift.h". This is a separate bug that I should probably file.
Additionally, our Office codebase has made the universal choice to not use frameworks on iOS because of boot performance, and only use static libraries. So switching the office codebase is not an option.

To fix this, it seems we either need to:

• have the framework and static library have the same name and therefore produce the same symbols (preferred solution)

or

• Fix the bug with importing static ibraries via cocoapods, and import FluentUI Apple as a static library into FluentUI React
  Native (less preferred, requires work across both repos)

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Blocking

Products/applications affected: (if applicable) Office

Platform

• iOS
• macOS

Describe the feature that you would like added

[AvatarVnextView] Define fallback / unauthenticated scenarios.
The current implementation of the AvatarView has 4 variations of fallback image styles:

primaryFilled and onAccentFilled respectively depicted below:

These variations are used to represent an existing user that does not have associated information (primary and secondary text) enough to generate background colors and initials. But it still a valid user.

The different background colors are meant to work well with different background (white vs primary color) variations like the ones below:

primaryFilled	onAccentFilled

outlined and primaryOutlined respectively depicted below:

These variations are used to indicate no user is associated with the avatar (unauthenticated / sign out scenarios).

We need to make a decision on what are the variations that will be supported by the new AvatarVnextView.
Victor mentioned we can make this simpler by defining fewer colors and variations that could work for all the apps.

What component or utility would this be added to

AvatarVnextView

Have you discussed this feature with our team, and if so, who

Currently discussing this with Victor Coulon.

Additional context/screenshots

Platform

• iOS
• macOS

Describe the feature that you would like added

LeadingView in ListVnext takes inputs as UIImage only. However, we will need to allow support for other components as well, ie. AvatarView. We should change this logic so that LeadingView can be more customizable.

What component or utility would this be added to

ListVnext

Platform

• iOS
• macOS

Describe the feature that you would like added

hmmmm... I think the client app shouldn't need to worry about this.
Isn't there a way to just attach the drawerController to a specific view/viewcontroller and let it read the gestures and take the appropriate actions?

Originally posted by @rdeassis in #344 (comment)

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): version 0.0.9 commit 589e52d
• Xcode and OS versions: macOS 10.15.4 Xcode 11.3.1

Please provide a reproduction of the bug:

$ swiftc -v
Apple Swift version 5.1.3 (swiftlang-1100.0.282.1 clang-1100.0.33.15)
Target: x86_64-apple-darwin19.4.0
$ swiftc \
-sdk /Applications/Xcode_11.3.1.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.2.sdk \
-target arm64-apple-ios12.0 \
-swift-version 5 \
-module-name FluentUI \
-emit-library \
-o FluentUI \
-emit-objc-header-path FluentUI-Swift.h \
-emit-module-path FluentUI.swiftmodule \
-parse-as-library \
-Xlinker -install_name -Xlinker @rpath/FluentUI.framework/FluentUI \
-Xlinker -rpath -Xlinker @executable_path/Frameworks \
-Xlinker -rpath -Xlinker @loader_path/Frameworks \
-O -whole-module-optimization \
-gdwarf-types \
# list all .swift files in ios/FluentUI/

Actual behavior:

Stack dump:
0.	Program arguments: /Applications/Xcode_11.3.1.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/swift -frontend -c <list of input swift files> -supplementary-output-file-map /var/folders/43/kxnkpdr551b3fybs7bz_1kwm0000gq/T/supplementaryOutputs-b718af -target arm64-apple-ios12.0 -Xllvm -aarch64-use-tbi -enable-objc-interop -sdk /Applications/Xcode_11.3.1.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS13.2.sdk -gdwarf-types -swift-version 5 -O -parse-as-library -module-name FluentUI -o /var/folders/43/kxnkpdr551b3fybs7bz_1kwm0000gq/T/FluentUI-187a60.o 
1.	While emitting IR SIL function "@$s8FluentUI18DateTimePickerViewC4modeAcA0cdeF4ModeO_tcfc".
 for 'init(mode:)' (at ios/FluentUI/Date Time Pickers/Date Time Picker/Views/DateTimePickerView.swift:64:5)
0  swift                    0x000000010b848a63 PrintStackTraceSignalHandler(void*) + 51
1  swift                    0x000000010b848236 SignalHandler(int) + 358
2  libsystem_platform.dylib 0x00007fff5e7dcb5d _sigtramp + 29
3  swift                    0x0000000108438c91 swift::Type::transformRec(llvm::function_ref<llvm::Optional<swift::Type> (swift::TypeBase*)>) const + 49
4  libsystem_c.dylib        0x00007fff5e6966a6 abort + 127
5  libsystem_malloc.dylib   0x00007fff5e7a516b malloc_vreport + 545
6  libsystem_malloc.dylib   0x00007fff5e7a4f2c malloc_report + 151
7  swift                    0x0000000107e0b803 llvm::DenseMap<swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*, llvm::DenseMapInfo<swift::Lowering::TypeConverter::CachingTypeKey>, llvm::detail::DenseMapPair<swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*> >::grow(unsigned int) + 627
8  swift                    0x0000000107e0b577 llvm::detail::DenseMapPair<swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*>* llvm::DenseMapBase<llvm::DenseMap<swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*, llvm::DenseMapInfo<swift::Lowering::TypeConverter::CachingTypeKey>, llvm::detail::DenseMapPair<swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*> >, swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*, llvm::DenseMapInfo<swift::Lowering::TypeConverter::CachingTypeKey>, llvm::detail::DenseMapPair<swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*> >::InsertIntoBucketImpl<swift::Lowering::TypeConverter::CachingTypeKey>(swift::Lowering::TypeConverter::CachingTypeKey const&, swift::Lowering::TypeConverter::CachingTypeKey const&, llvm::detail::DenseMapPair<swift::Lowering::TypeConverter::CachingTypeKey, swift::Lowering::TypeLowering const*>*) + 103
9  swift                    0x0000000107e09ff2 swift::Lowering::TypeConverter::getTypeLowering(swift::Lowering::AbstractionPattern, swift::Type, swift::ResilienceExpansion) + 1762
10 swift                    0x0000000107e0d0ff (anonymous namespace)::TypeClassifier::visitAnyStructType(swift::CanType, swift::StructDecl*) + 335
11 swift                    0x0000000107e0bff2 (anonymous namespace)::LowerType::visitAnyStructType(swift::CanType, swift::StructDecl*) + 338
12 swift                    0x0000000107e09bd2 swift::Lowering::TypeConverter::getTypeLowering(swift::Lowering::AbstractionPattern, swift::Type, swift::ResilienceExpansion) + 706
13 swift                    0x0000000107e0d0ff (anonymous namespace)::TypeClassifier::visitAnyStructType(swift::CanType, swift::StructDecl*) + 335
14 swift                    0x0000000107e0bd07 (anonymous namespace)::LowerType::visitAnyEnumType(swift::CanType, swift::EnumDecl*) + 551
15 swift                    0x0000000107e09bd2 swift::Lowering::TypeConverter::getTypeLowering(swift::Lowering::AbstractionPattern, swift::Type, swift::ResilienceExpansion) + 706
16 swift                    0x0000000107697465 swift::irgen::IRGenModule::getTypeInfoForUnlowered(swift::Lowering::AbstractionPattern, swift::Type) + 101
17 swift                    0x00000001076b4835 (anonymous namespace)::IRGenDebugInfoImpl::createType(swift::irgen::DebugTypeInfo, llvm::StringRef, llvm::DIScope*, llvm::DIFile*) + 8117
18 swift                    0x00000001076b203c (anonymous namespace)::IRGenDebugInfoImpl::getOrCreateType(swift::irgen::DebugTypeInfo) + 2620
19 swift                    0x00000001076b4990 (anonymous namespace)::IRGenDebugInfoImpl::createType(swift::irgen::DebugTypeInfo, llvm::StringRef, llvm::DIScope*, llvm::DIFile*) + 8464
20 swift                    0x00000001076b203c (anonymous namespace)::IRGenDebugInfoImpl::getOrCreateType(swift::irgen::DebugTypeInfo) + 2620
21 swift                    0x00000001076b1243 (anonymous namespace)::IRGenDebugInfoImpl::createParameterTypes(swift::CanTypeWrapper<swift::SILFunctionType>) + 931
22 swift                    0x00000001076b038f (anonymous namespace)::IRGenDebugInfoImpl::emitFunction(swift::SILDebugScope const*, llvm::Function*, swift::SILFunctionTypeRepresentation, swift::SILType, swift::DeclContext*) + 3167
23 swift                    0x00000001076ad817 (anonymous namespace)::IRGenDebugInfoImpl::getOrCreateScope(swift::SILDebugScope const*) + 1415
24 swift                    0x00000001076ae9d4 (anonymous namespace)::IRGenDebugInfoImpl::createInlinedAt(swift::SILDebugScope const*) + 788
25 swift                    0x00000001076ad191 (anonymous namespace)::IRGenDebugInfoImpl::setCurrentLoc(swift::irgen::IRBuilder&, swift::SILDebugScope const*, swift::SILLocation) + 1585
26 swift                    0x00000001076c90f1 swift::irgen::IRGenModule::emitSILFunction(swift::SILFunction*) + 3217
27 swift                    0x00000001075789e7 swift::irgen::IRGenerator::emitLazyDefinitions() + 9303
28 swift                    0x00000001076a78e0 performIRGeneration(swift::IRGenOptions&, swift::ModuleDecl*, std::__1::unique_ptr<swift::SILModule, std::__1::default_delete<swift::SILModule> >, llvm::StringRef, swift::PrimarySpecificPaths const&, llvm::LLVMContext&, swift::SourceFile*, llvm::GlobalVariable**) + 1344
29 swift                    0x00000001076a4fe9 swift::performIRGeneration(swift::IRGenOptions&, swift::ModuleDecl*, std::__1::unique_ptr<swift::SILModule, std::__1::default_delete<swift::SILModule> >, llvm::StringRef, swift::PrimarySpecificPaths const&, llvm::LLVMContext&, llvm::ArrayRef<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > >, llvm::GlobalVariable**) + 825
30 swift                    0x00000001074928fe performCompile(swift::CompilerInstance&, swift::CompilerInvocation&, llvm::ArrayRef<char const*>, int&, swift::FrontendObserver*, swift::UnifiedStatsReporter*) + 36542
31 swift                    0x0000000107486234 swift::performFrontend(llvm::ArrayRef<char const*>, char const*, void*, swift::FrontendObserver*) + 6820
32 swift                    0x0000000107413733 main + 1219
33 libdyld.dylib            0x00007fff5e5f13d5 start + 1
34 libdyld.dylib            0x0000000000000089 start + 2711678133
<unknown>:0: error: unable to execute command: Abort trap: 6
<unknown>:0: error: compile command failed due to signal 6 (use -v to see invocation)

Expected behavior:

It should build without crashing compilers. Since Xcode 11+ is supported.
This cannot be reproduced with Xcode 11.4.1.

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)
Requested priority: (Blocking, High, Normal, Low)
Products/applications affected: (if applicable)

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): (fill this out, include which package manager you're using)
• Xcode and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug:

Bug replicates on iOS 13 only

• Open DrawerVnextController
• Expand Drawer by any side
• Tap on Dismiss button

Actual behavior:

Drawer is not dismissed

Expected behavior:

Drawer to be dismissed

Priorities and help requested:

If vNext branch, doesn't affect master yet

I am trying to use customView for rightNavigationItem along with "usesLargeTitle"

viewController.navigationItem.usesLargeTitle = true
var btn: UIBarButtonItem {
let button = UIButton(type: .custom)
button.setImage(UIImage(named: "Alert"), for: .normal)
button.frame = CGRect(x: 0, y: 0, 20, height: 20)
button.addTarget(self, action: #selector(handler), for: .touchUpInside)
return UIBarButtonItem(customView: button)
}
viewController.navigationItem.rightBarButtonItems = [btn]

So when this property is set, it hides the customView behind other blocked views. Any button set inside customView does not show in view stack.

Any suggestions?

Platform

• [ x] iOS
• [x ] macOS

Describe the feature that you would like added

would love to see SwiftUI example as most new development is done on this platform.

What component or utility would this be added to

All controls and examples

Have you discussed this feature with our team, and if so, who

no

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): CocoaPods, podspec 0.1.16
• Xcode and OS versions: 12.2, 10.15.7

Please provide a reproduction of the bug:

It looks like when I build 0.1.16 from cocoapods that it embeds the iOS bundle in the Mac framework, which then crashes when you try to use it.

Actual behavior:

crashes, looking for the fluentuiresources-mac bundle.

Expected behavior:

Not crashing

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No) Yep

Requested priority: (Blocking, High, Normal, Low) Normal

Products/applications affected: (if applicable)

Platform

• iOS
• macOS

Describe the feature that you would like added

Cell layout (height) definition currently is determined in a List's section. This ensures that any cell within a section will always have uniform height. However, we can also consider moving this as a responsibility for each individual List cell, which will require the client to set the cell height multiple times instead of once. On the other hand, it can allow a List section to have cells of varying height.

We should discuss if having a section of cells with varying height is something should be done, or if we should restrict cells within a section to maintain same height for consistency.

What component or utility would this be added to

ListVnext, ListCellVnext

Updating the issue with more info:

1. The problem is not exclusive to iOS13. I'm able to consistently reproduce it in iOS 14 as well.
2. This issue doesn't affect only the ButtonVnext. It it also impacting other SwiftUI controls.
3. The culprit of the issue lies on the following snippet in the animateTransition method (Drawer+UIKit.swift file):

        // delegate animation to swiftui by changing state
        if isPresentingDrawer {
            transitionContext.containerView.addSubview(drawerView)
            drawerView.frame = UIScreen.main.bounds
            DispatchQueue.main.asyncAfter(deadline: .now() + state.animationDuration) { [weak self] in
                if let strongSelf = self {
                    strongSelf.state.isExpanded = isPresentingDrawer
                }
                transitionContext.completeTransition(true)
            }
        } else {
            self.state.isExpanded = isPresentingDrawer
            DispatchQueue.main.asyncAfter(deadline: .now() + state.animationDuration) {
                drawerView.removeFromSuperview()
                transitionContext.completeTransition(true)
            }
        }

Because the animation transition blocks the UI interaction while it's happening, we can't interact with the controls until transitionContext.completeTransition(true) is called.

The fact that transitionContext.completeTransition(true) is being called asynchronously, there is a timing issue where the SwiftUI Views are not "unlocked" for interaction (probably because the transitionContext call didn't happen before it is "unlocked").

The video below shows a modified demo of the Drawer (running in iOS14) where the List is also being used in its contents. This proves points 1 and 2 above:

If the async call is removed and transitionContext.completeTransition(true) is called right away, the interaction problem does not repro anymore (although the dismiss animation does not behave as expected as well as the presentation animation in the first time):

Originally posted by @rdeassis in #359 (comment)

Environment Information

• Platform:
  • iOS
  • macOS

Please provide a reproduction of the bug:

Extra divider after last cell in section should not exist. (Only in nested scenario)

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/applications affected: (if applicable)
List

Platform

• iOS
• macOS

Describe the feature that you would like added

There is a hashing algorithm in Avatar to choose a background color given the primaryText/secondaryText of the avatar.
On iOS this was purposefully chosen to match the FluentUI Android implementation. Let's use the same implementation for macOS, which currently uses a slightly different hashing algorithm resulting in different colors.

What component or utility would this be added to

macOS Avatar

Have you discussed this feature with our team, and if so, who

Yes. @markavitale and @harrieshin

Additional context/screenshots

Platform

• iOS
• macOS

Describe the feature that you would like added

I would like to get personaSuggestionsView, personaListView inside PeoplePicker as public so that I can modify the view(add label in between views, modify spacing).

Also, if searchDirectoryState in PersonaListView is accessible outside, we can directly have searchDirectory spinner showing depending on usage.

What component or utility would this be added to

PeoplePicker, PersonaListView

Have you discussed this feature with our team, and if so, who

No, would like to discuss with someone and know if it is possible.

Platform

• iOS
• macOS

Describe the feature that you would like added

The iOS Avatar has an MSFAvatarSize enum to create Avatars in specified sizes. The macOS Avatar does not do that, and currently can be configured to any point size by passing a CGFloat.
Let's add the same size values / enums to macOS, mostly so that in FluentUI React Native, they can have the same API.

What component or utility would this be added to

macOS Avatar

Have you discussed this feature with our team, and if so, who

No, mostly filing a bug so I can link the bug in comments of my PR code.

Additional context/screenshots

Welcome Build 2020 participants! Did you get a chance to try out the Fluent UI Apple library
or watch our Build 2020 talk? If so, we want to hear your feedback! Let us know how we can make this even more useful to you moving forward.

Feel free to leave feedback on any of the following (and please keep feedback constructive and respectful):

• Likes
• Dislikes
• Bugs
• Areas for improvement

Thank you,
The Fluent UI Apple team

Platform

• iOS
• macOS

Describe the feature that you would like added

The individual pills present inside the pill bar need to have disable functionality.

What component or utility would this be added to

PillBar and Pill

Have you discussed this feature with our team, and if so, who

The requirement was discussed over email with Harrie and Kaan.
Here is the link to the fluent design spec where the disable pill requirements are specified.

Additional context/screenshots

This will help with code reviews to understand tab spaces and line limit.

Sample .editorconfig file can be found here.
https://github.com/editorconfig

I think Github thinks tabs are 8 spaces by default. You can fix that by adding a .editorconfig file

Originally posted by @Saadnajmi in #455 (comment)

Platform

• iOS
• macOS

The current AvatarView relies on the logic of the InitialsView to get the background color of the Avatar.
The design team is currently proposing 30 different color variations to be used based on the hash of the primaryText and secondaryText properties.

These 30 colors should be tokenized in the YAML file (light, dark and HC variations) and used to define the AvatarVnext default colors for:

1. background
2. foreground (used for the text color or icon image tint color)
3. avatar ring

What component or utility would this be added to

AvatarVnextView

Have you discussed this feature with our team, and if so, who

Discussion currently happening with Victor.

Additional context/screenshots

Describe the work to be done

Microsoft is gradually moving to have its repositories use "main" as the default branch. Fluent UI Apple is no exception here and this issue tracks the work to migrate over to "main".

Migration

• Update all the CI/CD/pipelines to operate on both "master" and "main" branches
• Create a new "main" branch based off of the current default branch's latest commit
• Reassign any protected branch settings to the new "main" default branch from the former
• Update any open pull requests against the current default branch for the new "main" branch
• Update the default branch to the new "main" branch

Cleanup

• Delete the current default branch
• Update all the CI/CD/pipelines to remove the references to "master"
• Update all links/documentation to point to the main branch instead of the master branch
• Update the links on https://developer.microsoft.com/en-us/fluentui#/controls/ios to point to the main branch instead of the master branch.

Potential Impact

Any consumers of this library simply specifying "master" for Carthage consumption may* run into trouble. Instead, we recommend using a tagged commit for better stability.

* I suspect that because GitHub now redirects links to deleted branches to the default branch automatically, things may still work.

Additional context/screenshots

See https://github.com/github/renaming for more context.

Platform

• iOS
• macOS

Describe the feature that you would like added

The current implementation of ListVnext only contains properties for a leading image, title, subtitle, link-handling, and trailing image. We will need to implement triple-lined cell & header/footer.

What component or utility would this be added to

ListVnext, ListCellVnext, ListHeaderFooterVnext

Platform

• iOS
• macOS

Task

Update Stylesheet to include shadow definitions

Shadow:
shadow28: [ blur: 28pt, color: $Colors.Neutral.black, opacity: $Opacity.opacity24, x: 0pt, y: 14pt ]

AP_DrawerTokens:
shadowColor: $Shadow.shadow28.color
shadowOpacity: $Shadow.shadow28.opacity
shadowBlur: $Shadow.shadow28.blur
shadowX: $Shadow.shadow28.x
shadowY: $Shadow.shadow28.y

Originally posted by @rdeassis in #344 (comment)

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): 0.1.17
• Xcode and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug:

Actual behavior:

Expected behavior:

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/applications affected: (if applicable)

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): (fill this out, include which package manager you're using)
• Xcode and OS versions: (fill this out if relevant)

Please provide a reproduction of the bug:

Go to PeoplePicker, type a name and click on search directory button. Note the count of results returned. Now add another name or delete a char(don't remove all the typed characters) and the results count can be seen as same.

Actual behavior:

Expected behavior:

Either update search count or change searchDirectoryState back to idle. It can also be helpful if personaListView in PeoplePicker is made public/open.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: (Blocking, High, Normal, Low) High

Products/applications affected: (if applicable) Lists iOS

Platform

• iOS
• macOS

Describe the feature that you would like added

As part of the discussion raised on #335, we need to add support for presence icons that vary based on the state of the avatar being "Out Of Office".

The screenshot below shows how the presence status icons should vary based on the "Out Of Office" state of the Avatar.

What component or utility would this be added to

AvatarVnextView

Have you discussed this feature with our team, and if so, who

Currently discussing the issue with Victor Coulon on the design team.

Additional context/screenshots

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): 0.2.4
• Xcode and OS versions: Xcode 12.2, Mac OS 11.2.3

Please provide a reproduction of the bug:

In Date picker, select any date from the previous month and try again to navigate to the date region.
Observe we are not able to navigate to the date region again.

Actual behavior:

Toggle any date from the previous month in date picker, and try to navigate to date region again using tab/shift tab.
Observe we are not able to navigate to the date again.

Expected behavior:

All the time we should be able to navigate to the dates region in the Date picker.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/applications affected: Microsoft To Do

Platform

• iOS
• macOS

Describe the feature that you would like added

Currently, DateTimePicker allows customization of the picker toolbars through DateTimePicker.Titles. Would it be possible to add support to have custom left/right navigation items for the date picker as well?

What component or utility would this be added to

DateTimePicker

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

For our use case, we want to include the "Remove" or "Clear" button on the date picker so the users could un-set the selected date. In the case that the date hasn't been set, we want it to include a "Cancel" button. Currently, the only way to dismiss the date picker is to pick a date or tap outside of picker area, I think it's a bit more user friendly to have a dedicate cancel button.

Idea: Due to varies use case of the components, perhaps it's more flexible to introduce a new component for the date picker toolbar, something like FluentUI ToolBar/NavigationBar component. The wrapper classDateTimePicker.Titles is not very intuitive as there are too many titles/subtitles, and it gets a little confusing. I actually have to try out some test string on the properties to figure out where they are applied.

Platform

• iOS
• macOS

Describe the feature that you would like added

In previous versions, we could update the background color properties of the switch Struct in the Colors class shown here. Now some of the properties are computed while others are mutable. Is it possible to have them all be mutable so we can edit the color properties of the switch control?

What component or utility would this be added to

The switch component in the Colors Class

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

None

Platform

• iOS
• macOS

Describe the feature that you would like added

Version 0.1.23 was released 16 days ago. Since this PR got merged we can start consuming FluentUI into Outlook Mobile iOS client (we treat compile warnings as errors when building dependencies). But a new release tag (0.1.24) is needed. Do we have a plan for a new release in this or next week?

What component or utility would this be added to

N/A

Have you discussed this feature with our team, and if so, who

N/A

Additional context/screenshots

N/A

Platform

• iOS
• macOS

Describe the feature that you would like added

What component or utility would this be added to

Have you discussed this feature with our team, and if so, who

Additional context/screenshots

Platform

• iOS
• macOS

Describe the feature that you would like added

What component or utility would this be added to

Have you discussed this feature with our team, and if so, who

Additional context/screenshots

Environment Information

• Platform:
  • iOS
  • macOS

Please provide a reproduction of the bug:

Add TabBarItemViews to a stack view. Set the content hugging priority to minimize the size of the views.

Actual behavior:

Notice that the views get squished.
Through the view hierarchy debugger, we can see that the TabBarItemView's root view is zero-sized.
The label and image that are contained in that view are displayed outside of their root view's bounds.

Expected behavior:

TabBarItemView should contain its subviews and have a reliable intrinsic size that reflects its contents.

Priorities and help requested:

Requested priority: Normal

Environment Information

• Platform:
  • iOS
  • macOS

Please provide a reproduction of the bug:

Enabled Voice Over and navigate to the PeoplePicker within the FluentUI test app.
VO swipe until your focus is on the empty BadgeField
Double-tap to select

Actual behavior:

VO will read out "zero width space"

Expected behavior:

VO shouldn't read out "zero width space" as it could be confusing to the user.

Priorities and help requested:

Looking at the code emptyTextFieldString is being defined to the formal "0 width space" character "\u{200B}" so one could say that it's technically by design. However, this seems to be an implementation detail of shouldChangeCharactersIn within the BadgeField inadvertently being exposed to VO users.

Requested priority: Normal

Products/applications affected: All consumers of BadgeField

Platform

• iOS
• macOS

Describe the feature that you would like added

When Pills are displayed over a gradient background, the gradient background affect is overpowered by the solid background of pill color. To maintain the background view's color effect, we want to have the pills to have transparent color.

What component or utility would this be added to

PillButton

Have you discussed this feature with our team, and if so, who

The feature has been discussed with @harrieshin and others over email.

Additional context/screenshots

Platform

• iOS
• macOS

Describe the feature that you would like added

ListVnext file currently contains all of the logic that exists in List creation. However, it can be broken up into smaller components that both provides better organization and FluentUI mimicry. This includes the List "cell" (UITableViewCell equivalent) and List headers (UITableViewHeaderFooterView).

What component or utility would this be added to

ListVnext, ListCellVnext, ListHeaderFooterVnext

Platform

• [ x ] iOS
• macOS

Describe the feature that you would like added

SnapKit Supports IOS 10 and many other pods too, My company works with many IPADs 4th gen which are just capable to use IOS 10.3 :(

What component or utility would this be added to

Support for IOS 10.x

Have you discussed this feature with our team, and if so, who

Not yet

Additional context/screenshots

README.md emphasizes support ios 11+

Environment Information

• Platform:
  • iOS
  • macOS

Please provide a reproduction of the bug:

In PopupMenuController, increase the length of title of any cell in "Show with sections" drawer item and enable titleNumberOfLines as 2 so that text is wrapped in 2 lines.
The individual height of the cell is not calculated correctly. It is same as that of previous.

Actual behavior:

The height of the cell and as a result, drawer is not updated.

Expected behavior:

The height of the cell and as a result, drawer should update accordingly.

Priorities and help requested:

Requested priority: Blocking

Products/applications affected: Lists app

Environment Information

• Platform:
  • iOS
  • macOS
• Package version(s): Fluent UI 0.2.3
• Xcode and OS versions: Xcode 12.2, Mac OS 11.2.3

Please provide a reproduction of the bug:

Pre requisites:
Turn on Voice over

Repro steps:

1. Open the DatePickerController
2. Navigate to a day in the DatePickerController popup and observe voice over announcement.

Actual behavior:

When focused on any date in 'Pick a date and time' popup, observe voiceover announces as date format(2nd of November 2020).VoiceOver doesn't announce day.

Expected behavior:

When focused on any date in 'Pick a date and time' popup, observe VoiceOver should announce as day along with date format(Monday, 2nd of November 2020).

User Impact:

Visually impaired users who rely on screenreader will have to navigate to column again to know the day of focused date.

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/applications affected: Microsoft To Do

Platform

• iOS
• macOS

Describe the feature that you would like added

Currently, our list items accommodate for various leading and trailing view combinations. One of them includes having an icon-only leading view. Due to the organization of the design tokens, this leads to some roundabout solutions that could be simplified with the absence of this scenario. We should discuss if there is, if any, a situation where we will have an icon-only leading view; if not, we should remove this option.

An icon-only scenario is not detailed in the current Fluent-UI app.

What component or utility would this be added to

ListVnext

Additional context/screenshots

Platform

• iOS
• macOS

Describe the feature that you would like added

Need a progress spinner around clear button inside search bar to indicate search in progress.
User should have control on:

1. hide/show of the spinner
2. Animation start/stop for the spinner

What component or utility would this be added to

This progress spinner will be added inside SearchBar Control

Have you discussed this feature with our team, and if so, who

Yes, the feature has been discussed with @harrieshin over email.

Additional context/screenshots

As shown in image below, we need to add a progress spinner around clear button inside search bar.

Platform

• iOS
• macOS

Describe the feature that you would like added

The WWDC video below shows great ways to integrate previews to SwiftUI components.
https://developer.apple.com/videos/play/wwdc2020/10149/

• This issue is about adding SwiftUI previews with test data for all of our SwiftUI controls using the correct patterns.
• It is also about investigating the feasibility of integrating those previews into the Demo app as an alternative way of showing controls (instead of using the UIKit wrappers we currently use).
• As another benefit of this investigation, we should investigate the possibility to move all the preview code into separate files to avoid clutter on the production code itself.

What component or utility would this be added to

All of the SwiftUI components.

Have you discussed this feature with our team, and if so, who

This came up during the PR of Kunal's PR on the SwiftUI DrawerController Vnext

Additional context/screenshots

It looks like the home indicator on iOS that takes you to the Home Screen. How is it added in code?

Environment Information

• Platform:
  • iOS
  • macOS

Please provide a reproduction of the bug:

In objective c, the enum "ButtonStyle" does not have the MSF prefix, which can result in namespace collisions. Let's not do that.

Actual behavior:

buttonStyle enum is "ButtonStyle*"

Expected behavior:

buttonStyle enum is "MSFButtonStyle*"

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/applications affected: None, Button isn't used anywhere yet (AFAIK)

Platform

• iOS
• macOS

Describe the feature that you would like added

Right now documentation lacks information on how to customize components in a way they were designed to be customized.
It would be great to have an overview of theming capabilities (setting primary app colors, etc.) and best practices (and things to avoid) for every component which has some specific ways to be customized.

What component or utility would this be added to

Documentation.

Have you discussed this feature with our team, and if so, who

See #61 (comment)

Platform

• iOS
• macOS

Describe the feature that you would like added

Another issue you can file as a GitHub issue to be addressed after your first merge:

The current drawer presents the contents as you drag from the side instead of detecting the drag and presenting it entirely:

Originally posted by @rdeassis in #344 (comment)

Platform

• iOS
• macOS

Describe the feature that you would like added

Hi!
It's cool to have components styled consistently, but sometimes there's a need to add an accent on a component, say a button that's colored differently (delete button for example should pop out with red as it leads to destructive actions).
This is why it would be great to have per-instance styling for all sorts of buttons. Other components that might require this feature are badges, notificationViews, probably tooltips.

It would be nice to be able to customize components when creating them. For example making extensions for their style options and/or creating custom styles on init.

What component or utility would this be added to

• All sorts of buttons.

Other components that might require this feature are:

• badges
• notificationViews
• probably tooltips.

Have you discussed this feature with our team, and if so, who

See details in thread #61 (comment)

Additional context/screenshots

Right now buttons and badges have backgroundColor property setter available. Setting .backgroundColor changes button's color, but obviously doesn't override highlighted state color.
Setting .backgroundColor for badges for example it behaves awkwardly (see attached screen):

let badge = BadgeView(dataSource: BadgeViewDataSource(text: "La La land"))
badge.backgroundColor = Colors.Palette.red10.color
let badge2 = BadgeView(dataSource: BadgeViewDataSource(text: "Whiplash"))

You can see badge's backgroundView being colored in red while being ovelapped with badge's contentView. Such behaviour may even feel like a bug and probably should be evaded somehow.