Some more tweaks to compound for User Status. (#5708)

* Add a plain list modifier to Compound. * Move ElementTextFieldStyle into Compound and support more styles from the Figma - More accurately reflects our Liquid Glass updates. - Adds support for the .raised style. * Update Element X snapshots.
2026-11-03 06:55:59 +00:00 · 2026-06-05 15:59:34 +01:00
parent 21d2f59b26
commit 097d055dbe
151 changed files with 574 additions and 531 deletions
@@ -8,6 +8,7 @@

 /* Begin PBXBuildFile section */
 		70AC7B23011C802F750E470E /* Pods_Compound_Inspector.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = D2E28F45EEA9A8DE6AFB10E9 /* Pods_Compound_Inspector.framework */; };
+		9103C90F2FD1D82E00679A14 /* TextFieldsScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 917F563028256DDC00D19543 /* TextFieldsScreen.swift */; };
 		912974102A864F5E004BEA88 /* ListScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9129740F2A864F5E004BEA88 /* ListScreen.swift */; };
 		912EA03C2EF18F1F006485DF /* TitleAndIconScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 912EA03B2EF18F1D006485DF /* TitleAndIconScreen.swift */; };
 		9132C62D2A72708400EAEF3D /* ActionSheetScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9132C62C2A72708400EAEF3D /* ActionSheetScreen.swift */; };
@@ -321,6 +322,7 @@
 				9132C6312A7280A500EAEF3D /* ContextMenuScreen.swift in Sources */,
 				9132C62F2A72785500EAEF3D /* AlertScreen.swift in Sources */,
 				91CA00362AD7D83200121E0F /* ButtonsScreen.swift in Sources */,
