From 25fdb7797ca7e0f3a13db2a778575ecab1f5b948 Mon Sep 17 00:00:00 2001
From: Evan Sharp <dumbdrum@gmail.com>
Date: Tue, 14 Feb 2017 11:53:50 -0500
Subject: [PATCH] fix(Progress): add custom classNames to progress-bar (#319)

fixes #318

 will now be passed through to  with  prop
 allows similar pass through on single bars
 can also be used with  prop and will act as in place of  for convenience
---
 docs/lib/Components/ProgressPage.js |  3 ++-
 src/Progress.js                     |  3 +++
 src/__tests__/Progress.spec.js      | 24 ++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/docs/lib/Components/ProgressPage.js b/docs/lib/Components/ProgressPage.js
index 87aca60a7..c494e9f10 100644
--- a/docs/lib/Components/ProgressPage.js
+++ b/docs/lib/Components/ProgressPage.js
@@ -50,7 +50,8 @@ export default class ProgressPage extends React.Component {
   animated: PropTypes.bool,
   stripped: PropTypes.bool,
   color: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  barClassName: PropTypes.string // used to add class to the inner progress-bar element
 };
 
 Progress.defaultProps = {
diff --git a/src/Progress.js b/src/Progress.js
index 7a7f758ac..ee38828c5 100644
--- a/src/Progress.js
+++ b/src/Progress.js
@@ -20,6 +20,7 @@ const propTypes = {
   striped: PropTypes.bool,
   color: PropTypes.string,
   className: PropTypes.string,
+  barClassName: PropTypes.string,
   cssModule: PropTypes.object,
 };
 
@@ -33,6 +34,7 @@ const Progress = (props) => {
   const {
     children,
     className,
+    barClassName,
     cssModule,
     value,
     max,
@@ -54,6 +56,7 @@ const Progress = (props) => {
 
   const progressBarClasses = mapToCssModules(classNames(
     'progress-bar',
+    bar ? className || barClassName : barClassName,
     animated ? 'progress-bar-animated' : null,
     color ? `bg-${color}` : null,
     striped || animated ? 'progress-bar-striped' : null
diff --git a/src/__tests__/Progress.spec.js b/src/__tests__/Progress.spec.js
index 0531d9527..a28441447 100644
--- a/src/__tests__/Progress.spec.js
+++ b/src/__tests__/Progress.spec.js
@@ -77,6 +77,14 @@ describe('Progress', () => {
     expect(wrapper.hasClass('progress')).toBe(true);
   });
 
+  it('should render additional classes on the inner progress bar', () => {
+    const wrapper = shallow(<Progress barClassName="other" />);
+
+    expect(wrapper.hasClass('other')).toBe(false);
+    expect(wrapper.hasClass('progress')).toBe(true);
+    expect(wrapper.find('.progress-bar').hasClass('other')).toBe(true);
+  });
+
   it('should render custom tag', () => {
     const wrapper = shallow(<Progress tag="main" />);
 
@@ -97,6 +105,22 @@ describe('Progress', () => {
     expect(wrapper.hasClass('progress-bar')).toBe(true);
   });
 
+  it('should render additional classes', () => {
+    const wrapper = shallow(<Progress bar className="yo" />);
+
+    expect(wrapper.type()).toBe('div');
+    expect(wrapper.hasClass('progress-bar')).toBe(true);
+    expect(wrapper.hasClass('yo')).toBe(true);
+  });
+
+  it('should render additional classes using the barClassName', () => {
+    const wrapper = shallow(<Progress bar barClassName="yo" />);
+
+    expect(wrapper.type()).toBe('div');
+    expect(wrapper.hasClass('progress-bar')).toBe(true);
+    expect(wrapper.hasClass('yo')).toBe(true);
+  });
+
   it('should render the children (label)', () => {
     const wrapper = shallow(<Progress>0%</Progress>);