Bump @primer/react-octicons to v19.0.1 (#3266)

* Bump @primer/react-octicons to v19 * package-lock * snaps and changeset upgrade * install the correct version * update removed <Octicon /> usages * revert deprecated action list because it was wrong * Fix leading and trailing visual * depreacted ActionList type error * test(vrt): update snapshots --------- Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Ashok4977 · May 16, 2023 · 9532977 · 9532977
1 parent 8bf4c5a
commit 9532977
Show file tree

Hide file tree

Showing 26 changed files with 90 additions and 84 deletions.
diff --git a/.changeset/empty-snakes-join.md b/.changeset/empty-snakes-join.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Upgrade @primer/octicons-react dependency to `^19.1.0`
diff --git a/...s-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png b/...s-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-colorblind-linux.png
diff --git a/...st.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png b/...st.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-dimmed-linux.png
diff --git a/...napshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png b/...napshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-high-contrast-linux.png
diff --git a/...oken.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png b/...oken.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-linux.png
diff --git a/...s-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png b/...s-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-dark-tritanopia-linux.png
diff --git a/...-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png b/...-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-colorblind-linux.png
diff --git a/...apshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png b/...apshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-high-contrast-linux.png
diff --git a/...ken.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png b/...ken.test.ts-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-linux.png
diff --git a/...-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png b/...-snapshots/Token-Issue-Label-Token-With-On-Remove-Fn-light-tritanopia-linux.png
diff --git a/...Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png b/...Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-colorblind-linux.png
diff --git a/...nts/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png b/...nts/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-dimmed-linux.png
diff --git a/...en.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png b/...en.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-high-contrast-linux.png
diff --git a/...components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png b/...components/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-linux.png
diff --git a/...Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png b/...Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-dark-tritanopia-linux.png
diff --git a/...oken.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png b/...oken.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-colorblind-linux.png
diff --git a/...n.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png b/...n.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-high-contrast-linux.png
diff --git a/...omponents/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png b/...omponents/Token.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-linux.png
diff --git a/...oken.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png b/...oken.test.ts-snapshots/Token-Token-With-On-Remove-Fn-light-tritanopia-linux.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "@github/relative-time-element": "^4.1.2",
     "@lit-labs/react": "1.1.1",
     "@primer/behaviors": "1.3.4",
-    "@primer/octicons-react": "^18.0.0",
+    "@primer/octicons-react": "^19.1.0",
     "@primer/primitives": "7.11.10",
     "@react-aria/ssr": "^3.1.0",
     "@styled-system/css": "^5.1.5",

diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
@@ -134,7 +134,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           showLoadingIndicator={showLeadingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
         >
-          {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+          {LeadingVisual && (typeof LeadingVisual === 'string' ? LeadingVisual : <LeadingVisual />)}
         </TextInputInnerVisualSlot>
         <UnstyledTextInput
           ref={inputRef}
@@ -150,7 +150,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           showLoadingIndicator={showTrailingLoadingIndicator}
           hasLoadingIndicator={typeof loading === 'boolean'}
         >
-          {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+          {TrailingVisual && (typeof TrailingVisual === 'string' ? TrailingVisual : <TrailingVisual />)}
         </TextInputInnerVisualSlot>
         {trailingAction}
       </TextInputWrapper>

diff --git a/src/TextInputWithTokens/TextInputWithTokens.tsx b/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -295,7 +295,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
         visualPosition="leading"
         showLoadingIndicator={showLeadingLoadingIndicator}
       >
-        {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+        {LeadingVisual && (typeof LeadingVisual === 'string' ? LeadingVisual : <LeadingVisual />)}
       </TextInputInnerVisualSlot>
       <Box
         ref={containerRef as RefObject<HTMLDivElement>}
@@ -361,7 +361,7 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
         visualPosition="trailing"
         showLoadingIndicator={showTrailingLoadingIndicator}
       >
-        {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+        {TrailingVisual && (typeof TrailingVisual === 'string' ? TrailingVisual : <TrailingVisual />)}
       </TextInputInnerVisualSlot>
     </TextInputWrapper>
   )

diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -212,11 +212,11 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={12}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -435,11 +435,11 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -1536,11 +1536,11 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -1709,11 +1709,11 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={12}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -1882,11 +1882,11 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -2658,11 +2658,11 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -2831,11 +2831,11 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -3115,11 +3115,11 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -3295,11 +3295,11 @@ exports[`Token components Token renders all sizes 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={12}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -3475,11 +3475,11 @@ exports[`Token components Token renders all sizes 2`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>
@@ -4462,11 +4462,11 @@ exports[`Token components Token renders with a remove button 1`] = `
           "verticalAlign": "text-bottom",
         }
       }
-      viewBox="0 0 16 16"
+      viewBox="0 0 12 12"
       width={15}
     >
       <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
+        d="M2.22 2.22a.749.749 0 0 1 1.06 0L6 4.939 8.72 2.22a.749.749 0 1 1 1.06 1.06L7.061 6 9.78 8.72a.749.749 0 1 1-1.06 1.06L6 7.061 3.28 9.78a.749.749 0 1 1-1.06-1.06L4.939 6 2.22 3.28a.749.749 0 0 1 0-1.06Z"
       />
     </svg>
   </button>