import React from 'react' ; import { ButtonStyled , ButtonChildren } from './Button.style' ; import { Props , DOMElement } from './Button.types' ; import { borderRadii } from './Button.config' ; import { FeaturedIcon } from './FeaturedIcon' ; import { LoaderCircular } from '../../LoaderCircular/LoaderCircular' ; import { withIris , centered , Focus , useDeprecate , } from '../../../utils' ; export const Button = withIris < DOMElement , Props > ( ButtonComponent , true , 'components/buttons/Button/Button' ) ; const deprecatedProps = { circular : '@vimeo/iris: Button `circular` prop has been deprecated. Please use `pill`. `circular` will be removed in Iris 9.\n' , } ; function ButtonComponent ( { element = 'button' , children , color , fluid , format = 'primary' , forwardRef , icon , iconPosition = 'left' , loading , pill = false , size = 'md' , status , textShift = false , theme , variant = 'solid' , ... props } ) { useDeprecate ( props , deprecatedProps ) ; const iconOnly = typeof children === 'undefined' && icon ; const iconLeft = iconPosition === 'left' && icon ; const iconRight = iconPosition === 'right' && icon ; const iconFeatured = iconPosition === 'featured' && icon ; const iconAction = iconPosition === 'action' && icon ; const radius = pill ? 50 : borderRadii [ size ] + 2 ; let formatInstrinsic = format ; if ( status && status !== 'neutral' ) formatInstrinsic = status ; return ( < ButtonStyled as = { element } color = { color } fluid = { fluid } format = { formatInstrinsic } icon = { ! ! icon } iconOnly = { iconOnly } iconPosition = { iconPosition } $loading = { loading } pill = { pill } ref = { forwardRef } size = { size } textShift = { textShift } theme = { theme } variant = { variant } { ... props } > { iconFeatured && ( < FeaturedIcon size = { size } > { icon } < /FeaturedIcon>)} { iconLeft } { children && ( < ButtonChildren size = { size } > { children } < /ButtonChildren>)} { iconRight } { iconAction } { loading && ( < LoaderCircular size = { size } format = "adaptive" style = { centered } / > ) } < Focus parent = { ButtonStyled } radius = { radius } / > < /ButtonStyled>); }