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 (
{toggle ?
-
+
: null}
{children}
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 = (
-
+
);
}
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 = (
-
+
);
}
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(Yo!);
- 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();
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( {}} className="other" closeAriaLabel="oseclay">Yo!);
-
- 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( {}}>Yo!);
-
- 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( {}} charCode={'X'}>Yo!);
-
- 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( { }} className="other" closeAriaLabel="oseclay">Yo!);
-
- 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( { }}>Yo!);
-
- 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( { }} charCode={'X'}>Yo!);
-
- const closeButtonIcon = wrapper.find('button.close span');
- expect(closeButtonIcon.text()).toEqual('X');
- });
-
- it('should render icon with a color', () => {
- const wrapper = shallow(Yo!);
-
- const closeButtonIcon = wrapper.find('svg');
- expect(closeButtonIcon.hasClass('text-primary')).toBe(true);
- });
-
- it('should render a custom icon', () => {
- const wrapper = shallow(icon}>Yo!);
-
- 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 {
toggle?: React.MouseEventHandler;
icon?: string | React.ReactNode;
close?: React.ReactNode;
- charCode?: string | number;
closeAriaLabel?: string;
}