fix(Alert): map close class css modules (#471)

Also adds ability to add additional classes to the close button closes #470
reactstrap · Jun 27, 2017 · 2e3c687 · 2e3c687
1 parent ba69f71
commit 2e3c687
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/docs/lib/Components/AlertsPage.js b/docs/lib/Components/AlertsPage.js
@@ -34,6 +34,7 @@ export default class AlertsPage extends React.Component {
           <PrismCode className="language-jsx">
 {`Alert.propTypes = {
   className: PropTypes.string,
+  closeClassName: PropTypes.string,
   color: PropTypes.string, // default: 'success'
   isOpen: PropTypes.bool,  // default: true
   toggle: PropTypes.func,

diff --git a/src/Alert.js b/src/Alert.js
@@ -11,6 +11,7 @@ const FirstChild = ({ children }) => (
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  closeClassName: PropTypes.string,
   cssModule: PropTypes.object,
   color: PropTypes.string,
   isOpen: PropTypes.bool,
@@ -33,6 +34,7 @@ const defaultProps = {
 const Alert = (props) => {
   const {
     className,
+    closeClassName,
     cssModule,
     tag: Tag,
     color,
@@ -52,10 +54,12 @@ const Alert = (props) => {
     { 'alert-dismissible': toggle }
   ), cssModule);
 
+  const closeClasses = mapToCssModules(classNames('close', closeClassName), cssModule);
+
   const alert = (
     <Tag {...attributes} className={classes} role="alert">
       { toggle ?
-        <button type="button" className="close" aria-label="Close" onClick={toggle}>
+        <button type="button" className={closeClasses} aria-label="Close" onClick={toggle}>
           <span aria-hidden="true">&times;</span>
         </button>
         : null }