fix(icon-build-helpers): disable svgo plugins that cause rendering is…

…sues (#5603) * fix(icon-build-helpers): disable svgo plugins that cause rendering issues * chore(test): update snapshots * test(data-table): update table toolbar menu test
carbon-design-system · Mar 13, 2020 · 12c17f1 · 12c17f1
1 parent 765d2b6
commit 12c17f1
Show file tree

Hide file tree

Showing 24 changed files with 124 additions and 88 deletions.
diff --git a/packages/icon-build-helpers/src/builders/vanilla/svgo.js b/packages/icon-build-helpers/src/builders/vanilla/svgo.js
@@ -181,10 +181,10 @@ const plugins = [
     removeRasterImages: false,
   },
   {
-    mergePaths: true,
+    mergePaths: false,
   },
   {
-    convertShapeToPath: true,
+    convertShapeToPath: false,
   },
   {
     sortAttrs: true,

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -61,8 +61,8 @@ exports[`Accordion should render 1`] = `
                   width={16}
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                  <polygon
+                    points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
                   />
                 </svg>
               </Icon>
@@ -134,8 +134,8 @@ exports[`Accordion should render 1`] = `
                   width={16}
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                  <polygon
+                    points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
                   />
                 </svg>
               </Icon>
@@ -207,8 +207,8 @@ exports[`Accordion should render 1`] = `
                   width={16}
                   xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                  <polygon
+                    points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
                   />
                 </svg>
               </Icon>

diff --git a/...es/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap b/...es/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap
@@ -41,8 +41,8 @@ exports[`AccordionSkeleton should render 1`] = `
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+              <polygon
+                points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
               />
             </svg>
           </Icon>
@@ -149,8 +149,8 @@ exports[`AccordionSkeleton should render 1`] = `
                 width={16}
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                <polygon
+                  points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
                 />
               </svg>
             </Icon>
@@ -209,8 +209,8 @@ exports[`AccordionSkeleton should render 1`] = `
                 width={16}
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                <polygon
+                  points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
                 />
               </svg>
             </Icon>
@@ -269,8 +269,8 @@ exports[`AccordionSkeleton should render 1`] = `
                 width={16}
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                <polygon
+                  points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
                 />
               </svg>
             </Icon>

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -54,8 +54,8 @@ exports[`AccordionItem should render 1`] = `
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+              <polygon
+                points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
               />
             </svg>
           </Icon>

diff --git a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
@@ -33,8 +33,8 @@ describe('Custom icon in DataTable.TableToolbarMenu', () => {
     );
     const originalIcon = mount(<Download16 />).find('svg');
     const icon = iconAction.find('svg');
-    expect(icon.find(':not(svg):not(title)').html()).toBe(
-      originalIcon.children().html()
+    expect(icon.getDOMNode().querySelectorAll(':not(svg):not(title)')).toEqual(
+      originalIcon.getDOMNode().querySelectorAll(':not(svg):not(title)')
     );
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2052,10 +2052,10 @@ exports[`DataTable should render 1`] = `
                               <path
                                 d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
                               />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                              <polygon
                                 data-icon-path="inner-path"
                                 fill="none"
+                                points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15"
                               />
                             </svg>
                           </Icon>
@@ -2124,10 +2124,10 @@ exports[`DataTable should render 1`] = `
                               <path
                                 d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
                               />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                              <polygon
                                 data-icon-path="inner-path"
                                 fill="none"
+                                points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15"
                               />
                             </svg>
                           </Icon>
@@ -2196,10 +2196,10 @@ exports[`DataTable should render 1`] = `
                               <path
                                 d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
                               />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                              <polygon
                                 data-icon-path="inner-path"
                                 fill="none"
+                                points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15"
                               />
                             </svg>
                           </Icon>
@@ -2354,8 +2354,8 @@ exports[`DataTable should render 1`] = `
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                              <polygon
+                                points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
                               />
                             </svg>
                           </Icon>
@@ -3055,10 +3055,10 @@ exports[`DataTable sticky header should render 1`] = `
                               <path
                                 d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
                               />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                              <polygon
                                 data-icon-path="inner-path"
                                 fill="none"
+                                points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15"
                               />
                             </svg>
                           </Icon>
@@ -3127,10 +3127,10 @@ exports[`DataTable sticky header should render 1`] = `
                               <path
                                 d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
                               />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                              <polygon
                                 data-icon-path="inner-path"
                                 fill="none"
+                                points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15"
                               />
                             </svg>
                           </Icon>
@@ -3199,10 +3199,10 @@ exports[`DataTable sticky header should render 1`] = `
                               <path
                                 d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
                               />
-                              <path
-                                d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+                              <polygon
                                 data-icon-path="inner-path"
                                 fill="none"
+                                points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15"
                               />
                             </svg>
                           </Icon>
@@ -3357,8 +3357,8 @@ exports[`DataTable sticky header should render 1`] = `
                               width={16}
                               xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                              <polygon
+                                points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
                               />
                             </svg>
                           </Icon>

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -66,10 +66,10 @@ exports[`DataTable.TableBatchAction should render 1`] = `
             <path
               d="M16,2C8.4,2,2,8.4,2,16s6.4,14,14,14s14-6.4,14-14S23.6,2,16,2z M24,17h-7v7h-2v-7H8v-2h7V8h2v7h7V17z"
             />
-            <path
-              d="M24 17L17 17 17 24 15 24 15 17 8 17 8 15 15 15 15 8 17 8 17 15 24 15z"
+            <polygon
               data-icon-path="inner-path"
               fill="none"
+              points="24,17 17,17 17,24 15,24 15,17 8,17 8,15 15,15 15,8 17,8 17,15 24,15"
             />
           </svg>
         </Icon>

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
@@ -63,8 +63,8 @@ exports[`DataTable.TableExpandRow should render 1`] = `
                         width={16}
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                        <polygon
+                          points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3"
                         />
                       </svg>
                     </Icon>

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -100,8 +100,11 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
                 width={16}
                 xmlns="http://www.w3.org/2000/svg"
               >
+                <polygon
+                  points="13,7 12.3,6.3 8.5,10.1 8.5,1 7.5,1 7.5,10.1 3.7,6.3 3,7 8,12"
+                />
                 <path
-                  d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"
+                  d="M13,12v2H3v-2H2v2l0,0c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1l0,0v-2H13z"
                 />
                 <title>
                   Add

diff --git a/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -113,8 +113,8 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
                 width={16}
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <path
-                  d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+                <polygon
+                  points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
                 />
               </svg>
             </Icon>

diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -154,8 +154,8 @@ exports[`Dropdown should render 1`] = `
                         width={16}
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                        <polygon
+                          points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6"
                         />
                         <title>
                           Open menu
@@ -328,8 +328,8 @@ exports[`Dropdown should render custom item components 1`] = `
                         width={16}
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                        <polygon
+                          points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6"
                         />
                         <title>
                           Close menu
@@ -661,8 +661,8 @@ exports[`Dropdown should render with strings as items 1`] = `
                         width={16}
                         xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                        <polygon
+                          points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6"
                         />
                         <title>
                           Close menu

diff --git a/packages/react/src/components/FileUploader/__snapshots__/FileUploader-test.js.snap b/packages/react/src/components/FileUploader/__snapshots__/FileUploader-test.js.snap
@@ -87,8 +87,8 @@ exports[`Filename renders as expected renders upload status icon as expected 2`]
         width={16}
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+        <polygon
+          points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
         />
         <title>
           Upload complete

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
@@ -47,8 +47,8 @@ exports[`ListBoxField should render 1`] = `
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+              <polygon
+                points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
               />
             </svg>
           </Icon>
@@ -108,8 +108,8 @@ exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = `
               width={16}
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path
-                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+              <polygon
+                points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
               />
             </svg>
           </Icon>

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuIcon-test.js.snap
@@ -37,8 +37,8 @@ exports[`ListBoxMenuIcon should render 1`] = `
           width={16}
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+          <polygon
+            points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6"
           />
           <title>
             Close menu
@@ -87,8 +87,8 @@ exports[`ListBoxMenuIcon should render 2`] = `
           width={16}
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+          <polygon
+            points="8,11 3,6 3.7,5.3 8,9.6 12.3,5.3 13,6"
           />
           <title>
             Open menu

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxSelection-test.js.snap
@@ -57,8 +57,8 @@ exports[`ListBoxSelection should render 1`] = `
           width={16}
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+          <polygon
+            points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
           />
         </svg>
       </Icon>
@@ -126,8 +126,8 @@ exports[`ListBoxSelection should render 2`] = `
           width={16}
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
+          <polygon
+            points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"
           />
         </svg>
       </Icon>