Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[README] Update for 0.1.1 #6

Merged
merged 2 commits into from
Oct 29, 2024
Merged

[README] Update for 0.1.1 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6aa5bdf
[README] Update for 0.1.1
robergro Oct 29, 2024
83d2ab9
[README] Add subviews section
robergro Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 50 additions & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,67 @@
# 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)

## 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 (UIControl) 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.
* `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

#### 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

#### 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:

```swift
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 (UIControl) 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.
* `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.

#### 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.

## Examples

### FormFieldUIView

```swift
let component: UIControl = CheckboxUIView(
let component: UIView = CheckboxUIView(
theme: SparkTheme.shared,
text: "Hello World",
checkedImage: DemoIconography.shared.checkmark.uiImage,
Expand All @@ -50,7 +74,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)
Expand All @@ -64,6 +88,7 @@ NSLayoutConstraint.activate([
```

### FormFieldView

```swift
var component: some View {
CheckboxView(
Expand All @@ -83,7 +108,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)
Expand Down Expand Up @@ -114,4 +139,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.
```
```
3 changes: 2 additions & 1 deletion Sources/Core/View/UIKit/FormFieldUIView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ public final class FormFieldUIView<Component: UIView>: 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
Expand Down
Loading