chore(_VisuallyHidden): Convert internal component _VisuallyHidden to CSS module styling (#6083)

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>

Author: 3 people

.changeset/smooth-steaks-hug.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Convert `_VisuallyHidden` internal component to CSS modules

packages/react/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap

@@ -27,21 +27,8 @@ exports[`snapshots renders a custom empty state message 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <div
@@ -81,21 +68,8 @@ exports[`snapshots renders a loading state 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div
       className="SpinnerWrapper"
@@ -168,21 +142,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -668,21 +629,8 @@ exports[`snapshots renders a multiselect input 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -1106,21 +1054,8 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -1544,21 +1479,8 @@ exports[`snapshots renders a single select input 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -2121,21 +2043,8 @@ exports[`snapshots renders with a custom text input component 1`] = `
     id="customInput"
     type="text"
   />,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <ul
@@ -2719,21 +2628,8 @@ exports[`snapshots renders with an input value 1`] = `
       type="text"
     />
   </span>,
-  .c0 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-<span
-    className="c0"
+  <span
+    className="InternalVisuallyHidden"
   >
     <div>
       <div

packages/react/src/CircleBadge/__snapshots__/CircleBadge.test.tsx.snap

@@ -2,19 +2,19 @@
 
 exports[`CircleBadge > respects the inline prop 1`] = `
 <div
-  class="sc-ikkxIA jhJVVm"
+  class="sc-gFqAkR SqWoH"
 />
 `;
 
 exports[`CircleBadge > respects the variant prop 1`] = `
 <div
-  class="sc-ikkxIA eMrppW"
+  class="sc-gFqAkR ebkeDz"
 />
 `;
 
 exports[`CircleBadge > uses the size prop to override the variant prop 1`] = `
 <div
-  class="sc-ikkxIA dkwGym"
+  class="sc-gFqAkR kqQQpr"
   size="20"
 />
 `;