import type { Attributes, ComponentPropsWithRef, FC, ReactNode } from "react";
import { type TextColor, type TextHoverColor } from "../Text/Text";
/**
* Properties that are present in all variants of the button
*
*/
export interface BaseButtonProps extends ComponentPropsWithRef<"button"> {
size?: "medium" | "large";
children?: ReactNode;
/**
* Icon that will be rendered before the text. You need to
* pass in the rendered icon component, not the key.
*
* @example
* ```tsx
* } />
* ````
*/
leadingIcon?: ReactNode;
/**
* Icon that will be rendered before the text. You need to
* pass in the rendered icon component, not the key.
*
* @example
* ```tsx
* } />
* ````
*/
trailingIcon?: ReactNode;
className?: string;
dataTestId?: string;
/**
* An optional element to which to render the tooltip in through a portal.
*
* When omitted the Tooltip will be rendered into the document.body.
*/
titleTooltipContainer?: Element | DocumentFragment | null | undefined;
}
export type NonPrimaryButtonProps = BaseButtonProps;
/**
* Extra properties that can be set when the variant of the button
* supports the pending state
*
*/
export interface ButtonWithPendingStateProps extends BaseButtonProps {
isPending?: boolean;
}
export type PrimaryButtonProps = ButtonWithPendingStateProps;
/**
* Properties specific to the IconButtons
*/
export type IconButtonProps = ButtonWithPendingStateProps & {
/**
* The icon that will be rendered in the button.
*/
children: ReactNode;
/**
* Accessible label for the button. This will only be visible to screen readers, and will also be used to target buttons in tests.
*/
label: string;
/**
* Since this button only renders one icon, we don't need leading or trailing icons.
*/
leadingIcon?: never;
trailingIcon?: never;
};
/**
* All properties of BaseButtonProps and ButtonWithPendingStateProps,
* plus other properties that are assigned internally by the button variants.
*
*/
export interface ButtonProps extends BaseButtonProps, ButtonWithPendingStateProps {
textColor?: TextColor;
textHoverColor?: TextHoverColor;
}
/**
* Interface for defining a button
*/
export interface ButtonDefinition {
buttonType: FC;
buttonProps: Attributes & Props;
}
/**
* Interface for defining a button with mandatory key
*/
export interface ButtonDefinitionWithKey {
buttonType: FC;
buttonProps: {
key: string | number;
} & Props;
}