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

[35430] Text Area: Remove Sketch and Adobe XD references #886

Open
wants to merge 1 commit into
base: vNext
Choose a base branch
from
Open

[35430] Text Area: Remove Sketch and Adobe XD references #886

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
43 changes: 19 additions & 24 deletions en/components/textarea.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Text Area - Design System Component
_description: The Text Area Component Symbol allows collecting long text user data and displaying it in multiple lines.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Figma to Angular, Export code from Figma, Figma to HTML, Figma UI kits, Sketch, Ignite UI for Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Adobe XD, Adobe XD to Angular, Export code from Adobe XD, Adobe XD to HTML, Adobe XD UI kits
_description: The Text Area Component allows collecting long text user data and displaying it in multiple lines.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

# Text Area
Expand All @@ -13,40 +13,35 @@ Use the Text Area Component to let the user input long text data displayed in mu
<img class="responsive-img" src="../images/textarea_demo.png" srcset="../images/[email protected] 2x" />

## Types
In Figma we offer a choice between text area with or without a hint, which can be switched on/off through a boolean property.
In Figma we offer a choice between text area with or without a hint, which can be switched on/off through the `Hint` boolean property.

<img class="responsive-img" src="../images/textarea_hint.png" srcset="../images/[email protected] 2x" />
`with hint`
<img class="responsive-img" src="../images/textarea_nohint.png" srcset="../images/[email protected] 2x" />
`without hint`
| With a hint | Without a hint |
| ------- | ------- |
| <img class="responsive-img" src="../images/textarea_hint.png" srcset="../images/[email protected] 2x" /> | <img class="responsive-img" src="../images/textarea_nohint.png" srcset="../images/[email protected] 2x" /> |

## Interaction State

The Text Area can be inserted in an enabled or disabled state.
The Text Area can be switched from an enabled to disabled state from the `Disabled` boolean property.

<img class="responsive-img" src="../images/textarea_enabled.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/textarea_disabled.png" srcset="../images/[email protected] 2x" />
| Enabled | Disabled |
| ------- | ------- |
| <img class="responsive-img" src="../images/textarea_enabled.png" srcset="../images/[email protected] 2x" /> | <img class="responsive-img" src="../images/textarea_disabled.png" srcset="../images/[email protected] 2x" /> |

## State

When the user interacts with the Text Area, it goes through various states: Idle with a placeholder in the place of the content, Focused while the user is typing in it, and Filled once the user has finished adding content and moved on. These flexibility enhancements afford a more dynamic interaction design that can seamlessly flow into high-fidelity prototyping.
When the user interacts with the Text Area, it goes through various states: Idle with a placeholder in the place of the content, Focused while the user is typing in it, and Filled once the user has finished adding content and moved on. These flexibility enhancements afford a more dynamic interaction design that can seamlessly flow into high-fidelity prototyping. In Figma you can switch between the states from the `State` property on the right properties panel.

<img class="responsive-img" src="../images/textarea_idle.png" srcset="../images/[email protected] 2x" />
`idle`

<img class="responsive-img" src="../images/textarea_focused.png" srcset="../images/[email protected] 2x" />
`focused`

<img class="responsive-img" src="../images/textarea_filled.png" srcset="../images/[email protected] 2x" />
`filled`
| Idle | Focused | Filled |
| ------- | ------- |
| <img class="responsive-img" src="../images/textarea_idle.png" srcset="../images/[email protected] 2x" /> | <img class="responsive-img" src="../images/textarea_focused.png" srcset="../images/[email protected] 2x" /> | <img class="responsive-img" src="../images/textarea_filled.png" srcset="../images/[email protected] 2x" /> |

Every experienced designer uses constraints wisely to limit the user input and avoid invalid states, hence the availability of validation styles. Through the available validation styles, the Text Area is equipped for sophisticated designs that display Success, Warning, and Error visuals.

<img class="responsive-img" src="../images/textarea_success.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/textarea_warning.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/textarea_error.png" srcset="../images/[email protected] 2x" />
| Success | Warn | Error |
| ------- | ------- |
| <img class="responsive-img" src="../images/textarea_success.png" srcset="../images/[email protected] 2x" /> | <img class="responsive-img" src="../images/textarea_warning.png" srcset="../images/[email protected] 2x" /> | <img class="responsive-img" src="../images/textarea_error.png" srcset="../images/[email protected] 2x" /> |

In Figma, states can be easily switched from the `State` property in the right sidebar. In Sketch, the states and validation states are achieved with `Symbol Overrides`, while in Adobe XD we are using the `Component States` paradigm to let you easily switch between them.
In Figma, states can be easily switched from the `State` property on the right properties panel.

## Resizing

Expand All @@ -56,7 +51,7 @@ The Text Area lets the user resize the area horizontally and vertically by a dra

## Styling

The Text Area comes with styling flexibility through the colors of its Background, Drag Indicator, Border, and Text. To change the validation styles, it is recommended to update the respective color variables in the Indigo.Design library.
The Text Area comes with styling flexibility through the colors of its Background, Drag Indicator, Border, and Text. To change the validation styles, it is recommended to update the respective color styles in the Indigo.Design library.

<img class="responsive-img" src="../images/textarea_styling.png" srcset="../images/[email protected] 2x" />

Expand Down
Loading