mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
b46501cc0d
* migration of button icon to use TS box version * fixed lint issues * Some convention and linting updates * README fixes * Updating snapshot * snapshot updates --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
|
|
import {
|
|
AlignItems,
|
|
BackgroundColor,
|
|
BorderRadius,
|
|
Display,
|
|
IconColor,
|
|
JustifyContent,
|
|
} from '../../../helpers/constants/design-system';
|
|
|
|
import { Box, Icon } from '..';
|
|
import { IconSize } from '../icon';
|
|
import { BoxProps, PolymorphicRef } from '../box';
|
|
import {
|
|
ButtonIconSize,
|
|
ButtonIconProps,
|
|
ButtonIconComponent,
|
|
} from './button-icon.types';
|
|
|
|
const buttonIconSizeToIconSize: Record<ButtonIconSize, IconSize> = {
|
|
[ButtonIconSize.Sm]: IconSize.Sm,
|
|
[ButtonIconSize.Md]: IconSize.Md,
|
|
[ButtonIconSize.Lg]: IconSize.Lg,
|
|
};
|
|
|
|
export const ButtonIcon: ButtonIconComponent = React.forwardRef(
|
|
<C extends React.ElementType = 'button' | 'a'>(
|
|
{
|
|
ariaLabel,
|
|
as,
|
|
className = '',
|
|
color = IconColor.iconDefault,
|
|
href,
|
|
size = ButtonIconSize.Lg,
|
|
iconName,
|
|
disabled,
|
|
iconProps,
|
|
...props
|
|
}: ButtonIconProps<C>,
|
|
ref?: PolymorphicRef<C>,
|
|
) => {
|
|
const tag = href ? 'a' : as || 'button';
|
|
const isDisabled = disabled && tag === 'button';
|
|
return (
|
|
<Box
|
|
aria-label={ariaLabel}
|
|
as={tag}
|
|
className={classnames(
|
|
'mm-button-icon',
|
|
`mm-button-icon--size-${String(size)}`,
|
|
{
|
|
'mm-button-icon--disabled': Boolean(disabled),
|
|
},
|
|
className,
|
|
)}
|
|
color={color}
|
|
{...(isDisabled ? { disabled: true } : {})} // only allow disabled attribute to be passed down to the Box when the as prop is equal to a button element
|
|
display={Display.InlineFlex}
|
|
justifyContent={JustifyContent.center}
|
|
alignItems={AlignItems.center}
|
|
borderRadius={BorderRadius.LG}
|
|
backgroundColor={BackgroundColor.transparent}
|
|
{...(href ? { href } : {})}
|
|
ref={ref}
|
|
{...(props as BoxProps<C>)}
|
|
>
|
|
<Icon
|
|
name={iconName}
|
|
size={buttonIconSizeToIconSize[size]}
|
|
{...iconProps}
|
|
/>
|
|
</Box>
|
|
);
|
|
},
|
|
);
|