import * as React from 'react' ; import { CanvasSystemIcon } from '@workday/design-assets-types' ; import { space } from '@workday/canvas-kit-react/tokens' ; import isPropValid from '@emotion/is-prop-valid' ; import { SystemIcon } from '@workday/canvas-kit-react/icon' ; import { styled } from '@workday/canvas-kit-react/common' ; import { ButtonSizes , IconPositions } from '../types' ; export interface ButtonLabelIconProps { default size ? : ButtonSizes ; /**
     * The icon of the Button.
     * Note: not displayed at `small` size
     */ icon ? : CanvasSystemIcon ; default iconPosition ? : IconPositions ; default shouldMirrorIcon ? : boolean ; } const iconSizes = { extraSmall : 18 , small : 20 , medium : 20 , large : 24 , } ; const getIconPositionStyles = ( { iconPosition , size } ) => { const balancingMargin = size === 'large' ? space . xxs : space . xxxs ; if ( iconPosition === 'right' ) { return { marginLeft : undefined , marginRight : `-${ balancingMargin } !important` , } ; } else { return { marginLeft : `-${ balancingMargin } !important` , marginRight : undefined , } ; } } ; const ButtonLabelIconStyled = styled ( 'span' , { shouldForwardProp : prop => isPropValid ( prop ) && prop !== 'size' , } ) < ButtonLabelIconProps > ( { display : 'inline-block' , } , ( { size } ) => ( { width : size ? iconSizes [ size ] : iconSizes . medium , height : size ? iconSizes [ size ] : iconSizes . medium , } ) , getIconPositionStyles ) ; export const ButtonLabelIcon = ( { icon , size , iconPosition , shouldMirrorIcon = false , ... elemProps } ) => { if ( icon === undefined ) { return null ; } const iconSize = size ? iconSizes [ size ] : undefined ; return ( < ButtonLabelIconStyled iconPosition = { iconPosition } size = { size } { ... elemProps } > < SystemIcon size = { iconSize } icon = { icon } shouldMirror = { shouldMirrorIcon } / > < /ButtonLabelIconStyled>); } ;