Skip to content

Commit 986703e

Browse files
krisantrobuskodiakhq[bot]
krisantrobus
and
kodiakhq[bot]
authored
feat(textarea,data-grid): interactive elements and controlled height (#4291)
* feat(textarea,data-grid): add support for interactive elements and control heights * chore(ci): typedocs, lint * feat(docs-textarea): made a note of minRows * fix(docs): incorrect story link * fix(docs): usage for Textarea --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent a9e3040 commit 986703e

File tree

10 files changed

+195
-43
lines changed

10 files changed

+195
-43
lines changed

‎.changeset/quick-seals-do.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/data-grid": patch
3+
"@twilio-paste/core": patch
4+
---
5+
6+
[DataGridCell] reworked the click events triggered to allow interactive elements to correctly pull focus

‎.changeset/strange-pens-smell.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/textarea": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[TextArea] exposed a prop to allow the minRows to be configured effectively setting the min height

‎packages/paste-core/components/data-grid/src/DataGridCell.tsx

+2-17
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Td } from "./table/Td";
99
import type { TdProps } from "./table/Td";
1010
import { Th } from "./table/Th";
1111
import type { ThProps } from "./table/Th";
12-
import { ensureFocus, isCell, updateTabIndexForActionable } from "./utils";
12+
import { isCell, updateTabIndexForActionable } from "./utils";
1313

1414
// This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export
1515

@@ -56,12 +56,6 @@ export const DataGridCell: React.FC<React.PropsWithChildren<DataGridCellProps>>
5656
const dataGridState = React.useContext(DataGridContext);
5757
const cellRef = React.useRef(null) as React.RefObject<HTMLTableCellElement | null>;
5858

