diff --git a/package-lock.json b/package-lock.json
index ef90e4b5c..3ecf51807 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17101,29 +17101,20 @@
       "dev": true
     },
     "typescript-eslint-parser": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint-parser/-/typescript-eslint-parser-21.0.1.tgz",
-      "integrity": "sha512-rdtAzg0eTTv/+YRLBJZBAAuOHHyYiElE2HdkaOGf9kKGce811zP3JRPzDybCJQamdsxyEsMe6CyIk2JCEnw/4g==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/typescript-eslint-parser/-/typescript-eslint-parser-21.0.2.tgz",
+      "integrity": "sha512-u+pj4RVJBr4eTzj0n5npoXD/oRthvfUCjSKndhNI714MG0mQq2DJw5WP7qmonRNIFgmZuvdDOH3BHm9iOjIAfg==",
       "dev": true,
       "requires": {
         "eslint-scope": "^4.0.0",
         "eslint-visitor-keys": "^1.0.0",
-        "lodash": "^4.17.11",
-        "typescript-estree": "5.0.0"
-      },
-      "dependencies": {
-        "lodash": {
-          "version": "4.17.11",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
-          "dev": true
-        }
+        "typescript-estree": "5.3.0"
       }
     },
     "typescript-estree": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/typescript-estree/-/typescript-estree-5.0.0.tgz",
