From 590deb0fb7367a7a894945e7cc7aaae7483d469f Mon Sep 17 00:00:00 2001
From: Lynn Chyi <14299381+lychyi@users.noreply.github.com>
Date: Wed, 19 Feb 2020 13:46:26 -0800
Subject: [PATCH] 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>
---
 modules/button/react/lib/IconButton.tsx       | 30 ++++++++++++-------
 .../react/lib/IconButtonToggleGroup.tsx       |  4 +--
 modules/button/react/spec/IconButton.spec.tsx | 23 +++++++++++++-
 3 files changed, 43 insertions(+), 14 deletions(-)

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<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
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(
+      <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">