Skip to content

Commit

Permalink
feat: updated TextInput "type" property to allow using only well-know… (
Browse files Browse the repository at this point in the history 
#1158)
  • Loading branch information
@DenisVershkov
DenisVershkov authored Nov 24, 2023
1 parent 14ff07d commit 4b2b5cb
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 34 deletions.
66 changes: 33 additions & 33 deletions src/components/controls/TextInput/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,36 +235,36 @@ 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.InputHTMLAttributes<HTMLInputElement>` | |
| controlRef | React ref provided to the control | `React.Ref<HTMLInputElement>` | |
| defaultValue | The control's default value, used when the component is not controlled | `string` | |
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
| errorMessage | Error text | `string` | |
| errorPlacement | Error placement | `outside` `inside` | `outside` |
| hasClear | Shows the icon for clearing control's value | `boolean` | `false` |
| id | The control's `id` attribute | `string` | |
| label | Help text rendered to the left of the input node | `string` | |
| leftContent | The user`s node rendered before label and input | `React.ReactNode` | |
| name | The `name` attribute of the control. If unspecified, it will be autogenerated if not specified | `string` | |
| note | An optional element displayed under the bottom-right corner of the control that shares a space with the error container | `React.ReactNode` | |
| onBlur | Fires when the control lost focus. Provides focus event as a 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 a callback's argument | `function` | |
| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `function` | |
| onKeyUp | Fires when a key is released. Provides keyboard event as a 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` | |
| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | |
| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| tabIndex | The `tabindex` attribute of the control | `string` | |
| type | The type of the control | `string` | |
| validationState | Validation state | `"invalid"` | |
| value | The value of the control | `string` | |
| view | The view of the control | `"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.InputHTMLAttributes<HTMLInputElement>` | |
| controlRef | React ref provided to the control | `React.Ref<HTMLInputElement>` | |
| defaultValue | The control's default value, used when the component is not controlled | `string` | |
| disabled | Indicates that the user cannot interact with the control | `boolean` | `false` |
| errorMessage | Error text | `string` | |
| errorPlacement | Error placement | `outside` `inside` | `outside` |
| hasClear | Shows the icon for clearing control's value | `boolean` | `false` |
| id | The control's `id` attribute | `string` | |
| label | Help text rendered to the left of the input node | `string` | |
| leftContent | The user`s node rendered before label and input | `React.ReactNode` | |
| name | The `name` attribute of the control. If unspecified, it will be autogenerated if not specified | `string` | |
| note | An optional element displayed under the bottom-right corner of the control that shares a space with the error container | `React.ReactNode` | |
| onBlur | Fires when the control lost focus. Provides focus event as a 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 a callback's argument | `function` | |
| onKeyDown | Fires when a key is pressed. Provides keyboard event as a callback's argument | `function` | |
| onKeyUp | Fires when a key is released. Provides keyboard event as a 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` | |
| rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | |
| size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| tabIndex | The `tabindex` attribute of the control | `string` | |
| type | The type of the control | `"email"` `"number"` `"password"` `"search"` `"tel"` `"text"` `"url"` | |
| validationState | Validation state | `"invalid"` | |
| value | The value of the control | `string` | |
| view | The view of the control | `"normal"` `"clear"` | `"normal"` |
2 changes: 1 addition & 1 deletion src/components/controls/TextInput/TextInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const b = block('text-input');

export type TextInputProps = BaseInputControlProps<HTMLInputElement> & {
/** The control's [type](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types) */
type?: string;
type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
/** The control's html attributes */
controlProps?: React.InputHTMLAttributes<HTMLInputElement>;
/** Help text rendered to the left of the input node */
Expand Down

0 comments on commit 4b2b5cb

Please sign in to comment.