diff --git a/src/components/Button.js b/src/components/Button.js index 5df3c8c8..8092c077 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { darken, rgba, opacify } from 'polished'; import { color, typography } from './shared/styles'; import { easing } from './shared/animation'; @@ -35,7 +35,7 @@ const SIZES = { MEDIUM: 'medium', }; -const StyledButton = styled.button` +const buttonStyles = css` border: 0; border-radius: 3em; cursor: pointer; @@ -395,46 +395,50 @@ const StyledButton = styled.button` `; -const ButtonLink = StyledButton.withComponent('a'); +const ButtonStyles = styled.span` + a, + button { + ${buttonStyles} + } +`; -const applyStyle = (ButtonWrapper) => { - return ( - ButtonWrapper && - StyledButton.withComponent(({ containsIcon, isLoading, isUnclickable, ...rest }) => ( - - )) - ); -}; +const ButtonLink = styled.a``; + +const StyledButton = styled.button``; export function Button({ + appearance, + containsIcon, isDisabled, isLoading, + isUnclickable, loadingText, isLink, children, ButtonWrapper, - ...props + size, + ...rest }) { - const buttonInner = ( + const content = ( <> {children} {isLoading && {loadingText || 'Loading...'}} ); - const StyledButtonWrapper = React.useMemo(() => applyStyle(ButtonWrapper), [ButtonWrapper]); - - let SelectedButton = StyledButton; - if (ButtonWrapper) { - SelectedButton = StyledButtonWrapper; - } else if (isLink) { - SelectedButton = ButtonLink; - } + const ButtonComponent = isLink ? ButtonLink : ButtonWrapper || StyledButton; return ( - - {buttonInner} - + + {content} + ); }