From cd3fbbddfd4d286d5ab537a4787b934d2d3c9fc2 Mon Sep 17 00:00:00 2001
From: Swaraj Patel <swarajpatel37@gmail.com>
Date: Fri, 30 Oct 2020 11:17:51 -0700
Subject: [PATCH 1/5] feat(bs5): Change classname from .close to .btn-close for
 Button

---
 src/Button.js                | 2 +-
 src/__tests__/Button.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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/__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);

From dc303573df5f7ea61ac1fd025364bdc37faab8ea Mon Sep 17 00:00:00 2001
From: Swaraj Patel <swarajpatel37@gmail.com>
Date: Fri, 30 Oct 2020 11:20:40 -0700
Subject: [PATCH 2/5] feat(bs5): Change button classname from .close to
 .btn-close for ModalHeader

---
 src/ModalHeader.js                | 2 +-
 src/__tests__/ModalHeader.spec.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 7f55fff77..559099931 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -44,7 +44,7 @@ const ModalHeader = (props) => {
   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}>
+      <button type="button" onClick={toggle} className={mapToCssModules('btn-close', cssModule)} aria-label={closeAriaLabel}>
         <span aria-hidden="true">{closeIcon}</span>
       </button>
     );
diff --git a/src/__tests__/ModalHeader.spec.js b/src/__tests__/ModalHeader.spec.js
index 2aed6b72c..95c892bfa 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', () => {
@@ -41,14 +41,14 @@ describe('ModalHeader', () => {
   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();
+    const closeButton = wrapper.find('button.btn-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 closeButtonIcon = wrapper.find('button.btn-close span');
     const defaultIcon = String.fromCharCode(215);
     expect(closeButtonIcon.text()).toEqual(defaultIcon);
   });
@@ -56,7 +56,7 @@ describe('ModalHeader', () => {
   it('should render close button with custom icon', () => {
     const wrapper = shallow(<ModalHeader toggle={() => {}} charCode={'X'}>Yo!</ModalHeader>);
 
-    const closeButtonIcon = wrapper.find('button.close span');
+    const closeButtonIcon = wrapper.find('button.btn-close span');
     expect(closeButtonIcon.text()).toEqual('X');
   });
 });

From 2568e296ed50a5ed757097cf5aa3dbd7a2370a97 Mon Sep 17 00:00:00 2001
From: Swaraj Patel <swarajpatel37@gmail.com>
Date: Fri, 30 Oct 2020 11:24:06 -0700
Subject: [PATCH 3/5] feat(bs5): Change button classname from .close to
 .btn-close for Alert

---
 src/Alert.js                | 2 +-
 src/__tests__/Alert.spec.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Alert.js b/src/Alert.js
index 33d27cd03..bc633e643 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,
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', () => {

From 6061868995d935dde1cc83f21bd95914c318a5cc Mon Sep 17 00:00:00 2001
From: Swaraj Patel <swarajpatel37@gmail.com>
Date: Fri, 30 Oct 2020 11:25:48 -0700
Subject: [PATCH 4/5] feat(bs5): Change button classname from .close to
 .btn-close for ToastHeader

---
 src/ToastHeader.js                | 2 +-
 src/__tests__/ToastHeader.spec.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ToastHeader.js b/src/ToastHeader.js
index d9a35d40d..53040da5a 100644
--- a/src/ToastHeader.js
+++ b/src/ToastHeader.js
@@ -49,7 +49,7 @@ const ToastHeader = (props) => {
   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}>
+      <button type="button" onClick={toggle} className={mapToCssModules('btn-close', cssModule)} aria-label={closeAriaLabel}>
         <span aria-hidden="true">{closeIcon}</span>
       </button>
     );
diff --git a/src/__tests__/ToastHeader.spec.js b/src/__tests__/ToastHeader.spec.js
index 87a22275c..d3d7f5010 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', () => {
@@ -41,14 +41,14 @@ describe('ToastHeader', () => {
   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();
+    const closeButton = wrapper.find('button.btn-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 closeButtonIcon = wrapper.find('button.btn-close span');
     const defaultIcon = String.fromCharCode(215);
     expect(closeButtonIcon.text()).toEqual(defaultIcon);
   });
@@ -56,7 +56,7 @@ describe('ToastHeader', () => {
   it('should render close button with custom icon', () => {
     const wrapper = shallow(<ToastHeader toggle={() => { }} charCode={'X'}>Yo!</ToastHeader>);
 
-    const closeButtonIcon = wrapper.find('button.close span');
+    const closeButtonIcon = wrapper.find('button.btn-close span');
     expect(closeButtonIcon.text()).toEqual('X');
   });
 

From fddf8003727c0aa031ab8d919267b753463531dc Mon Sep 17 00:00:00 2001
From: Phoebe Gao <phoebe.gao@appfolio.com>
Date: Thu, 4 Feb 2021 13:27:20 -0800
Subject: [PATCH 5/5] don't render extra close icon for alerts, modal/toast
 headers

---
 src/Alert.js                      |  4 +---
 src/ModalHeader.js                |  8 +------
 src/ToastHeader.js                |  6 +-----
 src/__tests__/ModalHeader.spec.js | 22 -------------------
 src/__tests__/ToastHeader.spec.js | 36 -------------------------------
 types/lib/ToastHeader.d.ts        |  1 -
 6 files changed, 3 insertions(+), 74 deletions(-)

diff --git a/src/Alert.js b/src/Alert.js
index bc633e643..472dce351 100644
--- a/src/Alert.js
+++ b/src/Alert.js
@@ -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/ModalHeader.js b/src/ModalHeader.js
index 559099931..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('btn-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 53040da5a..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('btn-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__/ModalHeader.spec.js b/src/__tests__/ModalHeader.spec.js
index 95c892bfa..619532528 100644
--- a/src/__tests__/ModalHeader.spec.js
+++ b/src/__tests__/ModalHeader.spec.js
@@ -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.btn-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.btn-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.btn-close span');
-    expect(closeButtonIcon.text()).toEqual('X');
-  });
 });
diff --git a/src/__tests__/ToastHeader.spec.js b/src/__tests__/ToastHeader.spec.js
index d3d7f5010..45d6edb05 100644
--- a/src/__tests__/ToastHeader.spec.js
+++ b/src/__tests__/ToastHeader.spec.js
@@ -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.btn-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.btn-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.btn-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;
 }