Use Compound ListRow instead of Compound form styles. (#1484)

* Adopt ListRow Component. * Update snapshots. To check in future PR: - Pseudo Bug Report Attach Screenshot label - Bug Report screenshot padding (Use ListRow .custom?) - De-bold Analytics & Notification Settings footer links - Inline picker alignment perhaps? * Changelog * Update Compound. * Use the label on the login screen.
element-hq · Aug 16, 2023 · c64fb44 · c64fb44
1 parent 7c69012
commit c64fb44
Show file tree

Hide file tree

Showing 98 changed files with 499 additions and 557 deletions.
diff --git a/DesignKit/Package.swift b/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", revision: "89e3ed5adef33be7eb65137b861833ffae64f961"),
+        .package(url: "https://github.com/vector-im/compound-ios", revision: "50bb7cf313bd1ad17201fc7e4c1184737a0f44c2"),
         .package(url: "https://github.com/vector-im/element-design-tokens", exact: "0.0.3"),
         .package(url: "https://github.com/siteline/SwiftUI-Introspect", from: "0.9.0")
     ],

diff --git a/ElementX.xcodeproj/project.pbxproj b/ElementX.xcodeproj/project.pbxproj
@@ -5475,7 +5475,7 @@
 			repositoryURL = "https://github.com/vector-im/compound-ios";
 			requirement = {
 				kind = revision;
-				revision = 89e3ed5adef33be7eb65137b861833ffae64f961;
+				revision = 50bb7cf313bd1ad17201fc7e4c1184737a0f44c2;
 			};
 		};
 		9A472EE0218FE7DCF5283429 /* XCRemoteSwiftPackageReference "SwiftUI-Introspect" */ = {

diff --git a/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved b/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -5,15 +5,15 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-design-tokens.git",
       "state" : {
-        "revision" : "aa55111d94486acbfd3344cf4d08b64723bd6703"
+        "revision" : "387d2b7211f07761c67e849c59414a1bb803defa"
       }
     },
     {
       "identity" : "compound-ios",
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-ios",
       "state" : {
-        "revision" : "89e3ed5adef33be7eb65137b861833ffae64f961"
+        "revision" : "50bb7cf313bd1ad17201fc7e4c1184737a0f44c2"
       }
     },
     {
@@ -151,6 +151,15 @@
         "version" : "8.6.0"
       }
     },
