Use ListRow on PollFormScreen.

ElementX.xcodeproj/project.pbxproj

@@ -6692,7 +6692,7 @@
 			repositoryURL = "https://github.com/vector-im/compound-ios";
 			requirement = {
 				kind = revision;
-				revision = 59166acc95a775ba3b7e7d39e5605611cf0e657f;
+				revision = 8774e358ac6927f041400733ac681456f0910c10;
 			};
 		};
 		9A472EE0218FE7DCF5283429 /* XCRemoteSwiftPackageReference "SwiftUI-Introspect" */ = {

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

@@ -14,7 +14,7 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-ios",
       "state" : {
-        "revision" : "59166acc95a775ba3b7e7d39e5605611cf0e657f"
+        "revision" : "8774e358ac6927f041400733ac681456f0910c10"
       }
     },
     {

ElementX/Sources/Screens/BugReportScreen/View/BugReportScreen.swift

@@ -54,7 +54,7 @@ struct BugReportScreen: View {
     private var textFieldSection: some View {
         Section {
             ListRow(label: .plain(title: L10n.screenBugReportEditorPlaceholder),
-                    kind: .textField(text: $context.reportText))
+                    kind: .textField(text: $context.reportText, axis: .vertical))
                 .lineLimit(4, reservesSpace: true)
                 .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.report)
         } footer: {

ElementX/Sources/Screens/CreatePollScreen/View/PollFormScreen.swift

@@ -34,7 +34,7 @@ struct PollFormScreen: View {
             deletePollSection
         }
         .trackAnalyticsIfNeeded(context: context)
-        .compoundForm()
+        .compoundList()
         .scrollDismissesKeyboard(.immediately)
         .environment(\.editMode, .constant(.active))
         .navigationTitle(context.viewState.navigationTitle)
@@ -48,32 +48,31 @@ struct PollFormScreen: View {
     // MARK: - Private
 
     private var questionSection: some View {
-        Section(L10n.screenCreatePollQuestionDesc) {
-            TextField(text: $context.question) {
-                Text(L10n.screenCreatePollQuestionHint)
-                    .compoundFormTextFieldPlaceholder()
-            }
-            .introspect(.textField, on: .supportedVersions) { textField in
-                textField.clearButtonMode = .whileEditing
-            }
-            .textFieldStyle(.compoundForm)
-            .focused($focus, equals: .question)
-            .accessibilityIdentifier(A11yIdentifiers.pollFormScreen.question)
-            .onSubmit {
-                focus = context.options.indices.first.map { .option(index: $0) }
-            }
-            .submitLabel(.next)
+        Section {
+            ListRow(label: .plain(title: L10n.screenCreatePollQuestionHint),
+                    kind: .textField(text: $context.question))
+                .introspect(.textField, on: .supportedVersions) { textField in
+                    textField.clearButtonMode = .whileEditing
+                }
+                .focused($focus, equals: .question)
+                .accessibilityIdentifier(A11yIdentifiers.pollFormScreen.question)
+                .onSubmit {
+                    focus = context.options.indices.first.map { .option(index: $0) }
+                }
+                .submitLabel(.next)
+        } header: {
+            Text(L10n.screenCreatePollQuestionDesc)
+                .compoundListSectionHeader()
         }
-        .compoundFormSection()
     }
 
     private var optionsSection: some View {
         Section {
             ForEach(context.options) { option in
                 if let index = context.options.firstIndex(of: option) {
-                    PollFormOptionView(text: $context.options[index].text.limited(to: 240),
-                                       placeholder: L10n.screenCreatePollAnswerHint(index + 1),
-                                       canDeleteItem: context.options.count > 2) {
+                    PollFormOptionRow(text: $context.options[index].text.limited(to: 240),
+                                      placeholder: L10n.screenCreatePollAnswerHint(index + 1),
+                                      canDeleteItem: context.options.count > 2) {
                         if case .option(let focusedIndex) = focus, focusedIndex == index {
                             focus = nil
                         }
@@ -94,36 +93,32 @@ struct PollFormScreen: View {
             }
 
             if context.options.count < context.viewState.maxNumberOfOptions {
-                Button(L10n.screenCreatePollAddOptionBtn) {
-                    context.send(viewAction: .addOption)
-                    focus = context.options.indices.last.map { .option(index: $0) }
-                }
-                .accessibilityIdentifier(A11yIdentifiers.pollFormScreen.addOption)
+                ListRow(label: .plain(title: L10n.screenCreatePollAddOptionBtn),
+                        kind: .button {
+                            context.send(viewAction: .addOption)
+                            focus = context.options.indices.last.map { .option(index: $0) }
+                        })
+                        .accessibilityIdentifier(A11yIdentifiers.pollFormScreen.addOption)
             }
         }
-        .compoundFormSection()
     }
 
     private var showResultsSection: some View {
         Section {
-            Toggle(L10n.screenCreatePollAnonymousDesc, isOn: $context.isUndisclosed)
+            ListRow(label: .plain(title: L10n.screenCreatePollAnonymousDesc),
+                    kind: .toggle($context.isUndisclosed))
                 .accessibilityIdentifier(A11yIdentifiers.pollFormScreen.pollKind)
         }
-        .compoundFormSection()
     }
 
     @ViewBuilder
     private var deletePollSection: some View {
         switch context.viewState.mode {
         case .edit:
             Section {
-                Button(role: .destructive) {
-                    context.send(viewAction: .delete)
-                } label: {
-                    Text(L10n.actionDeletePoll)
-                }
+                ListRow(label: .plain(title: L10n.actionDeletePoll, role: .destructive),
+                        kind: .button { context.send(viewAction: .delete) })
             }
-            .compoundFormSection()
         case .new:
             EmptyView()
         }
@@ -159,43 +154,68 @@ private extension View {
     }
 }
 
-private struct PollFormOptionView: View {
+private struct PollFormOptionRow: View {
     @Environment(\.editMode) var editMode
     @Binding var text: String
     let placeholder: String
     let canDeleteItem: Bool
     let deleteAction: () -> Void
 
     var body: some View {
-        HStack(spacing: 8) {
-            if editMode?.wrappedValue == .active {
-                Button(role: .destructive, action: deleteAction) {
-                    CompoundIcon(\.delete)
+        ListRow(kind: .custom {
+            HStack(spacing: 16) {
+                if editMode?.wrappedValue == .active {
+                    Button(role: .destructive, action: deleteAction) {
+                        CompoundIcon(\.delete)
+                    }
+                    .disabled(!canDeleteItem)
+                    .buttonStyle(.compound(.plain))
+                    .accessibilityLabel(L10n.actionRemove)
                 }
-                .disabled(!canDeleteItem)
-                .buttonStyle(.compound(.plain))
-                .accessibilityLabel(L10n.actionRemove)
-            }
-            TextField(text: $text) {
-                Text(placeholder)
-                    .compoundFormTextFieldPlaceholder()
-            }
-            .introspect(.textField, on: .supportedVersions) { textField in
-                textField.clearButtonMode = .whileEditing
+
+                TextField(text: $text) {
+                    Text(placeholder)
+                        .compoundTextFieldPlaceholder()
+                }
+                .introspect(.textField, on: .supportedVersions) { textField in
+                    textField.clearButtonMode = .whileEditing
+                }
+                .tint(.compound.iconAccentTertiary)
+                .alignmentGuide(.listRowSeparatorLeading) { _ in 0 }
             }
-            .textFieldStyle(.compoundForm)
-        }
+            .padding(.horizontal, ListRowPadding.horizontal)
+            .padding(.vertical, ListRowPadding.vertical)
+        })
     }
 }
 
 // MARK: - Previews
 
 struct PollFormScreen_Previews: PreviewProvider, TestablePreview {
     static let viewModel = PollFormScreenViewModel(mode: .new)
+    static let editViewModel = PollFormScreenViewModel(mode: .edit(eventID: "1234", poll: poll))
+    static let poll = Poll(question: "Cats or Dogs?",
+                           kind: .disclosed,
+                           maxSelections: 1,
+                           options: [
+                               .init(id: "0", text: "Cats", votes: 0, allVotes: 0, isSelected: false, isWinning: false),
+                               .init(id: "0", text: "Dogs", votes: 0, allVotes: 0, isSelected: false, isWinning: false),
+                               .init(id: "0", text: "Fish", votes: 0, allVotes: 0, isSelected: false, isWinning: false)
+                           ],
+                           votes: [:],
+                           endDate: nil,
+                           createdByAccountOwner: true)
+
     static var previews: some View {
         NavigationStack {
             PollFormScreen(context: viewModel.context)
         }
+        .previewDisplayName("New")
+
+        NavigationStack {
+            PollFormScreen(context: editViewModel.context)
+        }
+        .previewDisplayName("Edit")
     }
 }
 

ElementX/Sources/Screens/ReportContentScreen/View/ReportContentScreen.swift

@@ -43,7 +43,7 @@ struct ReportContentScreen: View {
     private var reasonSection: some View {
         Section {
             ListRow(label: .plain(title: L10n.reportContentHint),
-                    kind: .textField(text: $context.reasonText))
+                    kind: .textField(text: $context.reasonText, axis: .vertical))
                 .lineLimit(4, reservesSpace: true)
         } footer: {
             Text(L10n.reportContentExplanation)

UITests/Sources/PollFormScreenUITests.swift

@@ -49,7 +49,8 @@ class PollFormScreenUITests: XCTestCase {
         let addOption = app.buttons[A11yIdentifiers.pollFormScreen.addOption]
 
         for _ in 1...18 {
-            if !addOption.exists {
+            // Use the frame as a fallback to fix the button being obscured by the home indicator.
+            if !addOption.isHittable || addOption.frame.maxY > (app.frame.maxY - 20) {
                 app.swipeUp()
             }
             addOption.tap()

changelog.d/pr-2183.change

@@ -0,0 +1 @@
+Use the Compound List component on PollFormScreen.

project.yml

@@ -49,7 +49,7 @@ packages:
     # path: ../matrix-rust-sdk
   Compound:
     url: https://github.com/vector-im/compound-ios
-    revision: 59166acc95a775ba3b7e7d39e5605611cf0e657f
+    revision: 8774e358ac6927f041400733ac681456f0910c10
     # path: ../compound-ios
   AnalyticsEvents:
     url: https://github.com/matrix-org/matrix-analytics-events