Skip to content

Commit

Permalink
Docs(web-twig): Adding attributes to the component readme #DS-604
Browse files Browse the repository at this point in the history 
* Button: name
* TextFieldBase & TextField: autocomplete, pattern
  • Loading branch information
@tomassychra
tomassychra committed Mar 13, 2023
1 parent be96972 commit 842f95d
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 13 deletions.
3 changes: 2 additions & 1 deletion packages/web-twig/src/Resources/components/Button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,12 @@ Without lexer:
| ------------ | ----------------------------------------------------------------------------------------- | --------- | -------- | ---------------------------------------------------- |
| `class` | `string` | `null` | no | Custom CSS class |
| `color` | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | no | Color variant |
| `size` | [Size dictionary][dictionary-size] | `medium` | no | Size variant |
| `isBlock` | `bool` | `false` | no | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | no | If true, Button is disabled |
| `isSquare` | `bool` | `false` | no | If true, Button is square, usually only with an icon |
| `name` | `string` | `null` | no | For use a button as a form data reference |
| `onClick` | `string` | `null` | no | JS function to call on click |
| `size` | [Size dictionary][dictionary-size] | `medium` | no | Size variant |
| `type` | `string` | `button` | no | Type of the Button |

You can add `id`, `data-*` or `aria-*` attributes to further extend component's
Expand Down
13 changes: 7 additions & 6 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 @@ Default TextField:

```html
<TextField
helperText="custom helper text"
id="example2"
isRequired
label="Label"
Expand All @@ -22,7 +23,6 @@ Default TextField:
placeholder="Placeholder"
type="text"
validationState="danger"
helperText="custom helper text"
/>
```

Expand All @@ -45,23 +45,25 @@ Without lexer:

```twig
{% include "@spirit/textField.twig" with { props: {
helperText: "custom helper text",
id: "example",
type: "text",
isRequired: true,
label: "Password",
message: "validation failed",
name: "example",
isRequired: true,
type: "text",
validationState: "danger",
message: "validation failed",
helperText: "custom helper text",
}} %}
```

## API

| Prop name | Type | Default | Required | Description |
| ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `autocomplete` | `bool` | `false` | no | If the field should have autocomplete enabled |
| `class` | `string` | `null` | no | Custom CSS class |
| `hasPasswordToggle` | `bool` | `false` | no | If true, the `type` is set to `password` and a password toggle is shown |
| `helperText` | `string` | `null` | no | Custom helper text |
| `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 |
Expand All @@ -75,7 +77,6 @@ Without lexer:
| `type` | `email`, `number`, `password`, `search`, `tel`, `text`, `url` | `text` | no | Input type |
| `validationState` | [Validation dictionary][dictionary-validation], `error` (deprecated) | `null` | no | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
| `value` | `string` | `null` | no | Input value |
| `helperText` | `string` | `null` | no | Custom helper text |

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
14 changes: 8 additions & 6 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 @@ Default TextFieldBase:

```html
<TextFieldBase
helperText="custom helper text"
id="example2"
isRequired
label="Label"
Expand All @@ -22,7 +23,6 @@ Default TextFieldBase:
placeholder="Placeholder"
type="text"
validationState="danger"
helperText="custom helper text"
/>
```

Expand All @@ -45,23 +45,25 @@ Without lexer:

```twig
{% include "@spirit/textFieldBase.twig" with { props: {
helperText: "custom helper text",
id: "example",
type: "text",
isRequired: true,
label: "Password",
message: "validation failed",
name: "example",
isRequired: true,
type: "text",
validationState: "danger",
message: "validation failed",
helperText: "custom helper text",
}} %}
```

## API

| Prop name | Type | Default | Required | Description |
| ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `autocomplete` | `bool` | `false` | no | If the field should have autocomplete enabled |
| `class` | `string` | `null` | no | Custom CSS class |
| `hasPasswordToggle` | `bool` | `false` | no | If true, the `type` is set to `password` and a password toggle is shown |
| `helperText` | `string` | `null` | no | Custom helper text |
| `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 |
Expand All @@ -71,11 +73,11 @@ Without lexer:
| `label` | `string` | — | yes | Label text |
| `message` | `string` | `null` | no | Validation message |
| `name` | `string` | `null` | no | Input name |
| `pattern` | `string` | `null` | no | Defines regular expressions for allowed value types |
| `placeholder` | `string` | `null` | no | Input placeholder |
| `type` | `email`, `number`, `password`, `search`, `tel`, `text`, `url` | `text` | no | Input type |
| `validationState` | [Validation dictionary][dictionary-validation], `error` (deprecated) | `null` | no | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
| `value` | `string` | `null` | no | Input value |
| `helperText` | `string` | `null` | no | Custom helper text |

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 842f95d

Please sign in to comment.