Adopt Compound for the settings and bug report screens. (#708)

* Use compound tokens for Settings and Bug Report.

DesignKit/Sources/Colors/ElementColors.swift

@@ -25,9 +25,9 @@ public extension Color {
 }
 
 public struct ElementColors {
-    // MARK: - Compound
+    // MARK: - Legacy Compound
     
-    private let compound = CompoundColors()
+    private let compound = DesignTokens.CompoundColors()
     
     public var accent: Color { systemPrimaryLabel }
     public var alert: Color { compound.alert }
@@ -44,23 +44,6 @@ public struct ElementColors {
     
     public var contentAndAvatars: [Color] { compound.contentAndAvatars }
     
-    // MARK: - System
-    
-    public var systemPrimaryLabel: Color { .primary }
-    public var systemSecondaryLabel: Color { .secondary }
-    public var systemTertiaryLabel: Color { Color(.tertiaryLabel) }
-    public var systemQuaternaryLabel: Color { Color(.quaternaryLabel) }
-    
-    public var systemPrimaryBackground: Color { Color(.systemBackground) }
-    public var systemSecondaryBackground: Color { Color(.secondarySystemBackground) }
-    
-    public var systemGray: Color { Color(.systemGray) }
-    public var systemGray2: Color { Color(.systemGray2) }
-    public var systemGray3: Color { Color(.systemGray3) }
-    public var systemGray4: Color { Color(.systemGray4) }
-    public var systemGray5: Color { Color(.systemGray5) }
-    public var systemGray6: Color { Color(.systemGray6) }
-
     public func avatarBackground(for contentId: String) -> Color {
         let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
         return contentAndAvatars[colorIndex % contentAndAvatars.count]
@@ -68,17 +51,22 @@ public struct ElementColors {
     
     // MARK: - Temp
     
+    public var systemPrimaryLabel: Color { .primary }
+    public var systemPrimaryBackground: Color { Color(.systemBackground) }
+    public var systemGray4: Color { Color(.systemGray4) }
+    public var systemGray6: Color { Color(.systemGray6) }
+    
     public var bubblesYou: Color {
         Color(UIColor { collection in
             // Note: Light colour doesn't currently match Figma.
-            collection.userInterfaceStyle == .light ? .element.systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
+            collection.userInterfaceStyle == .light ? .systemGray5 : UIColor(red: 0.16, green: 0.18, blue: 0.21, alpha: 1)
         })
     }
     
     public var bubblesNotYou: Color {
         Color(UIColor { collection in
             // Note: Light colour doesn't currently match Figma.
-            collection.userInterfaceStyle == .light ? .element.systemGray6 : .element.system
+            collection.userInterfaceStyle == .light ? .systemGray6 : .element.system
         })
     }
     
@@ -87,7 +75,6 @@ public struct ElementColors {
     /// This colour is a special case as it uses `system` in light mode and `background` in dark mode.
     public var formBackground: Color {
         Color(UIColor { collection in
-            // Note: Light colour doesn't currently match Figma.
             collection.userInterfaceStyle == .light ? .element.system : .element.background
         })
     }
@@ -97,7 +84,6 @@ public struct ElementColors {
     /// This colour is a special case as it uses `background` in light mode and `system` in dark mode.
     public var formRowBackground: Color {
         Color(UIColor { collection in
-            // Note: Light colour doesn't currently match Figma.
             collection.userInterfaceStyle == .light ? .element.background : .element.system
         })
     }
@@ -113,9 +99,9 @@ public extension UIColor {
 @objcMembers public class ElementUIColors: NSObject {
     // MARK: - Compound
     
-    private let compound = CompoundUIColors()
+    private let compound = DesignTokens.CompoundUIColors()
     
-    public var accent: UIColor { systemPrimaryLabel }
+    public var accent: UIColor { .label }
     public var alert: UIColor { compound.alert }
     public var links: UIColor { compound.links }
     public var primaryContent: UIColor { compound.primaryContent }
@@ -127,23 +113,6 @@ public extension UIColor {
     public var background: UIColor { compound.background }
     
     public var contentAndAvatars: [UIColor] { compound.contentAndAvatars }
-    
-    // MARK: - System
-    
-    public var systemPrimaryLabel: UIColor { .label }
-    public var systemSecondaryLabel: UIColor { .secondaryLabel }
-    public var systemTertiaryLabel: UIColor { .tertiaryLabel }
-    public var systemQuaternaryLabel: UIColor { .quaternaryLabel }
-    
-    public var systemPrimaryBackground: UIColor { .systemBackground }
-    public var systemSecondaryBackground: UIColor { .secondarySystemBackground }
-    
-    public var systemGray: UIColor { .systemGray }
-    public var systemGray2: UIColor { .systemGray2 }
-    public var systemGray3: UIColor { .systemGray3 }
-    public var systemGray4: UIColor { .systemGray4 }
-    public var systemGray5: UIColor { .systemGray5 }
-    public var systemGray6: UIColor { .systemGray6 }
 
     public func avatarBackground(for contentId: String) -> UIColor {
         let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))

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

@@ -9,6 +9,22 @@
         "version" : "1.6.0"
       }
     },
+    {
+      "identity" : "compound-design-tokens",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/vector-im/compound-design-tokens.git",
+      "state" : {
+        "revision" : "342145ff8044b58b967186b0efe34477e1f7c3ca"
+      }
+    },
+    {
+      "identity" : "compound-ios",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/vector-im/compound-ios",
+      "state" : {
+        "revision" : "0b1c62f9a9efac3d9ac06c51531392d55057a0eb"
+      }
+    },
     {
       "identity" : "devicekit",
       "kind" : "remoteSourceControl",

ElementX/Resources/Localizations/en.lproj/Untranslated.strings

@@ -87,6 +87,7 @@
 
 // Bug report
 "bug_report_screen_title" = "Report a bug";
+"bug_report_screen_editor_placeholder" = "Describe the bug…";
 "bug_report_screen_description" = "Please describe the bug. What did you do? What did you expect to happen? What actually happened. Please go into as much detail as you can.";
 "bug_report_screen_include_logs" = "Send logs to help";
 "bug_report_screen_logs_description" = "To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.";

ElementX/Sources/Generated/Strings+Untranslated.swift

@@ -22,6 +22,8 @@ extension ElementL10n {
   public static let bugReportScreenDescription = ElementL10n.tr("Untranslated", "bug_report_screen_description")
   /// Edit Screenshot
   public static let bugReportScreenEditScreenshot = ElementL10n.tr("Untranslated", "bug_report_screen_edit_screenshot")
+  /// Describe the bug…
+  public static let bugReportScreenEditorPlaceholder = ElementL10n.tr("Untranslated", "bug_report_screen_editor_placeholder")
   /// Send logs to help
   public static let bugReportScreenIncludeLogs = ElementL10n.tr("Untranslated", "bug_report_screen_include_logs")
   /// To check things work as intended, logs will be sent with your message. These will be private. To just send your message, turn off this setting.

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

@@ -14,28 +14,25 @@
 // limitations under the License.
 //
 
+import Compound
 import PhotosUI
 import SwiftUI
 
 struct BugReportScreen: View {
-    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
-    
-    private var horizontalPadding: CGFloat {
-        horizontalSizeClass == .regular ? 50 : 16
-    }
-
     @State private var selectedScreenshot: PhotosPickerItem?
     
     @ObservedObject var context: BugReportViewModel.Context
     
     var body: some View {
-        ScrollView {
-            mainContent
-                .padding(.top, 50)
-                .padding(.horizontal, horizontalPadding)
+        Form {
+            textFieldSection
+            
+            attachScreenshotSection
+            
+            sendLogsSection
         }
         .scrollDismissesKeyboard(.immediately)
-        .background(Color.element.formBackground.ignoresSafeArea())
+        .compoundForm()
         .navigationTitle(ElementL10n.bugReportScreenTitle)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar { toolbar }
@@ -51,77 +48,65 @@ struct BugReportScreen: View {
             }
         }
     }
-
-    /// The main content of the view to be shown in a scroll view.
-    var mainContent: some View {
-        VStack(alignment: .leading, spacing: 24) {
-            descriptionTextEditor
-            attachScreenshot
-            sendLogsToggle
-        }
-    }
     
-    private var descriptionTextEditor: some View {
-        FormTextEditor(text: $context.reportText,
-                       placeholder: ElementL10n.bugReportScreenDescription,
-                       editorAccessibilityIdentifier: A11yIdentifiers.bugReportScreen.report)
+    private var textFieldSection: some View {
+        Section {
+            TextField(ElementL10n.bugReportScreenEditorPlaceholder,
+                      text: $context.reportText,
+                      prompt: Text(ElementL10n.bugReportScreenEditorPlaceholder).compoundFormTextFieldPlaceholder(),
+                      axis: .vertical)
+                .lineLimit(4, reservesSpace: true)
+                .textFieldStyle(.compoundForm)
+                .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.report)
+        } footer: {
+            Text(ElementL10n.bugReportScreenDescription)
+                .compoundFormSectionFooter()
+        }
+        .compoundFormSection()
     }
     
-    @ViewBuilder
-    private var sendLogsToggle: some View {
-        VStack(spacing: 8) {
+    private var sendLogsSection: some View {
+        Section {
             Toggle(ElementL10n.bugReportScreenIncludeLogs, isOn: $context.sendingLogsEnabled)
-                .foregroundColor(.element.primaryContent)
-                .tint(Color.element.brand)
+                .toggleStyle(.compoundForm)
                 .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.sendLogs)
-                .padding(.horizontal, 16)
-                .padding(.vertical, 6.5)
-                .background {
-                    RoundedRectangle(cornerRadius: 14)
-                        .fill(Color.element.formRowBackground)
-                }
-            
+        } footer: {
             Text(ElementL10n.bugReportScreenLogsDescription)
-                .font(.element.caption1)
-                .foregroundColor(Color.element.secondaryContent)
-                .padding(.horizontal, -8)
+                .compoundFormSectionFooter()
         }
+        .compoundFormSection()
     }
 
     @ViewBuilder
-    private var attachScreenshot: some View {
-        VStack(alignment: .leading, spacing: 16) {
+    private var attachScreenshotSection: some View {
+        Section {
             PhotosPicker(selection: $selectedScreenshot,
                          matching: .screenshots,
                          photoLibrary: .shared()) {
-                HStack(spacing: 16) {
-                    Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
-                        .labelStyle(FormRowLabelStyle())
-                    Spacer()
-                }
+                Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
             }
-            .buttonStyle(FormButtonStyle())
-            .background(Color.element.formRowBackground)
-            .cornerRadius(14)
+            .buttonStyle(.compoundForm())
             .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.attachScreenshot)
+        } footer: {
             if let screenshot = context.viewState.screenshot {
-                ZStack(alignment: .topTrailing) {
-                    Image(uiImage: screenshot)
-                        .resizable()
-                        .scaledToFit()
-                        .frame(width: 100)
-                        .cornerRadius(4)
-                        .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
-                    Button { context.send(viewAction: .removeScreenshot) } label: {
-                        Image(Asset.Images.closeCircle.name)
+                Image(uiImage: screenshot)
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: 100)
+                    .cornerRadius(4)
+                    .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.screenshot)
+                    .overlay(alignment: .topTrailing) {
+                        Button { context.send(viewAction: .removeScreenshot) } label: {
+                            Image(Asset.Images.closeCircle.name)
+                        }
+                        .offset(x: 10, y: -10)
+                        .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
                     }
-                    .offset(x: 10, y: -10)
-                    .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.removeScreenshot)
-                }
-                .padding(.vertical, 16)
-                .padding(.horizontal, 16)
+                    .padding(.vertical, 16)
+                    .padding(.horizontal, 16)
             }
         }
+        .compoundFormSection()
     }
     
     @ToolbarContentBuilder

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

@@ -14,12 +14,11 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct SettingsScreen: View {
     @State private var showingLogoutConfirmation = false
-
-    @ScaledMetric private var avatarSize = AvatarSize.user(on: .settings).value
     
     @ObservedObject var context: SettingsScreenViewModel.Context
     
@@ -39,8 +38,7 @@ struct SettingsScreen: View {
             
             signOutSection
         }
-        .scrollContentBackground(.hidden)
-        .background(Color.element.formBackground.ignoresSafeArea())
+        .compoundForm()
         .navigationTitle(ElementL10n.settings)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {
@@ -56,7 +54,7 @@ struct SettingsScreen: View {
 
     private var userSection: some View {
         Section {
-            HStack(spacing: 13) {
+            HStack(spacing: 12) {
                 LoadableAvatarImage(url: context.viewState.userAvatarURL,
                                     name: context.viewState.userDisplayName,
                                     contentID: context.viewState.userID,
@@ -64,18 +62,18 @@ struct SettingsScreen: View {
                                     imageProvider: context.imageProvider)
                     .accessibilityHidden(true)
                 
-                VStack(alignment: .leading, spacing: 4) {
+                VStack(alignment: .leading, spacing: 2) {
                     Text(context.viewState.userDisplayName ?? "")
-                        .font(.element.title3)
-                        .foregroundColor(.element.primaryContent)
+                        .font(.compound.headingMD)
+                        .foregroundColor(.compound.textPrimary)
                     Text(context.viewState.userID)
-                        .font(.element.subheadline)
-                        .foregroundColor(.element.primaryContent)
+                        .font(.compound.bodySM)
+                        .foregroundColor(.compound.textSecondary)
                 }
                 .accessibilityElement(children: .combine)
             }
         }
-        .formSectionStyle()
+        .compoundFormSection()
     }
     
     private var sessionVerificationSection: some View {
@@ -83,9 +81,9 @@ struct SettingsScreen: View {
             Button { context.send(viewAction: .sessionVerification) } label: {
                 Label(ElementL10n.settingsSessionVerification, systemImage: "checkmark.shield")
             }
-            .buttonStyle(FormButtonStyle())
+            .buttonStyle(.compoundForm())
         }
-        .formSectionStyle()
+        .compoundFormSection()
     }
     
     private var developerOptionsSection: some View {
@@ -93,10 +91,10 @@ struct SettingsScreen: View {
             Button { context.send(viewAction: .developerOptions) } label: {
                 Label(ElementL10n.settingsDeveloperOptions, systemImage: "hammer.circle")
             }
-            .buttonStyle(FormButtonStyle(accessory: .navigationLink))
+            .buttonStyle(.compoundForm(accessory: .navigationLink))
             .accessibilityIdentifier("sessionVerificationButton")
         }
-        .formSectionStyle()
+        .compoundFormSection()
     }
     
     private var simplifiedSection: some View {
@@ -108,8 +106,8 @@ struct SettingsScreen: View {
                 }
             } label: {
                 Label(ElementL10n.settingsTimelineStyle, systemImage: "rectangle.grid.1x2")
-                    .labelStyle(FormRowLabelStyle())
             }
+            .labelStyle(.compoundFormRow())
             .accessibilityIdentifier("timelineStylePicker")
             .onChange(of: context.timelineStyle) { _ in
                 context.send(viewAction: .changedTimelineStyle)
@@ -118,10 +116,10 @@ struct SettingsScreen: View {
             Button { context.send(viewAction: .reportBug) } label: {
                 Label(ElementL10n.sendBugReport, systemImage: "questionmark.circle")
             }
-            .buttonStyle(FormButtonStyle(accessory: .navigationLink))
+            .buttonStyle(.compoundForm(accessory: .navigationLink))
             .accessibilityIdentifier("reportBugButton")
         }
-        .formSectionStyle()
+        .compoundFormSection()
     }
     
     private var signOutSection: some View {
@@ -129,7 +127,7 @@ struct SettingsScreen: View {
             Button { showingLogoutConfirmation = true } label: {
                 Label(ElementL10n.actionSignOut, systemImage: "rectangle.portrait.and.arrow.right")
             }
-            .buttonStyle(FormButtonStyle())
+            .buttonStyle(.compoundForm())
             .accessibilityIdentifier("logoutButton")
             .alert(ElementL10n.actionSignOut, isPresented: $showingLogoutConfirmation) {
                 Button(ElementL10n.actionSignOut,
@@ -141,19 +139,14 @@ struct SettingsScreen: View {
         } footer: {
             VStack {
                 versionText
-                    .font(.element.caption1)
-                    .foregroundColor(.element.tertiaryContent)
                     .frame(maxWidth: .infinity)
                 
-                if let deviceId = context.viewState.deviceID {
-                    Text(deviceId)
-                        .font(.element.caption1)
-                        .foregroundColor(.element.tertiaryContent)
-                }
+                context.viewState.deviceID.map(Text.init)
             }
+            .compoundFormSectionFooter()
             .padding(.top, 24)
         }
-        .formSectionStyle()
+        .compoundFormSection()
     }
 
     private var doneButton: some View {

ElementX/SupportingFiles/target.yml

@@ -127,6 +127,7 @@ targets:
     - target: NSE
     - package: MatrixRustSDK
     - package: DesignKit
+    - package: Compound
     - package: Algorithms
     - package: AnalyticsEvents
     - package: AppAuth

changelog.d/43.feature

@@ -0,0 +1 @@
+Adopt compound-ios on the Settings and Bug Report screens. 

project.yml

@@ -46,6 +46,10 @@ packages:
     # path: ../matrix-rust-sdk
   DesignKit:
     path: DesignKit
+  Compound:
+    url: https://github.com/vector-im/compound-ios
+    revision: 0b1c62f9a9efac3d9ac06c51531392d55057a0eb
+    # path: ../compound-ios
   Algorithms:
     url: https://github.com/apple/swift-algorithms
     majorVersion: 1.0.0