feat(circularprogress): allow style and className overrides

pluralsight · Jan 17, 2018 · d52bc45 · d52bc45
1 parent 19b1a31
commit d52bc45
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 19 deletions.
diff --git a/packages/circularprogress/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/circularprogress/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -232,6 +232,100 @@ exports[`Storyshots size small 1`] = `
 </div>
 `;
 
+exports[`Storyshots style overrides className (no viz change) 1`] = `
+<div
+  style={
+    Object {
+      "background": "#181818",
+      "backgroundSize": "cover",
+      "bottom": 0,
+      "left": 0,
+      "overflow": "scroll",
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+      "transition": "background 300ms",
+    }
+  }
+>
+  <div
+    className="someString"
+    data-css-1ie49mc=""
+  >
+    <svg
+      data-css-1txt1eh=""
+      version="1.1"
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="24"
+        cy="24"
+        data-css-1n6oxz3=""
+        r={22}
+      />
+      <circle
+        cx="24"
+        cy="24"
+        data-css-e1ehue=""
+        r={22}
+        strokeDasharray="138.23007675795088 138.23007675795088"
+        strokeDashoffset={103.67255756846316}
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Storyshots style overrides style 1`] = `
+<div
+  style={
+    Object {
+      "background": "#181818",
+      "backgroundSize": "cover",
+      "bottom": 0,
+      "left": 0,
+      "overflow": "scroll",
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+      "transition": "background 300ms",
+    }
+  }
+>
+  <div
+    data-css-1ie49mc=""
+    style={
+      Object {
+        "outline": "1px solid red",
+      }
+    }
+  >
+    <svg
+      data-css-1txt1eh=""
+      version="1.1"
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="24"
+        cy="24"
+        data-css-1n6oxz3=""
+        r={22}
+      />
+      <circle
+        cx="24"
+        cy="24"
+        data-css-e1ehue=""
+        r={22}
+        strokeDasharray="138.23007675795088 138.23007675795088"
+        strokeDashoffset={103.67255756846316}
+      />
+    </svg>
+  </div>
+</div>
+`;
+
 exports[`Storyshots value value 0 1`] = `
 <div
   style={

diff --git a/packages/circularprogress/src/react/index.js b/packages/circularprogress/src/react/index.js
@@ -68,25 +68,29 @@ const CircularProgress = (props, context) => {
   const value = typeof allProps.value === 'undefined' ? 25 : allProps.value
   const dashOffset = (100 - value) / 100 * circumference
 
-  return (
-    <div {...css.root(allProps)}>
-      <svg
-        {...css.svg(allProps)}
-        viewBox={`0 0 ${style.width} ${style.width}`}
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle r={radius} cx="24" cy="24" {...css.bg(allProps)} />
-        <circle
-          r={radius}
-          cx="24"
-          cy="24"
-          {...css.fg(allProps)}
-          strokeDasharray={`${circumference} ${circumference}`}
-          strokeDashoffset={dashOffset}
-        />
-      </svg>
-    </div>
+  return React.createElement(
+    'div',
+    {
+      ...css.root(allProps),
+      ...(props.style ? { style: props.style } : null),
+      ...(props.className ? { className: props.className } : null)
+    },
+    <svg
+      {...css.svg(allProps)}
+      viewBox={`0 0 ${style.width} ${style.width}`}
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle r={radius} cx="24" cy="24" {...css.bg(allProps)} />
+      <circle
+        r={radius}
+        cx="24"
+        cy="24"
+        {...css.fg(allProps)}
+        strokeDasharray={`${circumference} ${circumference}`}
+        strokeDashoffset={dashOffset}
+      />
+    </svg>
   )
 }
 

diff --git a/packages/circularprogress/stories/index.js b/packages/circularprogress/stories/index.js
@@ -58,3 +58,10 @@ class AnimationDemo extends React.Component {
 const animationStory = storiesOf('animation', module)
   .addDecorator(themeDecorator(addons))
   .add('animates to new values', _ => <AnimationDemo />)
+
+const styleStory = storiesOf('style overrides', module)
+  .addDecorator(themeDecorator(addons))
+  .add('style', _ => <CircularProgress style={{ outline: '1px solid red' }} />)
+  .add('className (no viz change)', _ => (
+    <CircularProgress className="someString" />
+  ))