Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add ux description for textarea #1520

Draft
wants to merge 3 commits into
base: feat/select-validation
Choose a base branch
from
+134 −63
Draft

docs: add ux description for textarea #1520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
855f4ca
docs: add ux description for textarea
flxlst09 Oct 15, 2024
d569014
Merge remote-tracking branch 'origin/feat/select-validation' into doc…
flxlst09 Oct 16, 2024
f274116
docs: textarea ux description
flxlst09 Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions packages/documentation/docs/controls/_textarea-field_code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import Admonition from '@theme/Admonition';
import Playground from '@site/src/components/PlaygroundV3';
import Props from '@site/docs/auto-generated/ix-textarea/props.md';
import Events from '@site/docs/auto-generated/ix-textarea/events.md';

## Examples

### Basic

<Playground name="textarea"></Playground>

### Disabled

<Playground name="textarea-disabled"></Playground>

### Readonly

<Playground name="textarea-readonly"></Playground>

### RowsCols

<Playground name="textarea-rows-cols" height="10rem"></Playground>

### Validation

<Playground name="textarea-validation" height="30rem"></Playground>

## API

### Properties

<Props />

### Events

<Events />

## Legacy Text area (Deprecated)

<Admonition type="tip" icon="💡" title="Legacy documentation">
Please note that the following documentation for a previous implementation of
the component is now deprecated and may be outdated.
</Admonition>

### Usage

<Playground name="textarea-legacy" height="7rem"></Playground>

#### Disabled

<Playground
name="textarea-legacy-disabled"
height="7rem"
hideInitalCodePreview
></Playground>

#### Readonly

<Playground
name="textarea-legacy-readonly"
height="7rem"
hideInitalCodePreview
></Playground>
60 changes: 60 additions & 0 deletions packages/documentation/docs/controls/_textarea-field_styleguide.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
The textarea component allows users to input multi-line text, making it ideal for forms that require longer entries. We typically use textareas in scenarios such as feedback forms, comment sections, and message composition.

![Textarea overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3814-1128&t=DtCmoFcLwhf7ke3S-4)
1. Label
2. Required field indicator
3. Placeholder
4. Container
5. Resize handle
6. Helper or feedback text
7. Counter

## Options

- **Label**: See [form field](./forms/forms-field.md)
- **Value**: See [form field](./forms/forms-field.md)
- **Required**: See [form field](./forms/forms-field.md)
- **Helper text**: See [form field](./forms/forms-field.md)
- **Feedback text**: See [form field](./forms/forms-field.md)
- **Show text as tooltip**: See [form field](./forms/forms-field.md)
- **Placeholder**: See [form field](./forms/forms-field.md)
- **Counter**: See [form field](./forms/forms-field.md)
- **Resize behavior**: Determines how textareas can be resized (both directions, horizontally, vertically, or no resizing). Default size is 300px x 100px.
- **Columns and width**: Defines inital width by number of columns and/or width.
- **Rows and height**: Defines inital height by number of rows and/or height.


## Behavior in context

- **Interaction**:
- Clicking in the container enables the editing of the field.
- Users can type, copy, paste, and cut text within textareas.
- Optional: Users can resize textareas to fit their needs. For example, vertical resizing can be useful in feedback forms when the entry exceeds the default height.
- **Validation**:
- Minimum and maximum length defines number of characters allowed.
- See [form validation](./forms/forms-validation.md)
- **Overflow**: Text within the textarea is not truncated; it supports scrolling for overflow content.
- **Alignment**: Text is always left-aligned in textareas.
- **Sizing**:
- Use columns and rows when you want to define the size of the textarea based on the number of characters (columns) and lines (rows) it can display. This is particularly useful for textareas where the content length is predictable, such as input fields with character limits.
- Use width and height when you need to specify the exact dimensions of the textarea in terms of pixels, rems, or other units. This is ideal for ensuring consistent layout and design across different screen sizes and devices, especially in responsive designs.

## States

Textareas have five states: Default, hover, focused, read-only, and disabled

flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
![Textarea states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3947-527&t=DtCmoFcLwhf7ke3S-4)

## Dos and Don’ts

- Do ensure the textarea size matches the expected input, e.g. 5 to 10 rows for detailed feedback
- Do use the placeholder to give users an example of the expected input
- Do set minimum and maximum character limits to ensure appropriate input length
- Don’t use the textarea for short, single-line inputs like names or email addresses; use an [input field](./input.mdx) instead

## Related patterns

- [Form fields](./forms/forms-field.md)
- [Validation](./forms/forms-validation.md)
- [Layout](./forms/forms-layout.md)
- [Input](./input.mdx)
74 changes: 11 additions & 63 deletions packages/documentation/docs/controls/textarea.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,18 @@
import Admonition from '@theme/Admonition';
import Playground from '@site/src/components/PlaygroundV3';
import Props from '@site/docs/auto-generated/ix-textarea/props.md';
import Events from '@site/docs/auto-generated/ix-textarea/events.md';
import Tags from '@site/docs/auto-generated/ix-textarea/tags.md';

# Textarea

<Tags />

## Examples

### Basic

<Playground name="textarea"></Playground>

### Disabled

<Playground name="textarea-disabled"></Playground>

### Readonly

<Playground name="textarea-readonly"></Playground>

### RowsCols
import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';

<Playground name="textarea-rows-cols" height="10rem"></Playground>

### Validation

<Playground name="textarea-validation" height="30rem"></Playground>

## API

### Properties

<Props />
import DocsUx from './\_textarea-field_styleguide.mdx'
import DocsCode from './\_textarea-field_code.mdx'
import Tags from '@site/docs/auto-generated/ix-textarea/tags.md';

### Events

<Events />
# Textarea

<Tags />

## Legacy Text area (Deprecated)

<Admonition type="tip" icon="💡" title="Legacy documentation">
Please note that the following documentation for a previous implementation of
the component is now deprecated and may be outdated.
</Admonition>

### Usage

<Playground name="textarea-legacy" height="7rem"></Playground>

#### Disabled

<Playground
name="textarea-legacy-disabled"
height="7rem"
hideInitalCodePreview
></Playground>

#### Readonly
<br/>
<br/>

<Playground
name="textarea-legacy-readonly"
height="7rem"
hideInitalCodePreview
></Playground>
<LinkableDocsTabs>
<DocsUx />
<DocsCode />
</LinkableDocsTabs>
Loading