You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Spacing start/end edge to value for XL component should use `component-edge-to-text-300`, not `-200`
11
+
- Spacing top edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-top-to-text-75`, `-100`, `-200`, and `-300`)
12
+
- Spacing bottom edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-bottom-to-text-75`, `-100`, `-200`, and `-300`)
13
+
- Border thickness has been increased to 2px, and border colors have been updated to match spec
14
+
- Adjust side label inline spacing to field, should be `spacing-200` for all tshirt sizes
15
+
- Change disabled background color to `gray-25`
16
+
- Change disabled-border-color from transparent to `disabled-border-color`
17
+
- Use new and updated tokens:
18
+
- use tokens for textfield width (`field-default-width-small`, `-medium`, `-large`, `-extra-large`)
19
+
- use updated corner radius tokens
20
+
- use different component-bottom-to-text tokens for character-count-spacing-block
21
+
- update tokens for alert icon block spacing
22
+
- update tokens for alert and invalid inline-start spacing
* A text area is multi-line text field using the `<textarea>` element that lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.
10
+
* A text area is multi-line text field using the `<textarea>` element that lets a user input a longer amount of text than a standard text field. It
11
+
* can include all of the standard validation options supported by the text field component.
12
+
*
13
+
* For single-line text input, see the [text field](/docs/components-textfield--docs) component.
11
14
*/
12
15
exportdefault{
13
16
title: "Text area",
@@ -35,7 +38,15 @@ Default.args = {};
35
38
Default.tags=["!autodocs"];
36
39
37
40
// ********* DOCS ONLY ********* //
38
-
41
+
/**
42
+
* A text area should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label
43
+
* could be undefined. A text area without a visible label should still include an aria-label in HTML (depending on the context, "aria-label" or
44
+
* "aria-labelledby").
45
+
*
46
+
* When the text area is focused using the keyboard (e.g. with the tab key), the implementation must add the `is-keyboardFocused` class, which
47
+
* displays the focus indicator. This indicator should not appear on focus from a click or tap. The keyboard focused example below has this class
48
+
* applied on first load for demonstration purposes.
49
+
*/
39
50
exportconstStandard=TextAreaOptions.bind({});
40
51
Standard.tags=["!dev"];
41
52
Standard.storyName="Default";
@@ -55,7 +66,8 @@ CharacterCount.parameters = {
55
66
};
56
67
57
68
/**
58
-
* A text area in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.
69
+
* A text area in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout
70
+
* continuity and communicate that a field may become available later.
* A text area can have [help text](/docs/components-help-text--docs) below the field to give extra context or instruction about what a user should input in the field. The help text area has two options: a description and an error message. The description communicates a hint or helpful information, such as specific requirements for correctly filling out the field. The error message communicates an error for when the field requirements aren’t met, prompting a user to adjust what they had originally input.
91
+
* A text area can have [help text](/docs/components-help-text--docs) below the field to give extra context or instruction about what a user should
92
+
* input in the field. The help text area has two options: a description and an error message. The description communicates a hint or helpful
93
+
* information, such as specific requirements for correctly filling out the field. The error message communicates an error for when the field
94
+
* requirements aren't met, prompting a user to adjust what they had originally input.
71
95
*
72
-
* Instead of placeholder text, use the help text description to convey requirements or to show any formatting examples that would help user comprehension. Putting instructions for how to complete an input, requirements, or any other essential information into placeholder text is not accessible.
96
+
* Instead of placeholder text, use the help text description to convey requirements or to show any formatting examples that would help user
97
+
* comprehension. Putting instructions for how to complete an input, requirements, or any other essential information into placeholder text is not
* Text area has a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed.
121
+
* Text area has a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not
122
+
* interacted with or changed.
91
123
*/
92
124
exportconstReadonly=Template.bind({});
93
125
Readonly.tags=["!dev"];
@@ -117,7 +149,8 @@ SideLabel.parameters = {
117
149
};
118
150
119
151
/**
120
-
* Text area can display a validation icon when the text entry is expected to conform to a specific format (e.g., email address, credit card number, password creation requirements, etc.). The icon appears as soon as a user types a valid entry in the field.
152
+
* Text area can display a validation icon when the text entry is expected to conform to a specific format (e.g., email address, credit card number,
153
+
* password creation requirements, etc.). The icon appears as soon as a user types a valid entry in the field.
121
154
*/
122
155
exportconstValidation=Template.bind({});
123
156
Validation.tags=["!dev"];
@@ -144,22 +177,7 @@ Sizing.parameters = {
144
177
chromatic: {disableSnapshot: true}
145
178
};
146
179
147
-
/**
148
-
* When the text area was focused using the keyboard (e.g. with the tab key), the implementation must add the `is-keyboardFocused` class, which
149
-
* displays the focus indicator. This indicator should not appear on focus from a click or tap.
150
-
* The example below has this class applied on first load for demonstration purposes.
0 commit comments