From 803095159f7bd7bb637955072478ff67c35d609b Mon Sep 17 00:00:00 2001 From: TheSisb Date: Mon, 5 Jun 2023 12:08:43 -0500 Subject: [PATCH 1/2] fix(data-grid): improve ts typings and react proptypes --- .changeset/short-gifts-glow.md | 7 +++++++ .../components/data-grid/src/table/Td.tsx | 10 ++++------ .../components/data-grid/src/table/Th.tsx | 14 ++++---------- .../components/data-grid/src/table/Tr.tsx | 9 +++++---- .../paste-core/components/table/src/proptypes.ts | 14 ++++---------- packages/paste-core/components/table/src/types.ts | 3 +-- 6 files changed, 25 insertions(+), 32 deletions(-) create mode 100644 .changeset/short-gifts-glow.md diff --git a/.changeset/short-gifts-glow.md b/.changeset/short-gifts-glow.md new file mode 100644 index 0000000000..604ce5fb26 --- /dev/null +++ b/.changeset/short-gifts-glow.md @@ -0,0 +1,7 @@ +--- +'@twilio-paste/data-grid': patch +'@twilio-paste/table': patch +'@twilio-paste/core': patch +--- + +[Table, DataGrid] Typescript type improvements for Tr, Th, and Td elements diff --git a/packages/paste-core/components/data-grid/src/table/Td.tsx b/packages/paste-core/components/data-grid/src/table/Td.tsx index 4e732ffb65..96258f5468 100644 --- a/packages/paste-core/components/data-grid/src/table/Td.tsx +++ b/packages/paste-core/components/data-grid/src/table/Td.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {TextAlign} from '@twilio-paste/style-props'; +import {TdPropTypes} from '@twilio-paste/table'; +import type {TdProps as TableTdProps} from '@twilio-paste/table'; -export interface TdProps { - textAlign?: TextAlign; +export interface TdProps extends TableTdProps { onClick?: React.MouseEventHandler; - element?: BoxElementProps['element']; } export const Td = React.forwardRef( @@ -47,6 +45,6 @@ export const Td = React.forwardRef( Td.displayName = 'Td'; Td.propTypes = { + ...TdPropTypes, onClick: PropTypes.func, - element: PropTypes.string, }; diff --git a/packages/paste-core/components/data-grid/src/table/Th.tsx b/packages/paste-core/components/data-grid/src/table/Th.tsx index 0dbbdffb86..ca4763218e 100644 --- a/packages/paste-core/components/data-grid/src/table/Th.tsx +++ b/packages/paste-core/components/data-grid/src/table/Th.tsx @@ -1,15 +1,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {TextAlign} from '@twilio-paste/style-props'; +import {ThPropTypes} from '@twilio-paste/table'; +import type {ThProps as TableThProps} from '@twilio-paste/table'; -export interface ThProps { - textAlign?: TextAlign; - width?: string; +export interface ThProps extends TableThProps { onClick?: React.MouseEventHandler; - element?: BoxElementProps['element']; - colSpan?: number; } export const Th = React.forwardRef( @@ -50,8 +46,6 @@ export const Th = React.forwardRef( Th.displayName = 'Th'; Th.propTypes = { + ...ThPropTypes, onClick: PropTypes.func, - width: PropTypes.string, - element: PropTypes.string, - colSpan: PropTypes.number, }; diff --git a/packages/paste-core/components/data-grid/src/table/Tr.tsx b/packages/paste-core/components/data-grid/src/table/Tr.tsx index 0f89da4619..15cbdd2374 100644 --- a/packages/paste-core/components/data-grid/src/table/Tr.tsx +++ b/packages/paste-core/components/data-grid/src/table/Tr.tsx @@ -2,13 +2,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import {styled, css} from '@twilio-paste/styling-library'; import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import {TrPropTypes} from '@twilio-paste/table'; +import type {TrProps as TableTrProps} from '@twilio-paste/table'; -export interface TrProps { +export interface TrProps extends TableTrProps { role: string; striped: boolean; selected?: boolean; - element?: BoxElementProps['element']; } const StyledTr = styled.tr( @@ -43,7 +43,8 @@ export const Tr = React.forwardRef( Tr.displayName = 'Tr'; Tr.propTypes = { + ...TrPropTypes, role: PropTypes.string.isRequired, selected: PropTypes.bool, - element: PropTypes.string, + striped: PropTypes.bool.isRequired, }; diff --git a/packages/paste-core/components/table/src/proptypes.ts b/packages/paste-core/components/table/src/proptypes.ts index f041506cf9..124bcbf967 100644 --- a/packages/paste-core/components/table/src/proptypes.ts +++ b/packages/paste-core/components/table/src/proptypes.ts @@ -18,11 +18,8 @@ export const THeadPropTypes = { children: PropTypes.node.isRequired, element: PropTypes.string, }; - -export const TBodyPropTypes = { - children: PropTypes.node.isRequired, - element: PropTypes.string, -}; +export const TBodyPropTypes = THeadPropTypes; +export const TFootPropTypes = THeadPropTypes; export const TrPropTypes = { children: PropTypes.node.isRequired, @@ -35,15 +32,12 @@ export const ThPropTypes = { element: PropTypes.string, textAlign: PropTypes.oneOf(Object.values(TableAlignmentObject)), width: isWidthTokenProp, + colSpan: PropTypes.number, }; export const TdPropTypes = { + colSpan: PropTypes.number, children: PropTypes.node, element: PropTypes.string, textAlign: PropTypes.oneOf(Object.values(TableAlignmentObject)), }; - -export const TFootPropTypes = { - children: PropTypes.node.isRequired, - element: PropTypes.string, -}; diff --git a/packages/paste-core/components/table/src/types.ts b/packages/paste-core/components/table/src/types.ts index 11bcf6b785..38137009ff 100644 --- a/packages/paste-core/components/table/src/types.ts +++ b/packages/paste-core/components/table/src/types.ts @@ -62,9 +62,8 @@ export interface TrProps extends React.TableHTMLAttributes children: NonNullable; element?: BoxProps['element']; verticalAlign?: TableVerticalAlignmentOptions; - isLastRow?: boolean; } -export interface ThProps extends React.ThHTMLAttributes { +export interface ThProps extends React.ThHTMLAttributes { children?: React.ReactNode; element?: BoxProps['element']; textAlign?: TableAlignmentOptions; From aa4a3e7a2cce6568b47d884bf71a77b1ac5f1477 Mon Sep 17 00:00:00 2001 From: TheSisb Date: Thu, 8 Jun 2023 14:15:18 -0500 Subject: [PATCH 2/2] chore: type fix --- packages/paste-core/components/data-grid/src/DataGridRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-core/components/data-grid/src/DataGridRow.tsx b/packages/paste-core/components/data-grid/src/DataGridRow.tsx index e0920fed78..52073ad61b 100644 --- a/packages/paste-core/components/data-grid/src/DataGridRow.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridRow.tsx @@ -7,7 +7,7 @@ import {Tr} from './table/Tr'; import {DataGridContext} from './DataGridContext'; export interface DataGridRowProps { - children?: React.ReactNode; + children: NonNullable; selected?: boolean; element?: BoxElementProps['element']; }