Skip to content

Commit

Permalink
add more text
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarahgm
sarahgm committed Jan 31, 2023
1 parent 22afca6 commit c211655
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 29 deletions.
8 changes: 4 additions & 4 deletions docs/src/demos/concepts/building-forms-hook-form.demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const SubmitFormWithReactHookForm = () => {
{...field}
label="Firstname:"
required
description="Please enter your firstname"
description="Please enter your first name."
placeholder="Firstname"
error={field.value.length < 0 ? true : false}
errorMessage="The field is required. Please enter your firstname."
Expand All @@ -71,7 +71,7 @@ export const SubmitFormWithReactHookForm = () => {
{...field}
label="Name:"
required
description="Please enter your name"
description="Please enter your name."
placeholder="Name"
error={field.value.length < 0 ? true : false}
errorMessage="The field is required. Please enter your name."
Expand All @@ -94,7 +94,7 @@ export const SubmitFormWithReactHookForm = () => {
required
placeholder="Phone"
type="tel"
description="Please enter your phone number"
description="Please enter your phone number."
error={!/^[0-9]*$/.test(field.value) ? true : false}
errorMessage="The field is required. Please enter a valid phone number."
/>
Expand All @@ -108,7 +108,7 @@ export const SubmitFormWithReactHookForm = () => {
<TextField
{...field}
label="E-Mail:"
description="Please enter your E-Mail adress"
description="Please enter your E-Mail adress."
placeholder="E-Mail"
required
error={
Expand Down
5 changes: 3 additions & 2 deletions docs/src/demos/concepts/building-forms-zod.demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const SubmitForm = () => {
name="firstname"
label="Firstname:"
required
description="Please enter your firstname"
description="Please enter your first name."
placeholder="Firstname"
error={error.includes('firstname')}
errorMessage="The field is required. Please enter your firstname."
Expand All @@ -58,7 +58,7 @@ export const SubmitForm = () => {
name="name"
label="Name:"
required
description="Please enter your name"
description="Please enter your name."
placeholder="Name"
error={error.includes('name')}
errorMessage="The field is required. Please enter your name."
Expand All @@ -71,6 +71,7 @@ export const SubmitForm = () => {
required
placeholder="Phone"
type="tel"
description="Please enter your phone number."
error={error.includes('phone')}
errorMessage="The field is required. Please enter a valid phone number."
/>
Expand Down
7 changes: 4 additions & 3 deletions docs/src/demos/concepts/error-handling.demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ export const ErrorValidation = () => {
<TextField
label="Firstname:"
required
description="Please enter your firstname"
description="Please enter your first name."
placeholder="Firstname"
disabled
/>
<TextField
label="Name:"
required
description="Please enter your name"
description="Please enter your name."
placeholder="Name"
disabled
/>
Expand All @@ -39,10 +39,11 @@ export const ErrorValidation = () => {
disabled
placeholder="Phone"
type="tel"
description="Please enter your phone number."
/>
<TextField
label="E-Mail:"
description="Please enter your E-Mail adress"
description="Please enter your E-Mail adress."
placeholder="E-Mail"
required
onChange={e => setValue(e)}
Expand Down
14 changes: 10 additions & 4 deletions docs/src/demos/concepts/layout-forms.demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,27 @@ export const LayoutForms = () => (
<TextField
label="Firstname:"
required
description="Please enter your firstname"
description="Please enter your first name."
placeholder="Firstname"
/>
<TextField
label="Name:"
required
description="Please enter your name"
description="Please enter your name."
placeholder="Name"
/>
</Columns>
<Stack space="medium">
<TextField label="Phone:" required placeholder="Phone" type="tel" />
<TextField
label="Phone:"
required
placeholder="Phone"
type="tel"
description="Please enter your phone number."
/>
<TextField
label="E-Mail:"
description="Please enter your E-Mail adress"
description="Please enter your E-Mail adress."
placeholder="E-Mail"
required
/>
Expand Down
7 changes: 4 additions & 3 deletions docs/src/demos/concepts/logical-interaction.demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ export const InteractionDemo = () => {
<TextField
label="Firstname:"
required
description="Please enter your firstname"
description="Please enter your first name."
placeholder="Firstname"
disabled
/>
<TextField
label="Name:"
required
description="Please enter your name"
description="Please enter your name."
placeholder="Name"
disabled
/>
Expand All @@ -39,11 +39,12 @@ export const InteractionDemo = () => {
required
disabled
placeholder="Phone"
description="Please enter your phone number."
type="tel"
/>
<TextField
label="E-Mail:"
description="Please enter your E-Mail adress"
description="Please enter your E-Mail adress."
placeholder="E-Mail"
required
disabled
Expand Down
22 changes: 9 additions & 13 deletions docs/src/pages/concepts/building-forms.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Building Forms
caption: This page should introduce you on how to build forms with Marigold.
switchTheme: true
edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/building-forms.mdx
---

## Marigold Form Components
Expand All @@ -29,12 +28,12 @@ Accessibility best practices should be followed, such as providing clear, descri

Here you can see how to layout a classic form with Marigold's `<TextField>` and `<Select>` could be defined.

If you want to see more examples of forms with Marigold, check out our recipes: [ Marigold Form Recipes](/recipes/form-recipes)

```tsx preview file=concepts/layout-forms.demo.tsx

```

If you want to see more examples of forms with Marigold, check out our recipes: [ Marigold Form Recipes](/recipes/form-recipes)

## Controlled or uncontrolled Components?

In React, there are two main types of form components: controlled and uncontrolled.
Expand Down Expand Up @@ -67,36 +66,33 @@ You can have interactive forms which contains logical aspects. In this example y

```

### Submitting a form
## Submitting a form

In this example you can see how a form with all its fields can be submitted. The submitted data will be displayed in a alert.
In this example you can see how a form with all its fields can be submitted. The submitted data will be displayed in an alert message.

For validate the errors we have used [`Zod`](https://zod.dev/). It is a simple tool for building schemas, which can be validated.

```tsx preview file=concepts/building-forms-zod.demo.tsx

```

## Full example of a form submitting data with React Hook Form
## Full example of submit a form with React Hook Form

We decided to use react-form-hook because its reducing re-renders caused by state updates, you don't have much to configurate and supports integrating UI libraries.
For the later we use the `<Controller>` component from react-hook-form, which must be wrapped around each Marigold component that should submit data.
By using React-form-hook, you can simplify form handling in your React components and avoid repetitive tasks such as manually updating the form state, validating user inputs, and handling form submissions.

### Example of a form

We tried to find a simple but common use case for testing this library and decided that a formular where the data would be submitted is a good case.
In the formular we have used `<TextField>`, `<Select>` and `<Checkbox>` components. These components are wrapped around with the `<Controller>` component from react-hook-form. The `<Controller>` component acts as a bridge between the form element and the "React-hook-form" state management. It updates the "React-hook-form" state whenever the value of the form element changes.

```tsx preview file=concepts/building-forms-hook-form.demo.tsx

```

In the formular we have used `<TextField>` components and a `<Select>` component.

### How to do validation and error signaling

Some fields are required and throw error messages if you don't fill them out.
For this to work, react-hook-form has a property `formState`, which contains the boolean `isValid`. This prop is set to `true` if the form doesn't have errors. `isValid` will always observe the entire form to validate.

We don't explicit need to use a `onChange` event, we set a `defaultValue` for each field we want to submit in the `useForm` hook. With that the component is a uncontrolled component, it never gets undefined or null. Instead of using useState and set a value we used directly defaultValue.
We don't explicit need to use a `onChange` event, instead of using useState and set a value we used directly `defaultValue`. With that the component is a uncontrolled component, it never gets undefined or null.

There are `rules` that can be applied on the components to trigger the validation, e.g. `required: true`. Our Marigold form components already have error properties and error messages build in. Now it should be combined.
There are `rules` that can be applied on the components to trigger the validation, e.g. `required: true`. Our Marigold form components already have error properties and error messages build in. Now it should be combined. In the `handleSubmit` function we check if the recived data is valid, if that isn't the case we give the error value to the component and display the error message.

0 comments on commit c211655

Please sign in to comment.