Use search field style from Compound. (#839)

DesignKit/Package.swift

@@ -12,7 +12,7 @@ let package = Package(
         .library(name: "DesignKit", targets: ["DesignKit"])
     ],
     dependencies: [
-        .package(url: "https://github.com/vector-im/compound-ios.git", revision: "0b1c62f9a9efac3d9ac06c51531392d55057a0eb"),
+        .package(url: "https://github.com/vector-im/compound-ios.git", revision: "b4f34edce9003ba1fde31500312f317b728f4ee3"),
         .package(url: "https://github.com/vector-im/element-design-tokens.git", exact: "0.0.3"),
         .package(url: "https://github.com/siteline/SwiftUI-Introspect.git", from: "0.1.4")
     ],

ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -14,15 +14,15 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-design-tokens.git",
       "state" : {
-        "revision" : "342145ff8044b58b967186b0efe34477e1f7c3ca"
+        "revision" : "d9d1a792d8a124708c7e15becd359893ee9e9ea6"
       }
     },
     {
       "identity" : "compound-ios",
       "kind" : "remoteSourceControl",
-      "location" : "https://github.com/vector-im/compound-ios",
+      "location" : "https://github.com/vector-im/compound-ios.git",
       "state" : {
-        "revision" : "0b1c62f9a9efac3d9ac06c51531392d55057a0eb"
+        "revision" : "b4f34edce9003ba1fde31500312f317b728f4ee3"
       }
     },
     {

ElementX/Sources/Other/SwiftUI/Views/SearchableStyle.swift

@@ -1,105 +0,0 @@
-//
-// Copyright 2023 New Vector Ltd
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-import SwiftUI
-
-/// The presentation that the search field should be styled to work with.
-enum SearchableStyle {
-    /// The search field is styled for presentation inside of a `List` with the `.plain` style.
-    case list
-    /// The search field is styled for presentation inside of a `Form`.
-    case form
-    
-    /// The colour of the search field's placeholder text and icon.
-    var placeholderColor: UIColor { .element.tertiaryContent }
-    /// The tint colour of the search text field which is applied to the caret and text selection.
-    var textFieldTintColor: UIColor { UIColor(.element.brand) }
-    /// The background colour of the search text field.
-    var textFieldBackgroundColor: UIColor {
-        switch self {
-        case .list:
-            return .element.system
-        case .form:
-            return UIColor(.element.formRowBackground)
-        }
-    }
-}
-
-extension View {
-    /// Styles the search bar text field added to the view with the `searchable` modifier.
-    /// - Parameter style: The presentation of the search bar to match the style to.
-    func searchableStyle(_ style: SearchableStyle) -> some View {
-        // Ported from Riot iOS as this is the only reliable way to get the exact look we want.
-        // However this is fragile and tied to gutwrenching the current UISearchBar internals.
-        introspectSearchController { searchController in
-            let searchTextField = searchController.searchBar.searchTextField
-            
-            // Magnifying glass icon.
-            let leftImageView = searchTextField.leftView as? UIImageView
-            leftImageView?.tintColor = style.placeholderColor
-            // Placeholder text.
-            let placeholderLabel = searchTextField.value(forKey: "placeholderLabel") as? UILabel
-            placeholderLabel?.textColor = style.placeholderColor
-            // Text field.
-            searchTextField.backgroundColor = style.textFieldBackgroundColor
-            searchTextField.tintColor = style.textFieldTintColor
-
-            // Hide the effect views so we can the rounded rect style without any materials.
-            let effectBackgroundTop = searchTextField.value(forKey: "_effectBackgroundTop") as? UIView
-            effectBackgroundTop?.isHidden = true
-            let effectBackgroundBottom = searchTextField.value(forKey: "_effectBackgroundBottom") as? UIView
-            effectBackgroundBottom?.isHidden = false
-        }
-    }
-}
-
-struct SearchableStyle_Previews: PreviewProvider {
-    static var previews: some View {
-        NavigationStack {
-            List {
-                ForEach(0..<10, id: \.self) { index in
-                    Text("Item \(index)")
-                }
-            }
-            .listStyle(.plain)
-            .searchable(text: .constant(""))
-            .searchableStyle(.list)
-        }
-        .tint(.element.accent)
-        
-        NavigationStack {
-            Form {
-                Section("Settings") {
-                    Button("Some Row") { }
-                        .labelStyle(FormRowLabelStyle())
-                }
-                .formSectionStyle()
-                
-                Section("More Settings") {
-                    Toggle("Some Setting", isOn: .constant(true))
-                        .tint(.element.brand)
-                        .labelStyle(FormRowLabelStyle())
-                }
-                .formSectionStyle()
-            }
-            .background(Color.element.formBackground.ignoresSafeArea())
-            .scrollContentBackground(.hidden)
-            .searchable(text: .constant(""))
-            .searchableStyle(.form)
-        }
-        .tint(.element.accent)
-    }
-}

ElementX/Sources/Other/SwiftUI/Views/UserProfileCell.swift

@@ -44,7 +44,7 @@ struct UserProfileCell: View {
                 if !user.isVerified {
                     HStack(alignment: .firstTextBaseline, spacing: 4) {
                         Text(Image(systemName: "exclamationmark.circle.fill"))
-                            .foregroundColor(.compound.textActionCritical)
+                            .foregroundColor(.compound.textCriticalPrimary)
                         
                         Text(L10n.screenStartChatUnknownProfile)
                             .foregroundColor(.secondary)

ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct EmojiPickerScreen: View {
@@ -45,7 +46,7 @@ struct EmojiPickerScreen: View {
         .navigationBarTitleDisplayMode(.inline)
         .toolbar { toolbar }
         .searchable(text: $searchString)
-        .searchableStyle(.list)
+        .compoundSearchField()
         .onChange(of: searchString) { _ in
             context.send(viewAction: .search(searchString: searchString))
         }

ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct HomeScreen: View {
@@ -63,7 +64,7 @@ struct HomeScreen: View {
                     }
                 }
                 .searchable(text: $context.searchQuery)
-                .searchableStyle(.list)
+                .compoundSearchField()
                 .disableAutocorrection(true)
             }
         }

ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct InviteUsersScreen: View {
@@ -36,6 +37,7 @@ struct InviteUsersScreen: View {
             }
         }
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always), prompt: L10n.commonSearchForSomeone)
+        .compoundSearchField()
         .alert(item: $context.alertInfo) { $0.alert }
     }
     

ElementX/Sources/Screens/RoomMemberListScreen/View/RoomMembersListScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct RoomMembersListScreen: View {
@@ -39,7 +40,7 @@ struct RoomMembersListScreen: View {
             }
         }
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always))
-        .searchableStyle(.list)
+        .compoundSearchField()
         .background(Color.element.background.ignoresSafeArea())
         .navigationTitle(L10n.commonPeople)
         .alert(item: $context.alertInfo) { $0.alert }

ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct StartChatScreen: View {
@@ -37,6 +38,7 @@ struct StartChatScreen: View {
             }
         }
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always), prompt: L10n.commonSearchForSomeone)
+        .compoundSearchField()
         .alert(item: $context.alertInfo) { $0.alert }
     }
 

project.yml

@@ -48,7 +48,7 @@ packages:
     path: DesignKit
   Compound:
     url: https://github.com/vector-im/compound-ios
-    revision: 0b1c62f9a9efac3d9ac06c51531392d55057a0eb
+    revision: b4f34edce9003ba1fde31500312f317b728f4ee3
     # path: ../compound-ios
   Algorithms:
     url: https://github.com/apple/swift-algorithms