Added className prop to button comp

This commit is contained in:
unknown 2021-09-02 19:15:28 +05:30
parent e7f4a5bd59
commit 0ae994de56

View file

@ -7,26 +7,29 @@ import RawIcon from '../system-icons/RawIcon';
import { blurOnBubbling } from './script'; import { blurOnBubbling } from './script';
function Button({ function Button({
id, variant, iconSrc, type, onClick, children, disabled, id, className, variant, iconSrc,
type, onClick, children, disabled,
}) { }) {
const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`; const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
return ( return (
<button <button
id={id === '' ? undefined : id} id={id === '' ? undefined : id}
className={`btn-${variant} ${iconClass} noselect`} className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)} onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
onClick={onClick} onClick={onClick}
type={type === 'button' ? 'button' : 'submit'} type={type === 'button' ? 'button' : 'submit'}
disabled={disabled} disabled={disabled}
> >
{iconSrc !== null && <RawIcon size="small" src={iconSrc} />} {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
<Text variant="b1">{ children }</Text> {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
{typeof children !== 'string' && children }
</button> </button>
); );
} }
Button.defaultProps = { Button.defaultProps = {
id: '', id: '',
className: null,
variant: 'surface', variant: 'surface',
iconSrc: null, iconSrc: null,
type: 'button', type: 'button',
@ -36,6 +39,7 @@ Button.defaultProps = {
Button.propTypes = { Button.propTypes = {
id: PropTypes.string, id: PropTypes.string,
className: PropTypes.string,
variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']), variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']),
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
type: PropTypes.oneOf(['button', 'submit']), type: PropTypes.oneOf(['button', 'submit']),