Component: Text Area

[Albertlarsen]

Description

Figma

Link to correct placement in our Figma component library.

Specification

• Text area should have a label and it should be possible to add an additional description on several lines under label.
• It should be possible to add a character count.
• The width is 100% inside the grid its placed in. It comes in different heights. The height that matches the expected user input should be used.
• Read-only should as default be plain text, but could be highlighted with an extra css-class for specific cases. See guidelines in Figma.

Design tasks

• Component is created in Figma
• All relevant states are created
• Functionality/animation is described and prototyped
• The disabled / read-only should be handled equally on all components, find something that works across.

Tokens

• The size is described with tokens
• spacing is described with tokens
• The color of all states are described with tokens
• Border width or styling is described with tokens
• Text size are described with tokens

Size
Sets min-height: 
component-textarea-size-min_height-xsmall
component-textarea-size-min_height-small
component-textarea-size-min_height-medium
component-textarea-size-min_height-large
component-textarea-size-min_height-xlarge

-------

Space
Sets padding x and y:
component-textarea-space-padding-x
component-textarea-space-padding-y

-------

Color
Sets border color:
component-textarea-color-border-default
component-textarea-color-border-hover
component-textarea-color-border-disabled
component-textarea-color-border-read-only

Sets background color:
component-textarea-color-background-default
component-textarea-color-background-read-only

Sets text-color:
component-textarea-color-text-default
component-textarea-color-text-disabled


Sets outline color for focus:
interactive_components-colors-focus_outline

-------

Font Size
Sets font-size:
component-textarea-font_size-default

-------

Border width
interactive_components-border_width-normal


-------

Border radius
interactive_components-border_radius-normal



SVG

• If there are used any svgs in this component is it available for the developer?

[mrosvik]

Status: Standard states and types are finished, but the disabled / read-only state may change as we have to handle this equally on all components, and we should find something that works across.

Do we need a larger text area variant with WYSIWYG editor for studio? Should that be a variant of this component or a different component? @haakemon

[haakemon]

Good work on this 😁

Yes, we will need some WYSIWYG editor with markdown support for Studio. I think that should be a separate component.

[FinnurO]

Would this be the time to introduce/include a character count? Altinn/altinn-studio#1116

[mrosvik]

Text area is ready for Review and development.