+    {
+      "identity" : "sfsafesymbols",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/SFSafeSymbols/SFSafeSymbols.git",
+      "state" : {
+        "revision" : "7cca2d60925876b5953a2cf7341cd80fbeac983c",
+        "version" : "4.1.1"
+      }
+    },
     {
       "identity" : "swift-algorithms",
       "kind" : "remoteSourceControl",

diff --git a/ElementX/Sources/Screens/Authentication/LoginScreen/View/LoginScreen.swift b/ElementX/Sources/Screens/Authentication/LoginScreen/View/LoginScreen.swift
@@ -72,29 +72,27 @@ struct LoginScreen: View {
                 .padding(.horizontal, 16)
                 .padding(.bottom, 8)
 
-            TextField(L10n.commonUsername,
-                      text: $context.username,
-                      // Prompt colour fixes a flicker that occurs before the text field style introspects the field.
-                      prompt: Text(L10n.commonUsername).foregroundColor(.compound.textPlaceholder))
-                .focused($isUsernameFocused)
-                .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
-                .disableAutocorrection(true)
-                .textContentType(.username)
-                .autocapitalization(.none)
-                .submitLabel(.next)
-                .onChange(of: isUsernameFocused, perform: usernameFocusChanged)
-                .onSubmit { isPasswordFocused = true }
-                .padding(.bottom, 20)
+            TextField(text: $context.username) {
+                Text(L10n.commonUsername).foregroundColor(.compound.textPlaceholder)
+            }
+            .focused($isUsernameFocused)
+            .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
+            .disableAutocorrection(true)
+            .textContentType(.username)
+            .autocapitalization(.none)
+            .submitLabel(.next)
+            .onChange(of: isUsernameFocused, perform: usernameFocusChanged)
+            .onSubmit { isPasswordFocused = true }
+            .padding(.bottom, 20)
 
-            SecureField(L10n.commonPassword,
-                        text: $context.password,
-                        // Prompt colour fixes a flicker that occurs before the text field style introspects the field.
-                        prompt: Text(L10n.commonPassword).foregroundColor(.compound.textPlaceholder))
-                .focused($isPasswordFocused)
-                .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
-                .textContentType(.password)
-                .submitLabel(.done)
-                .onSubmit(submit)
+            SecureField(text: $context.password) {
+                Text(L10n.commonPassword).foregroundColor(.compound.textPlaceholder)
+            }
+            .focused($isPasswordFocused)
+            .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
+            .textContentType(.password)
+            .submitLabel(.done)
+            .onSubmit(submit)
 
             Spacer().frame(height: 32)
 

diff --git a/ElementX/Sources/Screens/BugReportScreen/View/BugReportScreen.swift b/ElementX/Sources/Screens/BugReportScreen/View/BugReportScreen.swift
@@ -23,6 +23,8 @@ struct BugReportScreen: View {
 
     @ObservedObject var context: BugReportScreenViewModel.Context
 
+    var photosPickerTitle: String { context.viewState.screenshot == nil ? L10n.screenBugReportAttachScreenshot : L10n.screenBugReportEditScreenshot }
+
     var body: some View {
         Form {
             textFieldSection
@@ -31,7 +33,7 @@ struct BugReportScreen: View {
             canContactSection
         }
         .scrollDismissesKeyboard(.immediately)
-        .compoundForm()
+        .compoundList()
         .navigationTitle(L10n.commonReportABug)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar { toolbar }
@@ -50,53 +52,48 @@ struct BugReportScreen: View {
 
     private var textFieldSection: some View {
         Section {
-            TextField(L10n.screenBugReportEditorPlaceholder,
-                      text: $context.reportText,
-                      prompt: Text(L10n.screenBugReportEditorPlaceholder).compoundFormTextFieldPlaceholder(),
-                      axis: .vertical)
+            ListRow(label: .plain(title: L10n.screenBugReportEditorPlaceholder),
+                    kind: .textField(text: $context.reportText))
                 .lineLimit(4, reservesSpace: true)
-                .textFieldStyle(.compoundForm)
                 .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.report)
         } footer: {
             Text(L10n.screenBugReportEditorDescription)
-                .compoundFormSectionFooter()
+                .compoundListSectionFooter()
         }
-        .compoundFormSection()
     }
 
     private var sendLogsSection: some View {
         Section {
-            Toggle(L10n.screenBugReportIncludeLogs, isOn: $context.sendingLogsEnabled)
-                .toggleStyle(.compoundForm)
+            ListRow(label: .plain(title: L10n.screenBugReportIncludeLogs),
+                    kind: .toggle($context.sendingLogsEnabled))
                 .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.sendLogs)
         } footer: {
             Text(L10n.screenBugReportLogsDescription)
-                .compoundFormSectionFooter()
+                .compoundListSectionFooter()
         }
-        .compoundFormSection()
     }
 
     private var canContactSection: some View {
         Section {
-            Toggle(L10n.screenBugReportContactMeTitle, isOn: $context.canContact)
-                .toggleStyle(.compoundForm)
+            ListRow(label: .plain(title: L10n.screenBugReportContactMeTitle),
+                    kind: .toggle($context.canContact))
                 .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.canContact)
         } footer: {
             Text(L10n.screenBugReportContactMe)
-                .compoundFormSectionFooter()
+                .compoundListSectionFooter()
         }
-        .compoundFormSection()
     }
 
     @ViewBuilder
     private var attachScreenshotSection: some View {
         Section {
-            PhotosPicker(selection: $selectedScreenshot,
-                         matching: .screenshots,
-                         photoLibrary: .shared()) {
-                Label(context.viewState.screenshot == nil ? L10n.screenBugReportAttachScreenshot : L10n.screenBugReportEditScreenshot, systemImage: "camera")
-            }
-            .buttonStyle(.compoundForm())
+            ListRow(kind: .custom {
+                PhotosPicker(selection: $selectedScreenshot,
+                             matching: .screenshots,
+                             photoLibrary: .shared()) {
+                    ListLabel.default(title: photosPickerTitle, systemIcon: .camera)
+                }
+            })
             .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.attachScreenshot)
         } footer: {
             if let screenshot = context.viewState.screenshot {
@@ -117,7 +114,6 @@ struct BugReportScreen: View {
                     .padding(.horizontal, 16)
             }
         }
-        .compoundFormSection()
     }
 
     @ToolbarContentBuilder

diff --git a/ElementX/Sources/Screens/ReportContentScreen/View/ReportContentScreen.swift b/ElementX/Sources/Screens/ReportContentScreen/View/ReportContentScreen.swift
@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct ReportContentScreen: View {
@@ -32,7 +33,7 @@ struct ReportContentScreen: View {
             ignoreUserSection
         }
         .scrollDismissesKeyboard(.immediately)
-        .compoundForm()
+        .compoundList()
         .navigationTitle(L10n.actionReportContent)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar { toolbar }
@@ -41,27 +42,23 @@ struct ReportContentScreen: View {
 
     private var reasonSection: some View {
         Section {
-            TextField(L10n.reportContentHint,
-                      text: $context.reasonText,
-                      prompt: Text(L10n.reportContentHint).compoundFormTextFieldPlaceholder(),
-                      axis: .vertical)
+            ListRow(label: .plain(title: L10n.reportContentHint),
+                    kind: .textField(text: $context.reasonText))
                 .lineLimit(4, reservesSpace: true)
-                .textFieldStyle(.compoundForm)
         } footer: {
             Text(L10n.reportContentExplanation)
-                .compoundFormSectionFooter()
+                .compoundListSectionFooter()
         }
-        .compoundFormSection()
     }
 
     private var ignoreUserSection: some View {
         Section {
-            Toggle(L10n.screenReportContentBlockUser, isOn: $context.ignoreUser)
-                .toggleStyle(.compoundForm)
+            ListRow(label: .plain(title: L10n.screenReportContentBlockUser),
+                    kind: .toggle($context.ignoreUser))
                 .accessibilityIdentifier(A11yIdentifiers.reportContent.ignoreUser)
         } footer: {
             Text(L10n.screenReportContentBlockUserHint)
-                .compoundFormSectionFooter()
+                .compoundListSectionFooter()
         }
     }
 

diff --git a/ElementX/Sources/Screens/RoomDetailsEditScreen/RoomDetailsEditScreenModels.swift b/ElementX/Sources/Screens/RoomDetailsEditScreen/RoomDetailsEditScreenModels.swift
@@ -46,6 +46,16 @@ struct RoomDetailsEditScreenViewState: BindableState {
         bindings.name != initialName
     }
 
+    /// The string shown for the room's name when it can't be edited.
+    var nameRowTitle: String {
+        bindings.name.isEmpty ? L10n.commonRoomName : bindings.name
+    }
+
+    /// The string shown for the room's topic when it can't be edited.
+    var topicRowTitle: String {
+        bindings.topic.isEmpty ? L10n.commonTopic : bindings.topic
+    }
+
     var topicDidChange: Bool {
         bindings.topic != initialTopic
     }

diff --git a/ElementX/Sources/Screens/RoomDetailsEditScreen/View/RoomDetailsEditScreen.swift b/ElementX/Sources/Screens/RoomDetailsEditScreen/View/RoomDetailsEditScreen.swift
@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct RoomDetailsEditScreen: View {
@@ -31,7 +32,7 @@ struct RoomDetailsEditScreen: View {
             nameSection
             topicSection
         }
-        .compoundForm()
+        .compoundList()
         .scrollDismissesKeyboard(.immediately)
         .navigationTitle(L10n.screenRoomDetailsEditRoomTitle)
         .navigationBarTitleDisplayMode(.inline)
@@ -85,42 +86,39 @@ struct RoomDetailsEditScreen: View {
 
     private var nameSection: some View {
         Section {
-            let canEditName = context.viewState.canEditName
-
-            TextField(L10n.commonRoomName,
-                      text: $context.name,
-                      prompt: canEditName ? Text(L10n.commonRoomNamePlaceholder) : nil,
-                      axis: .horizontal)
-                .focused($focus, equals: .name)
-                .textFieldStyle(.compoundForm)
-                .disabled(!canEditName)
-                .listRowBackground(canEditName ? Color.element.formRowBackground : .clear)
-                .clipShape(RoundedRectangle(cornerRadius: 8))
+            if context.viewState.canEditName {
+                ListRow(label: .plain(title: L10n.commonRoomNamePlaceholder),
+                        kind: .textField(text: $context.name, axis: .horizontal))
+                    .focused($focus, equals: .name)
+            } else {
+                ListRow(kind: .custom {
+                    ListLabel.plain(title: context.viewState.nameRowTitle)
+                        .listRowBackground(Color.clear)
+                })
+            }
         } header: {
             Text(L10n.commonRoomName)
-                .compoundFormSectionHeader()
+                .compoundListSectionHeader()
         }
-        .compoundFormSection()
     }
 
     private var topicSection: some View {
         Section {
-            let canEditTopic = context.viewState.canEditTopic
-
-            TextField(L10n.commonTopic,
-                      text: $context.topic,
-                      prompt: canEditTopic ? Text(L10n.commonTopicPlaceholder).foregroundColor(.compound.textPlaceholder) : nil,
-                      axis: .vertical)
-                .focused($focus, equals: .topic)
-                .textFieldStyle(.compoundForm)
-                .disabled(!canEditTopic)
-                .listRowBackground(canEditTopic ? Color.element.formRowBackground : .clear)
-                .lineLimit(3...)
+            if context.viewState.canEditTopic {
+                ListRow(label: .plain(title: L10n.commonTopicPlaceholder),
+                        kind: .textField(text: $context.topic, axis: .vertical))
+                    .focused($focus, equals: .topic)
+                    .lineLimit(3...)
+            } else {
+                ListRow(kind: .custom {
+                    ListLabel.plain(title: context.viewState.topicRowTitle)
+                        .listRowBackground(Color.clear)
+                })
+            }
         } header: {
             Text(L10n.commonTopic)
-                .compoundFormSectionHeader()
+                .compoundListSectionHeader()
         }
-        .compoundFormSection()
     }
 
     private var avatarOverlayIcon: some View {
@@ -166,9 +164,23 @@ struct RoomDetailsEditScreen_Previews: PreviewProvider {
                                                           roomProxy: RoomProxyMock(with: .init(name: "Room", displayName: "Room")),
                                                           userIndicatorController: UserIndicatorControllerMock.default)
 
+    static let readOnlyViewModel = {
+        let accountOwner = RoomMemberProxyMock.mockOwner(allowedStateEvents: [])
+        return RoomDetailsEditScreenViewModel(accountOwner: accountOwner,
+                                              mediaProvider: MockMediaProvider(),
+                                              roomProxy: RoomProxyMock(with: .init(name: "Room", displayName: "Room")),
+                                              userIndicatorController: UserIndicatorControllerMock.default)
+    }()
+
     static var previews: some View {
         NavigationStack {
             RoomDetailsEditScreen(context: viewModel.context)
         }
+        .previewDisplayName("Normal")
+
+        NavigationStack {
+            RoomDetailsEditScreen(context: readOnlyViewModel.context)
+        }
+        .previewDisplayName("Read only")
     }
 }