feat(bs5): change .close to .btn-close (reactstrap#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>

Author: 2 people

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>

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,

src/ModalHeader.js

@@ -11,15 +11,13 @@ const propTypes = {
   cssModule: PropTypes.object,
   children: PropTypes.node,
   closeAriaLabel: PropTypes.string,
-  charCode: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   close: PropTypes.object,
 };
 
 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} />
     );
   }
 

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

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', () => {

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

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');
-  });
 });

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");
-  });
 });

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;
 }