Merge pull request #48 from SchweizerischeBundesbahnen/develop

SBBTextFields improvements

ReleaseNotes.md

@@ -1,5 +1,10 @@
 # Release Notes SBBDesignSystemMobileSwiftUI for iOS & SwiftUI
 
+## V1.0.2 - 08 March 2023
+
+### Features
+* Some SBBTextfields improvements: Boxed available. Clear button can be disabled. Bottom line optional even in edit mode.
+
 ## V1.0.1 - 25 January 2022
 
 ### Features

SBBDesignSystemMobileSwiftUI.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -5,8 +5,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/pointfreeco/swift-snapshot-testing",
       "state" : {
-        "revision" : "f8a9c997c3c1dab4e216a8ec9014e23144cbab37",
-        "version" : "1.9.0"
+        "revision" : "cef5b3f6f11781dd4591bdd1dd0a3d22bd609334",
+        "version" : "1.11.0"
       }
     }
   ],

SBBDesignSystemMobileSwiftUI/Views/SBBTextField.swift

@@ -28,6 +28,8 @@ public struct SBBTextField: View {
     let additionalAccessibilityText: String?
     let icon: Image?
     let showBottomLine: Bool
+    let showClearButtonWhenEditing: Bool
+    let boxed: Bool
 
     /**
      Returns a SBBTextField with a label and an optional Image.
@@ -38,8 +40,10 @@ public struct SBBTextField: View {
         - error: An optional label used to display errors with user input. Displayed below the text in red color and adding a red separator line below the entire SBBTextField.
         - icon: An optional Image to be shown on the leading edge of the SBBTextField.
         - showBottomLine: Shows or hides a separator line at the bottom of the View (typically only false for last elements in a List).
+        - showClearButtonWhenEditing: Shows or hides the clear button when editing a text.
+        - boxed: shows the Textfield inside a white box when enabled, and with a clear background when disabled (default). Clear background does not work inside SBBFormGroup.
      */
-    public init(text: Binding<String>, label: String? = nil, error: String? = nil, additionalAccessibilityText: String? = nil, icon: Image? = nil, showBottomLine: Bool = true) {
+    public init(text: Binding<String>, label: String? = nil, error: String? = nil, additionalAccessibilityText: String? = nil, icon: Image? = nil, showBottomLine: Bool = true, showClearButtonWhenEditing: Bool = true, boxed: Bool = false) {
         self._text = text
         if let label = label {
             self.label = NSLocalizedString(label, comment: "")
@@ -58,22 +62,33 @@ public struct SBBTextField: View {
         }
         self.icon = icon
         self.showBottomLine = showBottomLine
+        self.showClearButtonWhenEditing = showClearButtonWhenEditing
+        self.boxed = boxed
     }
 
     private var bottomLineColor: Color {
         if error != nil {
             return .sbbColor(.red)
         }
         switch (isEnabled, isEditing, showBottomLine) {
-        case (true, true, _):
+        case (true, true, true):
             return .sbbColor(.textBlack)
+        case (true, true, false):
+            return Color.clear
         case (_, _, true):
             return .sbbColorInternal(.textfieldLineInactive)
         default:
             return Color.clear
         }
     }
 
+    private var hasError: Bool {
+        guard let error = error, !error.isEmpty else {
+            return false
+        }
+        return true
+    }
+
     public var body: some View {
         HStack(alignment: .top, spacing: 8) {
             if let icon = icon {
@@ -121,7 +136,7 @@ public struct SBBTextField: View {
                     .frame(minHeight: 48)
                     .overlay(
                         Group {
-                            if isEditing && !text.isEmpty {
+                            if showClearButtonWhenEditing && isEditing && !text.isEmpty {
                                 Button(action: emptyText) {
                                     Image(sbbName: "cross", size: .small)
                                         .accessibility(label: Text("Delete input".localized))
@@ -143,6 +158,16 @@ public struct SBBTextField: View {
         }
             .padding(.leading, 16)
             .foregroundColor(isEnabled ? .sbbColor(.textBlack) : .sbbColor(.metal))
+            .background(boxed ? Color.sbbColor(.viewBackground) : .clear)
+            .cornerRadius(boxed ? 16 : 0)
+            .overlay (
+                VStack {
+                    if boxed {
+                        RoundedRectangle(cornerRadius: 16).stroke(lineWidth: 1).foregroundColor(hasError ? .sbbColor(.red) : .clear)
+                    } else {
+                        EmptyView()
+                    }
+                } , alignment: .center)
     }
 
     private func emptyText() {

SBBDesignSystemMobileSwiftUIDemo/Views/DetailViews/TextFieldView.swift

@@ -11,39 +11,63 @@ struct TextFieldView: View {
     @State private var text = "I like trains"
     @State private var disabled = false
     @State private var showBottomLine = false
+    @State private var showClearButton = true
+    @State private var boxed = false
     @EnvironmentObject var model: TextFieldViewModel
 
     var body: some View {
         ScrollView(showsIndicators: false) {
             VStack(spacing: 16) {
-                SBBFormGroup(title: "With placeholder") {
-                    SBBTextField(text: $text, label: "Placeholder", error: model.error, showBottomLine: showBottomLine)
-                        .disabled(disabled)
+                Group {
+                    Text("Inside a SBBFormGroup")
+                        .underline()
+                    SBBFormGroup(title: "With placeholder") {
+                        SBBTextField(text: $text, label: "Placeholder", error: model.error, showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton)
+                            .disabled(disabled)
+                    }
+                    SBBFormGroup(title: "Without placeholder") {
+                        SBBTextField(text: $text, error: model.error, showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton)
+                            .disabled(disabled)
+                    }
+                    SBBFormGroup(title: "With placeholder & icon") {
+                        SBBTextField(text: $text, label: "Placeholder", error: model.error, icon: Image(sbbName: "route-circle-start", size: .small), showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton)
+                            .disabled(disabled)
+                    }
+                    SBBFormGroup(title: "Without placeholder, with icon") {
+                        SBBTextField(text: $text, error: model.error, icon: Image(sbbName: "route-circle-start", size: .small), showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton)
+                            .disabled(disabled)
+                    }
                 }
-                SBBFormGroup(title: "Without placeholder") {
-                    SBBTextField(text: $text, error: model.error, showBottomLine: showBottomLine)
+                Group {
+                    Text("Outside a SBBFormGroup (Boxing possible)")
+                        .underline()
+                    SBBCheckBox(isOn: $boxed, text: Text("Boxed"), showBottomLine: false)
+                    SBBTextField(text: $text, label: "Placeholder", error: model.error, showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton, boxed: boxed)
                         .disabled(disabled)
-                }
-                SBBFormGroup(title: "With placeholder & icon") {
-                    SBBTextField(text: $text, label: "Placeholder", error: model.error, icon: Image(sbbName: "route-circle-start", size: .small), showBottomLine: showBottomLine)
+                    SBBTextField(text: $text, error: model.error, showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton, boxed: boxed)
                         .disabled(disabled)
-                }
-                SBBFormGroup(title: "Without placeholder, with icon") {
-                    SBBTextField(text: $text, error: model.error, icon: Image(sbbName: "route-circle-start", size: .small), showBottomLine: showBottomLine)
+                    SBBTextField(text: $text, label: "Placeholder", error: model.error, icon: Image(sbbName: "route-circle-start", size: .small), showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton, boxed: boxed)
+                        .disabled(disabled)
+                    SBBTextField(text: $text, error: model.error, icon: Image(sbbName: "route-circle-start", size: .small), showBottomLine: showBottomLine, showClearButtonWhenEditing: showClearButton, boxed: boxed)
                         .disabled(disabled)
                 }
-                Text("Content is: \(text)")
-                Button("Set default text") {
-                    self.text = "I like trains"
-                }
+                Group {
+                    Text("Content is: \(text)")
+                    Button("Set default text") {
+                        self.text = "I like trains"
+                    }
                     .buttonStyle(SBBTertiaryButtonStyle(size: .small))
-                Button("Clear text") {
-                    self.text = ""
-                }
+                    Button("Clear text") {
+                        self.text = ""
+                    }
                     .buttonStyle(SBBTertiaryButtonStyle(size: .small))
-                SBBCheckBox(isOn: $disabled, text: Text("Disabled"), showBottomLine: false)
-                SBBCheckBox(isOn: $showBottomLine, text: Text("Show bottom line"), showBottomLine: false)
-                SBBCheckBox(isOn: $model.showError, text: Text("Show Error"), showBottomLine: false)
+                }
+                Group {
+                    SBBCheckBox(isOn: $disabled, text: Text("Disabled"), showBottomLine: false)
+                    SBBCheckBox(isOn: $showBottomLine, text: Text("Show bottom line"), showBottomLine: false)
+                    SBBCheckBox(isOn: $model.showError, text: Text("Show Error"), showBottomLine: false)
+                    SBBCheckBox(isOn: $showClearButton, text: Text("Show clear button when editing"), showBottomLine: false)
+                }
             }
                 .sbbScreenPadding()
         }