diff --git a/src/__tests__/required-props-for-components.ts b/src/__tests__/required-props-for-components.ts index 4c9251dc0a..69e0fbd926 100644 --- a/src/__tests__/required-props-for-components.ts +++ b/src/__tests__/required-props-for-components.ts @@ -138,6 +138,13 @@ const defaultProps: Record> = { flashbar: { items: [], }, + 'file-token-group': { + items: [], + i18nStrings: { + limitShowFewer: '', + limitShowMore: '', + }, + }, 'file-upload': { value: [], i18nStrings: { diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 6d993443e5..5217d91da3 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-input matches the snapshot: file-input 1`] = ` { "events": [ @@ -7512,6 +7565,177 @@ If you want to clear the selection, use empty array.", } `; +exports[`Documenter definition for file-token-group matches the snapshot: file-token-group 1`] = ` +{ + "events": [ + { + "cancelable": false, + "description": " Called when the user clicks on the dismiss button. The token won't be automatically removed. + Make sure that you add a listener to this event to update your application state.", + "detailInlineType": { + "name": "FileTokenGroupProps.DismissDetail", + "properties": [ + { + "name": "fileIndex", + "optional": false, + "type": "number", + }, + ], + "type": "object", + }, + "detailType": "FileTokenGroupProps.DismissDetail", + "name": "onDismiss", + }, + ], + "functions": [], + "name": "FileTokenGroup", + "properties": [ + { + "description": "Specifies the direction in which tokens are aligned (\`horizontal | vertical\`).", + "inlineType": { + "name": "FileTokenGroupProps.Alignment", + "type": "union", + "values": [ + "horizontal", + "vertical", + ], + }, + "name": "alignment", + "optional": true, + "type": "string", + }, + { + "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", + }, + { + "description": "An object containing all the localized strings required by the component: +* \`removeFileAriaLabel\` (function): A function to render the ARIA label for file token remove button. +* \`errorIconAriaLabel\` (string): The ARIA label to be shown on the error file icon. +* \`warningIconAriaLabel\` (string): The ARIA label to be shown on the warning file icon. +* \`formatFileSize\` (function): (Optional) A function that takes file size in bytes, and produces a formatted string. +* \`formatFileLastModified\` (function): (Optional) A function that takes the files last modified date, and produces a formatted string.", + "inlineType": { + "name": "FileTokenGroupProps.I18nStrings", + "properties": [ + { + "name": "errorIconAriaLabel", + "optional": true, + "type": "string", + }, + { + "name": "formatFileLastModified", + "optional": true, + "type": "(date: Date) => string", + }, + { + "name": "formatFileSize", + "optional": true, + "type": "(sizeInBytes: number) => string", + }, + { + "name": "limitShowFewer", + "optional": true, + "type": "string", + }, + { + "name": "limitShowMore", + "optional": true, + "type": "string", + }, + { + "name": "removeFileAriaLabel", + "optional": false, + "type": "(fileIndex: number) => string", + }, + { + "name": "warningIconAriaLabel", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "i18nStrings", + "optional": false, + "type": "FileTokenGroupProps.I18nStrings", + }, + { + "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", + }, + { + "description": "An array of objects representing token items. Each token has the following properties: +- \`file\` (string) - File value. +- \`disabled\` [boolean] - (Optional) Determines whether the token is disabled. +- \`loading\` (boolean) - (Optional) Custom SVG icon. Equivalent to the \`svg\` slot of the [icon component](/components/icon/). +- \`loadingText\` (string) - (Optional) Specifies the text that screen reader announces when the button is in a loading state. +- \`errorText\` (string) - (Optional) Text that displays as a validation error message. +- \`warningText\` (string) - (Optional) - Text that displays as a validation warning message. +", + "name": "items", + "optional": false, + "type": "ReadonlyArray", + }, + { + "description": "Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.", + "name": "limit", + "optional": true, + "type": "number", + }, + { + "description": "Adds an \`aria-label\` to the "Show fewer" button. +Use to assign unique labels when there are multiple file token groups with the same \`limitShowFewer\` label on one page.", + "name": "limitShowFewerAriaLabel", + "optional": true, + "type": "string", + }, + { + "description": "Adds an \`aria-label\` to the "Show more" button. +Use to assign unique labels when there are multiple file token groups with the same \`limitShowMore\` label on one page.", + "name": "limitShowMoreAriaLabel", + "optional": true, + "type": "string", + }, + { + "description": "Specifies if the control is read-only, which prevents the +user from modifying the value. A read-only control is still focusable.", + "name": "readOnly", + "optional": true, + "type": "boolean", + }, + { + "description": "Show file last modified timestamp in the token. Use \`i18nStrings.formatFileLastModified\` to customize it.", + "name": "showFileLastModified", + "optional": true, + "type": "boolean", + }, + { + "description": "Show file size in the token. Use \`i18nStrings.formatFileSize\` to customize it.", + "name": "showFileSize", + "optional": true, + "type": "boolean", + }, + { + "description": "Show file thumbnail in the token. Only supported for images.", + "name": "showFileThumbnail", + "optional": true, + "type": "boolean", + }, + ], + "regions": [], + "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 b9d19c81b4..2f34ea4d4e 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,14 +249,22 @@ exports[`test-utils selectors 1`] = ` "awsui_icon-container_gwq0h", "awsui_root_gwq0h", ], + "file-dropzone": [ + "awsui_content_ptw8i", + "awsui_root_ptw8i", + ], "file-input": [ "awsui_file-input-button_1wp4s", "awsui_file-input_1wp4s", "awsui_root_1wp4s", ], - "file-dropzone": [ - "awsui_content_ptw8i", - "awsui_root_ptw8i", + "file-token-group": [ + "awsui_file-option-last-modified_39ths", + "awsui_file-option-name_39ths", + "awsui_file-option-size_39ths", + "awsui_file-option-thumbnail_39ths", + "awsui_file-token_39ths", + "awsui_root_polq8", ], "file-upload": [ "awsui_hints_1ubbm", @@ -365,8 +373,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",