Dashboard: fix individual progress by renaming camelCased svg properties (#2882)

* Rename strokeDasharray to stroke-dasharray etc, since Preact doesn’t work with those camelCased

* try adding eslint ignore for react/no-unknown-property rule

.eslintrc.js

@@ -2,6 +2,10 @@
 
 'use strict'
 
+const svgPresentationAttributes = [
+  'alignment-baseline', 'baseline-shift', 'clip', 'clip-path', 'clip-rule', 'color', 'color-interpolatio', 'color-interpolatio-filters', 'color-profile', 'color-rendering', 'cursor', 'direction', 'display', 'dominant-baseline', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'image-rendering', 'kerning', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'overflow', 'pointer-events', 'shape-rendering', 'stop-color', 'stop-opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', 'text-rendering', 'transform', 'transform-origin', 'unicode-bidi', 'vector-effect', 'visibility', 'word-spacing', 'writing-mod',
+]
+
 module.exports = {
   extends: ['transloadit'],
   env: {
@@ -99,6 +103,9 @@ module.exports = {
     'react/prefer-stateless-function': ['warn'],
     'react/sort-comp': ['warn'],
     'react/style-prop-object': ['warn'],
+    'react/no-unknown-property': ['warn', {
+      ignore: svgPresentationAttributes,
+    }],
     'vars-on-top': ['warn'],
     'import/no-extraneous-dependencies': ['error'],
 

packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.js

@@ -73,17 +73,24 @@ function ProgressCircle ({ progress }) {
 
   return (
     <g>
-      <circle className="uppy-Dashboard-Item-progressIcon--bg" r="15" cx="18" cy="18" strokeWidth="2" fill="none" />
+      <circle
+        className="uppy-Dashboard-Item-progressIcon--bg"
+        r="15"
+        cx="18"
+        cy="18"
+        stroke-width="2"
+        fill="none"
+      />
       <circle
         className="uppy-Dashboard-Item-progressIcon--progress"
         r="15"
         cx="18"
         cy="18"
         transform="rotate(-90, 18, 18)"
-        strokeWidth="2"
         fill="none"
-        strokeDasharray={circleLength}
-        strokeDashoffset={circleLength - (circleLength / 100 * progress)}
+        stroke-width="2"
+        stroke-dasharray={circleLength}
+        stroke-dashoffset={circleLength - ((circleLength / 100) * progress)}
       />
     </g>
   )