Add support for ListItem on visionOS (microsoft#2000)

* add support for ListItem on visionOS * pass in tokenSet * clean up padding * more cleanup * fix typo * fix vo frame
mischreiber · Apr 30, 2024 · b663754 · b663754
1 parent c27f451
commit b663754
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 90 deletions.
diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos.swift
@@ -36,7 +36,7 @@ struct Demos {
         DemoDescriptor("IndeterminateProgressBar", IndeterminateProgressBarDemoController.self, supportsVisionOS: false),
         DemoDescriptor("Label", LabelDemoController.self, supportsVisionOS: true),
         DemoDescriptor("ListActionItem", ListActionItemDemoController.self, supportsVisionOS: false),
-        DemoDescriptor("ListItem", ListItemDemoController.self, supportsVisionOS: false),
+        DemoDescriptor("ListItem", ListItemDemoController.self, supportsVisionOS: true),
         DemoDescriptor("MultilineCommandBar", MultilineCommandBarDemoController.self, supportsVisionOS: false),
         DemoDescriptor("NavigationController", NavigationControllerDemoController.self, supportsVisionOS: true),
         DemoDescriptor("NotificationView", NotificationViewDemoController.self, supportsVisionOS: true),

diff --git a/ios/FluentUI.Demo/FluentUI.Demo/Demos/ListItemDemoController_SwiftUI.swift b/ios/FluentUI.Demo/FluentUI.Demo/Demos/ListItemDemoController_SwiftUI.swift
@@ -21,7 +21,8 @@ class ListItemDemoControllerSwiftUI: UIHostingController<ListItemDemoView> {
 }
 
 struct ListItemDemoView: View {
-    @State var showingAlert: Bool = false
+    @State var showingPrimaryAlert: Bool = false
+    @State var showingSecondaryAlert: Bool = false
     @ObservedObject var fluentTheme: FluentTheme = .shared
     let accessoryTypes: [ListItemAccessoryType] = [.none, .checkmark, .detailButton, .disclosureIndicator]
 
@@ -32,6 +33,7 @@ struct ListItemDemoView: View {
     @State var showFooter: Bool = false
     @State var showLeadingContent: Bool = true
     @State var showTrailingContent: Bool = true
+    @State var isTappable: Bool = true
     @State var isDisabled: Bool = false
     @State var accessoryType: ListItemAccessoryType = .none
     @State var leadingContentSize: ListItemLeadingContentSize = .default
@@ -41,6 +43,7 @@ struct ListItemDemoView: View {
     @State var footerLineLimit: Int = 1
     @State var trailingContentFocusableElementCount: Int = 0
     @State var trailingContentToggleEnabled: Bool = true
+    @State var renderStandalone: Bool = false
 
     public var body: some View {
 
@@ -73,7 +76,9 @@ struct ListItemDemoView: View {
                 .accessibilityIdentifier("leadingContentSwitch")
             FluentUIDemoToggle(titleKey: "Show trailing content", isOn: $showTrailingContent)
                 .accessibilityIdentifier("trailingContentSwitch")
+            FluentUIDemoToggle(titleKey: "Tappable", isOn: $isTappable)
             FluentUIDemoToggle(titleKey: "Disabled", isOn: $isDisabled)
+            FluentUIDemoToggle(titleKey: "Render standalone", isOn: $renderStandalone)
         }
 
         @ViewBuilder
@@ -135,58 +140,75 @@ struct ListItemDemoView: View {
                 .resizable()
         }
 
+        @ViewBuilder
+        var listItem: some View {
+            ListItem(title: title,
+                     subtitle: showSubtitle ? subtitle : "",
+                     footer: showFooter ? footer : "",
+                     leadingContent: {
+                         if showLeadingContent {
+                             leadingContent
+                         }
+                     },
+                     trailingContent: {
+                        if showTrailingContent {
+                             switch trailingContentFocusableElementCount {
+                             case 0:
+                                 Text("Spreadsheet")
+                             case 1:
+                                 Toggle("", isOn: $trailingContentToggleEnabled)
+                             default:
+                                 HStack {
+                                     Button {
+                                         showingSecondaryAlert = true
+                                     } label: {
+                                         Text("Button 1")
+                                     }
+                                     Button {
+                                         showingSecondaryAlert = true
+                                     } label: {
+                                         Text("Button 2")
+                                     }
+                                 }
+                             }
+                         }
+                     },
+                     action: !isTappable ? nil : {
+                         showingPrimaryAlert = true
+                     }
+            )
+            .backgroundStyleType(backgroundStyle)
+            .accessoryType(accessoryType)
+            .leadingContentSize(leadingContentSize)
+            .titleLineLimit(titleLineLimit)
+            .subtitleLineLimit(subtitleLineLimit)
+            .footerLineLimit(footerLineLimit)
+            .combineTrailingContentAccessibilityElement(trailingContentFocusableElementCount < 2)
+            .onAccessoryTapped {
+                showingSecondaryAlert = true
+            }
+            .disabled(isDisabled)
+            .alert("List Item tapped", isPresented: $showingPrimaryAlert) {
+                Button("OK", role: .cancel) { }
+            }
+            .alert("Detail button tapped", isPresented: $showingSecondaryAlert) {
+                Button("OK", role: .cancel) { }
+            }
+        }
+
         @ViewBuilder
         var content: some View {
             VStack {
+                if renderStandalone {
+                    listItem
+                }
                 List {
-                    Section {
-                        ListItem(title: title,
-                                 subtitle: showSubtitle ? subtitle : "",
-                                 footer: showFooter ? footer : "",
-                                 leadingContent: {
-                            if showLeadingContent {
-                                leadingContent
-                            }
-                        },
-                                 trailingContent: {
-                            if showTrailingContent {
-                                switch trailingContentFocusableElementCount {
-                                case 0:
-                                    Text("Spreadsheet")
-                                case 1:
-                                    Toggle("", isOn: $trailingContentToggleEnabled)
-                                default:
-                                    HStack {
-                                        Button {
-                                            showingAlert = true
-                                        } label: {
-                                            Text("Button 1")
-                                        }
-                                        Button {
-                                            showingAlert = true
-                                        } label: {
-                                            Text("Button 2")
-                                        }
-                                    }
-                                }
-                            }
-                        })
-                        .backgroundStyleType(backgroundStyle)
-                        .accessoryType(accessoryType)
-                        .leadingContentSize(leadingContentSize)
-                        .titleLineLimit(titleLineLimit)
-                        .subtitleLineLimit(subtitleLineLimit)
-                        .footerLineLimit(footerLineLimit)
-                        .combineTrailingContentAccessibilityElement(trailingContentFocusableElementCount < 2)
-                        .onAccessoryTapped {
-                            showingAlert = true
-                        }
-                        .disabled(isDisabled)
-                        .alert("Detail button tapped", isPresented: $showingAlert) {
-                            Button("OK", role: .cancel) { }
+                    if !renderStandalone {
+                        Section {
+                            listItem
+                        } header: {
+                            Text("ListItem")
                         }
-                    } header: {
-                        Text("ListItem")
                     }
                     controls
                 }