diff --git a/.changeset/curvy-pumpkins-leave.md b/.changeset/curvy-pumpkins-leave.md new file mode 100644 index 0000000000..dbad00d153 --- /dev/null +++ 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 new file mode 100644 index 0000000000..249dd29e8c --- /dev/null +++ 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 index 06b3c04c4b..122738084b 100644 --- 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 { - 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 { - 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; +}; +type ResetVariantButtonProps = BoxStyleProps & { + variant?: 'reset'; +}; + +export type ButtonProps = (BaseVariantsButtonProps | ResetVariantButtonProps) & + Omit & { + 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 index 82f8751917..7cab28cba2 100644 --- 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 => ( - diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx index f5f1be25ae..46f2c185aa 100644 --- 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( @@ -19,7 +21,6 @@ export const DecrementButton = React.forwardRef { i18nStepUpLabel?: string; element?: BoxProps['element']; + // Button component restricts tabIndex values + tabIndex?: ButtonProps['tabIndex']; } export const IncrementButton = React.forwardRef( @@ -19,7 +21,6 @@ export const IncrementButton = React.forwardRef