conflicts

liuliu-dev · liuliu-dev · commit 16a534450fc8 · 2025-09-30T18:10:57.000-07:00
diff --git a/.changeset/pink-rockets-win.md b/.changeset/pink-rockets-win.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Tooltip component to no longer support sx.
diff --git a/.changeset/tricky-boats-visit.md b/.changeset/tricky-boats-visit.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes `sx` prop from VisuallyHidden component, and as a result also removes `sx` prop from CheckboxGroup.Label and RadioGroup.Label
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.tsx
@@ -10,7 +10,7 @@ import FormControl from '../FormControl'
 import Checkbox from '../Checkbox/Checkbox'
 import {CheckboxGroupContext} from './CheckboxGroupContext'
 
-type CheckboxGroupProps = {
+export type CheckboxGroupProps = {
   /**
    * An onChange handler that gets called when any of the checkboxes change
    */
diff --git a/packages/react/src/CheckboxGroup/index.ts b/packages/react/src/CheckboxGroup/index.ts
@@ -1 +1 @@
-export {default, CheckboxGroupContext} from './CheckboxGroup'
+export {default, CheckboxGroupContext, type CheckboxGroupProps} from './CheckboxGroup'
diff --git a/packages/react/src/RadioGroup/RadioGroup.docs.json b/packages/react/src/RadioGroup/RadioGroup.docs.json
@@ -84,11 +84,6 @@
           "type": "boolean",
           "defaultValue": "false",
           "description": "If true, the fieldset legend will be visually hidden"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -132,4 +127,4 @@
       ]
     }
   ]
