@transferwise/components 46.46.1 → 46.48.0

package/src/uploadInput/UploadInput.spec.tsx

@@ -1,13 +1,14 @@
 import { within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
+import { act } from 'react';
 
 import { Status } from '../common';
+import { Field } from '../field/Field';
 import { mockMatchMedia, render, screen, waitFor, waitForElementToBeRemoved } from '../test-utils';
 
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { TEST_IDS as UPLOAD_BUTTON_TEST_IDS } from './uploadButton/UploadButton';
 import { TEST_IDS as UPLOAD_ITEM_TEST_IDS } from './uploadItem/UploadItem';
-import { act } from 'react';
 
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
 
@@ -310,4 +311,16 @@ describe('UploadInput', () => {
       });
     });
   });
+
+  it('supports `Field` for error messages', () => {
+    render(
+      <Field message="Something went wrong" sentiment="negative">
+        <UploadInput {...props} />
+      </Field>,
+    );
+
+    const container = screen.getAllByRole('group')[0];
+    expect(container).toBeInvalid();
+    expect(container).toHaveAccessibleDescription('Something went wrong');
+  });
 });

package/src/uploadInput/UploadInput.story.tsx

@@ -1,5 +1,7 @@
 import { StoryFn, Meta } from '@storybook/react';
 
+import { Field } from '../field/Field';
+
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadResponse } from './types';
 
@@ -44,3 +46,12 @@ SingleFile.args = { ...props };
 
 export const MultipleFiles: Story = Template.bind({});
 MultipleFiles.args = { ...props, multiple: true };
+
+export const WithinField: Story = Template.bind({});
+WithinField.decorators = [
+  (Story) => (
+    <Field message="Something went wrong" sentiment="negative">
+      <Story />
+    </Field>
+  ),
+];

package/src/uploadInput/UploadInput.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 
 import Button from '../button';
 import { CommonProps, ControlType, Priority, Status } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 import Modal from '../modal';
 import { isSizeValid } from '../upload/utils/isSizeValid';
 import { isTypeValid } from '../upload/utils/isTypeValid';
@@ -127,6 +128,8 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle,
 }: UploadInputProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
@@ -299,7 +302,11 @@ const UploadInput = ({
 
   return (
     <>
-      <div className={classNames('np-upload-input', className, { disabled })}>
+      <div
+        role="group"
+        className={classNames('np-upload-input', className, { disabled })}
+        {...inputAttributes}
+      >
         {uploadedFiles.map((file) => (
           <UploadItem
             key={file.id}