Removes z-index from "x" button in tokens (#2689)

* removes z-index from token remove buttons

* updates snapshots

* adds changeset

Author: mperrotti

.changeset/modern-avocados-relax.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Removes useless z-index from the remove button in tokens

src/Token/Token.tsx

@@ -98,14 +98,6 @@ const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement
             size={size}
             isParentInteractive={isTokenInteractive(props)}
             aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
-            sx={
-              hasMultipleActionTargets
-                ? {
-                    position: 'relative',
-                    zIndex: '1',
-                  }
-                : {}
-            }
           />
         ) : null}
       </TokenBase>

src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -218,8 +218,6 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -962,8 +960,6 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -1561,8 +1557,6 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -2253,8 +2247,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   margin-left: 4px;
   height: 16px;
   width: 16px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -2945,8 +2937,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   margin-left: 4px;
   height: 20px;
   width: 20px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -3630,8 +3620,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   margin-left: 8px;
   height: 24px;
   width: 24px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -4315,8 +4303,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -5000,8 +4986,6 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -5687,8 +5671,6 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -6772,8 +6754,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -7512,8 +7492,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c8:hover,
@@ -8284,8 +8262,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -9033,8 +9009,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c9:hover,
@@ -9852,8 +9826,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c9:hover,
@@ -10671,8 +10643,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c9:hover,
@@ -11484,8 +11454,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -12265,8 +12233,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c8:hover,
@@ -13078,8 +13044,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,
@@ -13875,8 +13839,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 4px;
   height: 16px;
   width: 16px;
-  position: relative;
-  z-index: 1;
 }
 
 .c9:hover,
@@ -14735,8 +14697,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c9:hover,
@@ -15595,8 +15555,6 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   margin-left: 8px;
   height: 24px;
   width: 24px;
-  position: relative;
-  z-index: 1;
 }
 
 .c9:hover,
@@ -16421,8 +16379,6 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   margin-left: 8px;
   height: 32px;
   width: 32px;
-  position: relative;
-  z-index: 1;
 }
 
 .c6:hover,