Remove DesignKit package (#1886)

- Move button styles to Compound - Rename text style to AuthenticationTextStyle as its only in the auth flow. - Add the brand colour locally for now until its included in Compound. * Update snapshots. --------- Co-authored-by: Stefan Ceriu <stefan.ceriu@gmail.com>
2026-11-05 20:09:04 +00:00 · 2023-10-12 15:45:27 +01:00
parent 3838ca1064
commit 2c5662a278
60 changed files with 186 additions and 667 deletions
@@ -0,0 +1,176 @@
+//
+// Copyright 2022 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Compound
+import SwiftUI
+import SwiftUIIntrospect
+
+public extension TextFieldStyle where Self == AuthenticationTextFieldStyle {
+    static func authentication(labelText: String? = nil,
+                               footerText: String? = nil,
+                               isError: Bool = false,
+                               accessibilityIdentifier: String? = nil) -> AuthenticationTextFieldStyle {
+        AuthenticationTextFieldStyle(labelText: labelText.map(Text.init),
+                                     footerText: footerText.map(Text.init),
+                                     isError: isError,
+                                     accessibilityIdentifier: accessibilityIdentifier)
+    }
+    
+    @_disfavoredOverload
+    static func authentication(labelText: Text? = nil,
+                               footerText: Text? = nil,
+                               isError: Bool = false,
+                               accessibilityIdentifier: String? = nil) -> AuthenticationTextFieldStyle {
+        AuthenticationTextFieldStyle(labelText: labelText,
+                                     footerText: footerText,
+                                     isError: isError,
+                                     accessibilityIdentifier: accessibilityIdentifier)
+    }
+}
+
+/// The text field style used in authentication screens.
+public struct AuthenticationTextFieldStyle: TextFieldStyle {
+    @Environment(\.isEnabled) private var isEnabled
+    @Environment(\.colorScheme) private var colorScheme
+    
+    @FocusState private var isFocused: Bool
+    public let labelText: Text?
+    public let footerText: Text?
+    public let isError: Bool
+    public let accessibilityIdentifier: String?
+    
+    /// The color of the text field's border.
+    private var borderColor: Color {
+        isError ? .compound.textCriticalPrimary : .compound._borderTextFieldFocused
+    }
+    
+    /// 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 {
+        .compound.bgSubtleSecondary.opacity(isEnabled ? 1 : 0.5)
+    }
+    
+    /// The color of the placeholder text inside the text field.
+    private var placeholderColor: UIColor {
+        .compound.textPlaceholder
+    }
+    
+    /// The color of the label above the text field.
+    private var labelColor: Color {
+        isEnabled ? .compound.textPrimary : .compound.textDisabled
+    }
+    
+    /// The color of the footer label below the text field.
+    private var footerColor: Color {
+        isError ? .compound.textCriticalPrimary : .compound.textSecondary
+    }
+    
+    /// Creates the text field style configured as required.
+    /// - Parameters:
+    ///   - labelText: The text shown in the label above the field.
+    ///   - footerText: The text shown in the footer label below the field.
+    ///   - isError: Whether or not the text field is currently in the error state.
+    public init(labelText: Text? = nil, footerText: Text? = nil, isError: Bool = false, accessibilityIdentifier: String? = nil) {
+        self.labelText = labelText
+        self.footerText = footerText
+        self.isError = isError
+        self.accessibilityIdentifier = accessibilityIdentifier
+    }
+    
+    public func _body(configuration: TextField<_Label>) -> some View {
+        let rectangle = RoundedRectangle(cornerRadius: 14.0)
+        
+        return VStack(alignment: .leading, spacing: 8) {
+            labelText
+                .font(.compound.bodySM)
+                .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 {
+                        backgroundColor
+                            .clipShape(rectangle)
+                        rectangle
+                            .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
+                }
+ 
+            footerText
+                .tint(.compound.textLinkExternal)
+                .font(.compound.bodyXS)
+                .foregroundColor(footerColor)
+                .padding(.horizontal, 16)
+        }
+    }
+}
+
+struct ElementTextFieldStyle_Previews: PreviewProvider {
+    public static var previews: some View {
+        ScrollView {
+            VStack(spacing: 20) {
+                // Plain text field.
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(.authentication())
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(.authentication())
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(.authentication())
+                    .disabled(true)
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(.authentication(isError: true))
+                
+                // Text field with labels
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(.authentication(labelText: "Label", footerText: "Footer"))
+                TextField("Placeholder", text: .constant("Input text"))
+                    .textFieldStyle(.authentication(labelText: "Title", footerText: "Footer"))
+                TextField("Placeholder", text: .constant("Bad text"))
+                    .textFieldStyle(.authentication(labelText: "Title", footerText: "Footer", isError: true))
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(.authentication(labelText: "Title", footerText: "Footer"))
+                    .disabled(true)
+            }
+            .padding()
+        }
+    }
+}
@@ -76,7 +76,7 @@ struct LoginScreen: View {
                Text(L10n.commonUsername).foregroundColor(.compound.textPlaceholder)
            }
            .focused($isUsernameFocused)
