Remove sx props and BoxWithFallback from TooltipV2 and Tooltip

.changeset/pink-rockets-win.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Tooltip component to no longer support sx.

packages/react/src/Tooltip/Tooltip.docs.json

@@ -31,12 +31,7 @@
       "name": "wrap",
       "type": "boolean",
       "description": "Use `true` to allow text within tooltip to wrap."
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/Tooltip/Tooltip.tsx

@@ -2,14 +2,12 @@ import {clsx} from 'clsx'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {get} from '../constants'
-import type {SxProp} from '../sx'
-import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 import {useId} from '../hooks'
 
 /* Tooltip v1 */
 
-const TooltipBase = styled.span<SxProp>`
+const TooltipBase = styled.span`
   position: relative;
   display: inline-block;
 
@@ -182,8 +180,6 @@ const TooltipBase = styled.span<SxProp>`
     left: 0;
     margin-left: 0;
   }
-
-  ${sx};
 `
 
 /**

packages/react/src/TooltipV2/Tooltip.docs.json

@@ -57,12 +57,7 @@
       "name": "keybindingHint",
       "type": "string",
       "description": "Optional keybinding hint to indicate the availability of a keyboard shortcut. Supported syntax is described in the docs for the `KeybindingHint` component."
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/TooltipV2/Tooltip.tsx

@@ -1,5 +1,4 @@
 import React, {Children, useEffect, useRef, useState, useMemo} from 'react'
-import type {SxProp} from '../sx'
 import {useId, useProvidedRefOrCreate, useOnEscapePress, useIsMacOS} from '../hooks'
 import {invariant} from '../utils/invariant'
 import {warning} from '../utils/warning'
@@ -11,17 +10,14 @@ import classes from './Tooltip.module.css'
 import {getAccessibleKeybindingHintString, KeybindingHint, type KeybindingHintProps} from '../KeybindingHint'
 import VisuallyHidden from '../_VisuallyHidden'
 import useSafeTimeout from '../hooks/useSafeTimeout'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type TooltipDirection = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
-export type TooltipProps = React.PropsWithChildren<
-  {
-    direction?: TooltipDirection
-    text: string
-    type?: 'label' | 'description'
-    keybindingHint?: KeybindingHintProps['keys']
-  } & SxProp
-> &
+export type TooltipProps = React.PropsWithChildren<{
+  direction?: TooltipDirection
+  text: string
+  type?: 'label' | 'description'
+  keybindingHint?: KeybindingHintProps['keys']
+}> &
   React.HTMLAttributes<HTMLElement>
 
 type TriggerPropsType = Pick<
@@ -298,8 +294,7 @@ export const Tooltip = React.forwardRef(
                 child.props.onMouseLeave?.(event)
               },
             })}
-          <BoxWithFallback
-            as="span"
+          <span
             className={clsx(className, classes.Tooltip)}
             ref={tooltipElRef}
             data-direction={calculatedDirection}
@@ -332,7 +327,7 @@ export const Tooltip = React.forwardRef(
             ) : (
               text
             )}
-          </BoxWithFallback>
+          </span>
         </>
       </TooltipContext.Provider>
     )