DO NOT MERGE:Remove sx props and BoxWithFallback from TooltipV2 and Tooltip (#6667)

Author: liuliu-dev

.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>
     )

packages/styled-react/src/components/Tooltip.tsx

@@ -0,0 +1,25 @@
+import {Tooltip as PrimerTooltip, type TooltipProps as PrimerTooltipProps, type SxProp} from '@primer/react'
+import {
+  Tooltip as PrimerDeprecatedTooltip,
+  type TooltipProps as PrimerDeprecatedTooltipProps,
+} from '@primer/react/deprecated'
+import {Box} from './Box'
+import {forwardRef, type ForwardRefExoticComponent, type RefAttributes} from 'react'
+
+type TooltipProps = PrimerTooltipProps & SxProp
+
+const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivElement>> = forwardRef<
+  HTMLDivElement,
+  TooltipProps
+>(function Tooltip(props, ref) {
+  return <Box as={PrimerTooltip} ref={ref} {...props} />
+})
+
+export {Tooltip, type TooltipProps}
+
+type DeprecatedTooltipProps = PrimerDeprecatedTooltipProps & SxProp
+
+function DeprecatedTooltip(props: DeprecatedTooltipProps) {
+  return <Box as={PrimerDeprecatedTooltip} {...props} />
+}
+export {DeprecatedTooltip, type DeprecatedTooltipProps}

packages/styled-react/src/deprecated.tsx

@@ -1,3 +1,4 @@
 export {TabNav, type TabNavProps, type TabNavLinkProps} from './components/TabNav'
 export {Dialog, type DialogProps, type DialogHeaderProps} from './components/DialogV1'
-export {Octicon, Tooltip, type TooltipProps} from '@primer/react/deprecated'
+export {Octicon} from '@primer/react/deprecated'
+export {DeprecatedTooltip as Tooltip, type DeprecatedTooltipProps as TooltipProps} from './components/Tooltip'

packages/styled-react/src/experimental.tsx

@@ -13,4 +13,7 @@ export {
   type UnderlinePanelsTabProps,
   type UnderlinePanelsPanelProps,
 } from './components/UnderlinePanels'
-export {Table, Tooltip} from '@primer/react/experimental'
+
+export {Tooltip, type TooltipProps} from './components/Tooltip'
+
+export {Table} from '@primer/react/experimental'

packages/styled-react/src/index.tsx

@@ -9,7 +9,6 @@ export {Select} from '@primer/react'
 export {Text} from '@primer/react'
 export {Textarea} from '@primer/react'
 export {TextInput} from '@primer/react'
-export {Tooltip} from '@primer/react'
 export {type TextInputProps} from '@primer/react'
 
 // theming depends on styled-components
@@ -64,6 +63,7 @@ export {
   type TimelineBreakProps,
 } from './components/Timeline'
 export {ToggleSwitch, type ToggleSwitchProps} from './components/ToggleSwitch'
+export {Tooltip, type TooltipProps} from './components/Tooltip'
 export {Token, type TokenProps} from './components/Token'
 export {Truncate, type TruncateProps} from './components/Truncate'
 export {UnderlineNav, type UnderlineNavProps, type UnderlineNavItemProps} from './components/UnderlineNav'