From fc2870add38d3797a90d1dd4bf418e05f094a52c Mon Sep 17 00:00:00 2001 From: Katie George Date: Fri, 1 Nov 2024 14:21:19 -0700 Subject: [PATCH 1/8] feat: Moves dropzone to public folder --- .../__tests__/file-dropzone.test.tsx | 17 ++++++--------- src/file-dropzone/index.tsx | 21 +++++++++++++++++++ .../file-dropzone/interfaces.tsx | 4 ++-- .../index.tsx => file-dropzone/internal.tsx} | 5 +---- .../components => }/file-dropzone/styles.scss | 4 ++-- .../file-dropzone/use-files-dragging.ts | 0 src/file-upload/internal.tsx | 3 ++- .../index.ts} | 2 +- 8 files changed, 35 insertions(+), 21 deletions(-) rename src/{internal/components => }/file-dropzone/__tests__/file-dropzone.test.tsx (84%) create mode 100644 src/file-dropzone/index.tsx rename src/{internal/components => }/file-dropzone/interfaces.tsx (81%) rename src/{internal/components/file-dropzone/index.tsx => file-dropzone/internal.tsx} (88%) rename src/{internal/components => }/file-dropzone/styles.scss (91%) rename src/{internal/components => }/file-dropzone/use-files-dragging.ts (100%) rename src/test-utils/dom/{internal/file-dropzone.ts => file-dropzone/index.ts} (82%) diff --git a/src/internal/components/file-dropzone/__tests__/file-dropzone.test.tsx b/src/file-dropzone/__tests__/file-dropzone.test.tsx similarity index 84% rename from src/internal/components/file-dropzone/__tests__/file-dropzone.test.tsx rename to src/file-dropzone/__tests__/file-dropzone.test.tsx index 1e473f2cbd..58ece19b82 100644 --- a/src/internal/components/file-dropzone/__tests__/file-dropzone.test.tsx +++ b/src/file-dropzone/__tests__/file-dropzone.test.tsx @@ -3,15 +3,11 @@ import React from 'react'; import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import Button from '../../../../../lib/components/button'; -import InternalFileDropzone, { - FileDropzoneProps, - useFilesDragging, -} from '../../../../../lib/components/internal/components/file-dropzone'; -import createWrapper from '../../../../../lib/components/test-utils/dom'; -import FileDropzoneWrapper from '../../../../../lib/components/test-utils/dom/internal/file-dropzone'; +import Button from '../../../lib/components/button'; +import FileDropzone, { FileDropzoneProps, useFilesDragging } from '../../../lib/components/file-dropzone'; +import createWrapper from '../../../lib/components/test-utils/dom'; -import selectors from '../../../../../lib/components/internal/components/file-dropzone/styles.selectors.js'; +import selectors from '../../../lib/components/file-dropzone/styles.selectors.js'; const file1 = new File([new Blob(['Test content 1'], { type: 'text/plain' })], 'test-file-1.txt', { type: 'text/plain', @@ -25,9 +21,8 @@ const file2 = new File([new Blob(['Test content 2'], { type: 'text/plain' })], ' const onChange = jest.fn(); function renderFileDropzone(props: Partial) { - render({props.children}); - const element = createWrapper().findByClassName(FileDropzoneWrapper.rootSelector)!.getElement(); - return new FileDropzoneWrapper(element); + const { container } = render({props.children}); + return createWrapper(container).findFileDropzone()!; } function createDragEvent(type: string, files = [file1, file2]) { diff --git a/src/file-dropzone/index.tsx b/src/file-dropzone/index.tsx new file mode 100644 index 0000000000..064a0d93e0 --- /dev/null +++ b/src/file-dropzone/index.tsx @@ -0,0 +1,21 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import useBaseComponent from '../internal/hooks/use-base-component'; +import { applyDisplayName } from '../internal/utils/apply-display-name'; +import { FileDropzoneProps } from './interfaces'; +import InternalFileDropzone from './internal'; +import { useFilesDragging } from './use-files-dragging'; + +export { FileDropzoneProps, useFilesDragging }; + +const FileDropzone = ({ ...props }: FileDropzoneProps) => { + const baseComponentProps = useBaseComponent('FileDropzone', { + props: {}, + }); + return ; +}; + +applyDisplayName(FileDropzone, 'FileDropzone'); +export default FileDropzone; diff --git a/src/internal/components/file-dropzone/interfaces.tsx b/src/file-dropzone/interfaces.tsx similarity index 81% rename from src/internal/components/file-dropzone/interfaces.tsx rename to src/file-dropzone/interfaces.tsx index 9b11053977..70bd900e79 100644 --- a/src/internal/components/file-dropzone/interfaces.tsx +++ b/src/file-dropzone/interfaces.tsx @@ -1,7 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { BaseComponentProps } from '../../base-component'; -import { NonCancelableEventHandler } from '../../events'; +import { BaseComponentProps } from '../internal/base-component'; +import { NonCancelableEventHandler } from '../internal/events'; export interface FileDropzoneProps extends BaseComponentProps { /** diff --git a/src/internal/components/file-dropzone/index.tsx b/src/file-dropzone/internal.tsx similarity index 88% rename from src/internal/components/file-dropzone/index.tsx rename to src/file-dropzone/internal.tsx index c4d885ae06..c22c755da8 100644 --- a/src/internal/components/file-dropzone/index.tsx +++ b/src/file-dropzone/internal.tsx @@ -4,14 +4,11 @@ import React, { useState } from 'react'; import clsx from 'clsx'; -import { fireNonCancelableEvent } from '../../events'; +import { fireNonCancelableEvent } from '../internal/events'; import { FileDropzoneProps } from './interfaces'; -import { useFilesDragging } from './use-files-dragging'; import styles from './styles.css.js'; -export { FileDropzoneProps, useFilesDragging }; - export default function InternalFileDropzone({ onChange, children }: FileDropzoneProps) { const [isDropzoneHovered, setDropzoneHovered] = useState(false); diff --git a/src/internal/components/file-dropzone/styles.scss b/src/file-dropzone/styles.scss similarity index 91% rename from src/internal/components/file-dropzone/styles.scss rename to src/file-dropzone/styles.scss index 5687e782ec..83e9c7f1c2 100644 --- a/src/internal/components/file-dropzone/styles.scss +++ b/src/file-dropzone/styles.scss @@ -3,8 +3,8 @@ SPDX-License-Identifier: Apache-2.0 */ -@use '../../styles/tokens' as awsui; -@use '../../styles' as styles; +@use '../internal/styles/tokens' as awsui; +@use '../internal/styles' as styles; .root { display: flex; diff --git a/src/internal/components/file-dropzone/use-files-dragging.ts b/src/file-dropzone/use-files-dragging.ts similarity index 100% rename from src/internal/components/file-dropzone/use-files-dragging.ts rename to src/file-dropzone/use-files-dragging.ts diff --git a/src/file-upload/internal.tsx b/src/file-upload/internal.tsx index 56b0e79f9d..57604fd01a 100644 --- a/src/file-upload/internal.tsx +++ b/src/file-upload/internal.tsx @@ -9,9 +9,10 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal'; import InternalBox from '../box/internal'; import { ButtonProps } from '../button/interfaces'; import { useFormFieldContext } from '../contexts/form-field'; +import InternalFileDropzone from '../file-dropzone/internal'; +import { useFilesDragging } from '../file-dropzone/use-files-dragging'; import { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal'; import { getBaseProps } from '../internal/base-component'; -import InternalFileDropzone, { useFilesDragging } from '../internal/components/file-dropzone'; import InternalFileInput from '../internal/components/file-input'; import InternalFileTokenGroup from '../internal/components/file-token-group'; import { fireNonCancelableEvent } from '../internal/events'; diff --git a/src/test-utils/dom/internal/file-dropzone.ts b/src/test-utils/dom/file-dropzone/index.ts similarity index 82% rename from src/test-utils/dom/internal/file-dropzone.ts rename to src/test-utils/dom/file-dropzone/index.ts index e7358ce7dc..55af7a380f 100644 --- a/src/test-utils/dom/internal/file-dropzone.ts +++ b/src/test-utils/dom/file-dropzone/index.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom'; -import styles from '../../../internal/components/file-dropzone/styles.selectors.js'; +import styles from '../../../file-dropzone/styles.selectors.js'; export default class FileDropzoneWrapper extends ComponentWrapper { static rootSelector: string = styles.root; From 7cad40d75e118adbfa93fe6187f13c21352ec67b Mon Sep 17 00:00:00 2001 From: Katie George Date: Fri, 1 Nov 2024 15:00:19 -0700 Subject: [PATCH 2/8] feat: Adds test page --- pages/file-dropzone/container.page.tsx | 88 ++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 pages/file-dropzone/container.page.tsx diff --git a/pages/file-dropzone/container.page.tsx b/pages/file-dropzone/container.page.tsx new file mode 100644 index 0000000000..c501b56b70 --- /dev/null +++ b/pages/file-dropzone/container.page.tsx @@ -0,0 +1,88 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; + +import { Box, Button, Container, FileDropzone, Header, SpaceBetween, Table } from '~components'; + +export default function FileDropzoneContainer() { + const [files, setFiles] = useState([]); + + const [selectedItems, setSelectedItems] = useState([]); + + const handleFilesChange = (newFiles: File[]) => { + const newValue = [...files, ...newFiles]; + setFiles(newValue); + }; + + const removeFiles = () => { + const newValue = files.filter(file => !selectedItems.map((item: any) => item.name).includes(file.name)); + setFiles(newValue); + + setSelectedItems([]); + }; + + return ( + + +
File dropzone: in container
+ + {selectedItems.length > 1 ? 'Remove files' : 'Remove file'} + + } + > + Attachments + + } + > + + handleFilesChange(event.detail.value)}> + + Drop files here + + + setSelectedItems(detail.selectedItems)} + selectedItems={selectedItems} + trackBy="name" + columnDefinitions={[ + { + id: 'file-name', + header: 'File name', + cell: item => item.name || '-', + sortingField: 'name', + isRowHeader: true, + }, + { + id: 'file-type', + header: 'File type', + cell: item => item.type || '-', + sortingField: 'alt', + }, + { + id: 'file-size', + header: 'File size', + cell: item => item.size || '-', + }, + ]} + enableKeyboardNavigation={true} + items={files.map(file => ({ + name: file.name, + type: file.type, + size: file.size, + }))} + loadingText="Loading resources" + sortingDisabled={true} + /> + + + + + ); +} From a982db723e17d05c09cb6bfc97299ed9892268bc Mon Sep 17 00:00:00 2001 From: Katie George Date: Fri, 1 Nov 2024 15:12:31 -0700 Subject: [PATCH 3/8] feat: Adds hook to demo page --- pages/file-dropzone/container.page.tsx | 112 +++++++++++++++---------- 1 file changed, 69 insertions(+), 43 deletions(-) diff --git a/pages/file-dropzone/container.page.tsx b/pages/file-dropzone/container.page.tsx index c501b56b70..48bdae9398 100644 --- a/pages/file-dropzone/container.page.tsx +++ b/pages/file-dropzone/container.page.tsx @@ -1,13 +1,24 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import React, { useState } from 'react'; +import React, { useContext, useState } from 'react'; -import { Box, Button, Container, FileDropzone, Header, SpaceBetween, Table } from '~components'; +import { Box, Button, Checkbox, Container, Header, SpaceBetween, Table } from '~components'; +import FileDropzone, { useFilesDragging } from '~components/file-dropzone'; + +import AppContext, { AppContextType } from '../app/app-context'; + +type DemoContext = React.Context< + AppContextType<{ + onlyVisibleOnDrag: boolean; + }> +>; export default function FileDropzoneContainer() { const [files, setFiles] = useState([]); const [selectedItems, setSelectedItems] = useState([]); + const { urlParams, setUrlParams } = useContext(AppContext as DemoContext); + const { onlyVisibleOnDrag } = urlParams; const handleFilesChange = (newFiles: File[]) => { const newValue = [...files, ...newFiles]; @@ -21,10 +32,15 @@ export default function FileDropzoneContainer() { setSelectedItems([]); }; + const { areFilesDragging } = useFilesDragging(); + return (
File dropzone: in container
+ setUrlParams({ onlyVisibleOnDrag: !onlyVisibleOnDrag })}> + Only visible on file drag + - handleFilesChange(event.detail.value)}> - - Drop files here - - -
setSelectedItems(detail.selectedItems)} - selectedItems={selectedItems} - trackBy="name" - columnDefinitions={[ - { - id: 'file-name', - header: 'File name', - cell: item => item.name || '-', - sortingField: 'name', - isRowHeader: true, - }, - { - id: 'file-type', - header: 'File type', - cell: item => item.type || '-', - sortingField: 'alt', - }, - { - id: 'file-size', - header: 'File size', - cell: item => item.size || '-', - }, - ]} - enableKeyboardNavigation={true} - items={files.map(file => ({ - name: file.name, - type: file.type, - size: file.size, - }))} - loadingText="Loading resources" - sortingDisabled={true} - /> + {!onlyVisibleOnDrag && ( + handleFilesChange(event.detail.value)}> + + Drop files here + + + )} + {areFilesDragging && onlyVisibleOnDrag ? ( + handleFilesChange(event.detail.value)}> + + Drop files here + + + ) : ( +
setSelectedItems(detail.selectedItems)} + selectedItems={selectedItems} + trackBy="name" + columnDefinitions={[ + { + id: 'file-name', + header: 'File name', + cell: item => item.name || '-', + sortingField: 'name', + isRowHeader: true, + }, + { + id: 'file-type', + header: 'File type', + cell: item => item.type || '-', + sortingField: 'alt', + }, + { + id: 'file-size', + header: 'File size', + cell: item => item.size || '-', + }, + ]} + enableKeyboardNavigation={true} + items={files.map(file => ({ + name: file.name, + type: file.type, + size: file.size, + }))} + loadingText="Loading resources" + sortingDisabled={true} + /> + )} From 7503041445b6840543e99dc089815b84977eb0d1 Mon Sep 17 00:00:00 2001 From: Katie George Date: Mon, 4 Nov 2024 14:31:24 -0800 Subject: [PATCH 4/8] chore: Fixes broken tests --- .../__snapshots__/documenter.test.ts.snap | 53 +++++++++++++++++++ .../test-utils-selectors.test.tsx.snap | 7 +-- src/file-dropzone/index.tsx | 4 +- src/file-dropzone/internal.tsx | 9 +++- .../__tests__/file-upload.test.tsx | 2 +- 5 files changed, 66 insertions(+), 9 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 96f2adecb4..9b47564d3d 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -7361,6 +7361,59 @@ use the \`id\` attribute, consider setting it on a parent element instead.", } `; +exports[`Documenter definition for file-dropzone matches the snapshot: file-dropzone 1`] = ` +{ + "events": [ + { + "cancelable": false, + "description": "Called when the user selects new file(s), or removes a file. +The event \`detail\` contains the current value of the component.", + "detailInlineType": { + "name": "FileDropzoneProps.ChangeDetail", + "properties": [ + { + "name": "value", + "optional": false, + "type": "Array", + }, + ], + "type": "object", + }, + "detailType": "FileDropzoneProps.ChangeDetail", + "name": "onChange", + }, + ], + "functions": [], + "name": "FileDropzone", + "properties": [ + { + "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).", + "description": "Adds the specified classes to the root element of the component.", + "name": "className", + "optional": true, + "type": "string", + }, + { + "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases, +use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must +use the \`id\` attribute, consider setting it on a parent element instead.", + "description": "Adds the specified ID to the root element of the component.", + "name": "id", + "optional": true, + "type": "string", + }, + ], + "regions": [ + { + "description": "Children of the Dropzone.", + "isDefault": true, + "name": "children", + }, + ], + "releaseStatus": "stable", +} +`; + exports[`Documenter definition for file-upload matches the snapshot: file-upload 1`] = ` { "events": [ diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index c8025d20ff..70fe8b1b7d 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -249,6 +249,10 @@ exports[`test-utils selectors 1`] = ` "awsui_icon-container_gwq0h", "awsui_root_gwq0h", ], + "file-dropzone": [ + "awsui_content_ptw8i", + "awsui_root_ptw8i", + ], "file-upload": [ "awsui_hints_1ubbm", "awsui_root_1ubbm", @@ -327,7 +331,6 @@ exports[`test-utils selectors 1`] = ` "awsui_button-trigger_18eso", "awsui_button_m5h9f", "awsui_chart-filter_1px7g", - "awsui_content_1tk3k", "awsui_control_1wepg", "awsui_description_1p2cx", "awsui_description_1wepg", @@ -364,8 +367,6 @@ exports[`test-utils selectors 1`] = ` "awsui_root_1kjc7", "awsui_root_1qprf", "awsui_root_1t44z", - "awsui_root_1tk3k", - "awsui_root_9f1dn", "awsui_root_qwoo0", "awsui_root_vrgzu", "awsui_selectable-item_15o6u", diff --git a/src/file-dropzone/index.tsx b/src/file-dropzone/index.tsx index 064a0d93e0..e0ab93a277 100644 --- a/src/file-dropzone/index.tsx +++ b/src/file-dropzone/index.tsx @@ -11,9 +11,7 @@ import { useFilesDragging } from './use-files-dragging'; export { FileDropzoneProps, useFilesDragging }; const FileDropzone = ({ ...props }: FileDropzoneProps) => { - const baseComponentProps = useBaseComponent('FileDropzone', { - props: {}, - }); + const baseComponentProps = useBaseComponent('FileDropzone'); return ; }; diff --git a/src/file-dropzone/internal.tsx b/src/file-dropzone/internal.tsx index c22c755da8..97b81bc4f7 100644 --- a/src/file-dropzone/internal.tsx +++ b/src/file-dropzone/internal.tsx @@ -4,13 +4,15 @@ import React, { useState } from 'react'; import clsx from 'clsx'; +import { getBaseProps } from '../internal/base-component'; import { fireNonCancelableEvent } from '../internal/events'; import { FileDropzoneProps } from './interfaces'; import styles from './styles.css.js'; -export default function InternalFileDropzone({ onChange, children }: FileDropzoneProps) { +export default function InternalFileDropzone({ onChange, children, ...restProps }: FileDropzoneProps) { const [isDropzoneHovered, setDropzoneHovered] = useState(false); + const baseProps = getBaseProps(restProps); const onDragOver = (event: React.DragEvent) => { event.preventDefault(); @@ -38,7 +40,10 @@ export default function InternalFileDropzone({ onChange, children }: FileDropzon return (
({ ...jest.requireActual('@cloudscape-design/component-toolkit/internal'), From 6f70c2071dd70d51b054bf5f8376c2814edbb886 Mon Sep 17 00:00:00 2001 From: Katie George Date: Mon, 4 Nov 2024 14:59:50 -0800 Subject: [PATCH 5/8] chore: Add internalRootRef --- src/file-dropzone/index.tsx | 7 +++---- src/file-dropzone/internal.tsx | 9 ++++++++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/file-dropzone/index.tsx b/src/file-dropzone/index.tsx index e0ab93a277..f7fde91d2c 100644 --- a/src/file-dropzone/index.tsx +++ b/src/file-dropzone/index.tsx @@ -10,10 +10,9 @@ import { useFilesDragging } from './use-files-dragging'; export { FileDropzoneProps, useFilesDragging }; -const FileDropzone = ({ ...props }: FileDropzoneProps) => { +export default function FileDropzone(props: FileDropzoneProps) { const baseComponentProps = useBaseComponent('FileDropzone'); - return ; -}; + return ; +} applyDisplayName(FileDropzone, 'FileDropzone'); -export default FileDropzone; diff --git a/src/file-dropzone/internal.tsx b/src/file-dropzone/internal.tsx index 97b81bc4f7..d6b5ae7820 100644 --- a/src/file-dropzone/internal.tsx +++ b/src/file-dropzone/internal.tsx @@ -6,11 +6,17 @@ import clsx from 'clsx'; import { getBaseProps } from '../internal/base-component'; import { fireNonCancelableEvent } from '../internal/events'; +import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js'; import { FileDropzoneProps } from './interfaces'; import styles from './styles.css.js'; -export default function InternalFileDropzone({ onChange, children, ...restProps }: FileDropzoneProps) { +export default function InternalFileDropzone({ + onChange, + children, + __internalRootRef = null, + ...restProps +}: FileDropzoneProps & InternalBaseComponentProps) { const [isDropzoneHovered, setDropzoneHovered] = useState(false); const baseProps = getBaseProps(restProps); @@ -41,6 +47,7 @@ export default function InternalFileDropzone({ onChange, children, ...restProps return (
Date: Mon, 11 Nov 2024 10:36:16 -0800 Subject: [PATCH 6/8] chore: Updates test wrappers snapshot --- .../test-utils-wrappers.test.tsx.snap | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap index f41edd874d..a898b123f4 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -117,6 +117,10 @@ export { ElementWrapper }; export { ExpandableSectionWrapper }; + import FileDropzoneWrapper from './file-dropzone'; + export { FileDropzoneWrapper }; + + import FileUploadWrapper from './file-upload'; export { FileUploadWrapper }; @@ -338,6 +342,7 @@ findDatePicker(selector?: string): DatePickerWrapper | null; findDateRangePicker(selector?: string): DateRangePickerWrapper | null; findDrawer(selector?: string): DrawerWrapper | null; findExpandableSection(selector?: string): ExpandableSectionWrapper | null; +findFileDropzone(selector?: string): FileDropzoneWrapper | null; findFileUpload(selector?: string): FileUploadWrapper | null; findFlashbar(selector?: string): FlashbarWrapper | null; findForm(selector?: string): FormWrapper | null; @@ -556,6 +561,12 @@ ElementWrapper.prototype.findExpandableSection = function(selector) { // https://github.com/microsoft/TypeScript/issues/29132 return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper); }; +ElementWrapper.prototype.findFileDropzone = function(selector) { + const rootSelector = \`.\${FileDropzoneWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileDropzoneWrapper); + }; ElementWrapper.prototype.findFileUpload = function(selector) { const rootSelector = \`.\${FileUploadWrapper.rootSelector}\`; // casting to 'any' is needed to avoid this issue with generics @@ -964,6 +975,10 @@ export { ElementWrapper }; export { ExpandableSectionWrapper }; + import FileDropzoneWrapper from './file-dropzone'; + export { FileDropzoneWrapper }; + + import FileUploadWrapper from './file-upload'; export { FileUploadWrapper }; @@ -1185,6 +1200,7 @@ findDatePicker(selector?: string): DatePickerWrapper; findDateRangePicker(selector?: string): DateRangePickerWrapper; findDrawer(selector?: string): DrawerWrapper; findExpandableSection(selector?: string): ExpandableSectionWrapper; +findFileDropzone(selector?: string): FileDropzoneWrapper; findFileUpload(selector?: string): FileUploadWrapper; findFlashbar(selector?: string): FlashbarWrapper; findForm(selector?: string): FormWrapper; @@ -1403,6 +1419,12 @@ ElementWrapper.prototype.findExpandableSection = function(selector) { // https://github.com/microsoft/TypeScript/issues/29132 return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper); }; +ElementWrapper.prototype.findFileDropzone = function(selector) { + const rootSelector = \`.\${FileDropzoneWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileDropzoneWrapper); + }; ElementWrapper.prototype.findFileUpload = function(selector) { const rootSelector = \`.\${FileUploadWrapper.rootSelector}\`; // casting to 'any' is needed to avoid this issue with generics From 850084f790b68767f6e625aae336fc56705b7d83 Mon Sep 17 00:00:00 2001 From: Katie George Date: Mon, 11 Nov 2024 10:47:46 -0800 Subject: [PATCH 7/8] chore: Update test util selectors --- .../__snapshots__/test-utils-selectors.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index 70fe8b1b7d..d1fde2aa74 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -367,6 +367,7 @@ exports[`test-utils selectors 1`] = ` "awsui_root_1kjc7", "awsui_root_1qprf", "awsui_root_1t44z", + "awsui_root_9f1dn", "awsui_root_qwoo0", "awsui_root_vrgzu", "awsui_selectable-item_15o6u", From 510a01e3f93e56261ce5cd436e185b6b4c5e33ae Mon Sep 17 00:00:00 2001 From: Katie George Date: Mon, 11 Nov 2024 12:06:10 -0800 Subject: [PATCH 8/8] chore: fixes a11y test --- pages/file-dropzone/container.page.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/pages/file-dropzone/container.page.tsx b/pages/file-dropzone/container.page.tsx index 48bdae9398..5843ae7afc 100644 --- a/pages/file-dropzone/container.page.tsx +++ b/pages/file-dropzone/container.page.tsx @@ -55,16 +55,16 @@ export default function FileDropzoneContainer() { } > - {!onlyVisibleOnDrag && ( + {/* {!onlyVisibleOnDrag && ( handleFilesChange(event.detail.value)}> - + Drop files here - )} + )} */} {areFilesDragging && onlyVisibleOnDrag ? ( handleFilesChange(event.detail.value)}> - + Drop files here @@ -97,6 +97,12 @@ export default function FileDropzoneContainer() { }, ]} enableKeyboardNavigation={true} + ariaLabels={{ + selectionGroupLabel: 'group label', + allItemsSelectionLabel: ({ selectedItems }) => `${selectedItems.length} item selected`, + itemSelectionLabel: ({ selectedItems }, item) => + `${item.name} is ${selectedItems.indexOf(item) < 0 ? 'not ' : ''}selected`, + }} items={files.map(file => ({ name: file.name, type: file.type,