Skip to content

Commit fa81bbc

Browse files
alexisareynalexisareyn
authored
Merge branch 'main' into input-ime-composition-fix
2 parents c21e1b5 + 3189432 commit fa81bbc

File tree

50 files changed

+1280
-354
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+1280
-354
lines changed

‎build-tools/tasks/generate-i18n-messages.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ module.exports = function generateI18nMessages() {
5353
const dynamicFile = [
5454
`import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
5555
import { isDevelopment } from '../internal/is-development';
56-
import { getMatchableLocales } from './get-matchable-locales';
56+
import { getMatchableLocales } from './utils/locales';
5757
5858
export function importMessages(locale) {
5959
for (const matchableLocale of getMatchableLocales(locale)) {

‎pages/form-field/character-count.page.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, { useState } from 'react';
5+
6+
import FormField from '~components/form-field';
7+
import Input from '~components/input';
8+
9+
const maxCharacterCount = 20;
10+
11+
export default function FormFieldCharacterCountPage() {
12+
const [value, setValue] = useState('');
13+
14+
return (
15+
<>
16+
<h1>Form field character count debouncing</h1>
17+
<FormField
18+
label="Name"
19+
constraintText="Name must be 1 to 10 characters."
20+
characterCountText={`Character count: ${value.length}/${maxCharacterCount}`}
21+
errorText={value.length > maxCharacterCount && 'The name has too many characters.'}
22+
>
23+
<Input value={value} onChange={event => setValue(event.detail.value)} />
24+
</FormField>
25+
</>
26+
);
27+
}

‎pages/prompt-input/simple.page.tsx‎

Lines changed: 86 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
import AppContext, { AppContextType } from '../app/app-context';
2020
import labels from '../app-layout/utils/labels';
2121
import { i18nStrings } from '../file-upload/shared';
22+
import ScreenshotArea from '../utils/screenshot-area';
2223

2324
const MAX_CHARS = 2000;
2425

@@ -28,7 +29,6 @@ type DemoContext = React.Context<
2829
isReadOnly: boolean;
2930
isInvalid: boolean;
3031
hasWarning: boolean;
31-
hasText: boolean;
3232
hasSecondaryContent: boolean;
3333
hasSecondaryActions: boolean;
3434
hasPrimaryActions: boolean;
@@ -50,7 +50,6 @@ export default function PromptInputPage() {
5050
isReadOnly,
5151
isInvalid,
5252
hasWarning,
53-
hasText,
5453
hasSecondaryActions,
5554
hasSecondaryContent,
5655
hasPrimaryActions,
@@ -63,19 +62,6 @@ export default function PromptInputPage() {
6362
{ label: 'Item 3', dismissLabel: 'Remove item 3', disabled: isDisabled },
6463
]);
6564

66-
useEffect(() => {
67-
if (hasText) {
68-
setTextareaValue(placeholderText);
69-
}
70-
}, [hasText]);
71-
72-
useEffect(() => {
73-
if (textareaValue !== placeholderText) {
74-
setUrlParams({ hasText: false });
75-
}
76-
// eslint-disable-next-line react-hooks/exhaustive-deps
77-
}, [textareaValue]);
78-
7965
useEffect(() => {
8066
if (items.length === 0) {
8167
ref.current?.focus();
@@ -164,7 +150,14 @@ export default function PromptInputPage() {
164150
Infinite max rows
165151
</Checkbox>
166152
</FormField>
167-
<button id="placeholder-text-button" onClick={() => setUrlParams({ hasText: true })}>
153+
<button
154+
id="placeholder-text-button"
155+
onClick={() => {
156+
if (textareaValue === '') {
157+
setTextareaValue(placeholderText);
158+
}
159+
}}
160+
>
168161
Fill with placeholder text
169162
</button>
170163

@@ -187,93 +180,95 @@ export default function PromptInputPage() {
187180
label={<span>User prompt</span>}
188181
i18nStrings={{ errorIconAriaLabel: 'Error' }}
189182
>
190-
<PromptInput
191-
data-testid="prompt-input"
192-
ariaLabel="Chat input"
193-
actionButtonIconName="send"
194-
actionButtonAriaLabel="Submit prompt"
195-
value={textareaValue}
196-
onChange={(event: any) => setTextareaValue(event.detail.value)}
197-
onAction={event => window.alert(`Submitted the following: ${event.detail.value}`)}
198-
placeholder="Ask a question"
199-
maxRows={hasInfiniteMaxRows ? -1 : 4}
200-
disabled={isDisabled}
201-
readOnly={isReadOnly}
202-
invalid={isInvalid || textareaValue.length > MAX_CHARS}
203-
warning={hasWarning}
204-
ref={ref}
205-
disableSecondaryActionsPaddings={true}
206-
customPrimaryAction={
207-
hasPrimaryActions ? (
208-
<ButtonGroup
209-
variant="icon"
210-
items={[
211-
{
212-
type: 'icon-button',
213-
id: 'record',
214-
text: 'Record',
215-
iconName: 'microphone',
216-
disabled: isDisabled || isReadOnly,
217-
},
218-
{
219-
type: 'icon-button',
220-
id: 'submit',
221-
text: 'Submit',
222-
iconName: 'send',
223-
disabled: isDisabled || isReadOnly,
224-
},
225-
]}
226-
/>
227-
) : undefined
228-
}
229-
secondaryActions={
230-
hasSecondaryActions ? (
231-
<Box padding={{ left: 'xxs', top: 'xs' }}>
183+
<ScreenshotArea disableAnimations={true}>
184+
<PromptInput
185+
data-testid="prompt-input"
186+
ariaLabel="Chat input"
187+
actionButtonIconName="send"
188+
actionButtonAriaLabel="Submit prompt"
189+
value={textareaValue}
190+
onChange={(event: any) => setTextareaValue(event.detail.value)}
191+
onAction={event => window.alert(`Submitted the following: ${event.detail.value}`)}
192+
placeholder="Ask a question"
193+
maxRows={hasInfiniteMaxRows ? -1 : 4}
194+
disabled={isDisabled}
195+
readOnly={isReadOnly}
196+
invalid={isInvalid || textareaValue.length > MAX_CHARS}
197+
warning={hasWarning}
198+
ref={ref}
199+
disableSecondaryActionsPaddings={true}
200+
customPrimaryAction={
201+
hasPrimaryActions ? (
232202
<ButtonGroup
233-
ref={buttonGroupRef}
234-
ariaLabel="Chat actions"
235-
onFilesChange={({ detail }) => detail.id.includes('files') && setFiles(detail.files)}
203+
variant="icon"
236204
items={[
237-
{
238-
type: 'icon-file-input',
239-
id: 'files',
240-
text: 'Upload files',
241-
multiple: true,
242-
},
243205
{
244206
type: 'icon-button',
245-
id: 'expand',
246-
iconName: 'expand',
247-
text: 'Go full page',
207+
id: 'record',
208+
text: 'Record',
209+
iconName: 'microphone',
248210
disabled: isDisabled || isReadOnly,
249211
},
250212
{
251213
type: 'icon-button',
252-
id: 'remove',
253-
iconName: 'remove',
254-
text: 'Remove',
214+
id: 'submit',
215+
text: 'Submit',
216+
iconName: 'send',
255217
disabled: isDisabled || isReadOnly,
256218
},
257219
]}
258-
variant="icon"
259220
/>
260-
</Box>
261-
) : undefined
262-
}
263-
secondaryContent={
264-
hasSecondaryContent && files.length > 0 ? (
265-
<FileTokenGroup
266-
items={files.map(file => ({
267-
file,
268-
}))}
269-
showFileThumbnail={true}
270-
onDismiss={onDismiss}
271-
i18nStrings={i18nStrings}
272-
alignment="horizontal"
273-
/>
274-
) : undefined
275-
}
276-
/>
221+
) : undefined
222+
}
223+
secondaryActions={
224+
hasSecondaryActions ? (
225+
<Box padding={{ left: 'xxs', top: 'xs' }}>
226+
<ButtonGroup
227+
ref={buttonGroupRef}
228+
ariaLabel="Chat actions"
229+
onFilesChange={({ detail }) => detail.id.includes('files') && setFiles(detail.files)}
230+
items={[
231+
{
232+
type: 'icon-file-input',
233+
id: 'files',
234+
text: 'Upload files',
235+
multiple: true,
236+
},
237+
{
238+
type: 'icon-button',
239+
id: 'expand',
240+
iconName: 'expand',
241+
text: 'Go full page',
242+
disabled: isDisabled || isReadOnly,
243+
},
244+
{
245+
type: 'icon-button',
246+
id: 'remove',
247+
iconName: 'remove',
248+
text: 'Remove',
249+
disabled: isDisabled || isReadOnly,
250+
},
251+
]}
252+
variant="icon"
253+
/>
254+
</Box>
255+
) : undefined
256+
}
257+
secondaryContent={
258+
hasSecondaryContent && files.length > 0 ? (
259+
<FileTokenGroup
260+
items={files.map(file => ({
261+
file,
262+
}))}
263+
showFileThumbnail={true}
264+
onDismiss={onDismiss}
265+
i18nStrings={i18nStrings}
266+
alignment="horizontal"
267+
/>
268+
) : undefined
269+
}
270+
/>
271+
</ScreenshotArea>
277272
</FormField>
278273
<div />
279274
</ColumnLayout>

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1350,7 +1350,9 @@ If set to \`Number.MAX_VALUE\`, the main content panel will occupy the full avai
13501350
{
13511351
"description": "Controls the split panel preferences.
13521352

1353-
By default, the preference is \`{ position: 'bottom' }\`",
1353+
By default, the preference is \`{ position: 'bottom' }\`.
1354+
1355+
On smaller screens, the panel is forced to the \`'bottom'\` position and the \`'side'\` preference becomes disabled.",
13541356
"inlineType": {
13551357
"name": "AppLayoutProps.SplitPanelPreferences",
13561358
"properties": [
@@ -1904,7 +1906,9 @@ while navigation drawer might be displayed, but opened using a custom trigger.",
19041906
{
19051907
"description": "Controls the split panel preferences.
19061908

1907-
By default, the preference is \`{ position: 'bottom' }\`",
1909+
By default, the preference is \`{ position: 'bottom' }\`.
1910+
1911+
On smaller screens, the panel is forced to the \`'bottom'\` position and the \`'side'\` preference becomes disabled.",
19081912
"inlineType": {
19091913
"name": "AppLayoutProps.SplitPanelPreferences",
19101914
"properties": [
@@ -5139,6 +5143,25 @@ modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an \`href\`
51395143
"optional": true,
51405144
"type": "boolean",
51415145
},
5146+
{
5147+
"description": "Adds \`aria-haspopup\` to the button element. Use when the button triggers a popup element such as a menu, listbox, tree, grid, or dialog.",
5148+
"inlineType": {
5149+
"name": "boolean | "grid" | "dialog" | "menu" | "listbox" | "tree"",
5150+
"type": "union",
5151+
"values": [
5152+
"false",
5153+
"true",
5154+
""grid"",
5155+
""dialog"",
5156+
""menu"",
5157+
""listbox"",
5158+
""tree"",
5159+
],
5160+
},
5161+
"name": "ariaHaspopup",
5162+
"optional": true,
5163+
"type": "boolean | "grid" | "dialog" | "menu" | "listbox" | "tree"",
5164+
},
51425165
{
51435166
"description": "Adds \`aria-label\` to the button element. Use this to provide an accessible name for buttons
51445167
that don't have visible text, and to distinguish between multiple buttons with identical visible text.
@@ -13603,6 +13626,14 @@ exports[`Components definition for form-field matches the snapshot: form-field 1
1360313626
"optional": true,
1360413627
"type": "FormFieldProps.AnalyticsMetadata",
1360513628
},
13629+
{
13630+
"description": "Character count constraint displayed adjacent to the constraintText. Use
13631+
this to provide an updated character count on each keypress that is debounced
13632+
for screen reader users.",
13633+
"name": "characterCountText",
13634+
"optional": true,
13635+
"type": "string",
13636+
},
1360613637
{
1360713638
"deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
1360813639
"description": "Adds the specified classes to the root element of the component.",
@@ -33460,6 +33491,19 @@ To find a specific row use the \`findRow(n)\` function as chaining \`findRows().
3346033491
},
3346133492
{
3346233493
"methods": [
33494+
{
33495+
"name": "findCharacterCount",
33496+
"parameters": [],
33497+
"returnType": {
33498+
"isNullable": true,
33499+
"name": "ElementWrapper",
33500+
"typeArguments": [
33501+
{
33502+
"name": "HTMLElement",
33503+
},
33504+
],
33505+
},
33506+
},
3346333507
{
3346433508
"name": "findConstraint",
3346533509
"parameters": [],
@@ -44497,6 +44541,14 @@ To find a specific row use the \`findRow(n)\` function as chaining \`findRows().
4449744541
},
4449844542
{
4449944543
"methods": [
44544+
{
44545+
"name": "findCharacterCount",
44546+
"parameters": [],
44547+
"returnType": {
44548+
"isNullable": false,
44549+
"name": "ElementWrapper",
44550+
},
44551+
},
4450044552
{
4450144553
"name": "findConstraint",
4450244554
"parameters": [],

‎src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,9 @@ exports[`test-utils selectors 1`] = `
313313
"awsui_secondary-actions_1i0s3",
314314
],
315315
"form-field": [
316+
"awsui_character-count_6mjrv",
316317
"awsui_constraint_14mhv",
318+
"awsui_constraint_6mjrv",
317319
"awsui_control_14mhv",
318320
"awsui_description_14mhv",
319321
"awsui_error_14mhv",
@@ -533,8 +535,6 @@ exports[`test-utils selectors 1`] = `
533535
"awsui_token-editor-token-remove-actions_1heb1",
534536
],
535537
"radio-group": [
536-
"awsui_radio_1mabk",
537-
"awsui_root_1mabk",
538538
"awsui_root_1np5w",
539539
],
540540
"s3-resource-selector": [

0 commit comments

Comments
 (0)