chore: fix reset button types (#3454)

* chore: fix reset button types * chore: remove unneccessary changeset
twilio-labs · Aug 30, 2023 · 10da7d2 · 10da7d2
1 parent 611a2da
commit 10da7d2
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 28 deletions.
diff --git a/.changeset/curvy-pumpkins-leave.md b/.changeset/curvy-pumpkins-leave.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/input': patch
+'@twilio-paste/core': patch
+---
+
+[Input] increment and decrement button types corrected for tabIndex
diff --git a/.changeset/red-ties-hammer.md b/.changeset/red-ties-hammer.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/button': patch
+'@twilio-paste/core': patch
+---
+
+[Button] improved reset variant typing to allow style props enabling the creation of custom buttons
diff --git a/packages/paste-core/components/button/src/types.ts b/packages/paste-core/components/button/src/types.ts
@@ -1,4 +1,4 @@
-import type {BoxProps} from '@twilio-paste/box';
+import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
 import type {HTMLPasteProps} from '@twilio-paste/types';
 
 type ButtonTypes = 'submit' | 'button' | 'reset';
@@ -34,32 +34,30 @@ export interface ButtonContentsProps {
 }
 
 export interface DirectButtonProps extends HTMLPasteProps<'button'>, Pick<BoxProps, 'element'> {
-  size: ButtonSizes;
-  children: React.ReactNode;
   as?: keyof JSX.IntrinsicElements;
+  buttonState: ButtonStates;
+  children: React.ReactNode;
+  disabled?: boolean;
   fullWidth?: boolean;
   href?: string;
+  pressed?: boolean;
+  size: ButtonSizes;
   tabIndex?: ButtonTabIndexes;
-  disabled?: boolean;
+  target?: string;
   type?: ButtonTypes;
-  buttonState: ButtonStates;
   variant: ButtonVariants;
-  pressed?: boolean;
-  target?: string;
 }
 
-export interface ButtonProps extends HTMLPasteProps<'button'>, Pick<BoxProps, 'element'> {
-  variant: ButtonVariants;
-  size?: ButtonSizes;
-  as?: keyof JSX.IntrinsicElements;
-  fullWidth?: boolean;
-  href?: string;
-  tabIndex?: ButtonTabIndexes;
-  disabled?: boolean;
-  type?: ButtonTypes;
-  loading?: boolean;
-  children: React.ReactNode;
-  i18nExternalLinkLabel?: string;
-  pressed?: boolean;
-  target?: string;
-}
+type BaseVariantsButtonProps = {
+  variant?: Omit<ButtonVariants, 'reset'>;
+};
+type ResetVariantButtonProps = BoxStyleProps & {
+  variant?: 'reset';
+};
+
+export type ButtonProps = (BaseVariantsButtonProps | ResetVariantButtonProps) &
+  Omit<DirectButtonProps, 'buttonState' | 'i18nExternalLinkLabel' | 'loading' | 'size'> & {
+    i18nExternalLinkLabel?: string;
+    loading?: boolean;
+    size?: DirectButtonProps['size'];
+  };
diff --git a/packages/paste-core/components/button/stories/index.stories.tsx b/packages/paste-core/components/button/stories/index.stories.tsx
@@ -164,7 +164,7 @@ export const Reset = (): React.ReactNode => (
       </Button>
     </Heading>
     <Heading variant="heading20" as="h1">
-      <Button variant="reset" size="reset" disabled>
+      <Button variant="reset" size="reset" backgroundColor="colorBackground">
         Example using reset button in composition
       </Button>
     </Heading>

diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import type {BoxProps} from '@twilio-paste/box';
-import {Button} from '@twilio-paste/button';
+import {Button, type ButtonProps} from '@twilio-paste/button';
 import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon';
 import type {HTMLPasteProps} from '@twilio-paste/types';
 
 export interface DecrementButtonProps extends HTMLPasteProps<'button'> {
   i18nStepDownLabel?: string;
   element?: BoxProps['element'];
+  // Button component restricts tabIndex values
+  tabIndex?: ButtonProps['tabIndex'];
 }
 
 export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButtonProps>(
@@ -19,7 +21,6 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         variant="reset"
         size="reset"
         type="button"
-        // @ts-expect-error remove when Reset Button types extends BoxProps
         borderRadius="borderRadius20"
         backgroundColor="colorBackground"
         marginRight="space30"

diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react';
 import type {BoxProps} from '@twilio-paste/box';
-import {Button} from '@twilio-paste/button';
+import {Button, type ButtonProps} from '@twilio-paste/button';
 import {ChevronUpIcon} from '@twilio-paste/icons/esm/ChevronUpIcon';
 import type {HTMLPasteProps} from '@twilio-paste/types';
 
 export interface IncrementButtonProps extends HTMLPasteProps<'button'> {
   i18nStepUpLabel?: string;
   element?: BoxProps['element'];
+  // Button component restricts tabIndex values
+  tabIndex?: ButtonProps['tabIndex'];
 }
 
 export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButtonProps>(
@@ -19,7 +21,6 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         variant="reset"
         size="reset"
         type="button"
-        // @ts-expect-error remove when Reset Button types extends BoxProps
         borderRadius="borderRadius20"
         backgroundColor="colorBackground"
         marginRight="space30"

diff --git a/packages/paste-core/components/user-dialog/src/UserDialog.tsx b/packages/paste-core/components/user-dialog/src/UserDialog.tsx
@@ -40,7 +40,6 @@ const UserDialogButton = React.forwardRef<HTMLButtonElement, UserDialogButtonPro
         {...props}
         variant="reset"
         size="reset"
-        // @ts-expect-error remove when Reset Button types extends BoxProps
         borderRadius="borderRadius20"
         element={`${element}_BUTTON`}
         ref={ref}