Fix: Can't create shadow #187

README.md

@@ -71,7 +71,6 @@ The progressbar is designed to fill the width of its container. You can size the
 
 This makes the progressbar work well with responsive designs and grid systems.
 
-
 ## Props
 
 [**Take a look at the CodeSandbox**](https://codesandbox.io/s/vymm4oln6y) for interactive examples on how to use these props.
@@ -85,7 +84,8 @@ This makes the progressbar work well with responsive designs and grid systems.
 | `maxValue`          | Maximum value of the progressbar. Default: `100`.                                                                                                                                                                                      |
 | `className`         | Classes to apply to the svg element. Default: `''`.                                                                                                                                                                                    |
 | `text`              | Text to display inside progressbar. Default: `''`.                                                                                                                                                                                     |
-| `strokeWidth`       | Width of circular line relative to total width of component, a value from 0-100. Default: `8`.                                                                                                                                         |
+| `strokeWidthPath`   | Width of circular path line relative to total width of component, a value from 0-100. Default: `8`.                                                                                                                                    |
+| `strokeWidthTrail`  | Width of circular trial line relative to total width of component, a value from 0-100. Default: `3`.                                                                                                                                   |
 | `background`        | Whether to display background color. Default: `false`.                                                                                                                                                                                 |
 | `backgroundPadding` | Padding between background circle and path/trail relative to total width of component. Only used if `background` is `true`. Default: `0`.                                                                                              |
 | `counterClockwise`  | Whether to rotate progressbar in counterclockwise direction. Default: `false`.                                                                                                                                                         |

src/CircularProgressbar.tsx

@@ -26,7 +26,9 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
     className: '',
     maxValue: 100,
     minValue: 0,
-    strokeWidth: 8,
+    strokeWidthPath:8,
+    strokeWidthTrail: 3,
+
     styles: {
       root: {},
       trail: {},
@@ -48,7 +50,7 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
   getPathRadius() {
     // The radius of the path is defined to be in the middle, so in order for the path to
     // fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
-    return VIEWBOX_HEIGHT_HALF - this.props.strokeWidth / 2 - this.getBackgroundPadding();
+    return VIEWBOX_HEIGHT_HALF - this.props.strokeWidthPath / 2 - this.getBackgroundPadding();
   }
 
   // Ratio of path length to trail length, as a value between 0 and 1
@@ -65,7 +67,8 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
       classes,
       counterClockwise,
       styles,
-      strokeWidth,
+      strokeWidthPath,
+      strokeWidthTrail,
       text,
     } = this.props;
 
@@ -94,7 +97,7 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
           counterClockwise={counterClockwise}
           dashRatio={circleRatio}
           pathRadius={pathRadius}
-          strokeWidth={strokeWidth}
+          strokeWidth={strokeWidthTrail}
           style={styles.trail}
         />
 
@@ -103,7 +106,7 @@ class CircularProgressbar extends React.Component<CircularProgressbarProps> {
           counterClockwise={counterClockwise}
           dashRatio={pathRatio * circleRatio}
           pathRadius={pathRadius}
-          strokeWidth={strokeWidth}
+          strokeWidth={strokeWidthPath}
           style={styles.path}
         />
 

src/types.ts

@@ -23,7 +23,8 @@ export type CircularProgressbarDefaultProps = {
   counterClockwise: boolean;
   maxValue: number;
   minValue: number;
-  strokeWidth: number;
+  strokeWidthTrail: number;
+  strokeWidthPath: number;
   styles: CircularProgressbarStyles;
   text: string;
 };
@@ -45,7 +46,8 @@ export type CircularProgressbarWrapperProps = {
   counterClockwise?: boolean;
   maxValue?: number;
   minValue?: number;
-  strokeWidth?: number;
+  strokeWidthTrail?: number;
+  strokeWidthPath?: number;
   styles?: CircularProgressbarStyles;
   text?: string;
   value: number;

test/CircularProgressbar.test.tsx

@@ -5,12 +5,12 @@ import { CircularProgressbar } from '../src/index';
 
 function getExpectedStrokeDashoffset({
   percentage,
-  strokeWidth,
+  strokeWidthPath,
 }: {
   percentage: number;
-  strokeWidth: number;
+  strokeWidthPath: number;
 }) {
-  const radius = 50 - strokeWidth / 2;
+  const radius = 50 - strokeWidthPath / 2;
   const diameter = 2 * radius * Math.PI;
   const expectedGapLength = (1 - percentage / 100) * diameter;
   return `${expectedGapLength}px`;
@@ -20,13 +20,14 @@ function expectPathPercentageToEqual(
   wrapper: ReactWrapper<CircularProgressbar['props']>,
   percentage: number,
 ) {
-  const strokeWidth = wrapper.props().strokeWidth;
+  const strokeWidthTrail = wrapper.props().strokeWidthTrail;
+  const strokeWidthPath = wrapper.props().strokeWidthPath;
   expect(
     wrapper
       .find('.CircularProgressbar-path')
       .hostNodes()
       .prop('style')!.strokeDashoffset,
-  ).toEqual(getExpectedStrokeDashoffset({ percentage, strokeWidth }));
+  ).toEqual(getExpectedStrokeDashoffset({ percentage, strokeWidthPath }));
 }
 
 describe('<CircularProgressbar />', () => {
@@ -36,9 +37,13 @@ describe('<CircularProgressbar />', () => {
   });
   describe('props.strokeWidth', () => {
     test('Applies to path', () => {
-      const wrapper = shallow(<CircularProgressbar value={50} strokeWidth={2} />);
+      const wrapper = shallow(<CircularProgressbar value={50} strokeWidthPath={2} />);
       expect(wrapper.find('.CircularProgressbar-path').prop('strokeWidth')).toEqual(2);
     });
+    test('Applies to trail', () => {
+      const wrapper = shallow(<CircularProgressbar value={50} strokeWidthTrail={1} />);
+      expect(wrapper.find('.CircularProgressbar-trail').prop('strokeWidth')).toEqual(1);
+    });
   });
   describe('props.className', () => {
     test('Applies to SVG', () => {
@@ -60,7 +65,7 @@ describe('<CircularProgressbar />', () => {
   describe('props.value', () => {
     test('Renders correct path', () => {
       const percentage = 30;
-      const wrapper = mount(<CircularProgressbar value={percentage} strokeWidth={0} />);
+      const wrapper = mount(<CircularProgressbar value={percentage} strokeWidthTrail={0} strokeWidthPath={0} />);
 
       expectPathPercentageToEqual(wrapper, percentage);
 
@@ -149,7 +154,7 @@ describe('<CircularProgressbar />', () => {
       ).toEqual(
         getExpectedStrokeDashoffset({
           percentage: 100 * circleRatio,
-          strokeWidth: wrapper.props().strokeWidth,
+          strokeWidthPath: wrapper.props().strokeWidthPath,
         }),
       );
     });

test/CircularProgressbarWithChildren.test.tsx

@@ -29,7 +29,8 @@ describe('<CircularProgressbarWithChildren />', () => {
       minValue: 0,
       maxValue: 100,
       value: 50,
-      strokeWidth: 2,
+      strokeWidthTrail: 2,
+      strokeWidthPath:3,
       styles: {},
       text: '50%',
     };