Fix TypeScript errors in the next_major branch

package.json

@@ -114,7 +114,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.6.1",
+    "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",

src/__tests__/Dropdown.types.test.tsx

@@ -9,11 +9,12 @@ export function shouldNotAcceptSystemProps() {
   return (
     <>
       {/* @ts-expect-error system props should not be accepted */}
-      <Dropdown.Caret backgroundColor="thistle" />,{/* @ts-expect-error system props should not be accepted */}
-      <Dropdown.Menu backgroundColor="thistle" />,{/* @ts-expect-error system props should not be accepted */}
-      <Dropdown.Item backgroundColor="thistle" />,
-      {/* this will not error for now, but once Button removes styled system props, this line should
-        be updated with a @ts-expect-error */}
+      <Dropdown.Caret backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Menu backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
+      <Dropdown.Item backgroundColor="thistle" />
+      {/* @ts-expect-error system props should not be accepted */}
       <Dropdown.Button backgroundColor="thistle" />
     </>
   )

src/stories/ConfirmationDialog.stories.tsx

@@ -64,16 +64,16 @@ export const ShorthandHook = () => {
   )
   return (
     <Box display="flex" flexDirection="column" alignItems="flex-start">
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
-      <Button mb={2} onClick={onButtonClick}>
+      <Button onClick={onButtonClick} sx={{mb: 2}}>
         Turn me green!
       </Button>
     </Box>

src/stories/useFocusTrap.stories.tsx

@@ -165,7 +165,7 @@ export const CustomInitialFocus = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start">
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the
           &ldquo;Elderberry&rdquo; button will receive the initial focus (if the trap zone container does not already
           have focus).
@@ -302,7 +302,7 @@ export const MultipleFocusTraps = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start">
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an
           active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled,
           the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be

src/stories/useFocusZone.stories.tsx

@@ -58,7 +58,7 @@ export const BasicFocusZone = () => {
         <Box position="absolute" right={5} top={2}>
           Last key pressed: {lastKey}
         </Box>
-        <ToggleButton mb={3} onClick={toggleFz}>
+        <ToggleButton onClick={toggleFz} sx={{mb: 3}}>
           {fzEnabled ? 'Disable' : 'Enable'} Focus Zone
         </ToggleButton>
         <MarginButton>Apple</MarginButton>
@@ -396,7 +396,7 @@ export const SpecialSituations = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in
           different situations. Focus treatment within your component should be evaluated for your particular UX using
           the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard">ARIA guidelines</a>.
@@ -491,7 +491,7 @@ export const ChangingSubtree = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates that focusZone is consistent even when the container&rsquo;s subtree changes.
         </Flash>
         <Box position="absolute" right={5} top={2}>
@@ -620,7 +620,7 @@ export const ActiveDescendant = () => {
     <>
       <HelperGlobalStyling />
       <Box display="flex" flexDirection="column" alignItems="flex-start" onKeyDownCapture={reportKey}>
-        <Flash mb={3}>
+        <Flash sx={{mb: 3}}>
           This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an
           active element. Below, you can focus the input box then use the up/down arrow keys to change the active
           descendant (dark blue outline).