Skip to content

Commit

Permalink
docs(TextInput, TextArea): update docs (#1002)
Browse files Browse the repository at this point in the history
  • Loading branch information
@amje
amje authored Sep 12, 2023
1 parent f69af39 commit fc3a75e
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 79 deletions.
76 changes: 39 additions & 37 deletions src/components/controls/TextArea/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,24 +95,25 @@ LANDING_BLOCK-->

### Error

The state of the `TextArea` at which you want to show incorrect user input.
The state of the `TextArea` at which you want to show incorrect user input. To change `TextArea` appearance use the `validationState` property with `"invalid"` value.
Optional message text can be added via `errorMessage` property.

<!--LANDING_BLOCK
<ExampleBlock
code={`
<TextArea placeholder="Placeholder" error="Error message" />
<TextArea view="clear" placeholder="Placeholder" error="Error message" />
<TextArea placeholder="Placeholder" errorMessage="Error message" validationState="invalid" />
<TextArea view="clear" placeholder="Placeholder" errorMessage="Error message" validationState="invalid" />
`}
>
<UIKit.TextArea placeholder="Placeholder" error="Error message" />
<UIKit.TextArea view="clear" placeholder="Placeholder" error="Error message" />
<UIKit.TextArea placeholder="Placeholder" errorMessage="Error message" validationState="invalid" />
<UIKit.TextArea view="clear" placeholder="Placeholder" errorMessage="Error message" validationState="invalid" />
</ExampleBlock>
LANDING_BLOCK-->

<!--GITHUB_BLOCK-->

```tsx
<TextArea error="Error message" />
<TextArea errorMessage="Error message" validationState="invalid" />
```

<!--/GITHUB_BLOCK-->
Expand Down Expand Up @@ -181,34 +182,35 @@ LANDING_BLOCK-->

## Properties

| Name | Description | Type | Default |
| :----------- | :---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------: | :-------------: |
| autoComplete | The control's `autocomplete` attribute | `boolean` `string` | |
| autoFocus | The control's `autofocus` attribute | `boolean` | |
| className | The control's wrapper class name | `string` | |
| controlProps | The control's html attributes | `React.TextareaHTMLAttributes<HTMLTextAreaElement>` | |
| controlRef | React ref provided to the control | `React.Ref<HTMLTextAreaElement>` | |
| defaultValue | The control's default value. Use when the component is not controlled | `string` | |
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
| error | Shows error state and optional message if property identified as a string | `boolean` `string` | |
| hasClear | Shows icon for clearing control's value | `boolean` | `false` |
| id | The control's `id` attribute | `string` | |
| maxRows | The number of maximum visible text lines for the control. Ignored if `rows` is specified | `number` | |
| minRows | The number of minimum visible text lines for the control. Ignored if `rows` is specified | `number` | |
| name | The control's `name` attribute. Will be autogenerated if not specified | `string` | |
| note | An optional element displayed under the lower right corner of the control and sharing the place with the error container | `React.ReactNode` | |
| onBlur | Fires when the control lost focus. Provides focus event as an callback's argument | `function` | |
| onChange | Fires when the input’s value is changed by the user. Provides change event as an callback's argument | `function` | |
| onFocus | Fires when the control gets focus. Provides focus event as an callback's argument | `function` | |
| onKeyDown | Fires when a key is pressed. Provides keyboard event as an callback's argument | `function` | |
| onKeyUp | Fires when a key is released. Provides keyboard event as an callback's argument | `function` | |
| onUpdate | Fires when the input’s value is changed by the user. Provides new value as an callback's argument | `function` | |
| pin | The control's border view | `string` | `"round-round"` |
| placeholder | Text that appears in the control when it has no value set | `string` | |
| qa | Test id attribute (`data-qa`) | `string` | |
| rows | The number of visible text lines for the control. If not specified, the hight will be automatically calculated based on the content | `number` | |
| size | The control's size | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| tabIndex | The control's `tabindex` attribute | `string` | |
| type | The control's type | `string` | |
| value | The control's value | `string` | |
| view | The control's view | `"normal"` `"clear"` | `"normal"` |
| Name | Description | Type | Default |
| :-------------- | :---------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------: | :-------------: |
| autoComplete | The control's `autocomplete` attribute | `boolean` `string` | |
| autoFocus | The control's `autofocus` attribute | `boolean` | |
| className | The control's wrapper class name | `string` | |
| controlProps | The control's html attributes | `React.TextareaHTMLAttributes<HTMLTextAreaElement>` | |
| controlRef | React ref provided to the control | `React.Ref<HTMLTextAreaElement>` | |
| defaultValue | The control's default value. Use when the component is not controlled | `string` | |
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
| errorMessage | Error text | `string` | |
| hasClear | Shows icon for clearing control's value | `boolean` | `false` |
| id | The control's `id` attribute | `string` | |
| maxRows | The number of maximum visible text lines for the control. Ignored if `rows` is specified | `number` | |
| minRows | The number of minimum visible text lines for the control. Ignored if `rows` is specified | `number` | |
| name | The control's `name` attribute. Will be autogenerated if not specified | `string` | |
| note | An optional element displayed under the lower right corner of the control and sharing the place with the error container | `React.ReactNode` | |
| onBlur | Fires when the control lost focus. Provides focus event as an callback's argument | `function` | |
| onChange | Fires when the input’s value is changed by the user. Provides change event as an callback's argument | `function` | |
| onFocus | Fires when the control gets focus. Provides focus event as an callback's argument | `function` | |
| onKeyDown | Fires when a key is pressed. Provides keyboard event as an callback's argument | `function` | |
| onKeyUp | Fires when a key is released. Provides keyboard event as an callback's argument | `function` | |
| onUpdate | Fires when the input’s value is changed by the user. Provides new value as an callback's argument | `function` | |
| pin | The control's border view | `string` | `"round-round"` |
| placeholder | Text that appears in the control when it has no value set | `string` | |
| qa | Test id attribute (`data-qa`) | `string` | |
| rows | The number of visible text lines for the control. If not specified, the hight will be automatically calculated based on the content | `number` | |
| size | The control's size | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| tabIndex | The control's `tabindex` attribute | `string` | |
| type | The control's type | `string` | |
| validationState | Validation state | `"invalid"` | |
| value | The control's value | `string` | |
| view | The control's view | `"normal"` `"clear"` | `"normal"` |
Loading

0 comments on commit fc3a75e

Please sign in to comment.