feat(Progress): Add barStyle prop (reactstrap#2075)

* feat(Progress): Add barStyle prop * Types
humphreyja · Jan 12, 2021 · 27faa8e · 27faa8e
1 parent 6e0fd56
commit 27faa8e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/docs/lib/Components/ProgressPage.js b/docs/lib/Components/ProgressPage.js
@@ -55,6 +55,7 @@ export default class ProgressPage extends React.Component {
   striped: PropTypes.bool,
   color: PropTypes.string,
   className: PropTypes.string,
+  barStyle: PropTypes.object, // used to add style to the inner progress-bar element
   barClassName: PropTypes.string, // used to add class to the inner progress-bar element
   barAriaValueText: PropTypes.string,
   barAriaLabelledBy: PropTypes.string,

diff --git a/src/Progress.js b/src/Progress.js
@@ -27,6 +27,7 @@ const propTypes = {
   barClassName: PropTypes.string,
   cssModule: PropTypes.object,
   style: PropTypes.object,
+  barStyle: PropTypes.object,
   barAriaValueText: PropTypes.string,
   barAriaLabelledBy: PropTypes.string,
 };
@@ -37,6 +38,7 @@ const defaultProps = {
   min: 0,
   max: 100,
   style: {},
+  barStyle: {}
 };
 
 const Progress = (props) => {
@@ -55,6 +57,7 @@ const Progress = (props) => {
     multi,
     tag: Tag,
     style,
+    barStyle,
     barAriaValueText,
     barAriaLabelledBy,
     ...attributes
@@ -78,7 +81,8 @@ const Progress = (props) => {
   const progressBarProps = {
     className: progressBarClasses,
     style: {
-      ...style,
+      ...(bar ? style : {}),
+      ...barStyle,
       width: `${percent}%`,
     },
     role: 'progressbar',
@@ -100,7 +104,7 @@ const Progress = (props) => {
   }
 
   return (
-    <Tag {...attributes} className={progressClasses}>
+    <Tag {...attributes} style={style} className={progressClasses}>
       {multi ? children : <div {...progressBarProps} />}
     </Tag>
   );

diff --git a/src/__tests__/Progress.spec.js b/src/__tests__/Progress.spec.js
@@ -27,10 +27,22 @@ describe('Progress', () => {
     expect(wrapper.prop('max')).toBe(100);
   });
 
-  it('should render with "style" empty object by default', () => {
-    const wrapper = mount(<Progress />);
+  it('should render with "style" on the parent element', () => {
+    const wrapper = mount(<Progress style={{ height: '20px' }} />);
+
+    expect(getComputedStyle(wrapper.getDOMNode()).getPropertyValue('height')).toBe('20px');
+  });
+
+  it('should render with "style" on the progress bar element if bar=true', () => {
+    const wrapper = mount(<Progress bar style={{ height: '20px' }} />);
+
+    expect(getComputedStyle(wrapper.find('.progress-bar').getDOMNode()).getPropertyValue('height')).toBe('20px');
+  });
 
-    expect(wrapper.prop('style')).toEqual({});
+  it('should render "barStyle" on the progress bar element', () => {
+    const wrapper = mount(<Progress style={{ height: '20px' }} barStyle={{ height: '10px' }} />);
+
+    expect(getComputedStyle(wrapper.find('.progress-bar').getDOMNode()).getPropertyValue('height')).toBe('10px');
   });
 
   it('should render with the given "value" when passed as string prop', () => {

diff --git a/types/lib/Progress.d.ts b/types/lib/Progress.d.ts
@@ -14,6 +14,7 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLElement> {
   color?: string;
   cssModule?: CSSModule;
   barClassName?: string;
+  barStyle?: React.CSSProperties;
   barAriaValueText?: string;
   barAriaLabelledBy?: string;
 }