From 0438d849e1128c0989680a9d4035b98435e937a7 Mon Sep 17 00:00:00 2001
From: Matthew Hui <matthew.hui@instacart.com>
Date: Mon, 12 Aug 2019 17:49:15 -0700
Subject: [PATCH 1/3] Use svgicon

---
 src/components/ScrollTrack/ScrollTrack.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ScrollTrack/ScrollTrack.js b/src/components/ScrollTrack/ScrollTrack.js
index 7c3defb5..8cfcd0fd 100644
--- a/src/components/ScrollTrack/ScrollTrack.js
+++ b/src/components/ScrollTrack/ScrollTrack.js
@@ -9,7 +9,7 @@ import ScrollTrackPropTypes from './ScrollTrackPropTypes'
 import { isNodeEnv } from '../../utils/detectFeature'
 import debounce from '../../utils/debounce'
 import CircleButton from '../Buttons/CircleButton'
-import Icon from '../Icon/Icon'
+import SVGIcon from '../SVGIcon/SVGIcon'
 
 const noOp = () => {} // eslint-disable-line no-empty-function
 
@@ -372,7 +372,7 @@ class ScrollTrack extends Component {
         ]}
         ref={node => (this.nextButton = node)}
       >
-        {nextButtonContent || <Icon name="arrowRightSmallBold" style={{ fontSize: '20px' }} />}
+        {nextButtonContent || <SVGIcon name='arrowRight' size='small' />}
       </CircleButton>
     )
   }
@@ -397,7 +397,7 @@ class ScrollTrack extends Component {
         ]}
         ref={node => (this.backButton = node)}
       >
-        {backButtonContent || <Icon name="arrowLeftSmallBold" style={{ fontSize: '20px' }} />}
+        {backButtonContent || <SVGIcon name='arrowLeft' size='small' />}
       </CircleButton>
     )
   }

From 8c4732e4f1c4ceb87efefb4750dc6d3bbb555ee5 Mon Sep 17 00:00:00 2001
From: Matthew Hui <matthew.hui@instacart.com>
Date: Mon, 12 Aug 2019 17:52:55 -0700
Subject: [PATCH 2/3] tests

---
 .../NavigationPills.spec.js.snap              | 250 ++++--------------
 .../__snapshots__/ScrollTrack.spec.js.snap    | 125 ++-------
 2 files changed, 75 insertions(+), 300 deletions(-)

diff --git a/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap b/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap
index f0ea1c75..1b499f3b 100644
--- a/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap
+++ b/src/components/NavigationPills/__tests__/__snapshots__/NavigationPills.spec.js.snap
@@ -47,27 +47,12 @@ exports[`renders NavigationPills correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -357,27 +342,12 @@ exports[`renders NavigationPills correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -444,27 +414,12 @@ exports[`renders NavigationPills wihtout label correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -744,27 +699,12 @@ exports[`renders NavigationPills wihtout label correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -831,27 +771,12 @@ exports[`renders NavigationPills with each pill's elementAttributes correctly 1`
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -1153,27 +1078,12 @@ exports[`renders NavigationPills with each pill's elementAttributes correctly 1`
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -1240,27 +1150,12 @@ exports[`renders NavigationPills with elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -1552,27 +1447,12 @@ exports[`renders NavigationPills with elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -1639,27 +1519,12 @@ exports[`renders NavigationPills with inner elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -1951,27 +1816,12 @@ exports[`renders NavigationPills with inner elementAttributes correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
diff --git a/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap b/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap
index 84acbaf2..6bc567b9 100644
--- a/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap
+++ b/src/components/ScrollTrack/__tests__/__snapshots__/ScrollTrack.spec.js.snap
@@ -47,27 +47,12 @@ exports[`renders ScrollTrack correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -140,27 +125,12 @@ exports[`renders ScrollTrack correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -227,27 +197,12 @@ exports[`renders ScrollTrack with animation props correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
       <div
         className="rmq-16b35912"
@@ -320,27 +275,12 @@ exports[`renders ScrollTrack with animation props correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>
@@ -495,27 +435,12 @@ exports[`renders custom ScrollTrack buttons correctly 1`] = `
           }
         }
       >
-        <i
+        <test-file-stub
           aria-hidden={true}
-          data-radium={true}
-          style={
-            Object {
-              "fontFamily": "ic-icons",
-              "fontSize": "20px",
-              "fontSmoothing": "antialiased",
-              "fontStyle": "normal",
-              "fontVariant": "normal",
-              "fontWeight": "normal",
-              "lineHeight": "1",
-              "osxFontSmoothing": "grayscale",
-              "position": "relative",
-              "speak": "none",
-              "textTransform": "none",
-            }
-          }
-        >
-          
-        </i>
+          fill="currentColor"
+          height="18px"
+          width="18px"
+        />
       </button>
     </div>
   </div>

From 5d5487d36fa965e75841571dcc665a7bd868e539 Mon Sep 17 00:00:00 2001
From: Matthew Hui <matthew.hui@instacart.com>
Date: Mon, 12 Aug 2019 17:54:53 -0700
Subject: [PATCH 3/3] update

---
 src/components/ScrollTrack/ScrollTrack.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ScrollTrack/ScrollTrack.js b/src/components/ScrollTrack/ScrollTrack.js
index 8cfcd0fd..2f89ba07 100644
--- a/src/components/ScrollTrack/ScrollTrack.js
+++ b/src/components/ScrollTrack/ScrollTrack.js
@@ -372,7 +372,7 @@ class ScrollTrack extends Component {
         ]}
         ref={node => (this.nextButton = node)}
       >
-        {nextButtonContent || <SVGIcon name='arrowRight' size='small' />}
+        {nextButtonContent || <SVGIcon name="arrowRight" size="small" />}
       </CircleButton>
     )
   }
@@ -397,7 +397,7 @@ class ScrollTrack extends Component {
         ]}
         ref={node => (this.backButton = node)}
       >
-        {backButtonContent || <SVGIcon name='arrowLeft' size='small' />}
+        {backButtonContent || <SVGIcon name="arrowLeft" size="small" />}
       </CircleButton>
     )
   }