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.

ElementX/Sources/Screens/Settings/AnalyticsSettingsScreen/View/AnalyticsSettingsScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct AnalyticsSettingsScreen: View {
@@ -23,25 +24,23 @@ struct AnalyticsSettingsScreen: View {
         Form {
             analyticsSection
         }
-        .compoundForm()
+        .compoundList()
         .navigationTitle(L10n.commonAnalytics)
         .navigationBarTitleDisplayMode(.inline)
     }
     
     var analyticsSection: some View {
         Section {
-            Toggle(isOn: $context.enableAnalytics) {
-                Label(L10n.screenAnalyticsSettingsShareData, systemImage: "chart.bar")
-            }
-            .toggleStyle(.compoundForm)
-            .onChange(of: context.enableAnalytics) { _ in
-                context.send(viewAction: .toggleAnalytics)
-            }
+            ListRow(label: .default(title: L10n.screenAnalyticsSettingsShareData,
+                                    systemIcon: .chartBar),
+                    kind: .toggle($context.enableAnalytics))
+                .onChange(of: context.enableAnalytics) { _ in
+                    context.send(viewAction: .toggleAnalytics)
+                }
         } footer: {
             Text(context.viewState.strings.sectionFooter)
-                .compoundFormSectionFooter()
+                .compoundListSectionFooter()
         }
-        .compoundFormSection()
     }
 }
 

