fix: InputRange compat on Firefox

quid · Jan 16, 2019 · 0ed3ffb · 0ed3ffb
1 parent 71aa6f9
commit 0ed3ffb
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 26 deletions.
diff --git a/packages/react-forms/package.json b/packages/react-forms/package.json
@@ -21,7 +21,7 @@
     "emotion": "^10.0.5",
     "nanoid": "^2.0.0",
     "react": "^16.7.0",
-    "react-resize-aware": "^2.7.1",
+    "react-resize-aware": "^2.7.2",
     "react-router-dom": "^4.3.1"
   },
   "devDependencies": {

diff --git a/packages/react-forms/src/InputRange/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputRange/__snapshots__/index.test.js.snap
@@ -117,12 +117,7 @@ exports[`renders an InputRange 1`] = `
 }
 
 .emotion-0 {
-  fill: #00c1bb;
-  height: 2px;
-  width: 0px;
-  x: 0px;
-  rx: 1;
-  ry: 1;
+  color: #00c1bb;
 }
 
 .emotion-6 {
@@ -137,12 +132,7 @@ exports[`renders an InputRange 1`] = `
 }
 
 .emotion-4 {
-  fill: #6C7983;
-  height: 2px;
-  width: 0px;
-  x: 0px;
-  rx: 1;
-  ry: 1;
+  color: #6C7983;
 }
 
 .emotion-10 {
@@ -289,11 +279,11 @@ exports[`renders an InputRange 1`] = `
             "display": "block",
             "height": "100%",
             "left": 0,
+            "opacity": 0,
             "overflow": "hidden",
             "pointerEvents": "none",
             "position": "absolute",
             "top": 0,
-            "visibility": "hidden",
             "width": "100%",
             "zIndex": -1,
           }
@@ -332,8 +322,13 @@ exports[`renders an InputRange 1`] = `
                 <rect
                   className="emotion-0 emotion-1"
                   disabled={false}
+                  fill="currentColor"
+                  height={2}
                   offset={0}
+                  rx={1}
+                  ry={1}
                   width={0}
+                  x={0}
                 />
               </Rect>
             </svg>
@@ -356,8 +351,13 @@ exports[`renders an InputRange 1`] = `
                 <rect
                   className="emotion-4 emotion-1"
                   disabled={true}
+                  fill="currentColor"
+                  height={2}
                   offset={0}
+                  rx={1}
+                  ry={1}
                   width={0}
+                  x={0}
                 />
               </Rect>
             </svg>

diff --git a/packages/react-forms/src/InputRange/index.js b/packages/react-forms/src/InputRange/index.js
@@ -58,15 +58,20 @@ export function wrapWithSvg(
   );
 }
 
-export const Rect = styled.rect`
-  fill: ${wf(props =>
+export const Rect = styled(props => (
+  <rect
+    {...props}
+    fill="currentColor"
+    height={2}
+    width={Math.max(props.width, 0)}
+    x={Math.max(props.offset, 0)}
+    rx={1}
+    ry={1}
+  />
+))`
+  color: ${wf(props =>
     props.disabled ? TRACK_BACKGROUND(props) : props.theme.selected
   )};
-  height: 2px;
-  width: ${props => (props.width >= 0 ? props.width : 0)}px;
-  x: ${props => (props.offset >= 0 ? props.offset : 0)}px;
-  rx: 1;
-  ry: 1;
 `;
 
 export function drawSegment(width: number, offset: number, disabled: boolean) {

diff --git a/packages/react-forms/src/InputRange/index.test.js b/packages/react-forms/src/InputRange/index.test.js
@@ -105,5 +105,9 @@ it('tests areValuesEqual', () => {
 it('renders Rect', () => {
   // $FlowIgnoreMe
   console.error = jest.fn();
-  expect(mount(<Rect width={-1} />)).toHaveStyleRule('width', '0px');
+  expect(
+    mount(<Rect width={-1} />)
+      .find('rect')
+      .prop('width')
+  ).toBe(0);
 });
diff --git a/yarn.lock b/yarn.lock
@@ -11747,10 +11747,10 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-resize-aware@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/react-resize-aware/-/react-resize-aware-2.7.1.tgz#e54bc5fc4d67e3f9cc0342626e836bfc207e322e"
-  integrity sha1-5UvF/E1n4/nMA0JiboNr/CB+Mi4=
+react-resize-aware@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.npmjs.org/react-resize-aware/-/react-resize-aware-2.7.2.tgz#38a0040daaa28dfa9b88994889fbb1e2aa66df83"
+  integrity sha512-XyweQ3YTiZzNG1T5PNpCXvnpsI7mdy4A2oeySFToh8v02Yf+kOiUyWprvyp6T68fFB848w2F3RKfzH7KDk75JQ==
 
 react-router-dom@^4.3.1:
   version "4.3.1"