fix(Progress): add custom classNames to progress-bar (#319)

TheSharpieOne · eddywashere · commit 25fdb7797ca7 · 2017-02-14T08:53:50.000-08:00
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
diff --git 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
@@ -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
@@ -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>);
 
