add bordered style for input field

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/InputFieldPreview.swift

@@ -52,6 +52,10 @@ struct InputFieldPreview: View {
         Toggle("Required", isOn: self.$model.isRequired)
         Toggle("Secure Input", isOn: self.$model.isSecureInput)
         SizePicker(selection: self.$model.size)
+        Picker("Style", selection: self.$model.style) {
+          Text("Light").tag(InputFieldVM.Style.light)
+          Text("Bordered").tag(InputFieldVM.Style.bordered)
+        }
         SubmitTypePicker(selection: self.$model.submitType)
         UniversalColorPicker(
           title: "Tint Color",
@@ -65,6 +69,10 @@ struct InputFieldPreview: View {
             self.model.title = newValue ? "Title" : nil
           }
         ))
+        Picker("Title Position", selection: self.$model.titlePosition) {
+          Text("Inside").tag(InputFieldVM.TitlePosition.inside)
+          Text("Outside").tag(InputFieldVM.TitlePosition.outside)
+        }
       }
     }
     .toolbar {

Sources/ComponentsKit/Components/InputField/Models/InputFieldStyle.swift

@@ -0,0 +1,8 @@
+import Foundation
+
+extension InputFieldVM {
+  public enum Style: Hashable {
+    case light
+    case bordered
+  }
+}

Sources/ComponentsKit/Components/InputField/Models/InputFieldVM.swift

@@ -54,6 +54,8 @@ public struct InputFieldVM: ComponentVM {
   /// Defaults to `.medium`.
   public var size: ComponentSize = .medium
 
+  public var style: Style = .light
+
   /// The type of the submit button on the keyboard.
   ///
   /// Defaults to `.return`.
@@ -118,7 +120,12 @@ extension InputFieldVM {
     }
   }
   var backgroundColor: UniversalColor {
-    return self.color?.background ?? .content1
+    switch self.style {
+    case .light:
+      return self.color?.background ?? .content1
+    case .bordered:
+      return .background
+    }
   }
   var foregroundColor: UniversalColor {
     let color = self.color?.main ?? .foreground
@@ -131,6 +138,24 @@ extension InputFieldVM {
       return .secondaryForeground.enabled(self.isEnabled)
     }
   }
+  var borderWidth: CGFloat {
+    switch self.style {
+    case .light:
+      return 0
+    case .bordered:
+      switch self.size {
+      case .small:
+        return BorderWidth.small.value
+      case .medium:
+        return BorderWidth.medium.value
+      case .large:
+        return BorderWidth.large.value
+      }
+    }
+  }
+  var borderColor: UniversalColor {
+    return (self.color?.main ?? .content3).enabled(self.isEnabled)
+  }
 }
 
 // MARK: - UIKit Helpers

Sources/ComponentsKit/Components/InputField/SUInputField.swift

@@ -92,7 +92,16 @@ public struct SUInputField<FocusValue: Hashable>: View {
       }
       .clipShape(
         RoundedRectangle(
-          cornerRadius: self.model.cornerRadius.value()
+          cornerRadius: self.model.cornerRadius.value(),
+        )
+      )
+      .overlay(
+        RoundedRectangle(
+          cornerRadius: self.model.cornerRadius.value(),
+        )
+        .stroke(
+          self.model.borderColor.color,
+          lineWidth: self.model.borderWidth
         )
       )
     }

Sources/ComponentsKit/Components/InputField/UKInputField.swift

@@ -83,6 +83,12 @@ open class UKInputField: UIView, UKComponent {
 
     self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.handleTap)))
     self.textField.addTarget(self, action: #selector(self.handleTextChange), for: .editingChanged)
+
+    if #available(iOS 17.0, *) {
+      self.registerForTraitChanges([UITraitUserInterfaceStyle.self]) { (view: Self, _: UITraitCollection) in
+        view.handleTraitChanges()
+      }
+    }
   }
 
   @objc private func handleTap() {
@@ -168,8 +174,19 @@ open class UKInputField: UIView, UKComponent {
       height: min(size.height, self.model.height)
     )
   }
-
+  
+  open override func traitCollectionDidChange(
+    _ previousTraitCollection: UITraitCollection?
+  ) {
+    super.traitCollectionDidChange(previousTraitCollection)
+    self.handleTraitChanges()
+  }
+  
   // MARK: Helpers
+  
+  @objc private func handleTraitChanges() {
+    Self.Style.mainView(self, model: self.model)
+  }
 
   private func updateCornerRadius() {
     self.layer.cornerRadius = self.model.cornerRadius.value(for: self.bounds.height)
@@ -186,6 +203,8 @@ extension UKInputField {
     ) {
       view.backgroundColor = model.backgroundColor.uiColor
       view.layer.cornerRadius = model.cornerRadius.value(for: view.bounds.height)
+      view.layer.borderWidth = model.borderWidth
+      view.layer.borderColor = model.borderColor.cgColor
     }
     static func titleLabel(
       _ label: UILabel,