From 56f0796dce851016895f23efd0946fd2c5b93894 Mon Sep 17 00:00:00 2001 From: "Mr.Dr.Professor Patrick" Date: Tue, 22 Aug 2023 14:19:11 +0200 Subject: [PATCH] feat(TextArea): add gravity documentation (#920) --- src/components/controls/TextArea/README.md | 245 +++++++++++++++--- .../controls/TextArea/TextArea.scss | 2 - 2 files changed, 214 insertions(+), 33 deletions(-) diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md index dd16dc69d..06395be56 100644 --- a/src/components/controls/TextArea/README.md +++ b/src/components/controls/TextArea/README.md @@ -1,31 +1,214 @@ -| Property | Type | Default | Description | -| :----------- | :-------------------------------------------------- | :-------------- | :---------------------------------------------------------------------------------------------------------------------------------- | -| autoComplete | `boolean \| string` | `-` | The control's `autocomplete` attribute | -| autoFocus | `boolean` | `-` | The control's `autofocus` attribute | -| className | `string` | `-` | The control's wrapper class name | -| controlProps | `React.TextareaHTMLAttributes` | `-` | The control's html attributes | -| controlRef | `React.Ref` | `-` | React ref provided to the control | -| defaultValue | `string` | `-` | The control's default value. Use when the component is not controlled | -| disabled | `boolean` | `false` | Indicates that the user cannot interact with the control | -| error | `boolean \| string` | `-` | Shows error state and optional message if property identified as a string | -| hasClear | `boolean` | `false` | Shows icon for clearing control's value | -| id | `string` | `-` | The control's `id` attribute | -| maxRows | `number` | `-` | The number of maximum visible text lines for the control. Ignored if `rows` is specified | -| minRows | `number` | `-` | The number of minimum visible text lines for the control. Ignored if `rows` is specified | -| name | `string` | `-` | The control's `name` attribute. Will be autogenerated if not specified | -| onBlur | `function` | `-` | Fires when the control lost focus. Provides focus event as an callback's argument | -| onChange | `function` | `-` | Fires when the input’s value is changed by the user. Provides change event as an callback's argument | -| onFocus | `function` | `-` | Fires when the control gets focus. Provides focus event as an callback's argument | -| onKeyDown | `function` | `-` | Fires when a key is pressed. Provides keyboard event as an callback's argument | -| onKeyUp | `function` | `-` | Fires when a key is released. Provides keyboard event as an callback's argument | -| onUpdate | `function` | `-` | Fires when the input’s value is changed by the user. Provides new value as an callback's argument | -| pin | `string` | `'round-round'` | The control's border view. `'round-round'` by default | -| placeholder | `string` | `-` | Text that appears in the control when it has no value set | -| qa | `string` | `-` | Test id attribute (`data-qa`) | -| rows | `number` | `-` | The number of visible text lines for the control. If not specified, the hight will be automatically calculated based on the content | -| size | `'s' \| 'm' \| 'l' \| 'xl'` | `'m'` | The control's size. `'m'` by default | -| tabIndex | `string` | `-` | The control's `tabindex` attribute | -| type | `string` | `-` | The control's type | -| value | `string` | `-` | The control's value | -| view | `'normal' \| 'clear'` | `'normal'` | The control's view. `'normal'` by default | -| note | `React.ReactNode` | `-` | An optional element displayed under the lower right corner of the control and sharing the place with the error container | + + +# TextArea + + + +```tsx +import {TextArea} from '@gravity-ui/uikit'; +``` + +`TextArea` allow users to enter text into a UI. + +## Appearance + +The `TextArea`'s appearance is controlled by the `view` and `pin` properties. + +### View + +`normal` - this is the main view of `TextArea` (used by default). + + + +`clear` - this view could be used in case of using custom wrapper for `TextArea`. + + + + + +```tsx +