diff --git a/Sources/DashUIKit/Components/SearchBar.swift b/Sources/DashUIKit/Components/SearchBar.swift index 97ca5f4..cded48d 100644 --- a/Sources/DashUIKit/Components/SearchBar.swift +++ b/Sources/DashUIKit/Components/SearchBar.swift @@ -34,7 +34,6 @@ public struct SearchBar: View { private let placeholder: String @FocusState private var isFocused: Bool - @State private var isEditing: Bool = false public init( text: Binding, @@ -58,20 +57,12 @@ public struct SearchBar: View { .background(Color.dash.searchBackground) .clipShape(RoundedRectangle(cornerRadius: Layout.fieldCornerRadius, style: .continuous)) - if isEditing { + if isFocused { cancelButton .transition(.move(edge: .trailing).combined(with: .opacity)) } } - .animation(.easeInOut(duration: Layout.animationDuration), value: isEditing) - .onAppear { - isEditing = isFocused - } - .onChange(of: isFocused) { _, focused in - withAnimation(.easeInOut(duration: Layout.animationDuration)) { - isEditing = focused - } - } + .animation(.easeInOut(duration: Layout.animationDuration), value: isFocused) } private var magnifyingGlass: some View { @@ -103,9 +94,6 @@ public struct SearchBar: View { Button( action: { text = "" - withAnimation(.easeInOut(duration: Layout.animationDuration)) { - isEditing = false - } isFocused = false }, label: { @@ -130,6 +118,8 @@ public struct SearchBar: View { EmptyView() } .focused($isFocused) + .dashFont(.subhead) + .foregroundStyle(Color.dash.primaryText) .tint(Color.dash.primaryText) } } @@ -138,11 +128,25 @@ public struct SearchBar: View { #if DEBUG -#Preview { +#Preview("Empty") { @Previewable @State var text = "" SearchBar(text: $text) .padding() } +#Preview("Typed") { + @Previewable @State var text = "Dash" + SearchBar(text: $text) + .padding() +} + +#Preview("Typed, dark") { + @Previewable @State var text = "Dash" + SearchBar(text: $text) + .padding() + .background(Color.dash.primaryBackground) + .preferredColorScheme(.dark) +} + #endif // DEBUG #endif // canImport(UIKit) diff --git a/docs/buttons-and-inputs.md b/docs/buttons-and-inputs.md index 0e2cb7b..a41c673 100644 --- a/docs/buttons-and-inputs.md +++ b/docs/buttons-and-inputs.md @@ -72,8 +72,10 @@ SearchBar(text: $query, placeholder: "Search coins") // placeholder optional Behavior: -- Uses `@FocusState`; an animated **Cancel** button - slides in while editing (clears text + resigns focus on tap). +- An animated **Cancel** button slides in while the field has focus (clears text + resigns + focus on tap). +- Typed text is `.subhead` in `Color.dash.primaryText`, the same size as the placeholder. + Like every `Font.dash` token it is a fixed size and does not scale with Dynamic Type. Default placeholder is the localized "Search". Background uses `Color.dash.searchBackground`.