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
Draft

docs: add ux description for textarea #1520

Show file tree
Hide file tree
Changes from 1 commit
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
70 changes: 70 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,70 @@
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-field"></Playground>

### Disabled

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

### Readonly

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

### RowsCols

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

### Validation

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

## API

### Properties

<Props />

### Events

<Events />

<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" height="7rem"></Playground>

#### Disabled

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

#### Readonly

<Playground
name="textarea-readonly"
height="7rem"
hideInitalCodePreview
></Playground>
62 changes: 62 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,62 @@
The Textarea component allows users to input multi-line text. It can be used in various forms where longer text input is required.
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved

![Textarea overview](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3814-1128&t=DtCmoFcLwhf7ke3S-4)
1. Label
2. Required field indicator (optional)
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
3. Placeholder text
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only "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)
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
- **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 text**: [See form field](./forms/forms-field.md)
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
- **Counter**: [See form field](./forms/forms-field.md)
- **Resize behavior**: Determines how textareas can be resized (both directions, horizontally, vertically, no resizing)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to include: what is the standard size, what is our default version, and when do we use each option?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additionally, is this an option or should it be handled in the behavior in context

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed it to have a short notice on resizing options (both, horiz, vert, none) here and guidance how to use it in the behavior section.

- **Columns and width**: Defines inital width by number of columns and/or width
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
- **Rows and height**: Defines inital height by number of rows and/or height
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved


## Behavior
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved

- **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
- **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**: Left aligned
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved

## States

- Default
- Hover
- Focused
- Read-only
- 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 use the textarea for inputs that require multiple lines of text, such as comments, feedback, or detailed descriptions
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
- Do ensure the textarea is appropriately sized for the expected input
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
- Do use the placeholder attribute to give users an example of the expected input
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved
- Do use minimum and maximum character limits to handle edge cases
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do set minimum and maximum character limits to ensure proper input length

- Don’t use the textarea for short, single-line inputs like names or email addresses; use an input field instead
flxlst09 marked this conversation as resolved.
Show resolved Hide resolved

## Related patterns

- [Form fields](./forms/forms-field.md)
- [Validation](./forms/forms-validation.md)
- [Layout](./forms/forms-layout.md)
- [Input](input.md)
73 changes: 10 additions & 63 deletions packages/documentation/docs/controls/textarea-field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,17 @@
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';
import LinkableDocsTabs from '@site/src/components/LinkableDocsTabs';

# Textarea

<Tags />

## Examples

### Basic

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

### Disabled

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

### Readonly

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

### RowsCols

<Playground name="textarea-field-rows-cols" height="10rem"></Playground>
import DocsUx from './\_textarea-field_styleguide.mdx'
import DocsCode from './\_textarea-field_code.mdx'

### Validation

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

## API

### Properties

<Props />

### 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" height="7rem"></Playground>

#### Disabled

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

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

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