-            .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
+            .textFieldStyle(.authentication(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
            .disableAutocorrection(true)
            .textContentType(.username)
            .autocapitalization(.none)
@@ -89,7 +89,7 @@ struct LoginScreen: View {
                Text(L10n.commonPassword).foregroundColor(.compound.textPlaceholder)
            }
            .focused($isPasswordFocused)
-            .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
+            .textFieldStyle(.authentication(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
            .textContentType(.password)
            .submitLabel(.done)
            .onSubmit(submit)
@@ -99,7 +99,7 @@ struct LoginScreen: View {
            Button(action: submit) {
                Text(L10n.actionContinue)
            }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
            .disabled(!context.viewState.canSubmit)
            .accessibilityIdentifier(A11yIdentifiers.loginScreen.continue)
        }
@@ -58,7 +58,7 @@ struct ServerConfirmationScreen: View {
            Button { context.send(viewAction: .confirm) } label: {
                Text(L10n.actionContinue)
            }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
            .accessibilityIdentifier(A11yIdentifiers.serverConfirmationScreen.continue)
            
            Button { context.send(viewAction: .changeServer) } label: {
@@ -60,10 +60,10 @@ struct ServerSelectionScreen: View {
    var serverForm: some View {
        VStack(alignment: .leading, spacing: 24) {
            TextField(L10n.commonServerUrl, text: $context.homeserverAddress)
-                .textFieldStyle(.elementInput(labelText: Text(L10n.screenChangeServerFormHeader),
-                                              footerText: Text(context.viewState.footerMessage),
-                                              isError: context.viewState.isShowingFooterError,
-                                              accessibilityIdentifier: A11yIdentifiers.changeServerScreen.server))
+                .textFieldStyle(.authentication(labelText: Text(L10n.screenChangeServerFormHeader),
+                                                footerText: Text(context.viewState.footerMessage),
+                                                isError: context.viewState.isShowingFooterError,
+                                                accessibilityIdentifier: A11yIdentifiers.changeServerScreen.server))
                .keyboardType(.URL)
                .autocapitalization(.none)
                .disableAutocorrection(true)
@@ -74,7 +74,7 @@ struct ServerSelectionScreen: View {
            Button(action: submit) {
                Text(context.viewState.buttonTitle)
            }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
            .disabled(context.viewState.hasValidationError)
            .accessibilityIdentifier(A11yIdentifiers.changeServerScreen.continue)
        }
@@ -83,7 +83,7 @@ struct SoftLogoutScreen: View {
        VStack(spacing: 14) {
            SecureField(L10n.commonPassword, text: $context.password)
                .focused($isPasswordFocused)
-                .textFieldStyle(.elementInput())
+                .textFieldStyle(.authentication())
                .textContentType(.password)
                .submitLabel(.done)
                .onSubmit(submit)
@@ -100,7 +100,7 @@ struct SoftLogoutScreen: View {
            Button(action: submit) {
                Text(L10n.actionNext)
            }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
            .disabled(!context.viewState.canSubmit)
            .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.next)
        }
@@ -111,7 +111,7 @@ struct SoftLogoutScreen: View {
        Button { context.send(viewAction: .continueWithOIDC) } label: {
            Text(L10n.actionContinue)
        }
-        .buttonStyle(.elementAction(.xLarge))
+        .buttonStyle(.compound(.primary))
    }

    /// Text shown if neither password or OIDC login is supported.
@@ -139,10 +139,10 @@ struct SoftLogoutScreen: View {
                .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataMessage)
                .padding(.bottom, 12)

-            Button(action: clearData) {
+            Button(role: .destructive, action: clearData) {
                Text(UntranslatedL10n.softLogoutClearDataSubmit)
            }
-            .buttonStyle(.elementAction(.xLarge, color: .compound.textCriticalPrimary))
+            .buttonStyle(.compound(.primary))
            .accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearData)
            .alert(UntranslatedL10n.softLogoutClearDataDialogTitle,
                   isPresented: $showingClearDataConfirmation) {
@@ -32,7 +32,7 @@ struct WaitlistScreen: View {
    /// The main content of the view to be shown in a scroll view.
    var content: some View {
        VStack(spacing: 16) {
-            Text(context.viewState.title.tinting(".", color: .element.brand))
+            Text(context.viewState.title.tinting(".", color: Asset.Colors.brandColor.swiftUIColor))
                .font(.compound.headingXLBold)
                .multilineTextAlignment(.center)
                .foregroundColor(.compound.textPrimary)
@@ -52,7 +52,7 @@ struct WaitlistScreen: View {
            Button { context.send(viewAction: .continue(userSession)) } label: {
                Text(L10n.actionContinue)
            }
-            .buttonStyle(.elementAction(.xLarge))
+            .buttonStyle(.compound(.primary))
        }
    }