Skip to content

Commit

Permalink
Docs(web-twig): Document the missing input types of TextField: `num…
Browse files Browse the repository at this point in the history 
…ber`, `search`, `tel`, `url`
  • Loading branch information
@adamkudrna
adamkudrna committed Dec 30, 2022
1 parent 34d1723 commit 5f3ec92
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 32 deletions.
2 changes: 2 additions & 0 deletions packages/web-twig/src/Resources/components/TextArea/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ Advanced example usage:
```twig
<TextArea
id="example2"
label="Label"
messsage="validation failed"
name="example2"
placeholder="Placeholder"
Expand All @@ -30,6 +31,7 @@ Without lexer:
```twig
{% include "@spirit/textArea.twig" with { props: {
id: "example",
label: "Label",
name: "example",
isRequired: true,
validationState: "error",
Expand Down
34 changes: 18 additions & 16 deletions packages/web-twig/src/Resources/components/TextField/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Advanced example usage:
<TextField
id="example2"
isRequired
label="Password"
messsage="validation failed"
name="example2"
placeholder="Placeholder"
Expand All @@ -28,6 +29,7 @@ Without lexer:
{% include "@spirit/textField.twig" with { props: {
id: "example",
type: "text",
label: "Password",
name: "example",
isRequired: true,
validationState: "error",
Expand All @@ -37,22 +39,22 @@ Without lexer:

## API

| Prop name | Type | Default | Required | Description |
| ----------------- | ----------------------------- | --------- | -------- | ---------------------------------------------------------- |
| `class` | `string` | `null` | no | Custom CSS class |
| `id` | `string` | — | yes | Input and label identification |
| `isDisabled` | `bool` | `false` | no | If true, input is disabled |
| `isFluid` | `bool` | `false` | no | If true, the element spans to the full width of its parent |
| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
| `isRequired` | `bool` | `false` | no | If true, input is required |
| `label` | `string` | — | yes | Label text |
| `message` | `string` | `null` | no | Validation or help message |
| `name` | `string` | `null` | no | Input name |
| `placeholder` | `string` | `null` | no | Input placeholder |
| `inputWidth` | `number` | `null` | no | Input width |
| `type` | `text`, `password`, `email` | `success` | no | Input type |
| `validationState` | `success`, `warning`, `error` | `null` | no | Type of validation state |
| `value` | `string` | `null` | no | Input value |
| Prop name | Type | Default | Required | Description |
| ----------------- | ------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------- |
| `class` | `string` | `null` | no | Custom CSS class |
| `id` | `string` | — | yes | Input and label identification |
| `isDisabled` | `bool` | `false` | no | If true, input is disabled |
| `isFluid` | `bool` | `false` | no | If true, the element spans to the full width of its parent |
| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
| `isRequired` | `bool` | `false` | no | If true, input is required |
| `label` | `string` | — | yes | Label text |
| `message` | `string` | `null` | no | Validation or help message |
| `name` | `string` | `null` | no | Input name |
| `placeholder` | `string` | `null` | no | Input placeholder |
| `inputWidth` | `number` | `null` | no | Input width |
| `type` | `email`, `number`, `password`, `search`, `tel`, `text`, `url` | `text` | no | Input type |
| `validationState` | `success`, `warning`, `error` | `null` | no | Type of validation state |
| `value` | `string` | `null` | no | Input value |

On top of the API options, you can add `data-*` or `aria-*` attributes to
further extend component's descriptiveness and accessibility. These attributes
Expand Down
34 changes: 18 additions & 16 deletions packages/web-twig/src/Resources/components/TextFieldBase/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Advanced example usage:
<TextField
id="example2"
isRequired
label="Password"
messsage="validation failed"
name="example2"
placeholder="Placeholder"
Expand All @@ -28,6 +29,7 @@ Without lexer:
{% include "@spirit/textFieldBase.twig" with { props: {
id: "example",
type: "text",
label: "Password",
name: "example",
isRequired: true,
validationState: "error",
Expand All @@ -37,22 +39,22 @@ Without lexer:

## API

| Prop name | Type | Default | Required | Description |
| ----------------- | ----------------------------- | --------- | -------- | ---------------------------------------------------------- |
| `class` | `string` | `null` | no | Custom CSS class |
| `id` | `string` | — | yes | Input and label identification |
| `isDisabled` | `bool` | `false` | no | If true, input is disabled |
| `isFluid` | `bool` | `false` | no | If true, the element spans to the full width of its parent |
| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
| `isMultiline` | `bool` | `false` | no | If true, rendered DOM element is `textarea` |
| `isRequired` | `bool` | `false` | no | If true, input is required |
| `label` | `string` | — | yes | Label text |
| `message` | `string` | `null` | no | Validation or help message |
| `name` | `string` | `null` | no | Input name |
| `placeholder` | `string` | `null` | no | Input placeholder |
| `type` | `text`, `password`, `email` | `success` | no | Input type |
| `validationState` | `success`, `warning`, `error` | `null` | no | Type of validation state |
| `value` | `string` | `null` | no | Input value |
| Prop name | Type | Default | Required | Description |
| ----------------- | ------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------- |
| `class` | `string` | `null` | no | Custom CSS class |
| `id` | `string` | — | yes | Input and label identification |
| `isDisabled` | `bool` | `false` | no | If true, input is disabled |
| `isFluid` | `bool` | `false` | no | If true, the element spans to the full width of its parent |
| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
| `isMultiline` | `bool` | `false` | no | If true, rendered DOM element is `textarea` |
| `isRequired` | `bool` | `false` | no | If true, input is required |
| `label` | `string` | — | yes | Label text |
| `message` | `string` | `null` | no | Validation or help message |
| `name` | `string` | `null` | no | Input name |
| `placeholder` | `string` | `null` | no | Input placeholder |
| `type` | `email`, `number`, `password`, `search`, `tel`, `text`, `url` | `text` | no | Input type |
| `validationState` | `success`, `warning`, `error` | `null` | no | Type of validation state |
| `value` | `string` | `null` | no | Input value |

On top of the API options, you can add `data-*` or `aria-*` attributes to
further extend component's descriptiveness and accessibility. These attributes
Expand Down

0 comments on commit 5f3ec92

Please sign in to comment.