updated entry fields

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

VDS.xcodeproj/project.pbxproj

@@ -66,6 +66,7 @@
 		EAA5EEB528ECBFB4003B3210 /* ImageLabelAttribute.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAA5EEB428ECBFB4003B3210 /* ImageLabelAttribute.swift */; };
 		EAA5EEB728ECC03A003B3210 /* ToolTipLabelAttribute.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAA5EEB628ECC03A003B3210 /* ToolTipLabelAttribute.swift */; };
 		EAA5EEB928ECD24B003B3210 /* Icons.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = EAA5EEB828ECD24B003B3210 /* Icons.xcassets */; };
+		EAA5EEE028F49DB3003B3210 /* Colorable.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAA5EEDF28F49DB3003B3210 /* Colorable.swift */; };
 		EAB1D29A28A5611D00DAE764 /* SelectorGroupModelable.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAB1D29928A5611D00DAE764 /* SelectorGroupModelable.swift */; };
 		EAB1D29C28A5618900DAE764 /* RadioButtonGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAB1D29B28A5618900DAE764 /* RadioButtonGroup.swift */; };
 		EAB1D29E28A5619500DAE764 /* RadioButtonGroupModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAB1D29D28A5619500DAE764 /* RadioButtonGroupModel.swift */; };
@@ -175,6 +176,7 @@
 		EAA5EEB428ECBFB4003B3210 /* ImageLabelAttribute.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageLabelAttribute.swift; sourceTree = "<group>"; };
 		EAA5EEB628ECC03A003B3210 /* ToolTipLabelAttribute.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ToolTipLabelAttribute.swift; sourceTree = "<group>"; };
 		EAA5EEB828ECD24B003B3210 /* Icons.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Icons.xcassets; sourceTree = "<group>"; };
+		EAA5EEDF28F49DB3003B3210 /* Colorable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Colorable.swift; sourceTree = "<group>"; };
 		EAB1D29928A5611D00DAE764 /* SelectorGroupModelable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelectorGroupModelable.swift; sourceTree = "<group>"; };
 		EAB1D29B28A5618900DAE764 /* RadioButtonGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonGroup.swift; sourceTree = "<group>"; };
 		EAB1D29D28A5619500DAE764 /* RadioButtonGroupModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonGroupModel.swift; sourceTree = "<group>"; };
@@ -356,6 +358,7 @@
 			children = (
 				EA3361C4289030FC0071C351 /* Accessable.swift */,
 				EA4DB2FC28D3D0CA00103EE3 /* AnyEquatable.swift */,
+				EAA5EEDF28F49DB3003B3210 /* Colorable.swift */,
 				EA3361AC288B26190071C351 /* DataTrackable.swift */,
 				EA3361A9288B25E40071C351 /* Disabling.swift */,
 				EAF7F0A1289AFB3900B287F5 /* Errorable.swift */,
@@ -677,6 +680,7 @@
 				EAA5EEB328EB6A66003B3210 /* TextEntryField.swift in Sources */,
 				EA89201328B568D8006B9984 /* RadioBox.swift in Sources */,
 				EA84F6B128B94A2500D67ABC /* CodableColor.swift in Sources */,
+				EAA5EEE028F49DB3003B3210 /* Colorable.swift in Sources */,
 				EA3362402892EF6C0071C351 /* Label.swift in Sources */,
 				EAF7F0B3289B1ADC00B287F5 /* ActionLabelAttribute.swift in Sources */,
 				EA33622E2891EA3C0071C351 /* DispatchQueue+Once.swift in Sources */,

VDS/Components/TextFields/EntryField/EntryField.swift

@@ -16,7 +16,7 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    private var stackView: UIStackView = {
+    internal var stackView: UIStackView = {
         return UIStackView().with {
             $0.translatesAutoresizingMaskIntoConstraints = false
             $0.axis = .vertical
@@ -24,19 +24,17 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
         }
     }()
         
-    private var containerStackView: UIStackView = {
+    internal var titleLabel = Label().with {
-        return UIStackView().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
-            $0.translatesAutoresizingMaskIntoConstraints = false
+    }
-            $0.axis = .horizontal
-            $0.distribution = .fill
-            $0.spacing = 12
-        }
-    }()
     
