From 6aa5bdf1941d81e07ddbed454a9e21dbed67eb76 Mon Sep 17 00:00:00 2001 From: Robin Date: Tue, 29 Oct 2024 12:04:34 +0100 Subject: [PATCH 1/2] [README] Update for 0.1.1 Replace description to helper Add the counter function --- README.md | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index f7f70a6..9f568f4 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # FormField -A wrapper component which support UIControl components with label and helper message (Success/Info/Error management). +A wrapper component which support UIView components with label and helper message (Success/Info/Error management). ![Figma anatomy](https://github.com/adevinta/spark-ios-component-form-field/blob/main/.github/assets/anatomy.png) @@ -10,26 +10,35 @@ The formfield specifications on Zeroheight is [here](https://spark.adevinta.com/ FormField is available on UIKit and SwiftUI. ### FormFieldUIView -Parameters: + +#### Parameters: * `theme`: The current Spark-Theme. [You can always define your own theme.](https://github.com/adevinta/spark-ios/wiki/Theming#your-own-theming) -* `component`: The component (UIControl) is covered by formfield. +* `component`: The component (UIView) is covered by formfield. * `feedbackState`: The formfield feedback state. 'Default' or 'Error'.(There aren't design changes for Success and Info states. They will be managed with 'Default') * `title`: An option string. The title is rendered above the component. * `attributedTitle`: An option attributed string to change label of font or size. -* `description`: An option string. The title is rendered under the component. +* `helper`: An option string. The title is rendered under the component. * `attributedDescription`: An option attributed string to change helper message of font or size. * `isTitleRequired`: A bool value to add asterisk character at the end of title for specifying required field. * `isEnabled`: A bool value to change wrapped component enabled state * `isSelected`: A bool value to change wrapped component selected state +#### Functions: +If the component inside the FormField is inherit from an UITextInput (The Spark TextField and TextEditor for example), a function to set the number of the characters is available: + +```swift +func setCounter(on text: String?, limit: Int?) +``` + ### FormFieldView -Parameters: + +#### Parameters: * `theme`: The current Spark-Theme. [You can always define your own theme.](https://github.com/adevinta/spark-ios/wiki/Theming#your-own-theming) -* `component`: The component (UIControl) is covered by formfield. +* `component`: The component (UIView) is covered by formfield. * `feedbackState`: The formfield feedback state. 'Default' or 'Error'.(There aren't design changes for Success and Info states. They will be managed with 'Default') * `title`: An option string. The title is rendered above the component. * `attributedTitle`: An option attributed string to change label of font or size. -* `description`: An option string. The title is rendered under the component. +* `helper`: An option string. The title is rendered under the component. * `attributedDescription`: An option attributed string to change helper message of font or size. * `isTitleRequired`: A bool value to add asterisk character at the end of title for specifying required field. @@ -37,7 +46,7 @@ Parameters: ### FormFieldUIView ```swift -let component: UIControl = CheckboxUIView( +let component: UIView = CheckboxUIView( theme: SparkTheme.shared, text: "Hello World", checkedImage: DemoIconography.shared.checkmark.uiImage, @@ -50,7 +59,7 @@ let formfield = FormFieldUIView( component: self.component, feedbackState: .default, title: "Agreement", - description: "Your agreement is important to us." + helper: "Your agreement is important to us." ) view.addSubview(formfield) @@ -83,7 +92,7 @@ var body: some View { }, feedbackState: .default, title: "Agreement", - description: "Your agreement is important to us.", + helper: "Your agreement is important to us.", isTitleRequired: false ) .disabled(false) @@ -114,4 +123,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -``` \ No newline at end of file +``` From 83d2ab920bc3e7fad64f32985c7277502d11b8cf Mon Sep 17 00:00:00 2001 From: Robin Lemaire Date: Tue, 29 Oct 2024 14:54:28 +0100 Subject: [PATCH 2/2] [README] Add subviews section --- README.md | 54 ++++++++++++------- Sources/Core/View/UIKit/FormFieldUIView.swift | 3 +- 2 files changed, 37 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 9f568f4..db4310f 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,43 @@ # FormField + A wrapper component which support UIView components with label and helper message (Success/Info/Error management). ![Figma anatomy](https://github.com/adevinta/spark-ios-component-form-field/blob/main/.github/assets/anatomy.png) ## Specifications + The formfield specifications on Zeroheight is [here](https://spark.adevinta.com/1186e1705/p/590121-components). ## Usage + FormField is available on UIKit and SwiftUI. ### FormFieldUIView #### Parameters: -* `theme`: The current Spark-Theme. [You can always define your own theme.](https://github.com/adevinta/spark-ios/wiki/Theming#your-own-theming) -* `component`: The component (UIView) is covered by formfield. -* `feedbackState`: The formfield feedback state. 'Default' or 'Error'.(There aren't design changes for Success and Info states. They will be managed with 'Default') -* `title`: An option string. The title is rendered above the component. -* `attributedTitle`: An option attributed string to change label of font or size. -* `helper`: An option string. The title is rendered under the component. -* `attributedDescription`: An option attributed string to change helper message of font or size. -* `isTitleRequired`: A bool value to add asterisk character at the end of title for specifying required field. -* `isEnabled`: A bool value to change wrapped component enabled state -* `isSelected`: A bool value to change wrapped component selected state + +- `theme`: The current Spark-Theme. [You can always define your own theme.](https://github.com/adevinta/spark-ios/wiki/Theming#your-own-theming) +- `component`: The component (UIView) is covered by formfield. +- `feedbackState`: The formfield feedback state. 'Default' or 'Error'.(There aren't design changes for Success and Info states. They will be managed with 'Default') +- `title`: An option string. The title is rendered above the component. +- `attributedTitle`: An option attributed string to change label of font or size. +- `helper`: An option string. The title is rendered under the component. +- `attributedDescription`: An option attributed string to change helper message of font or size. +- `isTitleRequired`: A bool value to add asterisk character at the end of title for specifying required field. +- `isEnabled`: A bool value to change wrapped component enabled state +- `isSelected`: A bool value to change wrapped component selected state + +#### Subviews + +The FormField contains some public subviews : + +- `titleLabel`: The title label of the input. The label is positioned at the top left. +- `helperLabel`: The helper label of the input. The label is positioned at the bottom left. +- `secondaryHelperLabel`: The secondary helper label of the input. The label is positioned at the bottom right. #### Functions: -If the component inside the FormField is inherit from an UITextInput (The Spark TextField and TextEditor for example), a function to set the number of the characters is available: + +If the component inside the FormField is inherit from an UITextInput (The Spark TextField and TextEditor for example), a function to set the number of the characters is available: ```swift func setCounter(on text: String?, limit: Int?) @@ -33,16 +46,18 @@ func setCounter(on text: String?, limit: Int?) ### FormFieldView #### Parameters: -* `theme`: The current Spark-Theme. [You can always define your own theme.](https://github.com/adevinta/spark-ios/wiki/Theming#your-own-theming) -* `component`: The component (UIView) is covered by formfield. -* `feedbackState`: The formfield feedback state. 'Default' or 'Error'.(There aren't design changes for Success and Info states. They will be managed with 'Default') -* `title`: An option string. The title is rendered above the component. -* `attributedTitle`: An option attributed string to change label of font or size. -* `helper`: An option string. The title is rendered under the component. -* `attributedDescription`: An option attributed string to change helper message of font or size. -* `isTitleRequired`: A bool value to add asterisk character at the end of title for specifying required field. + +- `theme`: The current Spark-Theme. [You can always define your own theme.](https://github.com/adevinta/spark-ios/wiki/Theming#your-own-theming) +- `component`: The component (UIView) is covered by formfield. +- `feedbackState`: The formfield feedback state. 'Default' or 'Error'.(There aren't design changes for Success and Info states. They will be managed with 'Default') +- `title`: An option string. The title is rendered above the component. +- `attributedTitle`: An option attributed string to change label of font or size. +- `helper`: An option string. The title is rendered under the component. +- `attributedDescription`: An option attributed string to change helper message of font or size. +- `isTitleRequired`: A bool value to add asterisk character at the end of title for specifying required field. ## Examples + ### FormFieldUIView ```swift @@ -73,6 +88,7 @@ NSLayoutConstraint.activate([ ``` ### FormFieldView + ```swift var component: some View { CheckboxView( diff --git a/Sources/Core/View/UIKit/FormFieldUIView.swift b/Sources/Core/View/UIKit/FormFieldUIView.swift index 4b42912..475c411 100644 --- a/Sources/Core/View/UIKit/FormFieldUIView.swift +++ b/Sources/Core/View/UIKit/FormFieldUIView.swift @@ -27,7 +27,8 @@ public final class FormFieldUIView: UIView { return stackView }() - private let titleLabel: UILabel = { + /// The title label of the input. The label is positioned at the top left. + public let titleLabel: UILabel = { let label = UILabel() label.backgroundColor = .clear label.numberOfLines = 0