-      "integrity": "sha512-/FHoH7ECP+Y6CLS7MdRD0Hu7b3HgsD7k6ArNWgoXK3fW0eSZGj+t04Mf4aQ6EBj04WoHALkReYMfGbTzaDPKEg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/typescript-estree/-/typescript-estree-5.3.0.tgz",
+      "integrity": "sha512-Vu0KmYdSCkpae+J48wsFC1ti19Hq3Wi/lODUaE+uesc3gzqhWbZ5itWbsjylLVbjNW4K41RqDzSfnaYNbmEiMQ==",
       "dev": true,
       "requires": {
         "lodash.unescape": "4.0.1",
diff --git a/packages/layout-grid/Cell.js b/packages/layout-grid/Cell.js
deleted file mode 100644
index 841214f0e..000000000
--- a/packages/layout-grid/Cell.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Cell = (props) => {
-  const {
-    align,
-    children,
-    className,
-    columns,
-    desktopColumns,
-    order,
-    phoneColumns,
-    tabletColumns,
-    tag: Tag,
-    ...otherProps
-  } = props;
-
-  const classes = classnames('mdc-layout-grid__cell', className, {
-    [`mdc-layout-grid__cell--align-${align}`]: !!align,
-    [`mdc-layout-grid__cell--order-${order}`]: !!order,
-    [`mdc-layout-grid__cell--span-${columns}`]: !!columns,
-    [`mdc-layout-grid__cell--span-${desktopColumns}-desktop`]: !!desktopColumns,
-    [`mdc-layout-grid__cell--span-${phoneColumns}-phone`]: !!phoneColumns,
-    [`mdc-layout-grid__cell--span-${tabletColumns}-tablet`]: !!tabletColumns,
-  });
-
-  return (
-    <Tag className={classes} {...otherProps}>
-      {children}
-    </Tag>
-  );
-};
-
-Cell.propTypes = {
-  align: PropTypes.oneOf(['bottom', 'middle', 'top']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  columns: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  desktopColumns: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  order: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  phoneColumns: PropTypes.oneOf([1, 2, 3, 4]),
-  tabletColumns: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]),
-  tag: PropTypes.string,
-};
-
-Cell.defaultProps = {
-  align: undefined,
-  children: undefined,
-  className: '',
-  columns: undefined,
-  desktopColumns: undefined,
-  order: undefined,
-  phoneColumns: undefined,
-  tabletColumns: undefined,
-  tag: 'div',
-};
-
-export default Cell;
diff --git a/packages/layout-grid/Cell.tsx b/packages/layout-grid/Cell.tsx
new file mode 100644
index 000000000..bdd12bc57
--- /dev/null
+++ b/packages/layout-grid/Cell.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as classnames from 'classnames';
+
+export type TwelveColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type FourColumn = 1 | 2 | 3 | 4;
+export type EightColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type Alignment = 'bottom' | 'middle' | 'top';
+
+export interface CellProps<T> extends React.HTMLProps<T> {
+  align?: Alignment,
+  className?: string,
+  columns?: TwelveColumn,
+  desktopColumns?: TwelveColumn,
+  order?: TwelveColumn,
+  phoneColumns?: FourColumn,
+  tabletColumns?: EightColumn,
+  tag?: string
+};
+
+const Cell: <T extends {} = HTMLDivElement>(props: CellProps<T>) => React.ReactElement<any> = ({
+  /* eslint-disable react/prop-types */
+  align,
+  children,
+  className = '',
+  columns,
+  desktopColumns,
+  order,
+  phoneColumns,
+  tabletColumns,
+  tag: Tag = 'div',
+  /* eslint-enable react/prop-types */
+  ...otherProps
+}) => {
+  const classes = classnames('mdc-layout-grid__cell', className, {
+    [`mdc-layout-grid__cell--align-${align}`]: !!align,
+    [`mdc-layout-grid__cell--order-${order}`]: !!order,
+    [`mdc-layout-grid__cell--span-${columns}`]: !!columns,
+    [`mdc-layout-grid__cell--span-${desktopColumns}-desktop`]: !!desktopColumns,
+    [`mdc-layout-grid__cell--span-${phoneColumns}-phone`]: !!phoneColumns,
+    [`mdc-layout-grid__cell--span-${tabletColumns}-tablet`]: !!tabletColumns,
+  });
+
+  return (
+    // https://github.com/Microsoft/TypeScript/issues/28892
+    // @ts-ignore
+    <Tag className={classes} {...otherProps}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Cell;
diff --git a/packages/layout-grid/Grid.js b/packages/layout-grid/Grid.js
deleted file mode 100644
index c8652d775..000000000
--- a/packages/layout-grid/Grid.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Grid = (props) => {
-  const {
-    align,
-    children,
-    className,
-    fixedColumnWidth,
-    tag: Tag,
-    ...otherProps
-  } = props;
-
-  const classes = classnames('mdc-layout-grid', className, {
-    [`mdc-layout-grid--align-${align}`]: !!align,
-    'mdc-layout-grid--fixed-column-width': fixedColumnWidth,
-  });
-
-  return (
-    <Tag className={classes} {...otherProps}>{children}</Tag>
-  );
-};
-
-Grid.propTypes = {
-  align: PropTypes.oneOf(['left', 'right']),
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  fixedColumnWidth: PropTypes.bool,
-  tag: PropTypes.string,
-};
-
-Grid.defaultProps = {
-  align: undefined,
-  className: '',
-  fixedColumnWidth: false,
-  tag: 'div',
-};
-
-export default Grid;
diff --git a/packages/layout-grid/Grid.tsx b/packages/layout-grid/Grid.tsx
new file mode 100644
index 000000000..63cf1cbb1
--- /dev/null
+++ b/packages/layout-grid/Grid.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import * as classnames from 'classnames';
+
+export type Alignment = 'left' | 'right';
+export interface GridProps<T> extends React.HTMLProps<T> {
+  align?: Alignment,
+  className?: string,
+  fixedColumnWidth?: boolean,
+  tag?: string
+};
+
+const Grid: <T extends {} = HTMLDivElement>(props: GridProps<T>) => React.ReactElement<any> = ({
+  /* eslint-disable react/prop-types */
+  align,
+  children,
+  className = '',
+  fixedColumnWidth = false,
+  tag: Tag = 'div',
+  /* eslint-enable react/prop-types */
+  ...otherProps
+}) => {
+  const classes = classnames('mdc-layout-grid', className, {
+    [`mdc-layout-grid--align-${align}`]: !!align,
+    'mdc-layout-grid--fixed-column-width': fixedColumnWidth,
+  });
+  return (
+    // https://github.com/Microsoft/TypeScript/issues/28892
+    // @ts-ignore
+    <Tag className={classes} {...otherProps}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Grid;
diff --git a/packages/layout-grid/Row.js b/packages/layout-grid/Row.js
deleted file mode 100644
index 0e81d5032..000000000
--- a/packages/layout-grid/Row.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Row = (props) => {
-  const {
-    children,
-    className,
-    tag: Tag,
-    ...otherProps
-  } = props;
-
-  const classes = classnames('mdc-layout-grid__inner', className);
-
-  return (
-    <Tag className={classes} {...otherProps}>{children}</Tag>
-  );
-};
-
-Row.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  tag: PropTypes.string,
-};
-
-Row.defaultProps = {
-  className: '',
-  tag: 'div',
-};
-
-export default Row;
diff --git a/packages/layout-grid/Row.tsx b/packages/layout-grid/Row.tsx
new file mode 100644
index 000000000..5111fdf74
--- /dev/null
+++ b/packages/layout-grid/Row.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as classnames from 'classnames';
+
+export interface RowProps<T> extends React.HTMLProps<T> {
+  className?: string,
+  tag?: string
+};
+
+const Row: <T extends {} = HTMLDivElement>(props: RowProps<T>) => React.ReactElement<any> = ({
+  /* eslint-disable react/prop-types */
+  children = '',
+  className,
+  tag: Tag = 'div',
+  ...otherProps
+  /* eslint-enable react/prop-types */
+}) => {
+  const classes = classnames('mdc-layout-grid__inner', className);
+
+  return (
+    // https://github.com/Microsoft/TypeScript/issues/28892
+    // @ts-ignore
+    <Tag className={classes} {...otherProps}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Row;
diff --git a/packages/layout-grid/index.js b/packages/layout-grid/index.tsx
similarity index 100%
rename from packages/layout-grid/index.js
rename to packages/layout-grid/index.tsx
diff --git a/test/screenshot/layout-grid/index.js b/test/screenshot/layout-grid/index.tsx
similarity index 65%
rename from test/screenshot/layout-grid/index.js
rename to test/screenshot/layout-grid/index.tsx
index 08b0a364c..a0b77e05c 100644
--- a/test/screenshot/layout-grid/index.js
+++ b/test/screenshot/layout-grid/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-
+import * as React from 'react';
 import './index.scss';
 import {Cell, Grid, Row} from '../../../packages/layout-grid/index';
 import '../../../packages/layout-grid/index.scss';
@@ -8,9 +7,9 @@ const NoWidth = () => {
   return (
     <Grid>
       <Row>
-        <Cell className="layout-grid-sample__cell__one">Tennis</Cell>
-        <Cell className="layout-grid-sample__cell__two">Cricket</Cell>
-        <Cell className="layout-grid-sample__cell__three">StarCraft</Cell>
+        <Cell className='layout-grid-sample__cell__one'>Tennis</Cell>
+        <Cell className='layout-grid-sample__cell__two'>Cricket</Cell>
+        <Cell className='layout-grid-sample__cell__three'>StarCraft</Cell>
       </Row>
     </Grid>
   );
@@ -20,9 +19,15 @@ const OneThird = () => {
   return (
     <Grid>
       <Row>
-        <Cell className="layout-grid-sample__cell__one" columns={4}>Tennis</Cell>
-        <Cell className="layout-grid-sample__cell__two" columns={4}>Cricket</Cell>
-        <Cell className="layout-grid-sample__cell__three" columns={4}>StarCraft</Cell>
+        <Cell className='layout-grid-sample__cell__one' columns={4}>
+          Tennis
+        </Cell>
+        <Cell className='layout-grid-sample__cell__two' columns={4}>
+          Cricket
+        </Cell>
+        <Cell className='layout-grid-sample__cell__three' columns={4}>
+          StarCraft
+        </Cell>
       </Row>
     </Grid>
   );
@@ -33,7 +38,7 @@ const ThirdHalfFull = () => {
     <Grid>
       <Row>
         <Cell
-          className="layout-grid-sample__cell__one"
+          className='layout-grid-sample__cell__one'
           desktopColumns={4}
           phoneColumns={4}
           tabletColumns={4}
@@ -41,7 +46,7 @@ const ThirdHalfFull = () => {
           Tennis
         </Cell>
         <Cell
-          className="layout-grid-sample__cell__two"
+          className='layout-grid-sample__cell__two'
           desktopColumns={4}
           phoneColumns={4}
           tabletColumns={4}
@@ -49,7 +54,7 @@ const ThirdHalfFull = () => {
           Cricket
         </Cell>
         <Cell
-          className="layout-grid-sample__cell__three"
+          className='layout-grid-sample__cell__three'
           desktopColumns={4}
           phoneColumns={4}
           tabletColumns={4}
@@ -68,7 +73,7 @@ const Nested = () => {
         <Cell desktopColumns={8} phoneColumns={4} tabletColumns={5}>
           <Row>
             <Cell
-              className="layout-grid-sample__cell__one"
+              className='layout-grid-sample__cell__one'
               desktopColumns={6}
               phoneColumns={2}
               tabletColumns={4}
@@ -76,7 +81,7 @@ const Nested = () => {
               Tennis
             </Cell>
             <Cell
-              className="layout-grid-sample__cell__two"
+              className='layout-grid-sample__cell__two'
               desktopColumns={6}
               phoneColumns={2}
               tabletColumns={4}
@@ -88,7 +93,7 @@ const Nested = () => {
         <Cell desktopColumns={4} phoneColumns={4} tabletColumns={3}>
           <Row>
             <Cell
-              className="layout-grid-sample__cell__one"
+              className='layout-grid-sample__cell__one'
               desktopColumns={6}
               phoneColumns={2}
               tabletColumns={4}
@@ -96,7 +101,7 @@ const Nested = () => {
               Tennis
             </Cell>
             <Cell
-              className="layout-grid-sample__cell__two"
+              className='layout-grid-sample__cell__two'
               desktopColumns={6}
               phoneColumns={2}
               tabletColumns={4}
@@ -114,9 +119,15 @@ const Ordering = () => {
   return (
     <Grid>
       <Row>
-        <Cell className="layout-grid-sample__cell__one" order={3}>Tennis</Cell>
-        <Cell className="layout-grid-sample__cell__two" order={1}>Cricket</Cell>
-        <Cell className="layout-grid-sample__cell__three" order={2}>StarCraft</Cell>
+        <Cell className='layout-grid-sample__cell__one' order={3}>
+          Tennis
+        </Cell>
+        <Cell className='layout-grid-sample__cell__two' order={1}>
+          Cricket
+        </Cell>
+        <Cell className='layout-grid-sample__cell__three' order={2}>
+          StarCraft
+        </Cell>
       </Row>
     </Grid>
   );
diff --git a/test/unit/drawer/index.test.tsx b/test/unit/drawer/index.test.tsx
index 02c211bbc..43a7bacf4 100644
--- a/test/unit/drawer/index.test.tsx
+++ b/test/unit/drawer/index.test.tsx
@@ -218,7 +218,7 @@ test('#adapter.notifyOpen calls props.onOpen', () => {
 
 test('#adapter.trapFocus calls focusTrap.activate if modal variant', () => {
   const wrapper = shallow<Drawer>(<Drawer modal />);
-  const activate = coerceForTesting<(activateOptions?: Pick<Options, "onActivate">) => void>(td.func());
+  const activate = coerceForTesting<(activateOptions?: Pick<Options, 'onActivate'>) => void>(td.func());
   wrapper.instance().focusTrap = coerceForTesting<FocusTrap>({activate});
   wrapper.instance().foundation.adapter_.trapFocus();
   td.verify(activate(), {times: 1});
diff --git a/test/unit/layout-grid/Cell.test.js b/test/unit/layout-grid/Cell.test.tsx
similarity index 64%
rename from test/unit/layout-grid/Cell.test.js
rename to test/unit/layout-grid/Cell.test.tsx
index 4bf09dd1b..20515b235 100644
--- a/test/unit/layout-grid/Cell.test.js
+++ b/test/unit/layout-grid/Cell.test.tsx
@@ -1,55 +1,70 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Cell} from '../../../packages/layout-grid/index';
 
 suite('LayoutGridCell');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Cell className='test-class-name' />, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Cell className='test-class-name' />, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('align prop adds correct className', () => {
-  const wrapper = shallow(<Cell align='bottom' />, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Cell align='bottom' />, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell--align-bottom'));
 });
 
 test('columns prop adds correct className', () => {
-  const wrapper = shallow(<Cell columns={4} />, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Cell columns={4} />, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell--span-4'));
 });
 
 test('desktopColumns prop adds correct className', () => {
-  const wrapper = shallow(<Cell desktopColumns={4} />, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Cell desktopColumns={4} />, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell--span-4-desktop'));
 });
 
 test('order prop adds correct className', () => {
-  const wrapper = shallow(<Cell order={12} />, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Cell order={12} />, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell--order-12'));
 });
 
 test('phoneColumns prop adds correct className', () => {
-  const wrapper = shallow(<Cell phoneColumns={4} />, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Cell phoneColumns={4} />, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell--span-4-phone'));
 });
 
 test('tabletColumns prop adds correct className', () => {
-  const wrapper = shallow(<Cell tabletColumns={4} />, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Cell tabletColumns={4} />, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__cell--span-4-tablet'));
 });
 
 test('keeps custom props', () => {
-  const wrapper = shallow(<Cell propOne={true} propTwo='test-prop' />, {disableLifecycleMethods: true});
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  const wrapper = shallow(<Cell disabled={true} label='test-prop' />, {
+    disableLifecycleMethods: true,
+  });
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/layout-grid/Grid.test.js b/test/unit/layout-grid/Grid.test.tsx
similarity index 68%
rename from test/unit/layout-grid/Grid.test.js
rename to test/unit/layout-grid/Grid.test.tsx
index efa58a7be..f3c7407ae 100644
--- a/test/unit/layout-grid/Grid.test.js
+++ b/test/unit/layout-grid/Grid.test.tsx
@@ -1,31 +1,41 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Grid} from '../../../packages/layout-grid/index';
 
 suite('LayoutGridGrid');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Grid className='test-class-name'>Children</Grid>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Grid className='test-class-name'>Children</Grid>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('align prop adds correct className', () => {
-  const wrapper = shallow(<Grid align='right'>Children</Grid>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Grid align='right'>Children</Grid>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid--align-right'));
 });
 
 test('fixedColumnWidth prop adds correct className', () => {
-  const wrapper = shallow(<Grid fixedColumnWidth>Children</Grid>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Grid fixedColumnWidth>Children</Grid>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid'));
   assert.isTrue(wrapper.hasClass('mdc-layout-grid--fixed-column-width'));
 });
 
 test('keeps custom props', () => {
-  const wrapper = shallow(<Grid propOne={true} propTwo='test-prop'>Children</Grid>, {disableLifecycleMethods: true});
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  const wrapper = shallow(
+    <Grid disabled={true} label='test-prop'>
+      Children
+    </Grid>,
+    {disableLifecycleMethods: true}
+  );
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().label, 'test-prop');
 });
diff --git a/test/unit/layout-grid/Row.test.js b/test/unit/layout-grid/Row.test.tsx
similarity index 56%
rename from test/unit/layout-grid/Row.test.js
rename to test/unit/layout-grid/Row.test.tsx
index af9751ac1..4a85f90ed 100644
--- a/test/unit/layout-grid/Row.test.js
+++ b/test/unit/layout-grid/Row.test.tsx
@@ -1,19 +1,25 @@
 import {assert} from 'chai';
 import {shallow} from 'enzyme';
-import React from 'react';
-
+import * as React from 'react';
 import {Row} from '../../../packages/layout-grid/index';
 
 suite('LayoutGridRow');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<Row className='test-class-name'>Children</Row>, {disableLifecycleMethods: true});
+  const wrapper = shallow(<Row className='test-class-name'>Children</Row>, {
+    disableLifecycleMethods: true,
+  });
   assert.isTrue(wrapper.hasClass('mdc-layout-grid__inner'));
   assert.isTrue(wrapper.hasClass('test-class-name'));
 });
 
 test('keeps custom props', () => {
-  const wrapper = shallow(<Row propOne={true} propTwo='test-prop'>Children</Row>, {disableLifecycleMethods: true});
-  assert.isTrue(wrapper.props().propOne);
-  assert.equal(wrapper.props().propTwo, 'test-prop');
+  const wrapper = shallow(
+    <Row disabled={true} type='test-prop'>
+      Children
+    </Row>,
+    {disableLifecycleMethods: true}
+  );
+  assert.isTrue(wrapper.props().disabled);
+  assert.equal(wrapper.props().type, 'test-prop');
 });