feat(Table): add typescript type annotations to Table (#13372)

* feat(Table): add typescript type annotations to Table * fix(export-test): fix TableContext file ext in export-test * fix(props): fix TableContext file extension, change props to optional * fix(props): revert back default size value * Update packages/react/src/components/DataTable/Table.tsx Co-authored-by: Francine Lucca <[email protected]> --------- Co-authored-by: Francine Lucca <[email protected]>
carbon-design-system · Mar 23, 2023 · d630dcb · d630dcb
1 parent 9cc6a01
commit d630dcb
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 8 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -1078,6 +1078,15 @@
         "code"
       ]
     },
+    {
+      "login": "aze3ma",
+      "name": "Mahmoud Abdulazim",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6822318?v=4",
+      "profile": "https://www.github.com/aze3ma",
+      "contributions": [
+        "code"
+      ]
+    },
     {
       "login": "davesteinberg",
       "name": "Dave Steinberg",

diff --git a/README.md b/README.md
@@ -228,6 +228,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/awarrier99"><img src="https://avatars.githubusercontent.com/u/17476235?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ashvin Warrier</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=awarrier99" title="Code">💻</a></td>
     <td align="center"><a href="https://galvingao.com/"><img src="https://avatars.githubusercontent.com/u/12567059?v=4?s=100" width="100px;" alt=""/><br /><sub><b>GalvinGao</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=GalvinGao" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/bianca-sparxs"><img src="https://avatars.githubusercontent.com/u/33003148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bianca Sparxs</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=bianca-sparxs" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.github.com/aze3ma"><img src="https://avatars.githubusercontent.com/u/6822318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mahmoud Abdulazim</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=aze3ma" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/davesteinberg"><img src="https://avatars.githubusercontent.com/u/3935584?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dave Steinberg</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=davesteinberg" title="Code">💻</a></td>
   </tr>
   <tr>

diff --git a/...s/react/src/components/DataTable/Table.js → .../react/src/components/DataTable/Table.tsx b/...s/react/src/components/DataTable/Table.js → .../react/src/components/DataTable/Table.tsx
@@ -5,23 +5,57 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useContext } from 'react';
+import React, { useContext, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { TableContext } from './TableContext';
 
+interface TableProps {
+  className?: string;
+
+  /**
+   * `false` If true, will apply sorting styles
+   */
+  isSortable?: boolean;
+
+  /**
+   * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+   */
+  overflowMenuOnHover?: boolean;
+
+  /**
+   *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * `false` If true, will keep the header sticky (only data rows will scroll)
+   */
+  stickyHeader?: boolean;
+
+  /**
+   * `false` If true, will use a width of 'auto' instead of 100%
+   */
+  useStaticWidth?: boolean;
+
+  /**
+   * `true` to add useZebraStyles striping.
+   */
+  useZebraStyles?: boolean;
+}
+
 export const Table = ({
   className,
   children,
   useZebraStyles,
   size,
-  isSortable,
+  isSortable = false,
   useStaticWidth,
   stickyHeader,
-  overflowMenuOnHover,
+  overflowMenuOnHover = true,
   ...other
-}) => {
+}: PropsWithChildren<TableProps>) => {
   const { titleId, descriptionId } = useContext(TableContext);
   const prefix = usePrefix();
   const componentClass = cx(`${prefix}--data-table`, className, {

diff --git a/.../src/components/DataTable/TableContext.js → ...src/components/DataTable/TableContext.tsx b/.../src/components/DataTable/TableContext.js → ...src/components/DataTable/TableContext.tsx
@@ -7,7 +7,12 @@
 
 import { createContext } from 'react';
 
+interface TableContextType {
+  titleId?: string;
+  descriptionId?: string;
+}
+
 export const TableContext = createContext({
-  titleId: null,
-  descriptionId: null,
-});
+  titleId: undefined,
+  descriptionId: undefined,
+} as TableContextType);
diff --git a/packages/react/src/components/DataTable/__tests__/exports-test.js b/packages/react/src/components/DataTable/__tests__/exports-test.js
@@ -25,7 +25,7 @@ const blocklist = new Set([
   'DataTable.mdx',
   'stories',
   'next',
-  'TableContext.js',
+  'TableContext.tsx',
 ]);
 const components = fs
   .readdirSync(COMPONENT_PATH)