Digital ACT191 story ONEAPP-6682 adding character count limit to container

VDS/Components/TextFields/EntryFieldBase.swift

@@ -70,6 +70,20 @@ open class EntryFieldBase: Control, Changeable {
         }
     }()
         
+    internal var bottomContainerView: UIView = {
+        return UIView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+        }
+    }()
+    
+    internal var bottomContainerStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .vertical
+            $0.distribution = .fill
+        }
+    }()
+    
     //--------------------------------------------------
     // MARK: - Configuration Properties
     //--------------------------------------------------
@@ -204,14 +218,24 @@ open class EntryFieldBase: Control, Changeable {
         containerStackView.addArrangedSubview(controlContainerView)
         containerStackView.addArrangedSubview(icon)
 
+        //get the container this is what show helper text, error text
+        //can include other for character count, max length
+        let bottomContainer = getBottomContainer()
+        
+        //add bottomContainerStackView
+        //this is the vertical stack that contains error text, helper text
+        bottomContainer.addSubview(bottomContainerStackView)
+        bottomContainerStackView.pinToSuperView()
+        bottomContainerStackView.addArrangedSubview(errorLabel)
+        bottomContainerStackView.addArrangedSubview(helperLabel)
+        
         stackView.addArrangedSubview(titleLabel)
         stackView.addArrangedSubview(container)
-        stackView.addArrangedSubview(errorLabel)
+        stackView.addArrangedSubview(bottomContainer)
-        stackView.addArrangedSubview(helperLabel)
 
         stackView.setCustomSpacing(4, after: titleLabel)
         stackView.setCustomSpacing(8, after: container)
-        stackView.setCustomSpacing(8, after: errorLabel)
+        stackView.setCustomSpacing(8, after: bottomContainer)
 
         stackView
             .pinTop()
@@ -274,6 +298,11 @@ open class EntryFieldBase: Control, Changeable {
         return containerView
     }
    
+    /// Container for the area in which helper or error text presents.
+    open func getBottomContainer() -> UIView {
+        return bottomContainerView
+    }
+    
     open func updateTitleLabel() {
                
         //update the local vars for the label since we no

VDS/Components/TextFields/TextArea/TextArea.swift

@@ -45,6 +45,30 @@ open class TextArea: EntryFieldBase {
         }
     }()
     
+    internal var bottomView: UIView = {
+        return UIView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+        }
+    }()
+    
+    internal var bottomStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .horizontal
+            $0.distribution = .fill
+            $0.alignment = .top
+        }
+    }()
+    
+    open var characterCountLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+    }
+    open var maxLengthLabel = Label().with {
+        $0.setContentCompressionResistancePriority(.required, for: .vertical)
+        $0.textStyle = .bodySmall
+    }
+
     //--------------------------------------------------
     // MARK: - Public Properties
     //--------------------------------------------------
@@ -70,9 +94,10 @@ open class TextArea: EntryFieldBase {
     /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
     open override func setup() {
         super.setup()
-        
         minWidthConstraint = containerView.widthAnchor.constraint(greaterThanOrEqualToConstant: containerSize.width)
         minWidthConstraint?.isActive = true
+        characterCountLabel.text = "0"
+        maxLengthLabel.text = "/200"
         
         controlContainerView.addSubview(textView)
         textView
@@ -119,6 +144,16 @@ open class TextArea: EntryFieldBase {
             minWidthConstraint?.isActive = true
         }
     }
+    
+    /// Container for the area which shows helper text, error text, character count, max length value.
+    open override func getBottomContainer() -> UIView {
+        bottomView.addSubview(bottomStackView)
+        bottomStackView.pinToSuperView()
+        bottomStackView.addArrangedSubview(bottomContainerView)
+        bottomStackView.addArrangedSubview(characterCountLabel)
+        bottomStackView.addArrangedSubview(maxLengthLabel)
+        return bottomView
+    }
 }
 
 extension TextArea: UITextViewDelegate {