Allow theming of the search bar. (#700)

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

@@ -167,8 +167,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/siteline/SwiftUI-Introspect.git",
       "state" : {
-        "revision" : "f2616860a41f9d9932da412a8978fec79c06fe24",
+        "revision" : "c18951c747ab62af7c15e17a81bd37d4fd5a9979",
-        "version" : "0.1.4"
+        "version" : "0.2.3"
       }
     },
     {

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

@@ -0,0 +1,105 @@
+//
+// 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/Screens/EmojiPickerScreen/View/EmojiPickerScreen.swift

@@ -45,6 +45,7 @@ struct EmojiPickerScreen: View {
         .navigationBarTitleDisplayMode(.inline)
         .toolbar { toolbar }
         .searchable(text: $searchString)
+        .searchableStyle(.list)
         .onChange(of: searchString) { _ in
             context.send(viewAction: .search(searchString: searchString))
         }

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

@@ -74,6 +74,7 @@ struct HomeScreen: View {
                     }
                 }
                 .searchable(text: $context.searchQuery)
+                .searchableStyle(.list)
                 .disableAutocorrection(true)
             }
         }

ElementX/Sources/Screens/RoomMembers/View/RoomMemberDetailsScreen.swift

@@ -39,6 +39,7 @@ struct RoomMemberDetailsScreen: View {
             }
         }
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always))
+        .searchableStyle(.list)
         .background(Color.element.background.ignoresSafeArea())
         .navigationTitle(ElementL10n.bottomActionPeople)
         .alert(item: $context.alertInfo) { $0.alert }
@@ -48,15 +49,18 @@ struct RoomMemberDetailsScreen: View {
 // MARK: - Previews
 
 struct RoomMemberDetails_Previews: PreviewProvider {
-    static var previews: some View {
+    static let viewModel = {
-        Group {
         let members: [RoomMemberProxy] = [
             .mockAlice,
             .mockBob,
             .mockCharlie
         ]
-            let viewModel = RoomMemberDetailsViewModel(mediaProvider: MockMediaProvider(),
+        return RoomMemberDetailsViewModel(mediaProvider: MockMediaProvider(),
                                           members: members)
+    }()
+    
+    static var previews: some View {
+        NavigationStack {
             RoomMemberDetailsScreen(context: viewModel.context)
         }
     }

UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.roomMemberDetailsScreen.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7cbd2ecfe11afb39ca553562429ad3e743ba3749fd79ff85817131c8140b70a0
+oid sha256:f4f1e050e223e5f3b0e0649574541f0339698cbf8ecdfb2780deecea2e016379
-size 77967
+size 77761

UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c51c84b9ff0b9d92c243060e8394d36c4269f61273b6bcefb683cc7908173d10
+oid sha256:c797f4746179d6c2e5a58b83f88c8f3bd58c27da8268ceabdbd1814e6bd19fc2
-size 154546
+size 154413

UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-2.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:24ef8ab6a55033b41f3a3e93f50632b5da263ab987786fcd5ddbae385b9fbe66
+oid sha256:c125b8970f7e61f00448e97abb29a147cb5aba0a7b351778215f1400a1c169db
-size 313274
+size 312985

UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.roomMemberDetailsScreen.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b105c62728e09e2f2f165a4118ba729e4f08418f8877006283858728f4756a4
+oid sha256:68a2947127b5feb5df6b379a82adb9d5db31b26f0486edc4f9827f9c512ffdc2
-size 83749
+size 84991

UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8026d01e3a13164d7f01f9fa099b055667d0b39c8575567122b45fb43885dd9c
+oid sha256:cfc8a7e830124a829a4a83a1b72df31d421bab6b46e40fbb8e70355634cae4a6
-size 124598
+size 125946

UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.roomMemberDetailsScreen.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:92b580f7596e0e7e7f109f4bec1ad1b8963c9a7faf5e11fdc69557ca7e543395
+oid sha256:bd7201be7a1cb41467f2f91ed40173b79cead8e99c82ad89686f01abd836b26c
-size 76407
+size 76432

UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d79e140fd2c93cb5100c3e32fc353394af55084805039b0477017a689be262c
+oid sha256:a223ca272eb48269cc08ddba430fd86b3fe42bd60ce8c1bd3c26578e15ab9b4d
-size 154582
+size 154469

UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-2.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8028494c2fc3e4fbdd08e8bb0a965cdbaaadebd88fbc985500e43fbd2ef1a107
+oid sha256:610b10157a0ee583bc273031002d39894e5355f30568a287d502d93e7a327c2f
-size 313833
+size 313574

UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.roomMemberDetailsScreen.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f90c6bffc82433386a6235526fbb4fa67eee20f36ac682937add9d8ea7695d59
+oid sha256:ff634d4d98c8ba4a64a65888e39932c4997c81324e197e3cb7b841bac54abe6a
-size 81733
+size 81635

UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:76d996c7d8cd01a69db947e3116aa69bf7d6f09d619302ab4755ea7899f4410c
+oid sha256:f004a204fa567dcf4fb84656c76f6bd6df014c5ae835ab12c5255b7038896c56
-size 124628
+size 124514

changelog.d/43.change

@@ -0,0 +1 @@
+Allow the search bar to be styled.

project.yml

@@ -73,7 +73,7 @@ packages:
     branch: master
   Introspect:
     url: https://github.com/siteline/SwiftUI-Introspect
-    majorVersion: 0.1.4
+    majorVersion: 0.2.3
   PostHog:
     url: https://github.com/PostHog/posthog-ios
     majorVersion: 1.4.4