Merge pull request #441 from facultyai/progress-height

Fix progress style argument.

Author: tcbegley

src/components/Progress.js

@@ -3,18 +3,28 @@ import PropTypes from 'prop-types';
 import {omit} from 'ramda';
 import {Progress as RSProgress} from 'reactstrap';
 
+const CustomProgressTag = props => {
+  // This is a little trick to enable us to pass styles to the outer div
+  const {outer_style, style, ...otherProps} = props;
+  return <div style={outer_style} {...otherProps} />;
+};
+
 /**
  * A component for creating progress bars just with CSS. Control the current
  * progress with a callback and the `value` prop.
  */
 const Progress = props => {
-  const {children, loading_state, ...otherProps} = props;
+  const {children, loading_state, bar_style, style, ...otherProps} = props;
   return (
     <RSProgress
       {...omit(['setProps'], otherProps)}
       data-dash-is-loading={
         (loading_state && loading_state.is_loading) || undefined
       }
+      // reactstrap handles these inconsistently atm, have to swap around
+      style={bar_style}
+      outer_style={style}
+      tag={CustomProgressTag}
     >
       {children}
     </RSProgress>
@@ -97,6 +107,11 @@ Progress.propTypes = {
    */
   barClassName: PropTypes.string,
 
+  /**
+   * Style arguments to pass to the bar.
+   */
+  bar_style: PropTypes.object,
+
   /**
    * Object that holds the loading state object coming from dash-renderer
    */

src/components/__tests__/Progress.test.js

@@ -85,4 +85,24 @@ describe('Progress', () => {
 
     expect(progressAnimated.firstChild).toHaveClass('progress-bar-animated');
   });
+
+  test('sets className and style on the progress container and the bar', () => {
+    const {
+      container: {firstChild: progress}
+    } = render(
+      <Progress
+        style={{height: '40px'}}
+        className="outer"
+        bar_style={{color: 'chartreuse'}}
+        barClassName="inner"
+      />
+    );
+
+    expect(progress).toHaveClass('outer');
+    expect(progress).toHaveStyle('height:40px');
+
+    expect(progress.firstChild).toHaveClass('progress-bar');
+    expect(progress.firstChild).toHaveClass('inner');
+    expect(progress.firstChild).toHaveStyle('color:chartreuse');
+  });
 });