+				9103C90F2FD1D82E00679A14 /* TextFieldsScreen.swift in Sources */,
 				91B2EA9C28CA064800A90A83 /* ColorsScreen.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -6,13 +6,13 @@
 // Please see LICENSE files in the repository root for full details.
 //

-import DesignKit
+import Compound
 import SwiftUI

 struct TextFieldsScreen: View {
    var body: some View {
        ScreenContent(navigationTitle: "Text Fields") {
-            BorderedInputFieldStyle_Previews.states
+            CompoundTextFieldStyle_Previews.states
        }
    }
 }
@@ -56,7 +56,7 @@ enum Screen: Hashable, View {
        case .sizes: EmptyView()
        case .labels: EmptyView()
        case .buttons: ButtonsScreen()
-        case .textFields: EmptyView()
+        case .textFields: TextFieldsScreen()
        case .bigIcon: BigIconScreen()
        case .titleAndIcon: TitleAndIconScreen()
            
@@ -42,6 +42,9 @@ struct SidebarList: View {
            NavigationLink(value: Screen.buttons) {
                Label("Buttons", systemImage: "rectangle.and.hand.point.up.left")
            }
+            NavigationLink(value: Screen.textFields) {
+                Label("Text Fields", systemImage: "character.textbox")
+            }
            NavigationLink(value: Screen.list) {
                Label("List", systemImage: "list.bullet.clipboard")
            }
@@ -6,11 +6,278 @@
 //

 import SwiftUI
+import SwiftUIIntrospect

 public extension Text {
    /// Styles a text with the Compound design tokens to be displayed as a text field placeholder.
+    ///
+    /// This is only necessary when manually styling a text field using the `prompt` parameter and isn't
+    /// necessary when using any of the test field styles provided by Compound.
    func compoundTextFieldPlaceholder() -> Text {
        font(.compound.bodyLG)
            .foregroundColor(.compound.textSecondary)
    }
 }
+
+@MainActor
+public extension TextFieldStyle where Self == CompoundTextFieldStyle {
+    /// A text field style that applies Compound design tokens to a test field with various configuration options.
+    /// - Parameters:
+    ///   - kind: The kind of text field being shown such as plain or raised.
+    ///   - labelText: The text shown in the label above the field.
+    ///   - footerText: The text shown in the footer label below the field.
+    ///   - state: Specifies if the text field is currently in a success/error state.
+    ///   - accessibilityIdentifier: An accessibility identifier that will be applied directly to the base text field.
+    static func compound(_ kind: CompoundTextFieldStyle.Kind = .plain,
+                         labelText: String? = nil,
+                         footerText: String? = nil,
+                         state: CompoundTextFieldStyle.State = .default,
+                         accessibilityIdentifier: String? = nil) -> CompoundTextFieldStyle {
+        CompoundTextFieldStyle(kind: kind,
+                               labelText: labelText.map(Text.init),
+                               footerText: footerText.map(Text.init),
+                               state: state,
+                               accessibilityIdentifier: accessibilityIdentifier)
+    }
+    
+    @_disfavoredOverload
+    static func compound(_ kind: CompoundTextFieldStyle.Kind = .plain,
+                         labelText: Text? = nil,
+                         footerText: Text? = nil,
+                         state: CompoundTextFieldStyle.State = .default,
+                         accessibilityIdentifier: String? = nil) -> CompoundTextFieldStyle {
+        CompoundTextFieldStyle(kind: kind,
+                               labelText: labelText,
+                               footerText: footerText,
+                               state: state,
+                               accessibilityIdentifier: accessibilityIdentifier)
+    }
+}
+
+/// The default text field style for standalone text fields.
+@MainActor
+public struct CompoundTextFieldStyle: @MainActor TextFieldStyle {
+    public enum Kind {
+        /// The standard text field style for use on the default canvas.
+        case plain
+        /// A style that raises the text field above the background (typically `bgSubtleSecondaryLevel0`).
+        case raised
+    }
+    
+    public enum State {
+        /// The text field's input has been validated successfully.
+        case success
+        /// The text field's input is invalid.
+        case error
+        /// The text field's input hasn't been validated or is always valid.
+        case `default`
+    }
+    
+    @Environment(\.isEnabled) private var isEnabled
+    
+    @FocusState private var isFocused: Bool
+    let kind: Kind
+    let labelText: Text?
+    let footerText: Text?
+    let state: State
+    let accessibilityIdentifier: String?
+    
+    private var isError: Bool {
+        state == .error
+    }
+    
+    /// The color of the text field's border.
+    private var borderColor: Color {
+        guard !isError else { return .compound.textCriticalPrimary }
+        return kind == .raised ? .compound.borderInteractiveSecondary : .clear
+    }
+    
+    /// The width of the text field's border.
+    private var borderWidth: CGFloat {
+        isFocused || isError ? 1.0 : 0
+    }
+    
+    private var accentColor: Color {
+        isError ? .compound.textCriticalPrimary : .compound.iconAccentTertiary
+    }
+    
+    /// The color of the text inside the text field.
+    private var textColor: Color {
+        isEnabled ? .compound.textPrimary : .compound.textDisabled
+    }
+    
+    /// The color of the text field's background.
+    private var backgroundColor: Color {
+        if kind == .raised {
+            isError ? .compound.bgCriticalSubtleHovered :
+                .compound.bgCanvasDefaultLevel1
+        } else {
+            isError ? .compound.bgCriticalSubtleHovered :
+                .compound.bgSubtleSecondary.opacity(isEnabled ? 1 : 0.5)
+        }
+    }
+    
+    /// The color of the placeholder text inside the text field.
+    private var placeholderColor: UIColor {
+        .compound.textSecondary
+    }
+    
+    /// The color of the label above the text field.
+    private var labelColor: Color {
+        guard isEnabled else { return .compound.textDisabled }
+        return Compound.supportsGlass ? .compound.textSecondary : .compound.textPrimary
+    }
+    
+    /// The color of the footer label below the text field.
+    private var footerTextColor: Color {
+        switch state {
+        case .default:
+            .compound.textSecondary
+        case .error:
+            .compound.textCriticalPrimary
+        case .success:
+            .compound.textSuccessPrimary
+        }
+    }
+    
+    private var footerIconColor: Color {
+        switch state {
+        // Doesn't matter we don't render it
+        case .default:
+            .clear
+        case .error:
+            .compound.iconCriticalPrimary
+        case .success:
+            .compound.iconSuccessPrimary
+        }
+    }
+    
+    @MainActor
+    public func _body(configuration: TextField<_Label>) -> some View {
+        let shape = Compound.supportsGlass ? AnyShape(Capsule()) : AnyShape(RoundedRectangle(cornerRadius: 14.0))
+        
+        return VStack(alignment: .leading, spacing: 8) {
+            labelText
+                .font(Compound.supportsGlass ? .compound.bodyMDSemibold : .compound.bodySMSemibold)
+                .foregroundColor(labelColor)
+                .padding(.horizontal, 16)
+            
+            configuration
+                .focused($isFocused)
+                .font(.compound.bodyLG)
+                .foregroundColor(textColor)
+                .accentColor(accentColor)
+                .padding(.leading, 16.0)
+                .padding([.vertical, .trailing], 11.0)
+                .background {
+                    ZStack {
+                        shape.fill(backgroundColor)
+                        shape.stroke(borderColor, lineWidth: borderWidth)
+                    }
+                    .onTapGesture { isFocused = true } // Set focus with taps outside of the text field
+                }
+                .introspect(.textField, on: .supportedVersions) { textField in
+                    textField.clearButtonMode = .whileEditing
+                    textField.attributedPlaceholder = NSAttributedString(string: textField.placeholder ?? "",
+                                                                         attributes: [NSAttributedString.Key.foregroundColor: placeholderColor])
+                    textField.accessibilityIdentifier = accessibilityIdentifier
+                }
+            
+            if let footerText {
+                Label {
+                    footerText
+                        .tint(.compound.textLinkExternal)
+                        .font(.compound.bodySM)
+                        .foregroundColor(footerTextColor)
+                } icon: {
+                    switch state {
+                    case .success:
+                        CompoundIcon(\.checkCircleSolid, size: .xSmall, relativeTo: .compound.bodySM)
+                            .foregroundStyle(.compound.iconSuccessPrimary)
+                    case .error:
+                        CompoundIcon(\.errorSolid, size: .xSmall, relativeTo: .compound.bodySM)
+                            .foregroundStyle(.compound.iconCriticalPrimary)
+                    case .default:
+                        EmptyView()
+                    }
+                }
+                .labelStyle(FooterLabelStyle())
+                .padding(.horizontal, 16)
+            }
+        }
+    }
+    
+    private struct FooterLabelStyle: LabelStyle {
+        func makeBody(configuration: Configuration) -> some View {
+            HStack(alignment: .top, spacing: 4) {
+                configuration.icon
+                configuration.title
+            }
+        }
+    }
+}
+
+public struct CompoundTextFieldStyle_Previews: PreviewProvider, TestablePreview {
+    public static var previews: some View {
+        ScrollView {
+            states
+        }
+        .previewLayout(.fixed(width: 390, height: 1250))
+    }
+    
+    @ViewBuilder
+    public static var states: some View {
+        Section {
+            textFields()
+        } header: {
+            Header(title: "Plain")
+        }
+        
+        Section {
+            textFields(.raised)
+        } header: {
+            Header(title: "Raised")
+        }
+        
+        Section {
+            textFields(labelText: "Label", footerText: "Footer")
+            TextField("Placeholder", text: .constant("Good text"))
+                .textFieldStyle(.compound(footerText: "Footer", state: .success))
+                .padding(.horizontal)
+        } header: {
+            Header(title: "Labels")
+        }
+    }
+    
+    static func textFields(_ kind: CompoundTextFieldStyle.Kind = .plain,
+                           labelText: String? = nil,
+                           footerText: String? = nil) -> some View {
+        VStack(spacing: 20) {
+            TextField("Placeholder", text: .constant(""))
+                .textFieldStyle(.compound(kind, labelText: labelText, footerText: footerText))
+            
+            TextField("Placeholder", text: .constant("Text"))
+                .textFieldStyle(.compound(kind, labelText: labelText, footerText: footerText))
+            
+            TextField("Placeholder", text: .constant("Disabled"))
+                .textFieldStyle(.compound(kind, labelText: labelText, footerText: footerText))
+                .disabled(true)
+            
+            TextField("Placeholder", text: .constant("Bad text"))
+                .textFieldStyle(.compound(kind, labelText: labelText, footerText: footerText, state: .error))
+        }
+        .padding()
+        .background(kind == .raised ? .compound.bgSubtleSecondaryLevel0 : .clear)
+    }
+    
+    struct Header: View {
+        let title: String
+        
+        var body: some View {
+            Text(title)
+                .foregroundStyle(.compound.textSecondary)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding([.leading, .top])
+        }
+    }
+}
@@ -75,9 +75,6 @@ public class CompoundColors {
    // swiftformat:disable numberFormatting
    /// This token is a placeholder and hasn't been finalised.
    @available(iOS, deprecated: 100000.0, message: "This token should be generated by now.")
-    public let _borderTextFieldFocused = coreTokens.gray500
-    /// This token is a placeholder and hasn't been finalised.
-    @available(iOS, deprecated: 100000.0, message: "This token should be generated by now.")
    public let _bgBubbleIncoming = Color(UIColor { $0.isLight ? UIColor(coreTokens.gray300) : UIColor(coreTokens.gray400) })
    /// This token is a placeholder and hasn't been finalised.
    @available(iOS, deprecated: 100000.0, message: "This token should be generated by now.")
@@ -8,12 +8,28 @@

 import SwiftUI

+public enum CompoundListKind {
+    /// The default style for `List` or `Form`.
+    case inset
+    /// The `.plain` style when using a `List`.
+    case plain
+}
+
 public extension View {
    /// Styles a list using the Compound design tokens.
-    func compoundList() -> some View {
-        environment(\.defaultMinListRowHeight, 48)
-            .scrollContentBackground(.hidden)
-            .background(Color.compound.bgSubtleSecondaryLevel0.ignoresSafeArea())
+    @ViewBuilder
+    func compoundList(_ kind: CompoundListKind = .inset) -> some View {
+        switch kind {
+        case .inset:
+            environment(\.defaultMinListRowHeight, 48)
+                .scrollContentBackground(.hidden)
+                .background(Color.compound.bgSubtleSecondaryLevel0.ignoresSafeArea())
+        case .plain:
+            listStyle(.plain)
+                .environment(\.defaultMinListRowHeight, 48)
+                .scrollContentBackground(.hidden)
+                .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
+        }
    }
    
    /// Styles a list section header using the Compound design tokens.
@@ -32,6 +32,13 @@ extension PreviewTests {
        }
    }

+    @Test("CompoundTextFieldStyle")
+    func compoundTextFieldStyle() async throws {
+        for (index, preview) in CompoundTextFieldStyle_Previews._allPreviews.enumerated() {
+            try await assertSnapshots(matching: preview, step: index)
+        }
+    }
+
    @Test("CompoundToggleStyle")
    func compoundToggleStyle() async throws {
        for (index, preview) in CompoundToggleStyle_Previews._allPreviews.enumerated() {
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a0e8869897ac8ba0ee0595d2f058868d12231a7c47888304fa740525d23e2ab7
+size 198222
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b20272919b574830b6941fa1153a8487a0115da11a21e32d422522215b60f37b
+size 122608