[FluentList, ListItem, BottomSheetController] Updates for glass support (#2281)

* FluentList and BottomSheetController update for glass support

* Update demo controller to showcase glass support

* update tests

Author: nodes11

Demos/FluentUIDemo_iOS/FluentUI.Demo/Demos/BottomSheetDemoController.swift

@@ -16,6 +16,7 @@ class BottomSheetDemoController: DemoController {
 
         let optionTableView = UITableView(frame: .zero, style: .insetGrouped)
         optionTableView.translatesAutoresizingMaskIntoConstraints = false
+        optionTableView.register(TableViewCell.self, forCellReuseIdentifier: TableViewCell.identifier)
         optionTableView.register(BooleanCell.self, forCellReuseIdentifier: BooleanCell.identifier)
         optionTableView.register(ActionsCell.self, forCellReuseIdentifier: ActionsCell.identifier)
         optionTableView.dataSource = self
@@ -42,6 +43,13 @@ class BottomSheetDemoController: DemoController {
     private func rebuildSheet() {
         // Tear down existing sheet
         if let existing = bottomSheetViewController {
+            let contentViewController = swiftUIHostingController ?? contentNavigationController
+            if contentViewController.parent === existing {
+                contentViewController.willMove(toParent: nil)
+                contentViewController.view.removeFromSuperview()
+                contentViewController.removeFromParent()
+            }
+
             existing.willMove(toParent: nil)
             existing.view.removeFromSuperview()
             existing.removeFromParent()
@@ -58,17 +66,20 @@ class BottomSheetDemoController: DemoController {
             hostingVC.view.translatesAutoresizingMaskIntoConstraints = false
             swiftUIHostingController = hostingVC
 
-            sheetController = BottomSheetController(expandedContentView: hostingVC.view)
+            sheetController = BottomSheetController(expandedContentView: hostingVC.view, style: bottomSheetStyle)
             sheetController.isFlexibleHeight = true
             sheetController.shouldHideCollapsedContent = false
             sheetController.prioritizesSheetPanWhenCollapsed = true
         } else {
-            sheetController = BottomSheetController(headerContentView: headerView, expandedContentView: contentNavigationController.view)
+            sheetController = BottomSheetController(headerContentView: headerView,
+                                                    expandedContentView: contentNavigationController.view,
+                                                    style: bottomSheetStyle)
             sheetController.hostedScrollView = personaListView
             sheetController.headerContentHeight = BottomSheetDemoController.headerHeight
         }
 
         sheetController.delegate = self
+        sheetController.usesAdaptiveBackground = useAdaptiveBackground
         sheetController.collapsedHeightResolver = { context in
             return context.containerTraitCollection.verticalSizeClass == .regular ? 100 : 70
         }
@@ -115,6 +126,19 @@ class BottomSheetDemoController: DemoController {
         bottomSheetViewController?.shouldAlwaysFillWidth = sender.isOn
     }
 
+    @objc private func toggleAdaptiveBackground(_ sender: BooleanCell) {
+        useAdaptiveBackground = sender.isOn
+        bottomSheetViewController?.usesAdaptiveBackground = sender.isOn
+    }
+
+    private func selectBottomSheetStyle(_ style: BottomSheetControllerStyle) {
+        guard bottomSheetStyle != style else {
+            return
+        }
+
+        bottomSheetStyle = style
+        rebuildSheet()
+    }
 
     @objc private func toggleCollapsedContentHiding(_ sender: BooleanCell) {
         bottomSheetViewController?.shouldHideCollapsedContent.toggle()
@@ -319,19 +343,42 @@ class BottomSheetDemoController: DemoController {
 
     private var useSwiftUIContent: Bool = false
 
+    private var useAdaptiveBackground: Bool = false
+
+    private var bottomSheetStyle: BottomSheetControllerStyle = .primary
+
+    private func makeStyleButton() -> UIButton {
+        let button = Button()
+        button.showsMenuAsPrimaryAction = true
+        let styleOptions: [(title: String, style: BottomSheetControllerStyle)] = [
+            ("Primary", .primary),
+            ("Glass", .glass)
+        ]
+        button.style = .subtle
+
+        button.setTitle(styleOptions.first(where: { $0.style == bottomSheetStyle })?.title, for: .normal)
+        button.menu = UIMenu(title: "Style", options: .singleSelection, children: styleOptions.map { option in
+            UIAction(title: option.title, state: option.style == bottomSheetStyle ? .on : .off) { [weak self] _ in
+                self?.selectBottomSheetStyle(option.style)
+            }
+        })
+        return button
+    }
+
     private let fpsOverlay: FPSOverlayView = {
         let overlay = FPSOverlayView()
         overlay.isHidden = true
         return overlay
     }()
 
-
     private var demoOptionItems: [[DemoItem]] {
         [
             [
+                DemoItem(title: "Style", type: .menu, action: nil),
                 DemoItem(title: "Expandable", type: .boolean, action: #selector(toggleExpandable), isOn: bottomSheetViewController?.isExpandable ?? true),
                 DemoItem(title: "Hidden", type: .boolean, action: #selector(toggleHidden), isOn: bottomSheetViewController?.isHidden ?? false),
                 DemoItem(title: "Should always fill width", type: .boolean, action: #selector(toggleFillWidth), isOn: bottomSheetViewController?.shouldAlwaysFillWidth ?? false),
+                DemoItem(title: "Use adaptive background", type: .boolean, action: #selector(toggleAdaptiveBackground), isOn: bottomSheetViewController?.usesAdaptiveBackground ?? false),
                 DemoItem(title: "Hide collapsed content", type: .boolean, action: #selector(toggleCollapsedContentHiding), isOn: collapsedContentHidingEnabled),
                 DemoItem(title: "Flexible sheet height", type: .boolean, action: #selector(toggleFlexibleSheetHeight), isOn: bottomSheetViewController?.isFlexibleHeight ?? false),
                 DemoItem(title: "Use custom handle accessibility label", type: .boolean, action: #selector(toggleHandleUsingCustomAccessibilityLabel), isOn: isHandleUsingCustomAccessibilityLabel),
@@ -382,6 +429,7 @@ class BottomSheetDemoController: DemoController {
     private enum DemoItemType {
         case action
         case boolean
+        case menu
         case stepper
     }
 
@@ -456,6 +504,13 @@ extension BottomSheetDemoController: UITableViewDataSource {
             }
             cell.bottomSeparatorType = .full
             return cell
+        } else if item.type == .menu {
+            guard let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.identifier) as? TableViewCell else {
+                return UITableViewCell()
+            }
+
+            cell.setup(title: item.title, customAccessoryView: makeStyleButton())
+            return cell
         }
 
         return UITableViewCell()
@@ -518,7 +573,7 @@ extension BottomSheetDemoController: DemoAppearanceDelegate {
 
 struct BottomSheetDemoListContentView: View {
     var body: some View {
-            List {
+            FluentList {
                 Text("Cell with Swipe Action")
                     .swipeActions {
                         Button(action: {}, label: {
@@ -527,7 +582,7 @@ struct BottomSheetDemoListContentView: View {
                     }
                 Text("Cell without Swipe Action")
             }
-            .listStyle(.plain)
+            .fluentListStyle(.glass)
     }
 }
 

Demos/FluentUIDemo_iOS/FluentUI.Demo/Demos/ListItemDemoController_SwiftUI.swift

@@ -110,6 +110,7 @@ struct ListItemDemoView: View {
                 Text(".plain").tag(FluentListStyle.plain)
                 Text(".insetGrouped").tag(FluentListStyle.insetGrouped)
                 Text(".inset").tag(FluentListStyle.inset)
+                Text(".glass").tag(FluentListStyle.glass)
             }
         }
 

Demos/FluentUIDemo_iOS/FluentUIDemoTests/BottomSheetControllerTest.swift

@@ -16,7 +16,7 @@ class BottomSheetControllerTest: BaseTest {
     }
 
     func testExpandable() throws {
-        let isExpandableSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 0)
+        let isExpandableSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 1)
 
         isExpandableSwitch.tap()
         sleep(1)
@@ -27,22 +27,22 @@ class BottomSheetControllerTest: BaseTest {
         let bottomSheet: XCUIElement = app.otherElements.containing(bottomSheetPredicate).element
         XCTAssert(bottomSheet.exists)
 
-        let isHiddenSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 1)
+        let isHiddenSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 2)
         isHiddenSwitch.tap()
         sleep(1)
         XCTAssert(!bottomSheet.isHittable)
     }
 
     func testFillWidth() throws {
-        let shouldFillWidthSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 2)
+        let shouldFillWidthSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 3)
 
         shouldFillWidthSwitch.tap()
         sleep(1)
         XCTAssert(!app.otherElements.containing(NSPredicate(format: "identifier MATCHES %@", "Bottom Sheet View.*filled width.*")).element.exists)
     }
 
     func testCollapsedContent() throws {
-        let hideCollapsedContentSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 3)
+        let hideCollapsedContentSwitch: XCUIElement = app.tables.element(boundBy: 0).cells.element(boundBy: 5)
 
         hideCollapsedContentSwitch.tap()
         sleep(1)

Sources/FluentUI_iOS/Components/BottomSheet/BottomSheetController.swift

@@ -832,11 +832,10 @@ public class BottomSheetController: UIViewController, Shadowable, TokenizedContr
     @available(iOS 26, *)
     private func makeGlassEffect(wantsGlass: Bool) -> UIGlassEffect {
         let glassEffect = UIGlassEffect(style: .regular)
-        // Leave the material untinted for the pure glass look; only tint toward the solid
-        // background when we want the opaque appearance (e.g. expanded + adaptive background).
-        if !wantsGlass {
-            glassEffect.tintColor = FluentTheme.shared.color(.background2)
-        }
+        // Tint toward the sheet's glass tint color. In the opaque (expanded) state use the full
+        // color; in the pure-glass state apply it at 65% alpha so the material shows through.
+        let tintColor = tokenSet[.backgroundColor].uiColor
+        glassEffect.tintColor = wantsGlass ? tintColor.withAlphaComponent(0.65) : tintColor
         return glassEffect
     }
 

Sources/FluentUI_iOS/Components/BottomSheet/BottomSheetTokenSet.swift

@@ -33,7 +33,7 @@ public class BottomSheetTokenSet: ControlTokenSet<BottomSheetToken> {
                     case .primary:
                         return theme.color(.background2)
                     case .glass:
-                        return .clear
+                        return .systemBackground
                     }
                 }
             case .cornerRadius:

Sources/FluentUI_iOS/Components/List/FluentList.swift

@@ -13,6 +13,9 @@ public enum FluentListStyle {
     case plain
     case insetGrouped
     case inset
+    /// Uses the `insetGrouped` layout but renders the list and its items with a clear background,
+    /// allowing content behind the list to show through.
+    case glass
 }
 
 /// This a wrapper around `SwiftUI.List` that has fluent style applied. It is intended to be used in conjunction with `FluentUI.FluentListSection` and `FluentUI.ListItem`
@@ -56,6 +59,12 @@ public struct FluentList<ListContent: View>: View {
                     .listStyle(.plain)
                     .scrollContentBackground(.hidden)
                     .background(ListItemTokenSet.listBackgroundColor(for: .plain))
+            case .glass:
+                list
+                    .listStyle(.insetGrouped)
+                    .scrollContentBackground(.hidden)
+                    .listSectionSpacing(GlobalTokens.spacing(.size160))
+                    .environment(\.defaultMinListHeaderHeight, GlobalTokens.spacing(.size320))
             }
         }
 

Sources/FluentUI_iOS/Components/List/ListItem.swift

@@ -327,6 +327,8 @@ public struct ListItem<LeadingContent: View,
                 styleType = .plain
             case .insetGrouped:
                 styleType = .grouped
+            case .glass:
+                styleType = .clear
             }
         }
         return styleType