From be4df609ac21cdcbb56c635600dce8eae6c819f1 Mon Sep 17 00:00:00 2001
From: Phoebe Gao <phoebe.gao@appfolio.com>
Date: Fri, 19 Feb 2021 09:30:10 -0800
Subject: [PATCH] feat(bs5): change .close to .btn-close (#2116)

* feat(bs5): Change classname from .close to .btn-close for Button

* feat(bs5): Change button classname from .close to .btn-close for ModalHeader

* feat(bs5): Change button classname from .close to .btn-close for Alert

* feat(bs5): Change button classname from .close to .btn-close for ToastHeader

* don't render extra close icon for alerts, modal/toast headers

Co-authored-by: Swaraj Patel <swarajpatel37@gmail.com>
---
 src/Alert.js                      |  6 ++---
 src/Button.js                     |  2 +-
 src/ModalHeader.js                |  8 +------
 src/ToastHeader.js                |  6 +----
 src/__tests__/Alert.spec.js       |  2 +-
 src/__tests__/Button.spec.js      |  2 +-
 src/__tests__/ModalHeader.spec.js | 24 +------------------
 src/__tests__/ToastHeader.spec.js | 38 +------------------------------
 types/lib/ToastHeader.d.ts        |  1 -
 9 files changed, 9 insertions(+), 80 deletions(-)

diff --git a/src/Alert.js b/src/Alert.js
index 33d27cd03..472dce351 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -59,7 +59,7 @@ function Alert(props) {
     { 'alert-dismissible': toggle }
   ), cssModule);
 