-}
+}
diff --git a/packages/react/src/Tooltip/Tooltip.docs.json b/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": []
-}
+}
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/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};
 `
 
 /**
diff --git a/packages/react/src/TooltipV2/Tooltip.docs.json b/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": []
-}
+}
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/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>
     )
diff --git a/packages/react/src/_VisuallyHidden.tsx b/packages/react/src/_VisuallyHidden.tsx
@@ -1,18 +1,28 @@
 import classes from './_VisuallyHidden.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from './internal/components/BoxWithFallback'
-import type {SxProp} from './sx'
+import type {PolymorphicProps} from './utils/modern-polymorphic'
+import type {ElementType} from 'react'
 
-interface Props extends React.ComponentPropsWithoutRef<'span'> {
-  isVisible?: boolean
-  as?: React.ElementType
-}
+type VisuallyHiddenProps<As extends ElementType = 'span'> = PolymorphicProps<
+  As,
+  'span',
+  {
+    isVisible?: boolean
+  }
+>
 
-function VisuallyHidden({isVisible, children, as = 'span', className, ...rest}: Props & SxProp) {
+function VisuallyHidden<As extends ElementType = 'span'>({
+  isVisible,
+  children,
+  as,
+  className,
+  ...rest
+}: VisuallyHiddenProps<As>) {
+  const Component = as || 'span'
   return (
-    <BoxWithFallback as={as} className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
+    <Component className={clsx(className, {[classes.InternalVisuallyHidden]: !isVisible})} {...rest}>
       {children}
-    </BoxWithFallback>
+    </Component>
   )
 }
 
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -51,6 +51,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type ButtonProps",
   "Checkbox",
   "CheckboxGroup",
+  "type CheckboxGroupProps",
   "type CheckboxProps",
   "CircleBadge",
   "type CircleBadgeIconProps",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -85,6 +85,7 @@ export {default as ButtonGroup} from './ButtonGroup'
 export type {ButtonGroupProps} from './ButtonGroup'
 export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge'
 export {default as CheckboxGroup} from './CheckboxGroup'
+export type {CheckboxGroupProps} from './CheckboxGroup'
 export {default as CircleBadge} from './CircleBadge'
 export {default as CounterLabel} from './CounterLabel'
 export type {CounterLabelProps} from './CounterLabel'
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import VisuallyHidden from '../../../_VisuallyHidden'
-import type {SxProp} from '../../../sx'
 import CheckboxOrRadioGroupContext from './CheckboxOrRadioGroupContext'
 import classes from './CheckboxOrRadioGroup.module.css'
 import {Stack} from '../../../Stack'
@@ -13,13 +12,12 @@ export type CheckboxOrRadioGroupLabelProps = {
    * Whether to visually hide the fieldset legend
    */
   visuallyHidden?: boolean
-} & SxProp
+}
 
 const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupLabelProps>> = ({
   children,
   className,
   visuallyHidden = false,
-  sx,
 }) => {
   const {required, disabled} = React.useContext(CheckboxOrRadioGroupContext)
 
@@ -29,7 +27,6 @@ const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadi
       isVisible={!visuallyHidden}
       title={required ? 'required field' : undefined}
       data-label-disabled={disabled ? '' : undefined}
-      sx={sx}
     >
       {required ? (
         <Stack direction="horizontal" gap="none">
diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx
@@ -143,6 +143,11 @@ describe('@primer/react', () => {
     )
   })
 
+  test('CheckboxGroup.Label supports `sx` prop', () => {
+    const {container} = render(<CheckboxGroup.Label data-testid="component" sx={{background: 'red'}} />)
+    expect(window.getComputedStyle(container.firstElementChild!).backgroundColor).toBe('rgb(255, 0, 0)')
+  })
+
   test('CircleBadge supports `sx` prop', () => {
     render(<CircleBadge data-testid="component" sx={{background: 'red'}} />)
     expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)')
diff --git a/packages/styled-react/src/components/CheckboxGroup.tsx b/packages/styled-react/src/components/CheckboxGroup.tsx
@@ -0,0 +1,49 @@
+import {
+  Box,
+  CheckboxGroup as PrimerCheckboxGroup,
+  type CheckboxGroupProps as PrimerCheckboxGroupProps,
+} from '@primer/react'
+import React, {type PropsWithChildren} from 'react'
+import type {SxProp} from '../sx'
+
+export type CheckboxGroupProps = PropsWithChildren<PrimerCheckboxGroupProps> & SxProp
+
+const CheckboxGroupImpl = (props: CheckboxGroupProps) => {
+  return <Box as={PrimerCheckboxGroup} {...props} />
+}
+
+// Define local types based on the internal component props
+type CheckboxOrRadioGroupLabelProps = PropsWithChildren<
+  {
+    className?: string
+    visuallyHidden?: boolean
+  } & SxProp
+>
+const CheckboxOrRadioGroupLabel = (props: CheckboxOrRadioGroupLabelProps) => {
+  return <Box as={PrimerCheckboxGroup.Label} {...props} />
+}
+
+type CheckboxOrRadioGroupCaptionProps = PropsWithChildren<
+  {
+    className?: string
+  } & SxProp
+>
+const CheckboxOrRadioGroupCaption = (props: CheckboxOrRadioGroupCaptionProps) => {
+  return <Box as={PrimerCheckboxGroup.Caption} {...props} />
+}
+
+type CheckboxOrRadioGroupValidationProps = PropsWithChildren<
+  {
+    className?: string
+    variant: 'error' | 'success'
+  } & SxProp
+>
+const CheckboxOrRadioGroupValidation = (props: CheckboxOrRadioGroupValidationProps) => {
+  return <Box as={PrimerCheckboxGroup.Validation} {...props} />
+}
+
+export const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
+  Label: CheckboxOrRadioGroupLabel,
+  Caption: CheckboxOrRadioGroupCaption,
+  Validation: CheckboxOrRadioGroupValidation,
+})
diff --git a/packages/styled-react/src/components/Tooltip.tsx b/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}
diff --git a/packages/styled-react/src/deprecated.tsx b/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'
diff --git a/packages/styled-react/src/experimental.tsx b/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'
diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx
@@ -2,14 +2,12 @@ export {ActionList} from '@primer/react'
 export {Avatar} from '@primer/react'
 export {Box, type BoxProps} from './components/Box'
 export {Button} from '@primer/react'
-export {CheckboxGroup} from '@primer/react'
 export {Details} from '@primer/react'
 export {IconButton} from '@primer/react'
 export {ProgressBar} from '@primer/react'
 export {Select} from '@primer/react'
 export {Textarea} from '@primer/react'
 export {TextInput} from '@primer/react'
-export {Tooltip, type TooltipProps} from '@primer/react'
 export {type TextInputProps} from '@primer/react'
 
 // theming depends on styled-components
@@ -24,6 +22,7 @@ export {ActionMenu} from './components/ActionMenu'
 export {Autocomplete, type AutocompleteOverlayProps} from './components/Autocomplete'
 export {Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbsItemProps} from './components/Breadcrumbs'
 export {Checkbox, type CheckboxProps} from './components/Checkbox'
+export {CheckboxGroup, type CheckboxGroupProps} from './components/CheckboxGroup'
 export {CircleBadge} from './components/CircleBadge'
 export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
 export {Dialog, type DialogProps} from './components/Dialog'
@@ -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'

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@primer/react': major
 +---
++
 +Update Tooltip component to no longer support sx.
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export {default, CheckboxGroupContext} from './CheckboxGroup'`
	`1`	`+export {default, CheckboxGroupContext, type CheckboxGroupProps} from './CheckboxGroup'`
Original file line number	Diff line number	Diff line change
`@@ -84,11 +84,6 @@`
`84`	`84`	`"type": "boolean",`
`85`	`85`	`"defaultValue": "false",`
`86`	`86`	`"description": "If true, the fieldset legend will be visually hidden"`
`87`		`- },`
`88`		`- {`
`89`		`- "name": "sx",`
`90`		`- "type": "SystemStyleObject",`
`91`		`- "deprecated": true`
`92`	`87`	`}`
`93`	`88`	`]`
`94`	`89`	`},`
`@@ -132,4 +127,4 @@`
`132`	`127`	`]`
`133`	`128`	`}`
`134`	`129`	`]`
`135`		`-}`
	`130`	`+}`