From e4affb41a15eb0e1d723b3f835cafb8959b4f5d9 Mon Sep 17 00:00:00 2001
From: Phoebe Gao <phgao1994@gmail.com>
Date: Mon, 27 Sep 2021 16:25:47 -0700
Subject: [PATCH] fix(Button): remove extra close icon in `btn-close` (#2318)

The close icon is now included automatically in Bootstrap 5. See https://getbootstrap.com/docs/5.1/components/close-button/#example
---
 src/Button.js                       |  4 ----
 src/__tests__/Button.spec.js        | 14 --------------
 stories/examples/ButtonCloseIcon.js |  4 ++--
 3 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/Button.js b/src/Button.js
index 8312bb81f..7170d5a39 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -59,10 +59,6 @@ class Button extends React.Component {
       ...attributes
     } = this.props;
 
-    if (close && typeof attributes.children === 'undefined') {
-      attributes.children = <span aria-hidden>×</span>;
-    }
-
     const btnOutlineColor = `btn${outline ? '-outline' : ''}-${color}`;
 
     const classes = mapToCssModules(classNames(
diff --git a/src/__tests__/Button.spec.js b/src/__tests__/Button.spec.js
index 7719db7db..8dbc5a305 100644
--- a/src/__tests__/Button.spec.js
+++ b/src/__tests__/Button.spec.js
@@ -97,20 +97,6 @@ describe('Button', () => {
     expect(block.hasClass('d-block w-100')).toBe(true);
   });
 
-  it('should render close icon utility with default props', () => {
-    const times = '×'; // unicode: U+00D7 MULTIPLICATION SIGN
-    const expectedInnerHTML = `<span aria-hidden="true">${times}</span>`;
-
-    const wrapper = shallow(<Button close />);
-    const actualInnerHTML = wrapper.children().html();
-
-    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);
-    expect(actualInnerHTML).toBe(expectedInnerHTML);
-  });
-
   it('should render close icon with custom child and props', () => {
     const testChild = 'close this thing';
     const wrapper = shallow(<Button close>{testChild}</Button>);
diff --git a/stories/examples/ButtonCloseIcon.js b/stories/examples/ButtonCloseIcon.js
index 7ab0eed53..649b533ec 100644
--- a/stories/examples/ButtonCloseIcon.js
+++ b/stories/examples/ButtonCloseIcon.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardText, CardGroup, CardTitle } from 'reactstrap';
+import React from 'react';
+import { Button } from 'reactstrap';
 
 const Example = (props) => (
   <div>