From f2dba29375425e093c8750ac3b8a9a56abffbe07 Mon Sep 17 00:00:00 2001 From: El-Fitz <8971906+El-Fitz@users.noreply.github.com> Date: Fri, 17 Jan 2025 16:51:03 +0100 Subject: [PATCH] fix: labeled text field UI --- .../Components/Logo.swift | 2 +- .../AuthenticationIdentityInputView.swift | 2 +- .../WireDesign/Colors/ColorTheme.swift | 4 + .../LabeledTextField/LabeledTextField.swift | 95 +++++++++++++++++-- .../testColorSchemeVariants.dark.png | 4 +- .../testColorSchemeVariants.light.png | 4 +- ...testDynamicTypeVariants.accessibility1.png | 4 +- ...testDynamicTypeVariants.accessibility2.png | 4 +- ...testDynamicTypeVariants.accessibility3.png | 4 +- ...testDynamicTypeVariants.accessibility4.png | 4 +- ...testDynamicTypeVariants.accessibility5.png | 4 +- .../testDynamicTypeVariants.large.png | 4 +- .../testDynamicTypeVariants.medium.png | 4 +- .../testDynamicTypeVariants.small.png | 4 +- .../testDynamicTypeVariants.xLarge.png | 4 +- .../testDynamicTypeVariants.xSmall.png | 4 +- .../testDynamicTypeVariants.xxLarge.png | 4 +- .../testDynamicTypeVariants.xxxLarge.png | 4 +- 18 files changed, 122 insertions(+), 37 deletions(-) diff --git a/WireUI/Sources/WireAuthenticationUI/Components/Logo.swift b/WireUI/Sources/WireAuthenticationUI/Components/Logo.swift index 84b17c9655a..a8951aabbf5 100644 --- a/WireUI/Sources/WireAuthenticationUI/Components/Logo.swift +++ b/WireUI/Sources/WireAuthenticationUI/Components/Logo.swift @@ -24,7 +24,7 @@ struct Logo: View { Image(ImageResource(name: "logo", bundle: .module)) .resizable() .scaledToFit() - .padding(.all, min(geometry.size.height, geometry.size.width) / 2.97) + .padding(.all, min(geometry.size.height, geometry.size.width) / 3) } } } diff --git a/WireUI/Sources/WireAuthenticationUI/Views/AuthenticationIdentityInputView.swift b/WireUI/Sources/WireAuthenticationUI/Views/AuthenticationIdentityInputView.swift index 8f87db8040d..b09b69fa48e 100644 --- a/WireUI/Sources/WireAuthenticationUI/Views/AuthenticationIdentityInputView.swift +++ b/WireUI/Sources/WireAuthenticationUI/Views/AuthenticationIdentityInputView.swift @@ -49,7 +49,7 @@ package struct AuthenticationIdentityInputView: View { Text(L10n.Authentication.Identity.Input.body) .wireTextStyle(.body1) LabeledTextField( - isMandatory: true, + isMandatory: false, placeholder: L10n.Authentication.Identity.Input.Field.placeholder, title: L10n.Authentication.Identity.Input.Field.title, string: $identity diff --git a/WireUI/Sources/WireDesign/Colors/ColorTheme.swift b/WireUI/Sources/WireDesign/Colors/ColorTheme.swift index ca9dc7dc564..387d3b1a343 100644 --- a/WireUI/Sources/WireDesign/Colors/ColorTheme.swift +++ b/WireUI/Sources/WireDesign/Colors/ColorTheme.swift @@ -46,6 +46,9 @@ public enum ColorTheme { public static let secondaryText = UIColor(light: .gray70, dark: .gray60) public static let requiredField = UIColor(light: .red500Light, dark: .red500Dark) + + public static let labelTitle = UIColor(light: .gray80, dark: .gray50) + public static let onDisabled = UIColor(light: .gray80, dark: .gray50) } public enum Backgrounds { @@ -145,6 +148,7 @@ public enum ColorTheme { public enum Strokes { public static let outline = UIColor(light: .gray40, dark: .gray90) + public static let disabledOutline = UIColor(light: .gray50, dark: .gray80) public static let dividersOutlineVariant = UIColor(light: .gray20, dark: .gray100) } diff --git a/WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift b/WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift index eddc8d58ba2..15e95e8375f 100644 --- a/WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift +++ b/WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift @@ -21,14 +21,21 @@ import WireDesign import WireFoundation public struct LabeledTextField: View { + @Environment(\.isEnabled) private var isEnabled private let isMandatory: Bool private let placeholder: String? private let title: String? + @FocusState var isFocused: Bool @Binding private var string: String - public init(isMandatory: Bool = false, placeholder: String?, title: String?, string: Binding) { + public init( + isMandatory: Bool = false, + placeholder: String?, + title: String?, + string: Binding + ) { self.isMandatory = isMandatory self.placeholder = placeholder self.title = title @@ -36,7 +43,7 @@ public struct LabeledTextField: View { } public var body: some View { - VStack(alignment: .leading) { + VStack(alignment: .leading, spacing: 2) { if let title { ( isMandatory ? ( @@ -45,12 +52,74 @@ public struct LabeledTextField: View { .foregroundColor(ColorTheme.Base.requiredField.color) ) : Text(title) ) - .wireTextStyle(.h4) + .foregroundStyle(Self.titleColor(isEnabled: isEnabled, isFocused: isFocused)) + .wireTextStyle(.subline1) } - TextField(placeholder ?? "", text: $string) - .textFieldStyle(.roundedBorder) - .wireTextStyle(.body1) + HStack(spacing: 0) { + TextField(placeholder ?? "", text: $string) + .wireTextStyle(.body1) + .focused($isFocused) + .foregroundStyle(Self.labelColor(isEnabled: isEnabled)) + .padding(.vertical, 12) + if !string.isEmpty && isEnabled { + Button(action: { + string = "" + }, label: { + Image(systemName: "xmark.circle.fill") + .foregroundStyle(.black) + .frame(width: 16, height: 16) + .padding(19) + }) + } + } + .padding(.leading, 16) + .background { + if #available(iOS 17.0, *) { + RoundedRectangle(cornerRadius: 12) + .fill(Self.labelBackgroundColor(isEnabled: isEnabled)) + .stroke(Self.labelBorderColor(isEnabled: isEnabled, isFocused: isFocused), lineWidth: 1) + } else { + RoundedRectangle(cornerRadius: 12) + .stroke(Self.labelBorderColor(isEnabled: isEnabled, isFocused: isFocused), lineWidth: 1) + .background(Self.labelBackgroundColor(isEnabled: isEnabled)) + .cornerRadius(12) + } + } + } + } + + static func titleColor(isEnabled: Bool, isFocused: Bool) -> Color { + if isEnabled && isFocused { + return ColorTheme.Base.onPrimaryVariant.color + } + if isEnabled { + return ColorTheme.Base.labelTitle.color } + return ColorTheme.Base.labelTitle.color + } + + static func labelColor(isEnabled: Bool) -> Color { + if isEnabled { + return .primaryText + } + return ColorTheme.Base.onDisabled.color + } + + static func labelBackgroundColor(isEnabled: Bool) -> Color { + if isEnabled { + return .clear + } + return ColorTheme.Backgrounds.background.color + } + + static func labelBorderColor(isEnabled: Bool, isFocused: Bool) -> Color { + if isEnabled && isFocused { + return ColorTheme.Base.onPrimaryVariant.color + } + if isEnabled { + return ColorTheme.Strokes.outline.color + } + return ColorTheme.Strokes.outline.color } } @@ -61,22 +130,34 @@ public struct LabeledTextField: View { title: nil, string: .constant("") ) + .padding() LabeledTextField( isMandatory: false, placeholder: "Placeholder", title: "Some Title", string: .constant("") ) + .padding() LabeledTextField( isMandatory: true, placeholder: "Placeholder", title: "Some Title", string: .constant("") ) + .padding() + LabeledTextField( + isMandatory: true, + placeholder: "Placeholder", + title: "Some Title", + string: .constant("Lorem ipsum dolor sit amet, consectetur [...]") + ) + .padding() LabeledTextField( isMandatory: true, placeholder: "Placeholder", title: "Some Title", - string: .constant("Lorem ipsum sic amet [...]") + string: .constant("Lorem ipsum dolor sit amet, consectetur [...]") ) + .padding() + .disabled(true) } diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.dark.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.dark.png index a0b4f0d06c7..ba1c9939179 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.dark.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a561d63d5b51cda171995a0022b12ff71b423ec033ffde632743099ede00e6b6 -size 113598 +oid sha256:7dedf364c0b7e82927a233bbf8fc3d45b90a4be7a932b66854781924e7b604cb +size 113905 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.light.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.light.png index 1aa19b3ee15..5f03fdc36d9 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.light.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testColorSchemeVariants.light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cddefc3e6026bf59bb956f55319bf265d30d13e345546cc63c7a4f9c4e6fbd23 -size 113176 +oid sha256:e06ce3b212555232f203678bc654016d3b3ec1fe1059c33b15e291fa6a26effc +size 113709 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility1.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility1.png index 01ff1d0f786..c36a937e8f5 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility1.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bd72ed28875d0853d2ba615ae8d505331fc30fb6b773bd69c6afe000e5deaaae -size 146722 +oid sha256:2267c79d2e841568f7b1d8f2542ad7a082c4b0e7fd526d42d48220abe2b59187 +size 147218 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility2.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility2.png index 83adfa78251..b1883509420 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility2.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5fe7780b0904ee521c39a398c0aff261e1398996894fbcb563287da4bc04b75c -size 162667 +oid sha256:1fd151f601983901f72fb243f8157010662284aef010b30e2a134c9eec12238c +size 161731 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility3.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility3.png index 4c27d100924..282477875ef 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility3.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility3.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b7cc75cb013e80dca5156ce64bf6e4bb1c9ff402fbcf157daaed153bcee76814 -size 186950 +oid sha256:92c7b3f650d2d0d124f71b84ed885d9f44af11d89a2dd95a970fb47dca117cbd +size 186049 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility4.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility4.png index 1a2cc7403ef..619a4f78e3f 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility4.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility4.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:18fc00cb38b900499241feebb95e20f03159392174841b3d5ed38a33a3323ec9 -size 205772 +oid sha256:1cc32d7f856322e7590166a29e4774c8fd83024769ebadc6059504957740f427 +size 211067 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility5.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility5.png index d9d5816e524..ee3ddbf1acb 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility5.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.accessibility5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:58426bd2e77b427e6963827cb3b44476ff57db511c7ee78d17ffccc5bc4732d5 -size 206737 +oid sha256:dfdba4aff240376e939cd5d9a3e9661385f20c3b43f9a02687e74470cca0f3db +size 207492 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.large.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.large.png index 1aa19b3ee15..5f03fdc36d9 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.large.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.large.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:cddefc3e6026bf59bb956f55319bf265d30d13e345546cc63c7a4f9c4e6fbd23 -size 113176 +oid sha256:e06ce3b212555232f203678bc654016d3b3ec1fe1059c33b15e291fa6a26effc +size 113709 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.medium.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.medium.png index 804cf00cb4e..75f857b3d17 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.medium.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.medium.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9daa108f067ab51fa7d0ed3321f35abf00415ffd58b79312da2c978baaf7c7c8 -size 111172 +oid sha256:ce20c3913a32ccd3e61187dc713f156d00d016089106ea7f5ddfc89c95ce3b7a +size 111643 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.small.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.small.png index d69969a80b3..7e4d79d255e 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.small.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.small.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:268318776faaaadb0228ef4b9d6771259d3167101866e7aaaaa6334d10dde2ae -size 109773 +oid sha256:dd894482e9952837968abd93d08ea0bf9cd89dd642fb68cb623ac77380a60aa2 +size 110514 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xLarge.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xLarge.png index fa01d768983..a59b3ee2764 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xLarge.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xLarge.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:be853a41d6de5cf4b38b2ee775b3dbba6c4707834d29b48b856d2cf71654f33b -size 119134 +oid sha256:50162fe18b352f578407c6a06c588157943956cc8034880a5984b203671beee0 +size 119306 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xSmall.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xSmall.png index c1ece18be70..e1093f0f38a 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xSmall.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xSmall.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d976c4edf45591cad666c3be705341e2b9182008ebc835eca69fa8a225cc6601 -size 108228 +oid sha256:8d54eb5208db31ae40e4593bc216b7f8537b603e27f1faa47c9aef5b49373cce +size 109520 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxLarge.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxLarge.png index 22f5dba9163..6e823067fa6 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxLarge.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxLarge.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4fc2c7ed8e704d0356eb765baf0d10d00bd67832c634c08a4c981c7f7ef3e63c -size 127861 +oid sha256:5c4424087b7bc87e069ced87572aa5b76b99f9107ca048ae747bc12caeac122b +size 127670 diff --git a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxxLarge.png b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxxLarge.png index bc9b7445a0d..7894e514b41 100644 --- a/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxxLarge.png +++ b/WireUI/Tests/WireAuthenticationUITests/Resources/ReferenceImages/AuthenticationIdentityInputViewTests/testDynamicTypeVariants.xxxLarge.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1fa6a2969669e883d8fae4681ecbdc7528262951157a3a96ec3c5dc25d1b8e8c -size 133496 +oid sha256:7a791242aa92d29177509ee9f87d83fa6b30a2897a9e86b0cf6af65639a7de5c +size 133494