jsx import { css , jsx } from '@emotion/core' ; import { IconButton , IconButtonProps } from '@workday/canvas-kit-react/button' ; import { relatedActionsIcon } from '@workday/canvas-system-icons-web' ; import { CanvasSystemIcon } from '@workday/design-assets-types' ; import { colors } from '@workday/canvas-kit-react/tokens' ; import { createComponent } from '@workday/canvas-kit-react/common' ; export interface DropdownButtonProps extends IconButtonProps { /**
     * The accessibility label for the button
     */ 'aria-label' : string ; default buttonIcon ? : CanvasSystemIcon ; /**
     * The boolean to determine whether the button should be in a 'toggled' state
     */ toggled : boolean ; } export const DropdownButton = createComponent ( IconButton ) ( { displayName : 'DropdownButton' , Component : ( { buttonIcon = relatedActionsIcon , toggled , variant = 'plain' , ... elemProps } , ref , Element ) => { const hasPlainVariant = variant === 'plain' ; const customStyles = css ( hasPlainVariant ? { margin : '0 1px' } : { } ) ; return ( < Element ref = { ref } type = "button" css = { customStyles } variant = { variant } icon = { buttonIcon } color = { colors . licorice200 } toggled = { toggled } aria - pressed = { undefined } aria - expanded = { toggled } aria - haspopup aria - controls = "menu" { ... elemProps } / > ) ; } , } ) ;