feat(InputFile): add required labelRemove prop

BREAKING CHANGE: The InputFile component now has a required labelRemove prop.

Author: domihustinova

packages/orbit-components/src/InputFile/InputFile.stories.tsx

@@ -34,6 +34,7 @@ export const Default: Story = {};
 export const FilledWithFile: Story = {
   args: {
     fileName: "file.png",
+    labelRemove: "Remove file",
   },
 };
 

packages/orbit-components/src/InputFile/README.md

@@ -9,7 +9,7 @@ import InputFile from "@kiwicom/orbit-components/lib/InputFile";
 After adding import into your project you can use it simply like:
 
 ```jsx
-<InputFile />
+<InputFile labelRemove="Remove file" />
 ```
 
 ## Props
@@ -40,6 +40,7 @@ Table below contains all types of the props available in the InputFile component
 | insideInputGroup | `boolean`                  | `false`              | Set to `true` if InputFile is inside InputGroup                                                                                               |
 | multiple         | `boolean`                  |                      | If set to `true` will allow to upload multiple files                                                                                          |
 | disabled         | `boolean`                  |                      | If set to `true` will allow to upload multiple files                                                                                          |
+| labelRemove      | `string`                   |                      | Required label for the remove file button.                                                                                                    |
 
 ### enum
 

packages/orbit-components/src/InputFile/__tests__/index.test.tsx

@@ -11,6 +11,7 @@ describe("InputFile", () => {
   it("should have expected DOM output", async () => {
     const label = "Select file";
     const buttonLabel = "Click on me";
+    const labelRemove = "Remove file";
     const name = "name";
     const placeholder = "Not file has been selected";
     const dataTest = "test";
@@ -34,6 +35,7 @@ describe("InputFile", () => {
         tabIndex={tabIndex}
         onChange={onChange}
         onFocus={onFocus}
+        labelRemove={labelRemove}
       />,
     );
 
@@ -55,7 +57,15 @@ describe("InputFile", () => {
     const onChange = jest.fn();
     const onFocus = jest.fn();
 
-    render(<InputFile dataTest="test" disabled onChange={onChange} onFocus={onFocus} />);
+    render(
+      <InputFile
+        dataTest="test"
+        disabled
+        onChange={onChange}
+        onFocus={onFocus}
+        labelRemove="Remove file"
+      />,
+    );
 
     const input = screen.getByTestId("test");
     expect(input).toBeDisabled();
@@ -66,16 +76,16 @@ describe("InputFile", () => {
 
   it("should have passed width", () => {
     const width = "100px";
-    render(<InputFile width={width} label="label" />);
+    render(<InputFile width={width} label="label" labelRemove="Remove file" />);
     expect(document.querySelector("label")).toHaveStyle({ width });
   });
 
   it("should have filename, onRemoveFile", async () => {
     const onRemoveFile = jest.fn();
 
-    render(<InputFile fileName="bur" onRemoveFile={onRemoveFile} />);
+    render(<InputFile fileName="bur" onRemoveFile={onRemoveFile} labelRemove="Remove file" />);
 
-    const button = screen.getByRole("button", { name: "remove" });
+    const button = screen.getByRole("button", { name: "Remove file" });
     await user.click(button);
     expect(onRemoveFile).toHaveBeenCalled();
   });
@@ -89,6 +99,7 @@ describe("InputFile", () => {
         onFocus={onFocus}
         onBlur={onBlur}
         error="chuck norris counted to infinity twice"
+        labelRemove="Remove file"
       />,
     );
 

packages/orbit-components/src/InputFile/index.tsx

@@ -37,6 +37,7 @@ const InputFile = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
     tabIndex,
     fileName,
     insideInputGroup,
+    labelRemove,
   } = props;
 
   const hasTooltip = Boolean(error || help);
@@ -141,7 +142,7 @@ const InputFile = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
             type="primary"
             disabled={disabled}
             compact
-            iconLeft={<CloseCircle ariaLabel="remove" color="secondary" />}
+            iconLeft={<CloseCircle ariaLabel={labelRemove} color="secondary" />}
             onClick={ev => {
               ev.preventDefault();
               if (onRemoveFile) {

packages/orbit-components/src/InputFile/types.d.ts

@@ -24,4 +24,5 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly insideInputGroup?: boolean;
   readonly onRemoveFile?: Common.Callback;
   readonly multiple?: boolean;
+  readonly labelRemove: string;
 }