From d9b6bb6179f9e92694f84f2fc9ac1b32c5c730b4 Mon Sep 17 00:00:00 2001
From: roman <bonchevskyi@gmail.com>
Date: Tue, 18 Aug 2026 16:53:06 +0200
Subject: [PATCH] refactor(form-elements-text-area): migrate TextArea from Flow
 to TypeScript

---
 .../__tests__/ContextMenu.test.tsx            |   2 -
 .../datalist-item/DatalistItem.stories.tsx    |   1 -
 src/components/flyout/Flyout.stories.tsx      |   2 -
 .../{TextArea.js => TextArea.js.flow}         |  13 +-
 ...xtArea.stories.js => TextArea.stories.tsx} |   3 +-
 .../form-elements/text-area/TextArea.tsx      | 199 ++++++++++++++++++
 .../{TextArea.test.js => TextArea.test.tsx}   |  46 ++--
 .../form-elements/text-area/index.js          |   2 -
 .../form-elements/text-area/index.js.flow     |   3 +
 .../form-elements/text-area/index.ts          |   2 +
 src/components/hotkeys/HotkeyHelpModal.tsx    |   2 -
 src/components/link/stories/Link.stories.tsx  |   3 -
 .../link/stories/LinkButton.stories.tsx       |  12 +-
 .../stories/LinkPrimaryButton.stories.tsx     |   3 -
 src/components/media/MediaMenu.tsx            |   1 -
 .../media/stories/Media.stories.tsx           |   1 -
 16 files changed, 241 insertions(+), 54 deletions(-)
 rename src/components/form-elements/text-area/{TextArea.js => TextArea.js.flow} (92%)
 rename src/components/form-elements/text-area/{TextArea.stories.js => TextArea.stories.tsx} (93%)
 create mode 100644 src/components/form-elements/text-area/TextArea.tsx
 rename src/components/form-elements/text-area/__tests__/{TextArea.test.js => TextArea.test.tsx} (81%)
 delete mode 100644 src/components/form-elements/text-area/index.js
 create mode 100644 src/components/form-elements/text-area/index.js.flow
 create mode 100644 src/components/form-elements/text-area/index.ts

diff --git a/src/components/context-menu/__tests__/ContextMenu.test.tsx b/src/components/context-menu/__tests__/ContextMenu.test.tsx
index cd1f3fcd67..a9763ea252 100644
--- a/src/components/context-menu/__tests__/ContextMenu.test.tsx
+++ b/src/components/context-menu/__tests__/ContextMenu.test.tsx
@@ -1,5 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import React, { act } from 'react';
 import { mount, shallow, ReactWrapper } from 'enzyme';
 import TetherComponent from 'react-tether';
diff --git a/src/components/datalist-item/DatalistItem.stories.tsx b/src/components/datalist-item/DatalistItem.stories.tsx
index 5576eeb15a..18e0919496 100644
--- a/src/components/datalist-item/DatalistItem.stories.tsx
+++ b/src/components/datalist-item/DatalistItem.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-// @ts-ignore JS Import
 import DatalistItem from './DatalistItem';
 import notes from './DatalistItem.stories.md';
 
diff --git a/src/components/flyout/Flyout.stories.tsx b/src/components/flyout/Flyout.stories.tsx
index cf28f94184..685669ac0b 100644
--- a/src/components/flyout/Flyout.stories.tsx
+++ b/src/components/flyout/Flyout.stories.tsx
@@ -2,11 +2,9 @@ import * as React from 'react';
 
 import Button from '../button';
 import IconHelp from '../../icons/general/IconHelp';
-// @ts-ignore JS import
 import TextInput from '../text-input';
 import PlainButton from '../plain-button';
 import PrimaryButton from '../primary-button';
-// @ts-ignore JS import
 import TextArea from '../text-area';
 
 import { Flyout, Overlay } from '.';
diff --git a/src/components/form-elements/text-area/TextArea.js b/src/components/form-elements/text-area/TextArea.js.flow
similarity index 92%
rename from src/components/form-elements/text-area/TextArea.js
rename to src/components/form-elements/text-area/TextArea.js.flow
index e79b802bc8..c847e940cc 100644
--- a/src/components/form-elements/text-area/TextArea.js
+++ b/src/components/form-elements/text-area/TextArea.js.flow
@@ -6,6 +6,11 @@ import TextAreaCore from '../../text-area';
 import * as messages from '../input-messages';
 import FormInput from '../form/FormInput';
 