59-
const handleMouseDown = React.useCallback(() => {
60-
if (cellRef.current) {
61-
ensureFocus(cellRef.current);
62-
}
63-
}, []);
64-
6559
/**
6660
* MutationObserver callback for the cell
6761
* Handles correcting tabindex values on the cell and children outside of the React lifecycle
@@ -111,16 +105,7 @@ export const DataGridCell: React.FC<React.PropsWithChildren<DataGridCellProps>>
111105
}, 10);
112106
}, [dataGridState.actionable]);
113107

114-
return (
115-
<CompositeItem
116-
{...props}
117-
{...dataGridState}
118-
element={element}
119-
ref={cellRef}
120-
as={as === "td" ? Td : Th}
121-
onClick={handleMouseDown}
122-
/>
123-
);
108+
return <CompositeItem {...props} {...dataGridState} element={element} ref={cellRef} as={as === "td" ? Td : Th} />;
124109
};
125110

126111
DataGridCell.displayName = "DataGridCell";

‎packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx

+27-9
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,27 @@ const ActionMenu = (): JSX.Element => {
3030
);
3131
};
3232

33+
const InputCell: React.FC<{ colIndex: number; rowIndex: number; value: string | null }> = ({
34+
colIndex,
35+
rowIndex,
36+
value: originalValue,
37+
}): JSX.Element => {
38+
const [value, setValue] = React.useState<string | null>(originalValue);
39+
return (
40+
<DataGridCell key={`col-${colIndex}`}>
41+
<Input
42+
aria-label={TableHeaderData[colIndex]}
43+
data-testid={`input-${rowIndex}-${colIndex}`}
44+
value={value || ""}
45+
type="text"
46+
onChange={(change) => {
47+
setValue(change.target.value);
48+
}}
49+
/>
50+
</DataGridCell>
51+
);
52+
};
53+
3354
export const ComposableCellsDataGrid = (): JSX.Element => {
3455
/* eslint-disable react/no-array-index-key */
3556
return (
@@ -50,15 +71,12 @@ export const ComposableCellsDataGrid = (): JSX.Element => {
5071
{row.map((col, colIndex) => {
5172
if (colIndex === 0 || colIndex === 1) {
5273
return (
53-
<DataGridCell key={`col-${colIndex}`}>
54-
<Input
55-
aria-label={TableHeaderData[colIndex]}
56-
data-testid={`input-${rowIndex}-${colIndex}`}
57-
value={col || ""}
58-
type="text"
59-
onChange={() => {}}
60-
/>
61-
</DataGridCell>
74+
<InputCell
75+
key={`input-cell-${rowIndex}-${colIndex}`}
76+
colIndex={colIndex}
77+
rowIndex={rowIndex}
78+
value={col}
79+
/>
6280
);
6381
}
6482
if (colIndex === 4) {

‎packages/paste-core/components/data-grid/stories/components/FixedCellHeights.tsx

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { Box } from "@twilio-paste/box";
2+
import { EditableCodeBlock } from "@twilio-paste/editable-code-block";
3+
import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
4+
import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from "@twilio-paste/menu";
5+
import { Option, Select } from "@twilio-paste/select";
6+
import { TextArea } from "@twilio-paste/textarea";
7+
import * as React from "react";
8+
import type { JSX } from "react";
9+
10+
import { DataGrid, DataGridBody, DataGridCell, DataGridHead, DataGridHeader, DataGridRow } from "../../src";
11+
import { TableBodyData, TableHeaderData } from "./constants";
12+
13+
const ActionMenu = (): JSX.Element => {
14+
const menu = useMenuState();
15+
return (
16+
<Box display="flex" justifyContent="center">
17+
<MenuButton {...menu} variant="reset" size="reset">
18+
<MoreIcon decorative={false} title="More options" />
19+
</MenuButton>
20+
<Menu {...menu} aria-label="Preferences">
21+
<MenuItem {...menu} href="https://google.com">
22+
Settings
23+
</MenuItem>
24+
<MenuItem {...menu} disabled>
25+
Extensions
26+
</MenuItem>
27+
<MenuSeparator {...menu} />
28+
<MenuItem {...menu}>Keyboard shortcuts</MenuItem>
29+
</Menu>
30+
</Box>
31+
);
32+
};
33+
34+
const InputCell: React.FC<{ colIndex: number; rowIndex: number; value: string | null }> = ({
35+
colIndex,
36+
rowIndex,
37+
value: originalValue,
38+
}): JSX.Element => {
39+
const [value, setValue] = React.useState<string | null>(originalValue);
40+
return (
41+
<DataGridCell key={`col-${colIndex}`}>
42+
<TextArea
43+
aria-label={TableHeaderData[colIndex]}
44+
data-testid={`input-${rowIndex}-${colIndex}`}
45+
value={value || ""}
46+
onChange={(change) => {
47+
setValue(change.target.value);
48+
}}
49+
maxRows={6}
50+
minRows={6}
51+
id={`text-area-${rowIndex}-${colIndex}`}
52+
/>
53+
</DataGridCell>
54+
);
55+
};
56+
57+
export const FixedCellHeightDataGrid = (): JSX.Element => {
58+
/* eslint-disable react/no-array-index-key */
59+
return (
60+
<DataGrid aria-label="User list" data-testid="data-grid" striped>
61+
<DataGridHead>
62+
<DataGridRow>
63+
<DataGridHeader data-testid="header-1">{TableHeaderData[0]}</DataGridHeader>
64+
<DataGridHeader>{TableHeaderData[1]}</DataGridHeader>
65+
<DataGridHeader>{TableHeaderData[2]}</DataGridHeader>
66+
<DataGridHeader>{TableHeaderData[3]}</DataGridHeader>
67+
<DataGridHeader>{TableHeaderData[4]}</DataGridHeader>
68+
<DataGridHeader>Actions</DataGridHeader>
69+
</DataGridRow>
70+
</DataGridHead>
71+
<DataGridBody>
72+
{TableBodyData.map((row, rowIndex) => (
73+
<DataGridRow key={`row-${rowIndex}`}>
74+
{row.map((col, colIndex) => {
75+
if (colIndex === 0 || colIndex === 1) {
76+
return (
77+
<InputCell
78+
key={`input-cell-${rowIndex}-${colIndex}`}
79+
colIndex={colIndex}
80+
rowIndex={rowIndex}
81+
value={col}
82+
/>
83+
);
84+
}
85+
if (colIndex === 3) {
86+
return (
87+
<DataGridCell key={`col-${colIndex}`}>
88+
<EditableCodeBlock
89+
width="300px"
90+
// calculated height based on min row number (20px) * number of rows (6) + padding (2 * 8px)
91+
height="136px"
92+
defaultLanguage="typescript"
93+
defaultValue={`const user: User = new UserAccount("${row[colIndex]}");`}
94+
/>
95+
</DataGridCell>
96+
);
97+
}
98+
if (colIndex === 4) {
99+
return (
100+
<DataGridCell key={`col-${colIndex}`}>
101+
<Select key={`select-${rowIndex}-${colIndex}`} defaultValue="dogs" aria-label="Phone">
102+
<Option value="cats">(415) 555-CATS</Option>
103+
<Option value="dogs">(415) 555-DOGS</Option>
104+
<Option value="mice">(415) 555-MICE</Option>
105+
</Select>
106+
</DataGridCell>
107+
);
108+
}
109+
return <DataGridCell key={`col-${colIndex}`}>{col}</DataGridCell>;
110+
})}
111+
<DataGridCell key="col-5">
112+
<ActionMenu />
113+
</DataGridCell>
114+
</DataGridRow>
115+
))}
116+
</DataGridBody>
117+
</DataGrid>
118+
);
119+
/* eslint-enable react/no-array-index-key */
120+
};

‎packages/paste-core/components/data-grid/stories/index.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export { I18nDataGrid } from "./components/I18nDataGrid";
99
export { DataGridLayouts } from "./components/DataGridLayouts";
1010
export { ColumnSpanDataGrid } from "./components/ColumnSpanDataGrid";
1111
export { StickyHeaderDataGrid } from "./components/StickyHeaderDataGrid";
12+
export { FixedCellHeightDataGrid } from "./components/FixedCellHeights";
1213

1314
// eslint-disable-next-line import/no-default-export
1415
export default {

‎packages/paste-core/components/textarea/src/TextArea.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,14 @@ export interface TextAreaProps extends Omit<HTMLPasteProps<"textarea">, "maxRows
103103
* @memberof TextAreaProps
104104
*/
105105
maxRows?: number;
106+
/**
107+
* Adjust how big the textarea should start.
108+
*
109+
* @default 3
110+
* @type {(number)}
111+
* @memberof TextAreaProps
112+
*/
113+
minRows?: number;
106114
/**
107115
* The size of the textarea is strictly controlled by the component
108116
*
@@ -182,6 +190,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
182190
variant,
183191
resize = "none",
184192
maxRows = 10,
193+
minRows = 3,
185194
// size, height and width should not be passed down
186195
size,
187196
height,
@@ -209,7 +218,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
209218
readOnly={readOnly}
210219
ref={ref}
211220
rows={3}
212-
minRows={3}
221+
minRows={minRows}
213222
maxRows={maxRows}
214223
spellCheck
215224
resize={resize}

‎packages/paste-core/components/textarea/type-docs.json

+7
Original file line numberDiff line numberDiff line change
@@ -632,6 +632,13 @@
632632
"required": false,
633633
"externalProp": true
634634
},
635+
"minRows": {
636+
"type": "number",
637+
"defaultValue": "3",
638+
"required": false,
639+
"externalProp": false,
640+
"description": "Adjust how big the textarea should start."
641+
},
635642
"name": {
636643
"type": "string",
637644
"defaultValue": null,

‎packages/paste-website/src/pages/components/textarea/index.mdx

+15-15
Original file line numberDiff line numberDiff line change
@@ -63,22 +63,22 @@ A Textarea allows for any text to be entered and can't be restricted as other [i
6363
### Accessibility
6464

6565
- Include a visible label on **all** form fields.
66-
- Each label must use the `htmlFor` prop that equals the `id` of the associated textarea.
66+
- Each label must use the `htmlFor` prop that equals the `id` of the associated Textarea.
6767
- Avoid placeholder text. It's not broadly supported by assistive technologies, doesn't display in older browsers, and dissapears from the field when a user enters text.
6868
- Use 1 of 3 ways to label a form field:
6969
- Visible label with [Label](/components/label) (preferred)
70-
- Visible label that's associated to the textarea with `aria-labelledby`
70+
- Visible label that's associated to the Textarea with `aria-labelledby`
7171
- Label directly using `aria-label`
7272
- Provide clear identification of required fields in the label or at the start of a form. If you use the required field indicator, include the form key at the start of the form.
7373
- Use the `required` prop to programatically indicate they are required to browsers.
7474
- Use [Help Text](/components/help-text) and an error icon to show [inline error text](/patterns/error-state) on any field that errors to make it visually clear that the field changed.
75-
- If the textarea has associated help text or error text, include the `aria-describedby` prop on the textarea. This should match the `id` of the help or error text.
75+
- If the Textarea has associated help text or error text, include the `aria-describedby` prop on the Textarea. This should match the `id` of the help or error text.
7676

7777
## Examples
7878

7979
### Textarea
8080

81-
The Textarea should include the base `Textarea`, along with supporting elements to compose a textarea field that gives the user the context they need to successfully fill it out:
81+
The Textarea should include the base `Textarea`, along with supporting elements to compose a Textarea field that gives the user the context they need to successfully fill it out:
8282

8383
- [**Label**](/components/label) — Every form field should have a label. The label should indicate what should be entered into field.
8484
- **Required field indicator** — If most of the fields on a form are optional, indicate the few that are required with text or a required indicator.
@@ -88,13 +88,13 @@ The Textarea should include the base `Textarea`, along with supporting elements
8888
<CalloutHeading as="h4">Accessibility insight</CalloutHeading>
8989
<CalloutText>
9090
Make sure to connect the <inlineCode>Label</inlineCode> to the <inlineCode>TextArea</inlineCode>. This is done with
91-
the <inlineCode>htmlFor</inlineCode> prop on the label, and the <inlineCode>id</inlineCode> prop on the textarea.
91+
the <inlineCode>htmlFor</inlineCode> prop on the label, and the <inlineCode>id</inlineCode> prop on the Textarea.
9292
Those two need to match.
9393
</CalloutText>
9494
<CalloutText>
95-
If the textarea has any associated help text, the textarea should also use the{' '}
95+
If the Textarea has any associated help text, the Textarea should also use the{' '}
9696
<inlineCode>aria-describedby</inlineCode> prop that equals the <inlineCode>id</inlineCode> of the help text. This
97-
ensures screen readers know the help text ties directly to the textarea.
97+
ensures screen readers know the help text ties directly to the Textarea.
9898
</CalloutText>
9999
</Callout>
100100

@@ -139,9 +139,9 @@ The Textarea should include the base `Textarea`, along with supporting elements
139139

140140
### Resizable Textarea
141141

142-
By default, the textarea is not resizable by the user. To change this, add the prop `resize='vertical'`.
142+
By default, the Textarea is not resizable by the user. To change this, add the prop `resize='vertical'`.
143143

144-
You may also provide a `maxRows` prop to limit how much the textArea grows. By default this value is 10.
144+
You may also provide a `maxRows` prop to limit how much the Textarea grows. By default this value is 10. You can also set a `minRows` value used to control the minimum height of the Textarea. By default this value is 3.
145145

146146
<LivePreview scope={{Label, HelpText, TextArea}} language="jsx">
147147
{`<>
@@ -191,7 +191,7 @@ Use a read-only form field when a field's value can't be changed, but users shou
191191

192192
## Composition notes
193193

194-
A textarea field must have at least a label and a textarea.
194+
A Textarea field must have at least a label and a Textarea.
195195

196196
<LivePreview scope={{Label, TextArea}} language="jsx">
197197
{`<>
@@ -228,7 +228,7 @@ Labels should clearly describe the value being requested. They should be concise
228228

229229
To support internationalization, avoid starting a sentence with the label and using the field to finish it since sentence structures vary across languages. For example, use "Call log expiration date" or "How long should logs be stored?". Don't use "Remove logs after:".
230230

231-
Give users enough information in help text to prevent textarea and formatting errors. Keep it concise and scoped to information that will help with validation. For example, use help text if a password field has specific requirements that a user should know prior to filling it out.
231+
Give users enough information in help text to prevent Textarea and formatting errors. Keep it concise and scoped to information that will help with validation. For example, use help text if a password field has specific requirements that a user should know prior to filling it out.
232232

233233
### Required field indicator
234234

@@ -250,23 +250,23 @@ Use Help Text to show an inline error that to explains how to fix the error. For
250250

251251
### Optional compositional elements
252252

253-
- **Prefix/suffix** — Use a prefix or suffix to help users format their textarea and to provide more context about the value a user is entering. For example, you could prefix or suffix a field with a currency symbol, or use suffix to append a character counter. Make sure to consider internationalization when using prefixes or suffixes since formatting may differ across languages. For example, currency symbols are placed on the left in American English, while they're placed on the right in French. Don't use prefix/suffix text as a replacement for a label.
253+
- **Prefix/suffix** — Use a prefix or suffix to help users format their Textarea and to provide more context about the value a user is entering. For example, you could prefix or suffix a field with a currency symbol, or use suffix to append a character counter. Make sure to consider internationalization when using prefixes or suffixes since formatting may differ across languages. For example, currency symbols are placed on the left in American English, while they're placed on the right in French. Don't use prefix/suffix text as a replacement for a label.
254254
- **Icon** — Use an icon if you need to give the user additional controls for the field. For example, use an icon to clear a field on click, removing the need for users to manually delete their entered value. Place icon buttons that trigger an action on the right side of the field. If you need 2 actions on a field (e.g., popover trigger and clear field), place the icon button that affects the field value on the right, and the other icon on the left.
255255

256256
## When to use a Textarea
257257

258-
Use a textarea when users are expected to enter text that exceeds a single line, usually longer than a sentence.
258+
Use a Textarea when users are expected to enter text that exceeds a single line, usually longer than a sentence.
259259

260260
<DoDont>
261-
<Do title="Do" body="Use a textarea to encourage longer text entry." center>
261+
<Do title="Do" body="Use a Textarea to encourage longer text entry." center>
262262
<Box width="100%" padding="space60">
263263
<Label htmlFor="long_do">Tell us your life story</Label>
264264
<TextArea onChange={() => {}} id="long_do" name="long_do" />
265265
</Box>
266266
</Do>
267267
<Dont
268268
title="Don't"
269-
body="Don't use a textarea when text entry is expected to be short since it could confuse users. Use an input instead."
269+
body="Don't use a Textarea when text entry is expected to be short since it could confuse users. Use an input instead."
270270
center
271271
>
272272
<Box width="100%" padding="space60">

‎packages/paste-website/src/pages/experiences/navigation/index.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ The Sidebar and Topbar navigation components have the following considerations:
119119

120120
<StoryPreview
121121
title="Generic docs full composition"
122-
storyID="components-sidebar-fullcompositions--docs"
122+
storyID="components-sidebar-docs--docs"
123123
code={`
124124
<Sidebar
125125
sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}

0 commit comments

Comments
 (0)