-    private var titleLabel = Label()
+    internal var errorLabel = Label().with {
-    private var errorLabel = Label()
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
-    private var helperLabel = Label()
+    }
-    private var successLabel = Label()
+    
+    internal var helperLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+    }
     
     internal var containerView: UIView = {
         return UIView().with {
@@ -44,11 +42,13 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
         }
     }()
     
+    internal var tooltipView: UIView?
+    
     //--------------------------------------------------
     // MARK: - Configuration Properties
     //--------------------------------------------------
     // Sizes are from InVision design specs.
-    public let containerSize = CGSize(width: 45, height: 45)
+    internal let containerSize = CGSize(width: 45, height: 45)
     
     internal let primaryColorConfig =  DisabledSurfaceColorConfiguration<DefaultLabelModel>().with {
         $0.disabled.lightColor = VDSColor.interactiveDisabledOnlight
@@ -64,38 +64,14 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
         $0.enabled.darkColor = VDSColor.elementsSecondaryOndark
     }
     
-    internal var backgroundColorConfiguration: EntryFieldColorConfiguration = {
+    internal lazy var backgroundColorConfiguration: AnyColorable = {
-        return EntryFieldColorConfiguration().with {
+        return getBackgroundConfig()
-            $0.enabled.lightColor = VDSFormControlsColor.backgroundOnlight
-            $0.enabled.darkColor = VDSFormControlsColor.backgroundOndark
-            $0.disabled.lightColor = VDSFormControlsColor.backgroundOnlight
-            $0.disabled.darkColor = VDSFormControlsColor.backgroundOndark
-            
-            //error/success doesn't care enabled/disable
-            $0.error.lightColor = VDSColor.feedbackErrorBackgroundOnlight
-            $0.error.darkColor = VDSColor.feedbackErrorBackgroundOndark
-            $0.success.lightColor = VDSColor.feedbackSuccessBackgroundOnlight
-            $0.success.darkColor = VDSColor.feedbackSuccessBackgroundOndark
-            
-        }
     }()
 
-    internal var borderColorConfiguration: EntryFieldColorConfiguration = {
+    internal lazy var borderColorConfiguration: AnyColorable = {
-        return EntryFieldColorConfiguration().with {
+        return getBorderConfig()
-            $0.enabled.lightColor = VDSFormControlsColor.borderOnlight
-            $0.enabled.darkColor = VDSFormControlsColor.borderOnlight
-            $0.disabled.lightColor = VDSColor.interactiveDisabledOnlight
-            $0.disabled.darkColor = VDSColor.interactiveDisabledOndark
-            
-            //error/success doesn't care enabled/disable
-            $0.error.lightColor = VDSColor.feedbackErrorOnlight
-            $0.error.darkColor = VDSColor.feedbackErrorOndark
-            $0.success.lightColor = VDSColor.feedbackSuccessOnlight
-            $0.success.darkColor = VDSColor.feedbackSuccessOndark
-        }
     }()
 
-    
     //--------------------------------------------------
     // MARK: - Public Properties
     //--------------------------------------------------
@@ -111,15 +87,6 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
     @Proxy(\.model.errorText)
     open var errorText: String?
             
-    @Proxy(\.model.showSuccess)
-    open var showSuccess: Bool
-    
-    @Proxy(\.model.successText)
-    open var successText: String?
-    
-    @Proxy(\.model.helperTextPlacement)
-    open var helperTextPlacement: HelperTextPlacement
-    
     @Proxy(\.model.tooltipTitle)
     open var tooltipTitle: String?
     
@@ -156,7 +123,6 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
     //--------------------------------------------------
     internal var heightConstraint: NSLayoutConstraint?
     internal var widthConstraint: NSLayoutConstraint?
-    internal var minWidthConstraint: NSLayoutConstraint?
         
     //--------------------------------------------------
     // MARK: - Lifecycle
@@ -179,29 +145,87 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
         
         widthConstraint = containerView.widthAnchor.constraint(equalToConstant: 0)
                 
-        minWidthConstraint = containerView.widthAnchor.constraint(greaterThanOrEqualToConstant: 0)
+        let container = getContainer()
-        minWidthConstraint?.isActive = true
-        
-        containerStackView.addArrangedSubview(containerView)
         stackView.addArrangedSubview(titleLabel)
-        stackView.addArrangedSubview(containerStackView)
+        stackView.addArrangedSubview(container)
         stackView.addArrangedSubview(errorLabel)
-        stackView.addArrangedSubview(successLabel)
+        stackView.addArrangedSubview(helperLabel)
 
         stackView.setCustomSpacing(4, after: titleLabel)
-        stackView.setCustomSpacing(8, after: containerStackView)
+        stackView.setCustomSpacing(8, after: container)
         stackView.setCustomSpacing(8, after: errorLabel)
-        stackView.setCustomSpacing(8, after: successLabel)
 
         stackView.topAnchor.constraint(equalTo: topAnchor).isActive = true
         stackView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
         stackView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
         stackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
                 
-        titleLabel.textColorConfiguration = primaryColorConfig
+        titleLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable()
-        successLabel.textColorConfiguration = primaryColorConfig
+        errorLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable()
-        errorLabel.textColorConfiguration = primaryColorConfig
+        helperLabel.textColorConfiguration = secondaryColorConfig.eraseToAnyColorable()
-        helperLabel.textColorConfiguration = secondaryColorConfig
+    }
+    
+    open func getContainer() -> UIView {
+        return containerView
+    }
+    
+    open func getBackgroundConfig() -> AnyColorable {
+        return EntryFieldColorConfiguration().with {
+            $0.enabled.lightColor = VDSFormControlsColor.backgroundOnlight
+            $0.enabled.darkColor = VDSFormControlsColor.backgroundOndark
+            $0.disabled.lightColor = VDSFormControlsColor.backgroundOnlight
+            $0.disabled.darkColor = VDSFormControlsColor.backgroundOndark
+            
+            //error doesn't care enabled/disable
+            $0.error.lightColor = VDSColor.feedbackErrorBackgroundOnlight
+            $0.error.darkColor = VDSColor.feedbackErrorBackgroundOndark
+        }.eraseToAnyColorable()
+    }
+    
+    open func getBorderConfig() -> AnyColorable {
+        return EntryFieldColorConfiguration().with {
+            $0.enabled.lightColor = VDSFormControlsColor.borderOnlight
+            $0.enabled.darkColor = VDSFormControlsColor.borderOnlight
+            $0.disabled.lightColor = VDSColor.interactiveDisabledOnlight
+            $0.disabled.darkColor = VDSColor.interactiveDisabledOndark
+            
+            //error doesn't care enabled/disable
+            $0.error.lightColor = VDSColor.feedbackErrorOnlight
+            $0.error.darkColor = VDSColor.feedbackErrorOndark
+        }.eraseToAnyColorable()
+    }
+    
+    open func getToolTipView(viewModel: ModelType) -> UIView? {
+        guard let toolTipTitleModel = viewModel.tooltipTitleModel, let toolTipContentModel = viewModel.tooltipContentModel else {
+           return nil
+        }
+        let stack = UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .vertical
+            $0.distribution = .fill
+            $0.spacing = 4
+        }
+        
+        let title = Label().with {
+            $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        }
+        title.set(with: toolTipTitleModel)
+        
+        let content = Label().with {
+            $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        }
+        content.set(with: toolTipContentModel)
+        
+        stack.addArrangedSubview(title)
+        stack.addArrangedSubview(content)
+        
+        stack.backgroundColor = backgroundColorConfiguration.getColor(viewModel)
+
+        return stack
+    }
+    
+    open func showToolTipView(){
+        
     }
     
     public override func reset() {
@@ -214,55 +238,58 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
     //--------------------------------------------------
     open override func updateView(viewModel: ModelType) {
         
+        containerView.backgroundColor = backgroundColorConfiguration.getColor(viewModel)
+        containerView.layer.borderColor = borderColorConfiguration.getColor(viewModel).cgColor
+        containerView.layer.borderWidth = 1
+        containerView.layer.cornerRadius = 4
+
+        updateTitleLabel(viewModel: viewModel)
+        updateErrorLabel(viewModel: viewModel)
+        updateHelperLabel(viewModel: viewModel)
+        
+        setAccessibilityHint()
+        backgroundColor = viewModel.surface.color
+        setNeedsLayout()
+        layoutIfNeeded()
+    }
+    
+    open func updateTitleLabel(viewModel: ModelType) {
         //update the title model if the required flag is false
         var titleLabelModel = viewModel.labelModel
             .addOptional(required: viewModel.required, colorConfiguration: secondaryColorConfig)
         
         //tooltip action
-        if let toolTipTitle = viewModel.tooltipTitle, let toolTipContent = viewModel.tooltipContent {
+        if let view = getToolTipView(viewModel: viewModel) {
+            tooltipView = view
             let toolTipAction = PassthroughSubject<Void, Never>()
             titleLabelModel = titleLabelModel.addToolTip(action: toolTipAction, colorConfiguration: primaryColorConfig)
-            toolTipAction.sink {
+            toolTipAction.sink { [weak self] in
-                print("clicked Tool Tip: \rtitle:\(toolTipTitle)\rcontent:\(toolTipContent)")
+                self?.showToolTipView()
             }.store(in: &subscribers)
+        } else {
+            tooltipView = nil
         }
         
         titleLabel.set(with: titleLabelModel)
+    }
     
-        //show error or success
+    open func updateErrorLabel(viewModel: ModelType){
         if viewModel.showError, let errorLabelModel = viewModel.errorLabelModel {
             errorLabel.set(with: errorLabelModel)
             errorLabel.isHidden = false
-            successLabel.isHidden = true
-        } else if viewModel.showSuccess, let successLabelModel = viewModel.successLabelModel {
-            successLabel.set(with: successLabelModel)
-            errorLabel.isHidden = true
-            successLabel.isHidden = false
         } else {
             errorLabel.isHidden = true
-            successLabel.isHidden = true
         }
+    }
     
+    open func updateHelperLabel(viewModel: ModelType){
         //set the helper label position
         if let helperLabelModel = viewModel.helperLabelModel {
-            helperLabel.removeFromSuperview()
-            if viewModel.helperTextPlacement == .right {
-                containerStackView.spacing = 12
-                containerStackView.addArrangedSubview(helperLabel)
-            } else {
-                containerStackView.spacing = 0
-                stackView.addArrangedSubview(helperLabel)
-            }
             helperLabel.set(with: helperLabelModel)
             helperLabel.isHidden = false
         } else {
             helperLabel.isHidden = true
         }
-        
-        setAccessibilityHint(!viewModel.disabled)
-        backgroundColor = viewModel.surface.color
-        setNeedsLayout()
-        layoutIfNeeded()
     }
 
     //--------------------------------------------------
@@ -270,19 +297,13 @@ open class EntryField<ModelType: EntryFieldModel>: Control<ModelType> {
     //--------------------------------------------------
     internal class EntryFieldColorConfiguration: DisabledSurfaceColorConfiguration<ModelType> {
         public let error = SurfaceColorConfiguration<ModelType>()
-        public let success = SurfaceColorConfiguration<ModelType>()
        
         override func getColor(_ viewModel: ModelType) -> UIColor {
             //only show error is enabled and showError == true
             let showErrorColor = !viewModel.disabled && viewModel.showError
-            let showSuccessColor = !viewModel.disabled && viewModel.showSuccess
 
             if showErrorColor {
                 return error.getColor(viewModel)
-                
-            } else if showSuccessColor {
-                return success.getColor(viewModel)
-                
             } else {
                 return super.getColor(viewModel)
             }
@@ -307,7 +328,7 @@ extension DefaultLabelModel {
     public func addToolTip(action: PassthroughSubject<Void, Never>, colorConfiguration: DisabledSurfaceColorConfiguration<Self>) -> DefaultLabelModel {
         guard let text = text else { return self}
         var newAttributes = attributes ?? []
-        let newText = "\(text)  "
+        let newText = "\(text)  " //create a little space between the final character and tooltip image
         let toolTip = ToolTipLabelAttribute(action: action,
                                             location: newText.count,
                                             length: 1,

VDS/Components/TextFields/EntryField/EntryFieldModel.swift

@@ -18,8 +18,6 @@ public protocol EntryFieldModel: Modelable, FormFieldable, Errorable {
     var labelText: String? { get set }
     var helperText: String? { get set }
     var helperTextPlacement: HelperTextPlacement { get set }
-    var showSuccess: Bool { get set }
-    var successText: String? { get set }
     var transparentBackground: Bool { get set }
     var width: CGFloat? { get set }
     var maxLength: Int? { get set }
@@ -40,6 +38,7 @@ extension EntryFieldModel {
     }
 
     public var helperLabelModel: DefaultLabelModel? {
+        guard let helperText else { return nil }
         var model = DefaultLabelModel()
         model.textPosition = .left
         model.typograpicalStyle = .BodySmall
@@ -50,6 +49,7 @@ extension EntryFieldModel {
     }
     
     public var errorLabelModel: DefaultLabelModel? {
+        guard let errorText else { return nil }
         var model = DefaultLabelModel()
         model.textPosition = .left
         model.typograpicalStyle = .BodySmall
@@ -59,13 +59,26 @@ extension EntryFieldModel {
         return model
     }
     
-    public var successLabelModel: DefaultLabelModel? {
+    public var tooltipTitleModel: DefaultLabelModel? {
+        guard let tooltipTitle else { return nil }
         var model = DefaultLabelModel()
         model.textPosition = .left
         model.typograpicalStyle = .BodySmall
-        model.text = successText
+        model.text = tooltipTitle
         model.surface = surface
         model.disabled = disabled
         return model
     }
+    
+    public var tooltipContentModel: DefaultLabelModel? {
+        guard let tooltipContent else { return nil }
+        var model = DefaultLabelModel()
+        model.textPosition = .left
+        model.typograpicalStyle = .BodySmall
+        model.text = tooltipContent
+        model.surface = surface
+        model.disabled = disabled
+        return model
+    }
+    
 }

VDS/Components/TextFields/TextEntryField/TextEntryField.swift

@@ -8,12 +8,25 @@
 import Foundation
 import UIKit
 import VDSColorTokens
+import VDSFormControlsTokens
 import Combine
 
 public class TextEntryField: TextEntryFieldBase<DefaultTextEntryField>{}
 
 open class TextEntryFieldBase<ModelType:TextEntryFieldModel>: EntryField<ModelType> {
 
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+     internal var containerStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .horizontal
+            $0.distribution = .fill
+            $0.spacing = 12
+        }
+    }()
+    
     //--------------------------------------------------
     // MARK: - Public Properties
     //--------------------------------------------------
@@ -21,16 +34,92 @@ open class TextEntryFieldBase<ModelType:TextEntryFieldModel>: EntryField<ModelTy
     @Proxy(\.model.type)
     public var type: TextEntryFieldType
 
+    @Proxy(\.model.showSuccess)
+    open var showSuccess: Bool
+    
+    @Proxy(\.model.successText)
+    open var successText: String?
+        
+    @Proxy(\.model.helperTextPlacement)
+    open var helperTextPlacement: HelperTextPlacement
+
+    private var successLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+    }
+    
+    internal var minWidthConstraint: NSLayoutConstraint?
+    
+    //--------------------------------------------------
+    // MARK: - Lifecycle
+    //--------------------------------------------------
+    open override func setup() {
+        super.setup()
+        
+        minWidthConstraint = containerView.widthAnchor.constraint(greaterThanOrEqualToConstant: 0)
+        minWidthConstraint?.isActive = true
+
+        stackView.addArrangedSubview(successLabel)
+        stackView.setCustomSpacing(8, after: successLabel)
+        
+        successLabel.textColorConfiguration = primaryColorConfig.eraseToAnyColorable()
+        
+    }
+    
+    open override func getContainer() -> UIView {
+        containerStackView.addArrangedSubview(containerView)
+        return containerStackView
+    }
+
+    open override func getBackgroundConfig() -> AnyColorable {
+        return TextEntryFieldColorConfiguration().with {
+            $0.enabled.lightColor = VDSFormControlsColor.backgroundOnlight
+            $0.enabled.darkColor = VDSFormControlsColor.backgroundOndark
+            $0.disabled.lightColor = VDSFormControlsColor.backgroundOnlight
+            $0.disabled.darkColor = VDSFormControlsColor.backgroundOndark
+            
+            //error/success doesn't care enabled/disable
+            $0.error.lightColor = VDSColor.feedbackErrorBackgroundOnlight
+            $0.error.darkColor = VDSColor.feedbackErrorBackgroundOndark
+            $0.success.lightColor = VDSColor.feedbackSuccessBackgroundOnlight
+            $0.success.darkColor = VDSColor.feedbackSuccessBackgroundOndark
+        }.eraseToAnyColorable()
+    }
+    
+    open override func getBorderConfig() ->  AnyColorable {
+        return TextEntryFieldColorConfiguration().with {
+            $0.enabled.lightColor = VDSFormControlsColor.borderOnlight
+            $0.enabled.darkColor = VDSFormControlsColor.borderOnlight
+            $0.disabled.lightColor = VDSColor.interactiveDisabledOnlight
+            $0.disabled.darkColor = VDSColor.interactiveDisabledOndark
+            
+            //error/success doesn't care enabled/disable
+            $0.error.lightColor = VDSColor.feedbackErrorOnlight
+            $0.error.darkColor = VDSColor.feedbackErrorOndark
+            $0.success.lightColor = VDSColor.feedbackSuccessOnlight
+            $0.success.darkColor = VDSColor.feedbackSuccessOndark
+        }.eraseToAnyColorable()
+    }
     
     //--------------------------------------------------
     // MARK: - State
     //--------------------------------------------------
     open override func updateView(viewModel: ModelType) {
         super.updateView(viewModel: viewModel)
-        containerView.backgroundColor = backgroundColorConfiguration.getColor(viewModel)
+        
-        containerView.layer.borderColor = borderColorConfiguration.getColor(viewModel).cgColor
+        //show error or success
-        containerView.layer.borderWidth = 1
+        if viewModel.showError, let _ = viewModel.errorLabelModel {
-        containerView.layer.cornerRadius = 4
+            successLabel.isHidden = true
+            
+        } else if viewModel.showSuccess, let successLabelModel = viewModel.successLabelModel {
+            successLabel.set(with: successLabelModel)
+            successLabel.isHidden = false
+            errorLabel.isHidden = true
+            
+        } else {
+            successLabel.isHidden = true
+            
+        }
+                
         //set the width constraints
         if let width = viewModel.width, width > viewModel.type.width  {
             widthConstraint?.constant = width
@@ -42,6 +131,47 @@ open class TextEntryFieldBase<ModelType:TextEntryFieldModel>: EntryField<ModelTy
             minWidthConstraint?.isActive = true
         }
     }
+    
+    open override func updateHelperLabel(viewModel: ModelType){
+        helperLabel.removeFromSuperview()
+
+        //set the helper label position
+        if let helperLabelModel = viewModel.helperLabelModel {
+            if viewModel.helperTextPlacement == .right {
+                containerStackView.spacing = 12
+                containerStackView.distribution = .fillEqually
+                containerStackView.addArrangedSubview(helperLabel)
+            } else {
+                containerStackView.spacing = 0
+                containerStackView.distribution = .fill
+                stackView.addArrangedSubview(helperLabel)
+            }
+            helperLabel.set(with: helperLabelModel)
+            helperLabel.isHidden = false
+        } else {
+            helperLabel.isHidden = true
+        }
+    }
+    
+    internal class TextEntryFieldColorConfiguration: EntryFieldColorConfiguration {
+        public let success = SurfaceColorConfiguration<ModelType>()
+       
+        override func getColor(_ viewModel: ModelType) -> UIColor {
+            //only show error is enabled and showError == true
+            let showErrorColor = !viewModel.disabled && viewModel.showError
+            let showSuccessColor = !viewModel.disabled && viewModel.showSuccess
+
+            if showErrorColor {
+                return error.getColor(viewModel)
+                
+            } else if showSuccessColor {
+                return success.getColor(viewModel)
+                
+            } else {
+                return super.getColor(viewModel)
+            }
+        }
+    }
 }
 
 extension TextEntryFieldType {

VDS/Components/TextFields/TextEntryField/TextEntryFieldModel.swift

@@ -13,6 +13,22 @@ public enum TextEntryFieldType: String, CaseIterable {
 
 public protocol TextEntryFieldModel: EntryFieldModel {
     var type: TextEntryFieldType { get set }
+    var showSuccess: Bool { get set }
+    var successText: String? { get set }
+}
+
+extension TextEntryFieldModel {
+    
+    public var successLabelModel: DefaultLabelModel? {
+        var model = DefaultLabelModel()
+        model.textPosition = .left
+        model.typograpicalStyle = .BodySmall
+        model.text = successText
+        model.surface = surface
+        model.disabled = disabled
+        return model
+    }
+    
 }