Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(Progress): Allow passing in custom style object (#1771)
Allows for more flexibility in styling
  • Loading branch information
DSBalaban authored and TheSharpieOne committed Jan 28, 2020
1 parent c7bbdea commit a79417a
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/Progress.js
Expand Up @@ -22,12 +22,14 @@ const propTypes = {
className: PropTypes.string,
barClassName: PropTypes.string,
cssModule: PropTypes.object,
style: PropTypes.object,
};

const defaultProps = {
tag: 'div',
value: 0,
max: 100,
style: {},
};

const Progress = (props) => {
Expand All @@ -44,6 +46,7 @@ const Progress = (props) => {
bar,
multi,
tag: Tag,
style,
...attributes
} = props;

Expand All @@ -65,7 +68,10 @@ const Progress = (props) => {
const ProgressBar = multi ? children : (
<div
className={progressBarClasses}
style={{ width: `${percent}%` }}
style={{
...style,
width: `${percent}%`,
}}
role="progressbar"
aria-valuenow={value}
aria-valuemin="0"
Expand Down
6 changes: 6 additions & 0 deletions src/__tests__/Progress.spec.js
Expand Up @@ -27,6 +27,12 @@ describe('Progress', () => {
expect(wrapper.prop('max')).toBe(100);
});

it('should render with "style" empty object by default', () => {
const wrapper = mount(<Progress />);

expect(wrapper.prop('style')).toEqual({});
});

it('should render with the given "value" when passed as string prop', () => {
const wrapper = mount(<Progress value="10" />);

Expand Down

0 comments on commit a79417a

Please sign in to comment.