-  const closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule);
+  const closeClasses = mapToCssModules(classNames('btn-close', closeClassName), cssModule);
 
   const alertTransition = {
     ...Fade.defaultProps,
@@ -71,9 +71,7 @@ function Alert(props) {
   return (
     <Fade {...attributes} {...alertTransition} tag={Tag} className={classes} in={isOpen} role="alert" innerRef={innerRef}>
       {toggle ?
-        <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle} />
         : null}
       {children}
     </Fade>
diff --git a/src/Button.js b/src/Button.js
index 97d4712fd..45c21c3fd 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -67,7 +67,7 @@ class Button extends React.Component {
 
     const classes = mapToCssModules(classNames(
       className,
-      { close },
+      close && 'btn-close',
       close || 'btn',
       close || btnOutlineColor,
       size ? `btn-${size}` : false,
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 7f55fff77..d92bc9eb6 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -11,7 +11,6 @@ const propTypes = {
   cssModule: PropTypes.object,
   children: PropTypes.node,
   closeAriaLabel: PropTypes.string,
-  charCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   close: PropTypes.object,
 };
 
@@ -19,7 +18,6 @@ const defaultProps = {
   tag: 'h5',
   wrapTag: 'div',
   closeAriaLabel: 'Close',
-  charCode: 215,
 };
 
 const ModalHeader = (props) => {
@@ -32,7 +30,6 @@ const ModalHeader = (props) => {
     tag: Tag,
     wrapTag: WrapTag,
     closeAriaLabel,
-    charCode,
     close,
     ...attributes } = props;
 
@@ -42,11 +39,8 @@ const ModalHeader = (props) => {
   ), cssModule);
 
   if (!close && toggle) {
-    const closeIcon = typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode;
     closeButton = (
-      <button type="button" onClick={toggle} className={mapToCssModules('close', cssModule)} aria-label={closeAriaLabel}>
-        <span aria-hidden="true">{closeIcon}</span>
-      </button>
+      <button type="button" onClick={toggle} className={mapToCssModules('btn-close', cssModule)} aria-label={closeAriaLabel} />
     );
   }
 
diff --git a/src/ToastHeader.js b/src/ToastHeader.js
index d9a35d40d..4abdc5c06 100644
--- a/src/ToastHeader.js
+++ b/src/ToastHeader.js
@@ -35,7 +35,6 @@ const ToastHeader = (props) => {
     tag: Tag,
     wrapTag: WrapTag,
     closeAriaLabel,
-    charCode,
     close,
     tagClassName,
     icon: iconProp,
@@ -47,11 +46,8 @@ const ToastHeader = (props) => {
   ), cssModule);
 
   if (!close && toggle) {
-    const closeIcon = typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode;
     closeButton = (
-      <button type="button" onClick={toggle} className={mapToCssModules('close', cssModule)} aria-label={closeAriaLabel}>
-        <span aria-hidden="true">{closeIcon}</span>
-      </button>
+      <button type="button" onClick={toggle} className={mapToCssModules('btn-close', cssModule)} aria-label={closeAriaLabel} />
     );
   }
 
diff --git a/src/__tests__/Alert.spec.js b/src/__tests__/Alert.spec.js
index 37bf02fe1..13515ddd3 100644
--- a/src/__tests__/Alert.spec.js
+++ b/src/__tests__/Alert.spec.js
@@ -16,7 +16,7 @@ describe('Alert', () => {
   it('should pass close className down', () => {
     function noop() { }
     const alert = mount(<Alert toggle={noop} closeClassName="test-class-name">Yo!</Alert>);
-    expect(alert.find('.close').hostNodes().prop('className')).toContain('test-class-name');
+    expect(alert.find('.btn-close').hostNodes().prop('className')).toContain('test-class-name');
   });
 
   it('should pass other props down', () => {
diff --git a/src/__tests__/Button.spec.js b/src/__tests__/Button.spec.js
index a8b60928d..6b95ce5ea 100644
--- a/src/__tests__/Button.spec.js
+++ b/src/__tests__/Button.spec.js
@@ -104,7 +104,7 @@ describe('Button', () => {
     const wrapper = shallow(<Button close />);
     const actualInnerHTML = wrapper.children().html();
 
-    expect(wrapper.find('.close').length).toBe(1);
+    expect(wrapper.find('.btn-close').length).toBe(1);
     expect(wrapper.find('.btn').length).toBe(0);
     expect(wrapper.find('.btn-secondary').length).toBe(0);
     expect(wrapper.find('button').prop('aria-label')).toMatch(/close/i);
diff --git a/src/__tests__/ModalHeader.spec.js b/src/__tests__/ModalHeader.spec.js
index 2aed6b72c..619532528 100644
--- a/src/__tests__/ModalHeader.spec.js
+++ b/src/__tests__/ModalHeader.spec.js
@@ -22,7 +22,7 @@ describe('ModalHeader', () => {
 
     expect(wrapper.hasClass('other')).toBe(true);
     expect(wrapper.hasClass('modal-header')).toBe(true);
-    expect(wrapper.find('button.close').length).toBe(1);
+    expect(wrapper.find('button.btn-close').length).toBe(1);
   });
 
   it('should render custom tag', () => {
@@ -37,26 +37,4 @@ describe('ModalHeader', () => {
 
     expect(wrapper.type()).toBe('main');
   });
-
-  it('should render close button with custom aria-label', () => {
-    const wrapper = shallow(<ModalHeader toggle={() => {}} className="other" closeAriaLabel="oseclay">Yo!</ModalHeader>);
-
-    const closeButton = wrapper.find('button.close').first();
-    expect(closeButton.prop('aria-label')).toBe('oseclay');
-  });
-
-  it('should render close button with default icon', () => {
-    const wrapper = shallow(<ModalHeader toggle={() => {}}>Yo!</ModalHeader>);
-
-    const closeButtonIcon = wrapper.find('button.close span');
-    const defaultIcon = String.fromCharCode(215);
-    expect(closeButtonIcon.text()).toEqual(defaultIcon);
-  });
-
-  it('should render close button with custom icon', () => {
-    const wrapper = shallow(<ModalHeader toggle={() => {}} charCode={'X'}>Yo!</ModalHeader>);
-
-    const closeButtonIcon = wrapper.find('button.close span');
-    expect(closeButtonIcon.text()).toEqual('X');
-  });
 });
diff --git a/src/__tests__/ToastHeader.spec.js b/src/__tests__/ToastHeader.spec.js
index 87a22275c..45d6edb05 100644
--- a/src/__tests__/ToastHeader.spec.js
+++ b/src/__tests__/ToastHeader.spec.js
@@ -22,7 +22,7 @@ describe('ToastHeader', () => {
 
     expect(wrapper.hasClass('other')).toBe(true);
     expect(wrapper.hasClass('toast-header')).toBe(true);
-    expect(wrapper.find('button.close').length).toBe(1);
+    expect(wrapper.find('button.btn-close').length).toBe(1);
   });
 
   it('should render custom tag', () => {
@@ -37,40 +37,4 @@ describe('ToastHeader', () => {
 
     expect(wrapper.type()).toBe('main');
   });
-
-  it('should render close button with custom aria-label', () => {
-    const wrapper = shallow(<ToastHeader toggle={() => { }} className="other" closeAriaLabel="oseclay">Yo!</ToastHeader>);
-
-    const closeButton = wrapper.find('button.close').first();
-    expect(closeButton.prop('aria-label')).toBe('oseclay');
-  });
-
-  it('should render close button with default icon', () => {
-    const wrapper = shallow(<ToastHeader toggle={() => { }}>Yo!</ToastHeader>);
-
-    const closeButtonIcon = wrapper.find('button.close span');
-    const defaultIcon = String.fromCharCode(215);
-    expect(closeButtonIcon.text()).toEqual(defaultIcon);
-  });
-
-  it('should render close button with custom icon', () => {
-    const wrapper = shallow(<ToastHeader toggle={() => { }} charCode={'X'}>Yo!</ToastHeader>);
-
-    const closeButtonIcon = wrapper.find('button.close span');
-    expect(closeButtonIcon.text()).toEqual('X');
-  });
-
-  it('should render icon with a color', () => {
-    const wrapper = shallow(<ToastHeader icon="primary">Yo!</ToastHeader>);
-
-    const closeButtonIcon = wrapper.find('svg');
-    expect(closeButtonIcon.hasClass('text-primary')).toBe(true);
-  });
-
-  it('should render a custom icon', () => {
-    const wrapper = shallow(<ToastHeader icon={<span className="my-header">icon</span>}>Yo!</ToastHeader>);
-
-    const closeButtonIcon = wrapper.find('span.my-header');
-    expect(closeButtonIcon.text()).toEqual("icon");
-  });
 });
diff --git a/types/lib/ToastHeader.d.ts b/types/lib/ToastHeader.d.ts
index ed3f41d20..a99b7e95e 100644
--- a/types/lib/ToastHeader.d.ts
+++ b/types/lib/ToastHeader.d.ts
@@ -9,7 +9,6 @@ export interface ToastHeaderProps extends React.HTMLAttributes<HTMLElement> {
   toggle?: React.MouseEventHandler<any>;
   icon?: string | React.ReactNode;
   close?: React.ReactNode;
-  charCode?: string | number;
   closeAriaLabel?: string;
 }