fix(button): Fix Component Selector Issue (#474)

* fix(button): Add identifier class to IconButton * fix(button): Remove component selector * test(button): Use getByRole query instead * Update modules/button/react/spec/IconButton.spec.tsx Co-Authored-By: Alex Nicholls <anicholls3@gmail.com> * chore: Fix linting issue from Github suggestion Co-authored-by: Alex Nicholls <anicholls3@gmail.com>
Workday · Feb 19, 2020 · 590deb0 · 590deb0
1 parent 50353be
commit 590deb0
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git 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<HTMLButtonElement> {
   /**
@@ -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',
 })<IconButtonProps>(
@@ -243,20 +245,26 @@ export default class IconButton extends React.Component<IconButtonProps> {
       icon,
       toggled,
       children,
+      className,
       ...elemProps
     } = this.props;
 
     return (
-      <IconButtonCon
-        toggled={toggled}
-        ref={buttonRef}
-        variant={variant}
-        size={size}
-        aria-pressed={toggled}
-        {...elemProps}
-      >
-        {icon ? <SystemIcon icon={icon} /> : children}
-      </IconButtonCon>
+      <ClassNames>
+        {({cx}) => (
+          <IconButtonCon
+            toggled={toggled}
+            ref={buttonRef}
+            variant={variant}
+            size={size}
+            aria-pressed={toggled}
+            className={cx(iconButtonIdentifier, className)}
+            {...elemProps}
+          >
+            {icon ? <SystemIcon icon={icon} /> : children}
+          </IconButtonCon>
+        )}
+      </ClassNames>
     );
   }
 }
diff --git 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
@@ -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(
+      <IconButton aria-label="Activity Stream">
+        <SystemIcon icon={activityStreamIcon} />
+      </IconButton>
+    );
+
+    expect(getByRole('button').className).toContain(iconButtonIdentifier);
+  });
+  it('should compose custom classNames with the identifier class', () => {
+    const testClassName = 'test classname';
+    const {getByRole} = render(
+      <IconButton className={testClassName} aria-label="Activity Stream">
+        <SystemIcon icon={activityStreamIcon} />
+      </IconButton>
+    );
+
+    expect(getByRole('button').className).toContain(`${iconButtonIdentifier} ${testClassName}`);
+  });
+
   test('should call a callback function', () => {
     const component = mount(
       <IconButton onClick={cb} aria-label="Activity Stream">