1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/component-library/button-base/button-base.js
Garrett Bear 8bdf820c70
button base housekeeping (#16336)
* button base housekeeping

* add pixel size to description

* snapshot update
2022-11-03 11:41:16 -07:00

145 lines
3.7 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon';
import { Text } from '../text';
import {
ALIGN_ITEMS,
DISPLAY,
JUSTIFY_CONTENT,
TEXT_COLORS,
TEXT,
SIZES,
FLEX_DIRECTION,
} from '../../../helpers/constants/design-system';
import { BUTTON_BASE_SIZES } from './button-base.constants';
export const ButtonBase = ({
as = 'button',
block,
children,
className,
href,
size = BUTTON_BASE_SIZES.MD,
icon,
iconPositionRight,
loading,
disabled,
iconProps,
...props
}) => {
const Tag = href ? 'a' : as;
return (
<Box
as={Tag}
paddingLeft={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
paddingRight={size === BUTTON_BASE_SIZES.AUTO ? 0 : 4}
className={classnames(
'mm-button',
`mm-button--size-${size}`,
{
'mm-button--loading': loading,
'mm-button--disabled': disabled,
'mm-button--block': block,
},
className,
)}
disabled={disabled}
display={DISPLAY.INLINE_FLEX}
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
{...props}
>
<Text
as="span"
className="mm-button__content"
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.CENTER}
flexDirection={
iconPositionRight ? FLEX_DIRECTION.ROW_REVERSE : FLEX_DIRECTION.ROW
}
gap={2}
variant={size === BUTTON_BASE_SIZES.AUTO ? TEXT.INHERIT : TEXT.BODY_MD}
color={TEXT_COLORS.INHERIT}
>
{icon && (
<Icon
name={icon}
size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.SM}
{...iconProps}
/>
)}
{children}
</Text>
{loading && (
<Icon
className="mm-button__icon-loading"
name={ICON_NAMES.LOADING_FILLED}
size={size === BUTTON_BASE_SIZES.AUTO ? SIZES.AUTO : SIZES.MD}
/>
)}
</Box>
);
};
ButtonBase.propTypes = {
/**
* The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag
*/
as: PropTypes.string,
/**
* Boolean prop to quickly activate box prop display block
*/
block: PropTypes.bool,
/**
* The children to be rendered inside the ButtonBase
*/
children: PropTypes.node,
/**
* An additional className to apply to the ButtonBase.
*/
className: PropTypes.string,
/**
* Boolean to disable button
*/
disabled: PropTypes.bool,
/**
* When an `href` prop is passed, ButtonBase will automatically change the root element to be an `a` (anchor) tag
*/
href: PropTypes.string,
/**
* Add icon to left side of button text passing icon name
* The name of the icon to display. Should be one of ICON_NAMES
*/
icon: PropTypes.string, // Can't set PropTypes.oneOf(ICON_NAMES) because ICON_NAMES is an environment variable
/**
* Boolean that when true will position the icon on right of children
* Icon default position left
*/
iconPositionRight: PropTypes.bool,
/**
* iconProps accepts all the props from Icon
*/
iconProps: PropTypes.object,
/**
* Boolean to show loading spinner in button
*/
loading: PropTypes.bool,
/**
* The size of the ButtonBase.
* Possible values could be 'SIZES.AUTO', 'SIZES.SM'(32px), 'SIZES.MD'(40px), 'SIZES.LG'(48px),
*/
size: PropTypes.oneOf(Object.values(BUTTON_BASE_SIZES)),
/**
* Addition style properties to apply to the button.
*/
style: PropTypes.object,
/**
* ButtonBase accepts all the props from Box
*/
...Box.propTypes,
};