ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-03 06:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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.
This commit is contained in:
Doug
2026-06-05 15:59:34 +01:00
committed by GitHub
parent 21d2f59b26
commit 097d055dbe
151 changed files with 574 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/SwiftUI/Styles/ElementTextFieldStyle.swift
-217
View File
@@ -1,217 +0,0 @@
//
// Copyright 2025 Element Creations Ltd.
// Copyright 2022-2025 New Vector Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
// Please see LICENSE files in the repository root for full details.
//
import Compound
import SwiftUI
import SwiftUIIntrospect
@MainActor
extension TextFieldStyle where Self == ElementTextFieldStyle {
static func element(labelText: String? = nil,
footerText: String? = nil,
state: ElementTextFieldStyle.State = .default,
accessibilityIdentifier: String? = nil) -> ElementTextFieldStyle {
ElementTextFieldStyle(labelText: labelText.map(Text.init),
footerText: footerText.map(Text.init),
state: state,
accessibilityIdentifier: accessibilityIdentifier)
}
@_disfavoredOverload
static func element(labelText: Text? = nil,
footerText: Text? = nil,
state: ElementTextFieldStyle.State = .default,
accessibilityIdentifier: String? = nil) -> ElementTextFieldStyle {
ElementTextFieldStyle(labelText: labelText,
footerText: footerText,
state: state,
accessibilityIdentifier: accessibilityIdentifier)
}
}
/// The text field style used in authentication screens.
@MainActor
struct ElementTextFieldStyle: @MainActor TextFieldStyle {
enum State {
case success
case error
case `default`
}
@Environment(\.isEnabled) private var isEnabled
@FocusState private var isFocused: Bool
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 {
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 {
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 {
isEnabled ? .compound.textPrimary : .compound.textDisabled
}
/// 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
}
}
/// 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.
init(labelText: Text? = nil, footerText: Text? = nil, state: State = .default, accessibilityIdentifier: String? = nil) {
self.labelText = labelText
self.footerText = footerText
self.state = state
self.accessibilityIdentifier = accessibilityIdentifier
}
@MainActor
func _body(configuration: TextField<_Label>) -> some View {
let rectangle = RoundedRectangle(cornerRadius: 14.0)
return VStack(alignment: .leading, spacing: 8) {
labelText
.font(.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 {
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
}
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(.custom(spacing: 4, alignment: .top))
.padding(.horizontal, 16)
}
}
}
}
struct ElementTextFieldStyle_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
VStack(spacing: 20) {
// Plain text field.
TextField("Placeholder", text: .constant(""))
.textFieldStyle(.element())
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(.element())
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(.element())
.disabled(true)
TextField("Placeholder", text: .constant("Web"))
.textFieldStyle(.element(state: .error))
// Text field with labels
TextField("Placeholder", text: .constant(""))
.textFieldStyle(.element(labelText: "Label", footerText: "Footer"))
TextField("Placeholder", text: .constant("Input text"))
.textFieldStyle(.element(labelText: "Title", footerText: "Footer"))
TextField("Placeholder", text: .constant("Bad text"))
.textFieldStyle(.element(labelText: "Title", footerText: "Footer", state: .error))
TextField("Placeholder", text: .constant(""))
.textFieldStyle(.element(labelText: "Title", footerText: "Footer"))
.disabled(true)
TextField("Placeholder", text: .constant(""))
.textFieldStyle(.element(labelText: "Title", footerText: "Footer", state: .success))
}
.previewLayout(.sizeThatFits)
.padding()
}
}
ElementX/Sources/Other/TestablePreview/TestablePreviewsDictionary.swift
-1
View File
@@ -38,7 +38,6 @@ enum TestablePreviewsDictionary {
"DeactivateAccountScreen_Previews" : DeactivateAccountScreen_Previews.self,
"DeclineAndBlockScreen_Previews" : DeclineAndBlockScreen_Previews.self,
"EditRoomAddressScreen_Previews" : EditRoomAddressScreen_Previews.self,
"ElementTextFieldStyle_Previews" : ElementTextFieldStyle_Previews.self,
"EmojiPickerScreenHeaderView_Previews" : EmojiPickerScreenHeaderView_Previews.self,
"EmojiPickerScreen_Previews" : EmojiPickerScreen_Previews.self,
"EmoteRoomTimelineView_Previews" : EmoteRoomTimelineView_Previews.self,
ElementX/Sources/Screens/Authentication/LoginScreen/View/LoginScreen.swift
+2 -8
View File
@@ -61,17 +61,11 @@ struct LoginScreen: View {
/// The form with text fields for username and password, along with a submit button.
var loginForm: some View {
VStack(alignment: .leading, spacing: 0) {
Text(L10n.screenLoginFormHeader)
.font(.compound.bodySM)
.foregroundColor(.compound.textPrimary)
.padding(.horizontal, 16)
.padding(.bottom, 8)
TextField(text: $context.username) {
Text(L10n.commonUsername).foregroundColor(.compound.textSecondary)
}
.focused($isUsernameFocused)
.textFieldStyle(.element(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
.textFieldStyle(.compound(labelText: L10n.screenLoginFormHeader, accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
.disableAutocorrection(true)
.textContentType(.username)
.autocapitalization(.none)
@@ -86,7 +80,7 @@ struct LoginScreen: View {
Text(L10n.commonPassword).foregroundColor(.compound.textSecondary)
}
.focused($isPasswordFocused)
.textFieldStyle(.element(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
.textFieldStyle(.compound(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
.textContentType(.password)
.submitLabel(.done)
.onSubmit(submit)
ElementX/Sources/Screens/Authentication/ServerSelectionScreen/View/ServerSelectionScreen.swift
+4 -4
View File
@@ -53,10 +53,10 @@ struct ServerSelectionScreen: View {
var serverForm: some View {
VStack(alignment: .leading, spacing: 24) {
TextField(L10n.commonServerUrl, text: $context.homeserverAddress)
.textFieldStyle(.element(labelText: Text(L10n.screenChangeServerFormHeader),
footerText: Text(context.viewState.footerMessage),
state: context.viewState.isShowingFooterError ? .error : .default,
accessibilityIdentifier: A11yIdentifiers.changeServerScreen.server))
.textFieldStyle(.compound(labelText: Text(L10n.screenChangeServerFormHeader),
footerText: Text(context.viewState.footerMessage),
state: context.viewState.isShowingFooterError ? .error : .default,
accessibilityIdentifier: A11yIdentifiers.changeServerScreen.server))
.keyboardType(.URL)
.autocapitalization(.none)
.disableAutocorrection(true)
ElementX/Sources/Screens/Authentication/SoftLogoutScreen/View/SoftLogoutScreen.swift
+2 -1
View File
@@ -6,6 +6,7 @@
// Please see LICENSE files in the repository root for full details.
//
import Compound
import SwiftUI
struct SoftLogoutScreen: View {
@@ -75,7 +76,7 @@ struct SoftLogoutScreen: View {
VStack(spacing: 14) {
SecureField(L10n.commonPassword, text: $context.password)
.focused($isPasswordFocused)
.textFieldStyle(.element())
.textFieldStyle(.compound())
.textContentType(.password)
.submitLabel(.done)
.onSubmit(submit)
ElementX/Sources/Screens/CreateRoomScreen/View/CreateRoomSpaceSelectionSheet.swift
+1 -3
View File
@@ -42,10 +42,8 @@ struct CreateRoomSpaceSelectionSheet: View {
}
}
}
.listStyle(.plain)
.environment(\.defaultMinListRowHeight, 66)
.scrollContentBackground(.hidden)
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.compoundList(.plain)
.navigationTitle(L10n.screenCreateRoomSpaceSelectionSheetTitle)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ElementX/Sources/Screens/RoomDirectorySearchScreen/View/RoomDirectorySearchScreen.swift
+1 -4
View File
@@ -42,10 +42,7 @@ struct RoomDirectorySearchScreen: View {
.listRowSeparator(.hidden)
}
}
.listStyle(.plain)
.environment(\.defaultMinListRowHeight, 48)
.scrollContentBackground(.hidden)
.background(Color.compound.bgCanvasDefault.ignoresSafeArea())
.compoundList(.plain)
.isSearching($context.isSearching)
.searchable(text: $context.searchString, placement: .navigationBarDrawer(displayMode: .always))
.navigationTitle(L10n.screenRoomDirectorySearchTitle)
ElementX/Sources/Screens/StartChatScreen/View/JoinRoomByAddressView.swift
+4 -4
View File
@@ -31,7 +31,7 @@ struct JoinRoomByAddressView: View {
}
}
private var textFieldState: ElementTextFieldStyle.State {
private var textFieldState: CompoundTextFieldStyle.State {
switch context.viewState.joinByAddressState {
case .addressFound:
.success
@@ -47,9 +47,9 @@ struct JoinRoomByAddressView: View {
VStack(spacing: 24) {
TextField(L10n.screenStartChatJoinRoomByAddressPlaceholder,
text: $context.roomAddress)
.textFieldStyle(.element(labelText: L10n.screenStartChatJoinRoomByAddressAction,
footerText: footerText,
state: textFieldState))
.textFieldStyle(.compound(labelText: L10n.screenStartChatJoinRoomByAddressAction,
footerText: footerText,
state: textFieldState))
.textInputAutocapitalization(.never)
.autocorrectionDisabled()
.textContentType(.URL)