FeatureFormView - Use List

Sources/ArcGISToolkit/Components/FeatureFormView/EmbeddedFeatureFormView.swift

@@ -26,17 +26,15 @@ struct EmbeddedFeatureFormView: View {
     }
 
     var body: some View {
-        ScrollViewReader { scrollViewProxy in
-            ScrollView {
-                VStack(alignment: .leading) {
-                    ForEach(embeddedFeatureFormViewModel.visibleElements, id: \.self) { element in
-                        makeElement(element)
-                    }
-                }
+        ScrollViewReader { scrollView in
+            List(embeddedFeatureFormViewModel.visibleElements, id: \.self) { element in
+                makeElement(element)
             }
             .onChange(of: embeddedFeatureFormViewModel.focusedElement) {
                 if let focusedElement = embeddedFeatureFormViewModel.focusedElement {
-                    withAnimation { scrollViewProxy.scrollTo(focusedElement, anchor: .top) }
+                    // Navigation bars will unfortunately cover or obscure
+                    // section headers. See FB19740517.
+                    withAnimation { scrollView.scrollTo(focusedElement, anchor: .top) }
                 }
             }
             .onTitleChange(of: embeddedFeatureFormViewModel.featureForm) { newTitle in
@@ -49,7 +47,6 @@ struct EmbeddedFeatureFormView: View {
         .scrollDismissesKeyboard(.immediately)
 #endif
         .environment(embeddedFeatureFormViewModel)
-        .padding(.horizontal)
         .preference(
             key: PresentedFeatureFormPreferenceKey.self,
             value: .init(object: embeddedFeatureFormViewModel.featureForm)
@@ -62,11 +59,19 @@ extension EmbeddedFeatureFormView {
     /// Makes UI for a form element.
     /// - Parameter element: The element to generate UI for.
     @ViewBuilder func makeElement(_ element: FormElement) -> some View {
-        switch element {
-        case let element as GroupFormElement:
-            GroupFormElementView(element: element) { internalMakeElement($0) }
-        default:
-            internalMakeElement(element)
+        Section {
+            switch element {
+            case let element as GroupFormElement:
+                GroupFormElementView(element: element) { internalMakeElement($0) }
+            default:
+                internalMakeElement(element)
+            }
+        } header: {
+            FormElementHeader(element: element)
+                .textCase(.none)
+        } footer: {
+            FormElementFooter(element: element)
+                .textCase(.none)
         }
     }
 
@@ -94,22 +99,19 @@ extension EmbeddedFeatureFormView {
     /// - Parameter element: The element to generate UI for.
     @ViewBuilder func makeFieldElement(_ element: FieldFormElement) -> some View {
         if !(element.input is UnsupportedFormInput) {
-            FormElementWrapper(element: element)
-            Divider()
+            FieldFormElementView(element: element)
         }
     }
 
     /// Makes UI for a text form element including a divider beneath it.
     /// - Parameter element: The element to generate UI for.
     @ViewBuilder func makeTextElement(_ element: TextFormElement) -> some View {
         TextFormElementView(element: element)
-        Divider()
     }
 
     /// Makes UI for a utility associations element including a divider beneath it.
     /// - Parameter element: The element to generate UI for.
     @ViewBuilder func makeUtilityAssociationsFormElement(_ element: UtilityAssociationsFormElement) -> some View {
-        FormElementWrapper(element: element)
-        Divider()
+        FeatureFormView.UtilityAssociationsFormElementView(element: element)
     }
 }

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/FormElements/FieldFormElementView.swift

@@ -15,6 +15,7 @@
 import ArcGIS
 import SwiftUI
 
+/// A view which creates the correct input view based on the field form element's input type and editable state.
 struct FieldFormElementView: View {
     /// A Boolean value indicating whether the input is editable.
     @State private var isEditable = false

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/FormElements/FormElementWrapper/FormElementFooter.swift

@@ -36,6 +36,8 @@ struct FormElementFooter: View {
         case let element as UtilityAssociationsFormElement:
             UtilityAssociationsFormElementFooter(element: element)
         default:
+            // GroupFormElement's description is shown in the DisclosureGroup's
+            // label.
             EmptyView()
         }
     }

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/FormElements/FormElementWrapper/FormElementHeader.swift

@@ -27,7 +27,6 @@ struct FormElementHeader: View {
             titleTextForElement
                 .font(.subheadline)
                 .foregroundStyle(.secondary)
-            Spacer()
         }
         .padding(.top, formElementPadding)
     }
@@ -37,10 +36,8 @@ struct FormElementHeader: View {
         switch element {
         case let element as FieldFormElement:
             FieldFormElementTitle(element: element)
-        case let element as UtilityAssociationsFormElement:
-            Text(element.label)
         default:
-            EmptyView()
+            Text(element.label)
         }
     }
 }
@@ -63,6 +60,10 @@ extension FormElementHeader {
                 .onIsRequiredChange(of: element) { newIsRequired in
                     isRequired = newIsRequired
                 }
+            Spacer()
+            if !isEditable {
+                Image(systemName: "pencil.slash")
+            }
         }
     }
 }

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/FormElements/GroupFormElementView.swift

@@ -30,11 +30,15 @@ struct GroupFormElementView<Content>: View where Content: View {
     var body: some View {
         DisclosureGroup(isExpanded: $isExpanded) {
             ForEach(visibleElements, id: \.self) { element in
-                viewCreator(element)
-                    .padding(.leading, 16)
+                VStack(alignment: .leading) {
+                    FormElementHeader(element: element)
+                    viewCreator(element)
+                        .formInputStyle(isTappable: true)
+                    FormElementFooter(element: element)
+                }
             }
         } label: {
-            Header(element: element)
+            Label(element: element)
                 .multilineTextAlignment(.leading)
                 .tint(.primary)
         }
@@ -67,21 +71,15 @@ struct GroupFormElementView<Content>: View where Content: View {
 
 extension GroupFormElementView {
     /// A view displaying a label and description of a `GroupFormElement`.
-    struct Header: View {
+    struct Label: View {
         let element: GroupFormElement
 
         var body: some View {
-            VStack(alignment: .leading) {
-                if !element.label.isEmpty {
-                    Text(element.label)
-                        .accessibilityIdentifier("\(element.label)")
-                }
-                if !element.description.isEmpty {
-                    Text(element.description)
-                        .accessibilityIdentifier("\(element.label) Description")
-                        .font(.caption2)
-                        .foregroundStyle(.secondary)
-                }
+            if !element.description.isEmpty {
+                Text(element.description)
+                    .accessibilityIdentifier("\(element.label) Description")
+                    .font(.caption2)
+                    .foregroundStyle(.secondary)
             }
         }
     }

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/FormElements/UtilityAssociationsFormElementView.swift

@@ -37,25 +37,21 @@ extension FeatureFormView {
                 switch associationsFilterResultsModel.result {
                 case .success(let results):
                     if results.isEmpty {
-                        FeatureFormGroupedContentView(
-                            content: [Text.noAssociations]
-                        )
+                        Text.noAssociations
                     } else {
-                        FeatureFormGroupedContentView(content: results.map {
+                        ForEach(results.indices) { index in
                             UtilityAssociationsFilterResultListRowView(
                                 associationsFilterResultsModel: associationsFilterResultsModel,
                                 element: element,
                                 filterTitle: $0.filter.title
                             )
                             .environment(embeddedFeatureFormViewModel)
-                        })
+                        }
                     }
                 case .failure(let error):
-                    FeatureFormGroupedContentView(content: [
-                        Text.errorFetchingFilterResults(error)
-                    ])
-                case .none:
-                    FeatureFormGroupedContentView(content: [ProgressView()])
+                    Text.errorFetchingFilterResults(error)
+                case nil:
+                    ProgressView()
                 }
             }
             .onChange(of: embeddedFeatureFormViewModel.hasEdits) {

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/Inputs/ComboBoxInput.swift

@@ -84,6 +84,11 @@ struct ComboBoxInput: View {
                 .accessibilityIdentifier("\(element.label) Combo Box Value")
                 .frame(maxWidth: .infinity, alignment: .leading)
                 .foregroundStyle(!selectedValue.isNoValue ? .primary : .secondary)
+                .contentShape(.rect)
+                .onTapGesture {
+                    embeddedFeatureFormViewModel.focusedElement = element
+                    isPresented = true
+                }
             if let _ = selectedValue.codedValue, !isRequired {
                 // Only show clear button if we have a value
                 // and we're not required. (i.e., Don't show clear if
@@ -101,7 +106,6 @@ struct ComboBoxInput: View {
                     .foregroundStyle(.secondary)
             }
         }
-        .formInputStyle(isTappable: true)
         .onIsRequiredChange(of: element) { newIsRequired in
             isRequired = newIsRequired
         }
@@ -116,10 +120,6 @@ struct ComboBoxInput: View {
                 selectedValue = .noValue
             }
         }
-        .onTapGesture {
-            embeddedFeatureFormViewModel.focusedElement = element
-            isPresented = true
-        }
         .sheet(isPresented: $isPresented) {
             makePicker()
         }

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/Inputs/DateTimeInput.swift

@@ -86,6 +86,23 @@ struct DateTimeInput: View {
             formattedDate
                 .accessibilityIdentifier("\(element.label) Value")
                 .foregroundStyle(displayColor)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .contentShape(.rect)
+                .onTapGesture {
+                    withAnimation {
+                        if date == nil {
+                            if dateRange.contains(.now) {
+                                date = .now
+                            } else if let min = input.min {
+                                date = min
+                            } else if let max = input.max {
+                                date = max
+                            }
+                        }
+                        isEditing.toggle()
+                        embeddedFeatureFormViewModel.focusedElement = isEditing ? element : nil
+                    }
+                }
 
             Spacer()
 
@@ -107,23 +124,6 @@ struct DateTimeInput: View {
                 }
             }
         }
-        .formInputStyle(isTappable: true)
-        .frame(maxWidth: .infinity)
-        .onTapGesture {
-            withAnimation {
-                if date == nil {
-                    if dateRange.contains(.now) {
-                        date = .now
-                    } else if let min = input.min {
-                        date = min
-                    } else if let max = input.max {
-                        date = max
-                    }
-                }
-                isEditing.toggle()
-                embeddedFeatureFormViewModel.focusedElement = isEditing ? element : nil
-            }
-        }
     }
 
     /// The system formatted version of the element's current date.

Sources/ArcGISToolkit/Components/FeatureFormView/Subviews/Inputs/RadioButtonsInput.swift

@@ -79,11 +79,6 @@ struct RadioButtonsInput: View {
                     }
                 }
             }
-            .background(
-                RoundedRectangle(cornerRadius: 10)
-                    .fill(Color(uiColor: .tertiarySystemFill))
-            )
-            .frame(maxWidth: .infinity, alignment: .leading)
             .onAppear {
                 if let selectedValue = element.codedValues.first(where: {
                     $0.name == element.formattedValue