chore: extend HTML attributes whilst omitting blocked styling propert…

…ies from the type signature (#3360) * chore: extend HTML attributes whilst omitting blocked styling properties from the type signature * chore: changesets * chore: make lint pass * chore: changeset updates * fix: pr feedback --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
twilio-labs · Aug 3, 2023 · 4d1f7c6 · 4d1f7c6
1 parent 360d799
commit 4d1f7c6
Show file tree

Hide file tree

Showing 80 changed files with 254 additions and 193 deletions.
diff --git a/.changeset/eleven-peaches-brake.md b/.changeset/eleven-peaches-brake.md
@@ -3,4 +3,4 @@
 '@twilio-paste/core': patch
 ---
 
-[Sidebr] fixed an issue with overlay sidebars where the topbar would be over the sidebar when sidebar is expanded
+[Sidebar] fixed an issue with overlay sidebars where the topbar would be over the sidebar when sidebar is expanded
diff --git a/.changeset/hip-walls-poke.md b/.changeset/hip-walls-poke.md
@@ -0,0 +1,54 @@
+---
+'@twilio-paste/alert': patch
+'@twilio-paste/alert-dialog': patch
+'@twilio-paste/anchor': patch
+'@twilio-paste/avatar': patch
+'@twilio-paste/badge': patch
+'@twilio-paste/breadcrumb': patch
+'@twilio-paste/button': patch
+'@twilio-paste/card': patch
+'@twilio-paste/checkbox': patch
+'@twilio-paste/display-heading': patch
+'@twilio-paste/display-pill-group': patch
+'@twilio-paste/file-picker': patch
+'@twilio-paste/heading': patch
+'@twilio-paste/help-text': patch
+'@twilio-paste/in-page-navigation': patch
+'@twilio-paste/inline-control-group': patch
+'@twilio-paste/input': patch
+'@twilio-paste/label': patch
+'@twilio-paste/list': patch
+'@twilio-paste/minimizable-dialog': patch
+'@twilio-paste/modal': patch
+'@twilio-paste/pagination': patch
+'@twilio-paste/paragraph': patch
+'@twilio-paste/progress-steps': patch
+'@twilio-paste/radio-button-group': patch
+'@twilio-paste/radio-group': patch
+'@twilio-paste/select': patch
+'@twilio-paste/separator': patch
+'@twilio-paste/side-modal': patch
+'@twilio-paste/sidebar': patch
+'@twilio-paste/skeleton-loader': patch
+'@twilio-paste/status': patch
+'@twilio-paste/switch': patch
+'@twilio-paste/table': patch
+'@twilio-paste/tabs': patch
+'@twilio-paste/textarea': patch
+'@twilio-paste/toast': patch
+'@twilio-paste/topbar': patch
+'@twilio-paste/truncate': patch
+'@twilio-paste/user-dialog': patch
+'@twilio-paste/grid': patch
+'@twilio-paste/media-object': patch
+'@twilio-paste/types': patch
+'@twilio-paste/core': patch
+---
+
+Improved types where Paste extends the base HTML element that a component is based on, so that the existing blocked styling properties are not exposed as valid properties for the component via Typescript. This leads to less confusion around what is supported by a Paste component.
+
+Existing blocked component properties include:
+
+- `className`
+- `style`
+- `color`
diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx
@@ -2,8 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
-export interface AlertDialogBodyProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BoxProps, 'element'> {
+export interface AlertDialogBodyProps extends HTMLPasteProps<'div'>, Pick<BoxProps, 'element'> {
   bodyID: string;
   children: NonNullable<React.ReactNode>;
 }

diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx
@@ -4,8 +4,9 @@ import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
 import {Button} from '@twilio-paste/button';
 import {Stack} from '@twilio-paste/stack';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
-export interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BoxProps, 'element'> {
+export interface AlertDialogFooterProps extends HTMLPasteProps<'div'>, Pick<BoxProps, 'element'> {
   destructive?: boolean;
   onConfirm: () => void;
   onConfirmLabel: string;

diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
 import {Heading} from '@twilio-paste/heading';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
-export interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLHeadElement>, Pick<BoxProps, 'element'> {
+export interface AlertDialogHeaderProps extends HTMLPasteProps<'header'>, Pick<BoxProps, 'element'> {
   children: string;
   headingID: string;
 }

diff --git a/packages/paste-core/components/alert-dialog/src/index.tsx b/packages/paste-core/components/alert-dialog/src/index.tsx
@@ -5,6 +5,7 @@ import {useTransition} from '@twilio-paste/animation-library';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
 import {ModalDialogOverlay} from '@twilio-paste/modal';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 import {AlertDialogHeader} from './AlertDialogHeader';
 import {AlertDialogBody} from './AlertDialogBody';
@@ -24,7 +25,7 @@ const getAnimationStates = (): any => ({
   },
 });
 
-export interface AlertDialogProps extends React.HTMLAttributes<HTMLElement>, Pick<BoxProps, 'element'> {
+export interface AlertDialogProps extends HTMLPasteProps<'div'>, Pick<BoxProps, 'element'> {
   children: NonNullable<React.ReactNode>;
   destructive?: boolean;
   heading: string;

diff --git a/packages/paste-core/components/alert/src/index.tsx b/packages/paste-core/components/alert/src/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import type {BoxProps} from '@twilio-paste/box';
-import type {ValueOf} from '@twilio-paste/types';
+import type {HTMLPasteProps, ValueOf} from '@twilio-paste/types';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
 import {Button} from '@twilio-paste/button';
@@ -43,9 +43,7 @@ export type AlertRoles = ValueOf<typeof AlertRoles>;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type AlertTextColors = ValueOf<typeof AlertTextColors>;
 
-export interface AlertProps extends Pick<BoxProps, 'element'> {
-  id?: never;
-  className?: never;
+export interface AlertProps extends HTMLPasteProps<'div'>, Pick<BoxProps, 'element'> {
   children: NonNullable<React.ReactNode>;
   onDismiss?: () => void;
   role?: string;

diff --git a/packages/paste-core/components/anchor/src/types.ts b/packages/paste-core/components/anchor/src/types.ts
@@ -1,15 +1,12 @@
+import type {HTMLPasteProps} from '@twilio-paste/types';
 import type {LayoutProps, SpaceProps} from '@twilio-paste/style-props';
 import type {BoxProps} from '@twilio-paste/box';
 
 export type AnchorTabIndexes = 0 | -1;
 export type AnchorTargets = '_self' | '_blank' | '_parent' | '_top';
 export type AnchorVariants = 'default' | 'inverse';
 
-export interface AnchorProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    LayoutProps,
-    SpaceProps,
-    Pick<BoxProps, 'element'> {
+export interface AnchorProps extends HTMLPasteProps<'a'>, LayoutProps, SpaceProps, Pick<BoxProps, 'element'> {
   children: NonNullable<React.ReactNode>;
   href: string;
   rel?: string;

diff --git a/packages/paste-core/components/avatar/src/types.ts b/packages/paste-core/components/avatar/src/types.ts
@@ -1,11 +1,12 @@
 import type {IconSize} from '@twilio-paste/style-props';
 import type {GenericIconProps} from '@twilio-paste/icons/esm/types';
 import type {BoxProps} from '@twilio-paste/box';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 export type ColorVariants = 'default' | 'decorative10' | 'decorative20' | 'decorative30' | 'decorative40';
 export type AvatarVariants = 'user' | 'entity';
 
-export type AvatarProps = React.HTMLAttributes<'div'> &
+export type AvatarProps = HTMLPasteProps<'div'> &
   Pick<BoxProps, 'element'> & {
     name: string;
     size?: IconSize;
@@ -22,7 +23,7 @@ export type AvatarContentProps = {
   src?: string;
 };
 
-export type AvatarGroupProps = React.HTMLAttributes<'div'> &
+export type AvatarGroupProps = HTMLPasteProps<'div'> &
   Pick<BoxProps, 'element'> & {
     size: IconSize;
     variant: AvatarVariants;

diff --git a/packages/paste-core/components/badge/src/types.ts b/packages/paste-core/components/badge/src/types.ts
@@ -1,4 +1,5 @@
 import type {BoxProps} from '@twilio-paste/box';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 import type {BadgeVariants} from './constants';
 
@@ -9,17 +10,17 @@ export type BadgeBaseProps = Pick<BoxProps, 'element'> & {
   variant: typeof BadgeVariants[number];
   size?: BadgeSizes;
 };
-export type BadgeSpanProps = React.HTMLAttributes<HTMLSpanElement> & {
+export type BadgeSpanProps = HTMLPasteProps<'span'> & {
   as: 'span';
   href?: never;
   onClick?: never;
 };
-export type BadgeButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
+export type BadgeButtonProps = HTMLPasteProps<'button'> & {
   as: 'button';
-  onClick: React.HTMLAttributes<HTMLButtonElement>['onClick'];
+  onClick: HTMLPasteProps<'button'>['onClick'];
   href?: never;
 };
-export type BadgeAnchorProps = React.HTMLAttributes<HTMLAnchorElement> & {
+export type BadgeAnchorProps = HTMLPasteProps<'a'> & {
   as: 'a';
   href: string;
   onClick?: never;

diff --git a/packages/paste-core/components/breadcrumb/src/index.tsx b/packages/paste-core/components/breadcrumb/src/index.tsx
@@ -6,6 +6,7 @@ import {Anchor} from '@twilio-paste/anchor';
 import type {AnchorProps} from '@twilio-paste/anchor';
 import {Text, safelySpreadTextProps} from '@twilio-paste/text';
 import {useUIDSeed} from '@twilio-paste/uid-library';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 const BreadcrumbSeparator: React.FC<React.PropsWithChildren<{element: BoxElementProps['element']}>> = ({element}) => (
   <Text
@@ -30,7 +31,7 @@ type BreadcrumbItemBaseProps = Pick<BoxProps, 'element'> & {
   last?: boolean;
 };
 
-type BreadcrumbItemAsSpanProps = React.HTMLAttributes<HTMLSpanElement> &
+type BreadcrumbItemAsSpanProps = HTMLPasteProps<'span'> &
   BreadcrumbItemBaseProps & {
     href?: never;
   };
@@ -93,7 +94,7 @@ if (process.env.NODE_ENV === 'development') {
   };
 }
 
-export interface BreadcrumbProps extends React.HTMLAttributes<'nav'> {
+export interface BreadcrumbProps extends HTMLPasteProps<'nav'> {
   children: NonNullable<React.ReactNode>;
   element?: BoxElementProps['element'];
 }

diff --git a/packages/paste-core/components/button/src/index.tsx b/packages/paste-core/components/button/src/index.tsx
@@ -276,8 +276,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         variant={variant}
         size={smartDefaultSize as ButtonSizes}
         aria-busy={buttonState === 'loading' ? 'true' : 'false'}
-        className={undefined}
-        style={undefined}
         ref={ref}
       >
         <ButtonContents buttonState={buttonState} showLoading={showLoading} variant={variant}>

diff --git a/packages/paste-core/components/button/src/types.ts b/packages/paste-core/components/button/src/types.ts
@@ -1,4 +1,5 @@
 import type {BoxProps} from '@twilio-paste/box';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 type ButtonTypes = 'submit' | 'button' | 'reset';
 export type ButtonSizes =
@@ -32,7 +33,7 @@ export interface ButtonContentsProps {
   variant?: ButtonVariants;
 }
 
-export interface DirectButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<BoxProps, 'element'> {
+export interface DirectButtonProps extends HTMLPasteProps<'button'>, Pick<BoxProps, 'element'> {
   size: ButtonSizes;
   children: React.ReactNode;
   as?: keyof JSX.IntrinsicElements;
@@ -47,7 +48,7 @@ export interface DirectButtonProps extends React.ButtonHTMLAttributes<HTMLButton
   target?: string;
 }
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Pick<BoxProps, 'element'> {
+export interface ButtonProps extends HTMLPasteProps<'button'>, Pick<BoxProps, 'element'> {
   variant: ButtonVariants;
   size?: ButtonSizes;
   as?: keyof JSX.IntrinsicElements;

diff --git a/packages/paste-core/components/card/src/index.tsx b/packages/paste-core/components/card/src/index.tsx
@@ -4,12 +4,10 @@ import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
 import type {PaddingProps} from '@twilio-paste/style-props';
 import {isPaddingTokenProp} from '@twilio-paste/style-props';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 /** element identifier from BoxProps for customization */
-export interface CardProps
-  extends React.HTMLAttributes<HTMLElement>,
-    PaddingProps,
-    Pick<BoxProps, 'element' | 'variant'> {}
+export interface CardProps extends HTMLPasteProps<'article'>, PaddingProps, Pick<BoxProps, 'element' | 'variant'> {}
 
 const Card = React.forwardRef<HTMLElement, CardProps>(
   (

diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx
@@ -13,6 +13,7 @@ import {
 } from '@twilio-paste/base-radio-checkbox';
 import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object';
 import {RequiredDot} from '@twilio-paste/label';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 import {CheckboxContext} from './CheckboxContext';
 
@@ -35,7 +36,7 @@ const selectAllChildStyleProps = {
   paddingRight: 'space30',
 };
 
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, Pick<BoxProps, 'element'> {
+export interface CheckboxProps extends HTMLPasteProps<'input'>, Pick<BoxProps, 'element'> {
   children: NonNullable<React.ReactNode>;
   hasError?: boolean;
   helpText?: string | React.ReactNode;

diff --git a/packages/paste-core/components/display-heading/src/index.tsx b/packages/paste-core/components/display-heading/src/index.tsx
@@ -2,15 +2,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import {Text, safelySpreadTextProps} from '@twilio-paste/text';
 import type {TextProps, TextStyleProps} from '@twilio-paste/text';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 type DisplayHeadingVariants = 'displayHeading10' | 'displayHeading20' | 'displayHeading30';
 type AsTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' | 'header';
 
 export interface DisplayHeadingProps
-  extends React.HTMLAttributes<HTMLHeadingElement>,
+  extends HTMLPasteProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' | 'header'>,
     Pick<TextProps, 'element' | 'display'> {
   as: AsTags;
-  className?: never;
   id?: string;
   marginBottom?: 'space0';
   variant: DisplayHeadingVariants;

diff --git a/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx b/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxElementProps} from '@twilio-paste/box';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 import {secureExternalLink} from '@twilio-paste/anchor';
 
-type DisplayPillProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & Pick<BoxElementProps, 'element'>;
+type DisplayPillProps = HTMLPasteProps<'a'> & Pick<BoxElementProps, 'element'>;
 
 /**
  * Display represents a saved entity as part of a collection, usually as a result of multi selection.

diff --git a/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx b/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
-export interface DisplayPillGroupProps extends React.OlHTMLAttributes<HTMLElement> {
+export interface DisplayPillGroupProps extends HTMLPasteProps<'ol'> {
   'aria-label': string;
   element?: string;
   children: React.ReactNode;

diff --git a/packages/paste-core/components/file-picker/src/FilePicker.tsx b/packages/paste-core/components/file-picker/src/FilePicker.tsx
@@ -6,8 +6,9 @@ import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
 import {SiblingBox} from '@twilio-paste/sibling-box';
 import type {TextColor} from '@twilio-paste/style-props';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
-export interface FilePickerProps extends React.HTMLAttributes<HTMLInputElement>, Pick<BoxProps, 'element'> {
+export interface FilePickerProps extends HTMLPasteProps<'input'>, Pick<BoxProps, 'element'> {
   accept?: string;
   children: React.ReactElement;
   disabled?: boolean;

diff --git a/packages/paste-core/components/heading/src/types.ts b/packages/paste-core/components/heading/src/types.ts
@@ -1,11 +1,11 @@
 import type {TextProps} from '@twilio-paste/text';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 export type AsTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label' | 'span' | 'header';
 export type HeadingVariants = 'heading10' | 'heading20' | 'heading30' | 'heading40' | 'heading50' | 'heading60';
 
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, Pick<TextProps, 'element' | 'display'> {
+export interface HeadingProps extends HTMLPasteProps<AsTags>, Pick<TextProps, 'element' | 'display'> {
   as: AsTags;
-  className?: never;
   id?: string;
   marginBottom?: 'space0';
   variant: HeadingVariants;

diff --git a/packages/paste-core/components/help-text/src/HelpText.tsx b/packages/paste-core/components/help-text/src/HelpText.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type {ValueOf} from '@twilio-paste/types';
+import type {HTMLPasteProps, ValueOf} from '@twilio-paste/types';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
 import type {TextColor} from '@twilio-paste/style-props';
@@ -20,7 +20,7 @@ export const HelpTextVariants = {
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type HelpTextVariants = ValueOf<typeof HelpTextVariants>;
 
-export interface HelpTextProps extends React.HTMLAttributes<HTMLDivElement>, Pick<BoxProps, 'element'> {
+export interface HelpTextProps extends HTMLPasteProps<'div'>, Pick<BoxProps, 'element'> {
   marginTop?: 'space0';
   variant?: HelpTextVariants;
 }

diff --git a/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx b/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import type {BoxStyleProps, BoxProps} from '@twilio-paste/box';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 import {secureExternalLink} from '@twilio-paste/anchor';
+import type {HTMLPasteProps} from '@twilio-paste/types';
 
 import {InPageNavigationContext} from './InPageNavigationContext';
 
@@ -61,7 +62,7 @@ const INVERSE_CURRENT_PAGE_STYLES: BoxStyleProps = {
   color: 'colorTextInverse',
 };
 
-export interface InPageNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface InPageNavigationItemProps extends HTMLPasteProps<'a'> {
   currentPage?: boolean;
   children: NonNullable<React.ReactNode>;
   href: string;