ElementX/Sources/Screens/Settings/LegalInformationScreen/View/LegalInformationScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct LegalInformationScreen: View {
@@ -23,20 +24,15 @@ struct LegalInformationScreen: View {
     var body: some View {
         Form {
             Section {
-                Button(L10n.commonCopyright) {
-                    openURL("https://element.io/copyright")
-                }
-                Button(L10n.commonAcceptableUsePolicy) {
-                    openURL("https://element.io/acceptable-use-policy-terms")
-                }
-                Button(L10n.commonPrivacyPolicy) {
-                    openURL("https://element.io/privacy")
-                }
+                ListRow(label: .plain(title: L10n.commonCopyright),
+                        kind: .navigationLink { openURL("https://element.io/copyright") })
+                ListRow(label: .plain(title: L10n.commonAcceptableUsePolicy),
+                        kind: .navigationLink { openURL("https://element.io/acceptable-use-policy-terms") })
+                ListRow(label: .plain(title: L10n.commonPrivacyPolicy),
+                        kind: .navigationLink { openURL("https://element.io/privacy") })
             }
-            .buttonStyle(.compoundForm(accessory: .navigationLink))
-            .compoundFormSection()
         }
-        .compoundForm()
+        .compoundList()
         .navigationTitle(L10n.commonAbout)
         .navigationBarTitleDisplayMode(.inline)
     }

ElementX/Sources/Screens/Settings/NotificationSettingsScreen/View/NotificationSettingsScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct NotificationSettingsScreen: View {
@@ -35,7 +36,7 @@ struct NotificationSettingsScreen: View {
                 }
             }
         }
-        .compoundForm()
+        .compoundList()
         .navigationTitle(L10n.screenNotificationSettingsTitle)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar { toolbar }
@@ -58,120 +59,98 @@ struct NotificationSettingsScreen: View {
     
     private var userPermissionSection: some View {
         Section {
-            HStack(alignment: .firstTextBaseline, spacing: 13) {
-                Image(systemName: "exclamationmark.circle.fill")
-                    .foregroundColor(.compound.iconTertiaryAlpha)
-                VStack(alignment: .leading, spacing: 2) {
-                    Text(L10n.screenNotificationSettingsSystemNotificationsTurnedOff)
-                        .font(.compound.bodyLG)
-                        .foregroundColor(.compound.textPrimary)
-                    Text(context.viewState.strings.changeYourSystemSettings)
-                        .font(.compound.bodySM)
-                        .foregroundColor(.compound.textSecondary)
-                        .tint(.compound.textPrimary)
-                        .environment(\.openURL, OpenURLAction { url in
-                            context.send(viewAction: .linkClicked(url: url))
-                            return .systemAction
-                        })
+            ListRow(kind: .custom {
+                HStack(alignment: .firstTextBaseline, spacing: 13) {
+                    Image(systemSymbol: .exclamationmarkCircleFill)
+                        .foregroundColor(.compound.iconTertiaryAlpha)
+                    VStack(alignment: .leading, spacing: 2) {
+                        Text(L10n.screenNotificationSettingsSystemNotificationsTurnedOff)
+                            .font(.compound.bodyLG)
+                            .foregroundColor(.compound.textPrimary)
+                        Text(context.viewState.strings.changeYourSystemSettings)
+                            .font(.compound.bodySM)
+                            .foregroundColor(.compound.textSecondary)
+                            .tint(.compound.textPrimary)
+                    }
                 }
-                .padding(.vertical, 5)
-            }
+                .padding(.horizontal, ListRowPadding.horizontal)
+                .padding(.vertical, 8)
+                .environment(\.openURL, OpenURLAction { url in
+                    context.send(viewAction: .linkClicked(url: url))
+                    return .systemAction
+                })
+            })
         }
-        .compoundFormSection()
     }
     
     private var enableNotificationSection: some View {
         Section {
-            Toggle(isOn: $context.enableNotifications) {
-                Text(L10n.screenNotificationSettingsEnableNotifications)
-            }
-            .toggleStyle(.compoundForm)
-            .onChange(of: context.enableNotifications) { _ in
-                context.send(viewAction: .changedEnableNotifications)
-            }
+            ListRow(label: .plain(title: L10n.screenNotificationSettingsEnableNotifications),
+                    kind: .toggle($context.enableNotifications))
+                .onChange(of: context.enableNotifications) { _ in
+                    context.send(viewAction: .changedEnableNotifications)
+                }
         }
-        .compoundFormSection()
     }
     
     private var roomsNotificationSection: some View {
         Section {
             // Group chats
-            Button {
-                context.send(viewAction: .groupChatsTapped)
-            } label: {
-                LabeledContent {
-                    if let settings = context.viewState.settings {
-                        Text(context.viewState.strings.string(for: settings.groupChatsMode))
-                    } else {
-                        ProgressView()
-                    }
-                } label: {
-                    Text(L10n.screenNotificationSettingsGroupChats)
-                }
-            }
-            .accessibilityIdentifier(A11yIdentifiers.roomDetailsScreen.notifications)
-            .buttonStyle(.compoundForm(accessory: context.viewState.settings.flatMap { _ in .navigationLink }))
-            .disabled(context.viewState.settings == nil)
+            ListRow(label: .plain(title: L10n.screenNotificationSettingsGroupChats),
+                    details: context.viewState.settings.map {
+                        ListDetailsLabel.title(context.viewState.strings.string(for: $0.groupChatsMode))
+                    } ?? .isWaiting(true),
+                    kind: .navigationLink {
+                        context.send(viewAction: .groupChatsTapped)
+                    })
+                    .disabled(context.viewState.settings == nil)
+                    .accessibilityIdentifier(A11yIdentifiers.roomDetailsScreen.notifications)
             
             // Direct chats
-            Button {
-                context.send(viewAction: .directChatsTapped)
-            } label: {
-                LabeledContent {
-                    if let settings = context.viewState.settings {
-                        Text(context.viewState.strings.string(for: settings.directChatsMode))
-                    } else {
-                        ProgressView()
-                    }
-                } label: {
-                    Text(L10n.screenNotificationSettingsDirectChats)
-                }
-            }
-            .accessibilityIdentifier(A11yIdentifiers.roomDetailsScreen.notifications)
-            .buttonStyle(.compoundForm(accessory: context.viewState.settings.flatMap { _ in .navigationLink }))
-            .disabled(context.viewState.settings == nil)
+            ListRow(label: .plain(title: L10n.screenNotificationSettingsDirectChats),
+                    details: context.viewState.settings.map {
+                        ListDetailsLabel.title(context.viewState.strings.string(for: $0.directChatsMode))
+                    } ?? .isWaiting(true),
+                    kind: .navigationLink {
+                        context.send(viewAction: .directChatsTapped)
+                    })
+                    .disabled(context.viewState.settings == nil)
+                    .accessibilityIdentifier(A11yIdentifiers.roomDetailsScreen.notifications)
             
         } header: {
             Text(L10n.screenNotificationSettingsNotificationSectionTitle)
-                .compoundFormSectionHeader()
+                .compoundListSectionHeader()
         }
-        .compoundFormSection()
     }
         
     private var mentionsSection: some View {
         Section {
-            Toggle(isOn: $context.roomMentionsEnabled) {
-                Text(L10n.screenNotificationSettingsRoomMentionLabel)
-            }
-            .toggleStyle(.compoundForm)
-            .onChange(of: context.roomMentionsEnabled) { _ in
-                context.send(viewAction: .roomMentionChanged)
-            }
-            .disabled(context.viewState.settings?.roomMentionsEnabled == nil)
-            .allowsHitTesting(!context.viewState.applyingChange)
+            ListRow(label: .plain(title: L10n.screenNotificationSettingsRoomMentionLabel),
+                    kind: .toggle($context.roomMentionsEnabled))
+                .disabled(context.viewState.settings?.roomMentionsEnabled == nil)
+                .allowsHitTesting(!context.viewState.applyingChange)
+                .onChange(of: context.roomMentionsEnabled) { _ in
+                    context.send(viewAction: .roomMentionChanged)
+                }
         } header: {
             Text(L10n.screenNotificationSettingsMentionsSectionTitle)
-                .compoundFormSectionHeader()
+                .compoundListSectionHeader()
         }
-        .compoundFormSection()
     }
     
     private var callsSection: some View {
         Section {
-            Toggle(isOn: $context.callsEnabled) {
-                Text(L10n.screenNotificationSettingsCallsLabel)
-            }
-            .toggleStyle(.compoundForm)
-            .onChange(of: context.callsEnabled) { _ in
-                context.send(viewAction: .callsChanged)
-            }
-            .disabled(context.viewState.settings?.callsEnabled == nil)
-            .allowsHitTesting(!context.viewState.applyingChange)
+            ListRow(label: .plain(title: L10n.screenNotificationSettingsCallsLabel),
+                    kind: .toggle($context.callsEnabled))
+                .disabled(context.viewState.settings?.callsEnabled == nil)
+                .allowsHitTesting(!context.viewState.applyingChange)
+                .onChange(of: context.callsEnabled) { _ in
+                    context.send(viewAction: .callsChanged)
+                }
         } header: {
             Text(L10n.screenNotificationSettingsAdditionalSettingsSectionTitle)
-                .compoundFormSectionHeader()
+                .compoundListSectionHeader()
         }
-        .compoundFormSection()
     }
 }
 

ElementX/Sources/Screens/Settings/SettingsScreen/View/SettingsScreen.swift

@@ -38,7 +38,7 @@ struct SettingsScreen: View {
             
             signOutSection
         }
-        .compoundForm()
+        .compoundList()
         .navigationTitle(L10n.commonSettings)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {
@@ -48,118 +48,118 @@ struct SettingsScreen: View {
         }
     }
 
-    private var versionText: some View {
+    private var versionText: Text {
         Text(L10n.settingsVersionNumber(InfoPlistReader.main.bundleShortVersionString, InfoPlistReader.main.bundleVersion))
     }
 
     private var userSection: some View {
         Section {
-            HStack(spacing: 12) {
-                LoadableAvatarImage(url: context.viewState.userAvatarURL,
-                                    name: context.viewState.userDisplayName,
-                                    contentID: context.viewState.userID,
-                                    avatarSize: .user(on: .settings),
-                                    imageProvider: context.imageProvider)
-                    .accessibilityHidden(true)
-                
-                VStack(alignment: .leading, spacing: 2) {
-                    Text(context.viewState.userDisplayName ?? "")
-                        .font(.compound.headingMD)
-                        .foregroundColor(.compound.textPrimary)
-                    Text(context.viewState.userID)
-                        .font(.compound.bodySM)
-                        .foregroundColor(.compound.textSecondary)
+            ListRow(kind: .custom {
+                HStack(spacing: 12) {
+                    LoadableAvatarImage(url: context.viewState.userAvatarURL,
+                                        name: context.viewState.userDisplayName,
+                                        contentID: context.viewState.userID,
+                                        avatarSize: .user(on: .settings),
+                                        imageProvider: context.imageProvider)
+                        .accessibilityHidden(true)
+                    
+                    VStack(alignment: .leading, spacing: 2) {
+                        Text(context.viewState.userDisplayName ?? "")
+                            .font(.compound.headingMD)
+                            .foregroundColor(.compound.textPrimary)
+                        Text(context.viewState.userID)
+                            .font(.compound.bodySM)
+                            .foregroundColor(.compound.textSecondary)
+                    }
+                    .accessibilityElement(children: .combine)
                 }
-                .accessibilityElement(children: .combine)
-            }
+                .padding(.horizontal, ListRowPadding.horizontal)
+                .padding(.vertical, 8)
+            })
         }
-        .compoundFormSection()
     }
     
     private var sessionVerificationSection: some View {
         Section {
-            Button { context.send(viewAction: .sessionVerification) } label: {
-                Label(L10n.actionCompleteVerification, systemImage: "checkmark.shield")
-            }
-            .buttonStyle(.compoundForm())
+            ListRow(label: .default(title: L10n.actionCompleteVerification,
+                                    systemIcon: .checkmarkShield),
+                    kind: .button { context.send(viewAction: .sessionVerification) })
         }
-        .compoundFormSection()
     }
     
     private var developerOptionsSection: some View {
         Section {
-            Button { context.send(viewAction: .developerOptions) } label: {
-                Label(L10n.commonDeveloperOptions, systemImage: "hammer.circle")
-            }
-            .buttonStyle(.compoundForm(accessory: .navigationLink))
-            .accessibilityIdentifier("developerOptionsButton")
+            ListRow(label: .default(title: L10n.commonDeveloperOptions,
+                                    systemIcon: .hammerCircle),
+                    kind: .navigationLink {
+                        context.send(viewAction: .developerOptions)
+                    })
+                    .accessibilityIdentifier("developerOptionsButton")
         }
-        .compoundFormSection()
     }
     
     private var simplifiedSection: some View {
         Section {
-            Picker(selection: $context.timelineStyle) {
-                ForEach(TimelineStyle.allCases, id: \.self) { style in
-                    Text(style.name)
-                        .tag(style)
+            ListRow(label: .default(title: L10n.commonMessageLayout,
+                                    systemIcon: .rectangleGrid1x2),
+                    kind: .picker(selection: $context.timelineStyle,
+                                  items: TimelineStyle.allCases.map { (title: $0.name, tag: $0) }))
+                .accessibilityIdentifier("timelineStylePicker")
+                .onChange(of: context.timelineStyle) { _ in
+                    context.send(viewAction: .changedTimelineStyle)
                 }
-            } label: {
-                Label(L10n.commonMessageLayout, systemImage: "rectangle.grid.1x2")
-            }
-            .labelStyle(.compoundFormRow())
-            .accessibilityIdentifier("timelineStylePicker")
-            .onChange(of: context.timelineStyle) { _ in
-                context.send(viewAction: .changedTimelineStyle)
-            }
             
             // Notifications
             if context.viewState.showNotificationSettings {
-                Button { context.send(viewAction: .notifications) } label: {
-                    Label(L10n.screenNotificationSettingsTitle, systemImage: "bell")
-                }
-                .buttonStyle(.compoundForm(accessory: .navigationLink))
-                .accessibilityIdentifier("notificationsButton")
+                ListRow(label: .default(title: L10n.screenNotificationSettingsTitle,
+                                        systemIcon: .bell),
+                        kind: .navigationLink {
+                            context.send(viewAction: .notifications)
+                        })
+                        .accessibilityIdentifier("notificationsButton")
             }
             
             // Analytics
-            Button { context.send(viewAction: .analytics) } label: {
-                Label(L10n.commonAnalytics, systemImage: "chart.bar")
-            }
-            .buttonStyle(.compoundForm(accessory: .navigationLink))
-            .accessibilityIdentifier("analyticsButton")
+            ListRow(label: .default(title: L10n.commonAnalytics,
+                                    systemIcon: .chartBar),
+                    kind: .navigationLink {
+                        context.send(viewAction: .analytics)
+                    })
+                    .accessibilityIdentifier("analyticsButton")
             
             // Report Bug
-            Button { context.send(viewAction: .reportBug) } label: {
-                Label(L10n.commonReportABug, systemImage: "ladybug")
-            }
-            .buttonStyle(.compoundForm(accessory: .navigationLink))
-            .accessibilityIdentifier("reportBugButton")
+            ListRow(label: .default(title: L10n.commonReportABug,
+                                    systemIcon: .ladybug),
+                    kind: .navigationLink {
+                        context.send(viewAction: .reportBug)
+                    })
+                    .accessibilityIdentifier("reportBugButton")
             
             // About
-            Button { context.send(viewAction: .about) } label: {
-                Label(L10n.commonAbout, systemImage: "questionmark.circle")
-            }
-            .buttonStyle(.compoundForm(accessory: .navigationLink))
-            .accessibilityIdentifier("aboutButton")
+            ListRow(label: .default(title: L10n.commonAbout,
+                                    systemIcon: .questionmarkCircle),
+                    kind: .navigationLink {
+                        context.send(viewAction: .about)
+                    })
+                    .accessibilityIdentifier("aboutButton")
         }
-        .compoundFormSection()
     }
     
     private var signOutSection: some View {
         Section {
-            Button { showingLogoutConfirmation = true } label: {
-                Label(L10n.screenSignoutPreferenceItem, systemImage: "rectangle.portrait.and.arrow.right")
-            }
-            .buttonStyle(.compoundForm())
-            .accessibilityIdentifier("logoutButton")
-            .alert(L10n.screenSignoutConfirmationDialogTitle, isPresented: $showingLogoutConfirmation) {
-                Button(L10n.screenSignoutConfirmationDialogSubmit,
-                       role: .destructive,
-                       action: logout)
-            } message: {
-                Text(L10n.screenSignoutConfirmationDialogContent)
-            }
+            ListRow(label: .default(title: L10n.screenSignoutPreferenceItem,
+                                    systemIcon: .rectanglePortraitAndArrowRight),
+                    kind: .button {
+                        showingLogoutConfirmation = true
+                    })
+                    .accessibilityIdentifier("logoutButton")
+                    .alert(L10n.screenSignoutConfirmationDialogTitle, isPresented: $showingLogoutConfirmation) {
+                        Button(L10n.screenSignoutConfirmationDialogSubmit,
+                               role: .destructive,
+                               action: logout)
+                    } message: {
+                        Text(L10n.screenSignoutConfirmationDialogContent)
+                    }
         } footer: {
             VStack {
                 versionText
@@ -169,11 +169,10 @@ struct SettingsScreen: View {
                     Text(deviceID)
                 }
             }
-            .compoundFormSectionFooter()
+            .compoundListSectionFooter()
             .textSelection(.enabled)
             .padding(.top, 24)
         }
-        .compoundFormSection()
     }
 
     private var doneButton: some View {
@@ -204,7 +203,10 @@ private extension TimelineStyle {
 
 struct SettingsScreen_Previews: PreviewProvider {
     static let viewModel = {
-        let userSession = MockUserSession(clientProxy: MockClientProxy(userID: "@userid:example.com",
+        let verificationController = SessionVerificationControllerProxyMock()
+        verificationController.isVerified = false
+        let userSession = MockUserSession(sessionVerificationController: verificationController,
+                                          clientProxy: MockClientProxy(userID: "@userid:example.com",
                                                                        deviceID: "AAAAAAAAAAA"),
                                           mediaProvider: MockMediaProvider())
         ServiceLocator.shared.settings.notificationSettingsEnabled = true