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.
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
@@ -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)
@@ -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)
@@ -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)
@@ -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 {
@@ -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)
@@ -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)