diff --git a/modules/button/react/lib/IconButton.tsx b/modules/button/react/lib/IconButton.tsx index ad234cde3a..aa300ffd88 100644 --- a/modules/button/react/lib/IconButton.tsx +++ b/modules/button/react/lib/IconButton.tsx @@ -8,7 +8,7 @@ import {colors} from '@workday/canvas-kit-react-core'; import {SystemIcon} from '@workday/canvas-kit-react-icon'; import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react-common'; import {CanvasSystemIcon} from '@workday/design-assets-types'; -import {CSSObject} from '@emotion/core'; +import {ClassNames, CSSObject} from '@emotion/core'; export interface IconButtonProps extends React.ButtonHTMLAttributes { /** @@ -68,6 +68,8 @@ function getAccentSelector(fillColor: string): CSSObject { }; } +export const iconButtonIdentifier = 'wdc-ckr-icon-button'; + export const IconButtonCon = styled('button', { shouldForwardProp: prop => isPropValid(prop) && prop !== 'size', })( @@ -243,20 +245,26 @@ export default class IconButton extends React.Component { icon, toggled, children, + className, ...elemProps } = this.props; return ( - - {icon ? : children} - + + {({cx}) => ( + + {icon ? : children} + + )} + ); } } diff --git a/modules/button/react/lib/IconButtonToggleGroup.tsx b/modules/button/react/lib/IconButtonToggleGroup.tsx index 89499da97b..47e4450e25 100644 --- a/modules/button/react/lib/IconButtonToggleGroup.tsx +++ b/modules/button/react/lib/IconButtonToggleGroup.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from '@emotion/styled'; import {spacing, borderRadius} from '@workday/canvas-kit-react-core'; -import IconButton, {IconButtonCon, IconButtonProps} from './IconButton'; +import IconButton, {IconButtonProps, iconButtonIdentifier} from './IconButton'; export interface IconButtonToggleGroupProps { /** @@ -28,7 +28,7 @@ export interface IconButtonToggleGroupProps { } const Container = styled('div')({ - [IconButtonCon as any]: { + [`.${iconButtonIdentifier}`]: { borderRadius: borderRadius.zero, borderWidth: '1px', marginLeft: '-1px', diff --git a/modules/button/react/spec/IconButton.spec.tsx b/modules/button/react/spec/IconButton.spec.tsx index a177ea1285..534b988559 100644 --- a/modules/button/react/spec/IconButton.spec.tsx +++ b/modules/button/react/spec/IconButton.spec.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import {mount} from 'enzyme'; -import IconButton from '../lib/IconButton'; +import {render} from '@testing-library/react'; +import IconButton, {iconButtonIdentifier} from '../lib/IconButton'; import {SystemIcon} from '@workday/canvas-kit-react-icon'; import {activityStreamIcon} from '@workday/canvas-system-icons-web'; import ReactDOMServer from 'react-dom/server'; @@ -22,6 +23,26 @@ describe('Icon Button', () => { component.unmount(); }); + it('should have an identifier class', () => { + const {getByRole} = render( + + + + ); + + expect(getByRole('button').className).toContain(iconButtonIdentifier); + }); + it('should compose custom classNames with the identifier class', () => { + const testClassName = 'test classname'; + const {getByRole} = render( + + + + ); + + expect(getByRole('button').className).toContain(`${iconButtonIdentifier} ${testClassName}`); + }); + test('should call a callback function', () => { const component = mount(