+export type TextAreaValidationError = {
+    code: string,
+    message?: React.Node,
+};
+
 type Props = {
     autoFocus?: boolean,
     /** Add a class to the component */
@@ -22,8 +27,8 @@ type Props = {
     name: string,
     /** Placeholder for the text area */
     placeholder?: string,
-    /** Validation function that returns an error string or a promise that resolves to an error string */
-    validation?: Function,
+    /** Validation function that returns `TextAreaValidationError` or a falsy value when valid */
+    validation?: (value: string) => TextAreaValidationError | null | void,
     /** Default value of the text area */
     value: string,
 };
@@ -146,6 +151,7 @@ class TextArea extends React.Component<Props, State> {
             isRequired,
             isResizable,
             label,
+            maxLength,
             name,
             placeholder,
         } = this.props;
@@ -162,6 +168,7 @@ class TextArea extends React.Component<Props, State> {
                         label={label}
                         isRequired={isRequired}
                         isResizable={isResizable}
+                        maxLength={maxLength}
                         name={name}
                         onBlur={this.checkValidity}
                         onChange={this.onChange}
@@ -178,4 +185,6 @@ class TextArea extends React.Component<Props, State> {
     }
 }
 
+export type TextAreaProps = Props;
+
 export default TextArea;
diff --git a/src/components/form-elements/text-area/TextArea.stories.js b/src/components/form-elements/text-area/TextArea.stories.tsx
similarity index 93%
rename from src/components/form-elements/text-area/TextArea.stories.js
rename to src/components/form-elements/text-area/TextArea.stories.tsx
index 34dff5bc67..fc9cdc49e6 100644
--- a/src/components/form-elements/text-area/TextArea.stories.js
+++ b/src/components/form-elements/text-area/TextArea.stories.tsx
@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 
 import TextArea from './TextArea';
@@ -7,7 +6,7 @@ import notes from './TextArea.stories.md';
 export const basic = () => <TextArea name="textarea" label="Your story" placeholder="Once upon a time" />;
 
 export const withValidation = () => {
-    const textAreaValidator = value => {
+    const textAreaValidator = (value: string) => {
         if (!value.includes('www')) {
             return {
                 code: 'nowww',
diff --git a/src/components/form-elements/text-area/TextArea.tsx b/src/components/form-elements/text-area/TextArea.tsx
new file mode 100644
index 0000000000..059bb2e39b
--- /dev/null
+++ b/src/components/form-elements/text-area/TextArea.tsx
@@ -0,0 +1,199 @@
+import * as React from 'react';
+
+import TextAreaCore from '../../text-area';
+
+import * as messages from '../input-messages';
+import FormInput from '../form/FormInput';
+
+/** Return type for the `validation` callback (`code` required for HTML constraint validation). */
+export interface TextAreaValidationError {
+    code: string;
+    message?: React.ReactNode;
+}
+
+/** Internal error shape in state (optional `code` for externally injected errors). */
+interface TextAreaError {
+    code?: string;
+    message?: React.ReactNode;
+}
+
+export interface TextAreaProps {
+    /** Whether the text area is focused on mount */
+    autoFocus?: boolean;
+    /** Add a class to the component */
+    className?: string;
+    /** Whether the text area is disabled */
+    isDisabled?: boolean;
+    /** Whether the text area is read-only */
+    isReadOnly?: boolean;
+    /** Whether the text area value is required */
+    isRequired?: boolean;
+    /** Is text area resizable */
+    isResizable?: boolean;
+    /** Label displayed for the text area */
+    label: React.ReactNode;
+    /** Maximum number of characters allowed */
+    maxLength?: number;
+    /** Name of the text area */
+    name: string;
+    /** Placeholder for the text area */
+    placeholder?: string;
+    /** Validation function that returns `TextAreaValidationError` or a falsy value when valid */
+    validation?: (value: string) => TextAreaValidationError | null | undefined;
+    /** Default value of the text area */
+    value: string;
+}
+
+interface TextAreaState {
+    error: TextAreaError | null | undefined;
+    value: string;
+}
+
+class TextArea extends React.Component<TextAreaProps, TextAreaState> {
+    static defaultProps = {
+        autoFocus: false,
+        value: '',
+        isReadOnly: false,
+    };
+
+    constructor(props: TextAreaProps) {
+        super(props);
+        this.state = {
+            error: null,
+            value: props.value,
+        };
+    }
+
+    componentDidUpdate({ value: prevValue }: TextAreaProps): void {
+        // If a new value is passed by prop, set it
+        if (prevValue !== this.props.value) {
+            this.setState({
+                value: this.props.value,
+            });
+        }
+    }
+
+    onChange = ({ currentTarget }: React.ChangeEvent<HTMLTextAreaElement>): void => {
+        const { value } = currentTarget;
+        if (this.state.error) {
+            this.setState(
+                {
+                    value,
+                },
+                this.checkValidity,
+            );
+        } else {
+            this.setState({
+                value,
+            });
+        }
+    };
+
+    onValidityStateUpdateHandler = (error: ValidityState | TextAreaError): void => {
+        if ((error as ValidityState).valid !== undefined) {
+            this.setErrorFromValidityState(error as ValidityState);
+        } else {
+            this.setState({
+                error: error as TextAreaError,
+            });
+        }
+    };
+
+    setErrorFromValidityState(validityState: ValidityState): void {
+        const { badInput, customError, tooLong, valid, valueMissing } = validityState;
+
+        const { isRequired, maxLength, validation } = this.props;
+
+        const { value } = this.state;
+
+        let error;
+
+        if (valid) {
+            error = null;
+        } else if (badInput) {
+            error = messages.badInput();
+        } else if (tooLong && typeof maxLength !== 'undefined') {
+            error = messages.tooLong(maxLength);
+        } else if (valueMissing) {
+            error = messages.valueMissing();
+        } else if (customError && (isRequired || value.trim().length) && validation) {
+            error = validation(value);
+        }
+
+        this.setState({
+            error,
+        });
+    }
+
+    textarea: HTMLTextAreaElement | null | undefined;
+
+    // Updates component value and validity state
+    checkValidity = (): void => {
+        const { isRequired, validation } = this.props;
+        const { textarea } = this;
+
+        if (!textarea) {
+            return;
+        }
+
+        if (validation && (isRequired || textarea.value.trim().length)) {
+            const error = validation(textarea.value);
+            this.setState({
+                error,
+                value: textarea.value,
+            });
+
+            if (error) {
+                textarea.setCustomValidity(error.code);
+            } else {
+                textarea.setCustomValidity('');
+            }
+        } else {
+            this.setErrorFromValidityState(textarea.validity);
+        }
+    };
+
+    render(): React.ReactNode {
+        const {
+            autoFocus,
+            className = '',
+            isDisabled,
+            isReadOnly,
+            isRequired,
+            isResizable,
+            label,
+            maxLength,
+            name,
+            placeholder,
+        } = this.props;
+
+        const { error, value } = this.state;
+
+        return (
+            <div className={className}>
+                <FormInput name={name} onValidityStateUpdate={this.onValidityStateUpdateHandler}>
+                    <TextAreaCore
+                        autoFocus={autoFocus}
+                        disabled={isDisabled}
+                        error={error ? error.message : null}
+                        label={label}
+                        isRequired={isRequired}
+                        isResizable={isResizable}
+                        maxLength={maxLength}
+                        name={name}
+                        onBlur={this.checkValidity}
+                        onChange={this.onChange}
+                        placeholder={placeholder}
+                        readOnly={isReadOnly}
+                        textareaRef={textarea => {
+                            this.textarea = textarea;
+                        }}
+                        value={value}
+                    />
+                </FormInput>
+            </div>
+        );
+    }
+}
+
+export default TextArea;
diff --git a/src/components/form-elements/text-area/__tests__/TextArea.test.js b/src/components/form-elements/text-area/__tests__/TextArea.test.tsx
similarity index 81%
rename from src/components/form-elements/text-area/__tests__/TextArea.test.js
rename to src/components/form-elements/text-area/__tests__/TextArea.test.tsx
index 1cf4c30a93..0b3ad17d53 100644
--- a/src/components/form-elements/text-area/__tests__/TextArea.test.js
+++ b/src/components/form-elements/text-area/__tests__/TextArea.test.tsx
@@ -15,7 +15,7 @@ describe('components/form-elements/text-area/TextArea', () => {
     test('should correctly render default component', () => {
         const wrapper = shallow(<TextArea label="label" name="textarea" />);
 
-        expect(wrapper.find('TextArea').length).toEqual(1);
+        expect(wrapper.find('TextArea')).toHaveLength(1);
     });
 
     test('should update state if value prop changes', () => {
@@ -59,13 +59,15 @@ describe('components/form-elements/text-area/TextArea', () => {
     });
 
     test('should set an textarea as valid when the validityFn returns an void', () => {
-        function validityFn() {}
+        function validityFn() {
+            return undefined;
+        }
 
-        const wrapper = mount(<TextArea label="label" name="textarea" type="custom" validation={validityFn} />);
+        const wrapper = mount(<TextArea label="label" name="textarea" validation={validityFn} />);
         const textarea = wrapper.find('textarea');
         textarea.simulate('blur');
 
-        expect(textarea.instance().validity.valid).toBeTruthy();
+        expect((textarea.instance() as unknown as HTMLTextAreaElement).validity.valid).toBeTruthy();
     });
 
     test('should set an textarea as invalid when the validityFn returns an error string and input is not empty', () => {
@@ -76,13 +78,11 @@ describe('components/form-elements/text-area/TextArea', () => {
             };
         }
 
-        const wrapper = mount(
-            <TextArea label="label" name="textarea" type="custom" validation={validityFn} value="yes" />,
-        );
+        const wrapper = mount(<TextArea label="label" name="textarea" validation={validityFn} value="yes" />);
         const textarea = wrapper.find('textarea');
         textarea.simulate('blur');
 
-        expect(textarea.instance().validity.valid).toBeFalsy();
+        expect((textarea.instance() as unknown as HTMLTextAreaElement).validity.valid).toBeFalsy();
     });
 
     test('should set an textarea as valid when intially then fixed when using validityFn', () => {
@@ -93,19 +93,19 @@ describe('components/form-elements/text-area/TextArea', () => {
             message: 'errMessage',
         });
 
-        stub.onCall(1).returns();
+        stub.onCall(1).returns(undefined);
 
-        const wrapper = mount(<TextArea label="label" name="textarea" type="custom" validation={stub} value="yes" />);
+        const wrapper = mount(<TextArea label="label" name="textarea" validation={stub} value="yes" />);
         let textarea = wrapper.find('textarea');
 
         textarea.simulate('blur');
-        expect(textarea.instance().validity.valid).toBeFalsy();
+        expect((textarea.instance() as unknown as HTMLTextAreaElement).validity.valid).toBeFalsy();
 
         // Get the re-rendered textarea again
         textarea = wrapper.find('textarea');
 
         textarea.simulate('blur');
-        expect(textarea.instance().validity.valid).toBeTruthy();
+        expect((textarea.instance() as unknown as HTMLTextAreaElement).validity.valid).toBeTruthy();
     });
 
     test('should not set textarea invalid when the validityFn returns an error string and textarea is empty and not required', () => {
@@ -116,11 +116,11 @@ describe('components/form-elements/text-area/TextArea', () => {
             };
         }
 
-        const wrapper = mount(<TextArea label="label" name="textarea" type="custom" validation={validityFn} />);
+        const wrapper = mount(<TextArea label="label" name="textarea" validation={validityFn} />);
         const textarea = wrapper.find('textarea');
         textarea.simulate('blur');
 
-        expect(textarea.instance().validity.valid).toBeTruthy();
+        expect((textarea.instance() as unknown as HTMLTextAreaElement).validity.valid).toBeTruthy();
     });
 
     test('should set textarea invalid when the validityFn returns an error string, textarea is empty and is required', () => {
@@ -131,13 +131,11 @@ describe('components/form-elements/text-area/TextArea', () => {
             };
         }
 
-        const wrapper = mount(
-            <TextArea isRequired label="label" name="textarea" type="custom" validation={validityFn} />,
-        );
+        const wrapper = mount(<TextArea isRequired label="label" name="textarea" validation={validityFn} />);
         const textarea = wrapper.find('textarea');
         textarea.simulate('blur');
 
-        expect(textarea.instance().validity.valid).toBeFalsy();
+        expect((textarea.instance() as unknown as HTMLTextAreaElement).validity.valid).toBeFalsy();
     });
 
     test('should re-validate when textarea is set via props programaticallly', () => {
@@ -150,7 +148,7 @@ describe('components/form-elements/text-area/TextArea', () => {
         wrapper.setProps({ value: 'abba' });
 
         textarea.simulate('blur');
-        const textareaEl = textarea.getDOMNode();
+        const textareaEl = textarea.getDOMNode() as HTMLTextAreaElement;
         textareaEl.value = 'a';
         textarea.simulate('change', {
             currentTarget: textareaEl,
@@ -167,7 +165,7 @@ describe('components/form-elements/text-area/TextArea', () => {
 
         expect(wrapper.find('.text-area-container').hasClass('show-error')).toBeTruthy();
 
-        const textareaEl = textarea.getDOMNode();
+        const textareaEl = textarea.getDOMNode() as HTMLTextAreaElement;
         textareaEl.value = 'a';
         textarea.simulate('change', {
             currentTarget: textareaEl,
@@ -198,7 +196,9 @@ describe('components/form-elements/text-area/TextArea', () => {
             validityStateHandlerSpy.callArgWith(1, error);
         });
 
-        expect(component.find('TextArea').first().instance().state.error).toEqual(error);
+        expect((component.find('TextArea').first().instance() as InstanceType<typeof TextArea>).state.error).toEqual(
+            error,
+        );
     });
 
     test('should set validity state when set validity state handler is called with ValidityState object', () => {
@@ -221,6 +221,8 @@ describe('components/form-elements/text-area/TextArea', () => {
         act(() => {
             validityStateHandlerSpy.callArgWith(1, error);
         });
-        expect(component.find('TextArea').first().instance().state.error.code).toEqual('badInput');
+        expect(
+            (component.find('TextArea').first().instance() as InstanceType<typeof TextArea>).state.error.code,
+        ).toEqual('badInput');
     });
 });
diff --git a/src/components/form-elements/text-area/index.js b/src/components/form-elements/text-area/index.js
deleted file mode 100644
index ba2c8afa42..0000000000
--- a/src/components/form-elements/text-area/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// @flow
-export { default } from './TextArea';
diff --git a/src/components/form-elements/text-area/index.js.flow b/src/components/form-elements/text-area/index.js.flow
new file mode 100644
index 0000000000..c945a1a62f
--- /dev/null
+++ b/src/components/form-elements/text-area/index.js.flow
@@ -0,0 +1,3 @@
+// @flow
+export { default } from './TextArea';
+export type { TextAreaProps, TextAreaValidationError } from './TextArea';
diff --git a/src/components/form-elements/text-area/index.ts b/src/components/form-elements/text-area/index.ts
new file mode 100644
index 0000000000..002c330900
--- /dev/null
+++ b/src/components/form-elements/text-area/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TextArea';
+export type { TextAreaProps, TextAreaValidationError } from './TextArea';
diff --git a/src/components/hotkeys/HotkeyHelpModal.tsx b/src/components/hotkeys/HotkeyHelpModal.tsx
index bc95720dde..33fc141c7c 100644
--- a/src/components/hotkeys/HotkeyHelpModal.tsx
+++ b/src/components/hotkeys/HotkeyHelpModal.tsx
@@ -2,12 +2,10 @@ import * as React from 'react';
 import { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-// @ts-ignore flow import
 import { ModalActions } from '../modal';
 import Button, { ButtonType } from '../button';
 import PlainButton from '../plain-button';
 import DropdownMenu, { MenuToggle } from '../dropdown-menu';
-// @ts-ignore flow import
 import { Menu, MenuItem } from '../menu';
 import { HotkeyContext } from './HotkeyContext';
 import HotkeyFriendlyModal, { type HotkeyFriendlyModalProps } from './HotkeyFriendlyModal';
diff --git a/src/components/link/stories/Link.stories.tsx b/src/components/link/stories/Link.stories.tsx
index b705304590..efcde6ddd6 100644
--- a/src/components/link/stories/Link.stories.tsx
+++ b/src/components/link/stories/Link.stories.tsx
@@ -11,15 +11,12 @@ export const withCustomComponent = () => {
     // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 
     const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (
-        // @ts-ignore TODO: figure out why this is giving a TS error
         <RouterLink to={href} {...rest}>
             {children}
         </RouterLink>
     );
 
     return (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         <Router>
             <Link component={CustomRouterLink} href="/">
                 A link
diff --git a/src/components/link/stories/LinkButton.stories.tsx b/src/components/link/stories/LinkButton.stories.tsx
index 45a457b93e..9ed1567842 100644
--- a/src/components/link/stories/LinkButton.stories.tsx
+++ b/src/components/link/stories/LinkButton.stories.tsx
@@ -4,14 +4,7 @@ import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkPro
 import LinkButton from '../LinkButton';
 import notes from './LinkButton.stories.md';
 
-export const basic = () => (
-    <LinkButton
-        href="https://www.box.com/platform"
-        // @ts-ignore TODO: figure out why this is giving a TS error
-    >
-        A link that looks like a Button
-    </LinkButton>
-);
+export const basic = () => <LinkButton href="https://www.box.com/platform">A link that looks like a Button</LinkButton>;
 
 export const large = () => (
     <LinkButton href="https://www.box.com/platform" size="large">
@@ -24,15 +17,12 @@ export const withCustomComponent = () => {
     // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 
     const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (
-        // @ts-ignore TODO: figure out why this is giving a TS error
         <RouterLink to={href} {...rest}>
             {children}
         </RouterLink>
     );
 
     return (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         <Router>
             <LinkButton href="/" component={CustomRouterLink}>
                 A link
diff --git a/src/components/link/stories/LinkPrimaryButton.stories.tsx b/src/components/link/stories/LinkPrimaryButton.stories.tsx
index 1f907e203c..18e33d4bbc 100644
--- a/src/components/link/stories/LinkPrimaryButton.stories.tsx
+++ b/src/components/link/stories/LinkPrimaryButton.stories.tsx
@@ -19,15 +19,12 @@ export const withCustomComponent = () => {
     // import { BrowserRouter as Router, Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 
     const CustomRouterLink = ({ href, children, ...rest }: RouterLinkProps) => (
-        // @ts-ignore TODO: figure out why this is giving a TS error
         <RouterLink to={href} {...rest}>
             {children}
         </RouterLink>
     );
 
     return (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
         <Router>
             <LinkPrimaryButton href="/" component={CustomRouterLink}>
                 A link
diff --git a/src/components/media/MediaMenu.tsx b/src/components/media/MediaMenu.tsx
index 3cec436a7e..19d9fb5e2e 100644
--- a/src/components/media/MediaMenu.tsx
+++ b/src/components/media/MediaMenu.tsx
@@ -6,7 +6,6 @@ import messages from './messages';
 import IconEllipsis from '../../icons/general/IconEllipsis';
 import { ButtonType } from '../button';
 import PlainButton, { PlainButtonProps } from '../plain-button';
-// @ts-ignore TODO: migrate DropdownMenu to typescript
 import DropdownMenu from '../dropdown-menu';
 import { Menu } from '../menu';
 import { bdlGray50 } from '../../styles/variables';
diff --git a/src/components/media/stories/Media.stories.tsx b/src/components/media/stories/Media.stories.tsx
index a69054a296..3118ab33ef 100644
--- a/src/components/media/stories/Media.stories.tsx
+++ b/src/components/media/stories/Media.stories.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import Avatar from '../../avatar/Avatar';
 import Button from '../../button/Button';
 import MenuItem from '../../menu/MenuItem';
-// @ts-ignore TODO: migrate TextArea to typescript
 import TextArea from '../../text-area';
 
 import Media from '../Media';