From aecb903eaee9f8bfb155416acd035631b85108ca Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 1 Oct 2025 00:06:06 -0400 Subject: [PATCH 1/9] Revert "Remove sx from UnderlinePanels (#6874)" This reverts commit 15824db141ef32b3e090bcf1880f03bd9684392a. --- .changeset/chilly-lemons-promise.md | 5 - .../react/src/UnderlineNav/UnderlineNav.tsx | 6 +- .../UnderlinePanels/UnderlinePanels.tsx | 54 ++++------ .../components/UnderlineTabbedInterface.tsx | 100 ++++++++++-------- .../styled-react/src/components/TabNav.tsx | 5 +- .../src/components/UnderlinePanels.tsx | 59 ----------- packages/styled-react/src/experimental.tsx | 10 +- 7 files changed, 80 insertions(+), 159 deletions(-) delete mode 100644 .changeset/chilly-lemons-promise.md delete mode 100644 packages/styled-react/src/components/UnderlinePanels.tsx diff --git a/.changeset/chilly-lemons-promise.md b/.changeset/chilly-lemons-promise.md deleted file mode 100644 index 8eea7b9e0d2..00000000000 --- a/.changeset/chilly-lemons-promise.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": major ---- - -Remove sx from UnderlinePanels diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx index 0c8a417773d..989395eca2c 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx @@ -1,4 +1,4 @@ -import type {RefObject} from 'react' +import type {MutableRefObject, RefObject} from 'react' import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react' import {UnderlineNavContext} from './UnderlineNavContext' import type {ResizeObserverEntry} from '../hooks/useResizeObserver' @@ -144,7 +144,7 @@ export const UnderlineNav = forwardRef( forwardedRef, ) => { const backupRef = useRef(null) - const navRef = (forwardedRef ?? backupRef) as RefObject + const navRef = (forwardedRef ?? backupRef) as MutableRefObject const listRef = useRef(null) const moreMenuRef = useRef(null) const moreMenuBtnRef = useRef(null) @@ -205,7 +205,7 @@ export const UnderlineNav = forwardRef( const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children) // Check if there is any empty space on the right side of the list const availableSpace = - (navRef.current?.getBoundingClientRect().width ?? 0) - (listRef.current?.getBoundingClientRect().width ?? 0) + navRef.current.getBoundingClientRect().width - (listRef.current?.getBoundingClientRect().width ?? 0) // Calculate how many items need to be pulled in to the menu to make room for the selected menu item // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1. diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx index 1d7dc2f19c2..0a9ca088c3b 100644 --- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx +++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx @@ -11,7 +11,13 @@ import React, { import {TabContainerElement} from '@github/tab-container-element' import type {IconProps} from '@primer/octicons-react' import {createComponent} from '../../utils/create-component' -import {UnderlineItemList, UnderlineWrapper, UnderlineItem} from '../../internal/components/UnderlineTabbedInterface' +import { + UnderlineItemList, + UnderlineWrapper, + UnderlineItem, + type UnderlineItemProps, +} from '../../internal/components/UnderlineTabbedInterface' +import {type BoxProps} from '../../Box' import {useId} from '../../hooks' import {invariant} from '../../utils/invariant' import {type SxProp} from '../../sx' @@ -19,6 +25,7 @@ import {useResizeObserver, type ResizeObserverEntry} from '../../hooks/useResize import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect' import classes from './UnderlinePanels.module.css' import {clsx} from 'clsx' +import {BoxWithFallback} from '../../internal/components/BoxWithFallback' export type UnderlinePanelsProps = { /** @@ -67,7 +74,7 @@ export type TabProps = PropsWithChildren<{ }> & SxProp -export type PanelProps = React.HTMLAttributes +export type PanelProps = Omit const TabContainerComponent = createComponent(TabContainerElement, 'tab-container') @@ -97,44 +104,23 @@ const UnderlinePanels: FC = ({ let panelIndex = 0 const childrenWithProps = Children.map(children, child => { - if ( - isValidElement(child) && - (typeof child.type === 'function' || typeof child.type === 'object') && - 'displayName' in child.type && - child.type.displayName === 'UnderlinePanels.Tab' - ) { + if (isValidElement(child) && child.type === Tab) { return cloneElement(child, {id: `${parentId}-tab-${tabIndex++}`, loadingCounters, iconsVisible}) } - if ( - isValidElement(child) && - (typeof child.type === 'function' || typeof child.type === 'object') && - 'displayName' in child.type && - child.type.displayName === 'UnderlinePanels.Panel' - ) { - const childPanel = child as React.ReactElement - return cloneElement(childPanel, {'aria-labelledby': `${parentId}-tab-${panelIndex++}`}) + if (isValidElement(child) && child.type === Panel) { + return cloneElement(child, {'aria-labelledby': `${parentId}-tab-${panelIndex++}`}) } return child }) const newTabs = Children.toArray(childrenWithProps).filter(child => { - return ( - isValidElement(child) && - (typeof child.type === 'function' || typeof child.type === 'object') && - 'displayName' in child.type && - child.type.displayName === 'UnderlinePanels.Tab' - ) + return isValidElement(child) && child.type === Tab }) - const newTabPanels = Children.toArray(childrenWithProps).filter(child => { - return ( - isValidElement(child) && - (typeof child.type === 'function' || typeof child.type === 'object') && - 'displayName' in child.type && - child.type.displayName === 'UnderlinePanels.Panel' - ) - }) + const newTabPanels = Children.toArray(childrenWithProps).filter( + child => isValidElement(child) && child.type === Panel, + ) setTabs(newTabs) setTabPanels(newTabPanels) @@ -235,12 +221,8 @@ const Tab: FC = ({'aria-selected': ariaSelected, onSelect, ...props}) Tab.displayName = 'UnderlinePanels.Tab' -const Panel: FC = ({children, ...rest}) => { - return ( -
- {children} -
- ) +const Panel: FC = props => { + return } Panel.displayName = 'UnderlinePanels.Panel' diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx index 6bb6a388cae..a2887dd13ad 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx @@ -1,37 +1,36 @@ // Used for UnderlineNav and UnderlinePanels components -import React from 'react' -import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react' +import type React from 'react' +import {forwardRef, type FC, type PropsWithChildren} from 'react' import {isElement} from 'react-is' import type {IconProps} from '@primer/octicons-react' import CounterLabel from '../../CounterLabel' +import {type SxProp} from '../../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' import classes from './UnderlineTabbedInterface.module.css' import {clsx} from 'clsx' +import {BoxWithFallback} from './BoxWithFallback' // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container. export const GAP = 8 -type UnderlineWrapperProps = { +type UnderlineWrapperProps = { slot?: string - as?: As + as?: React.ElementType className?: string - ref?: React.Ref -} + ref?: React.Ref +} & SxProp -export const UnderlineWrapper = forwardRef((props, ref) => { - const {children, className, as: Component = 'nav', ...rest} = props - return ( - } - {...rest} - > - {children} - - ) -}) as PolymorphicForwardRefComponent> +export const UnderlineWrapper = forwardRef( + ({children, className, ...rest}: PropsWithChildren, forwardedRef) => { + return ( + + {children} + + ) + }, +) export const UnderlineItemList = forwardRef(({children, ...rest}: PropsWithChildren, forwardedRef) => { return ( @@ -45,8 +44,8 @@ export const LoadingCounter = () => { return } -export type UnderlineItemProps = { - as?: As | 'a' | 'button' +export type UnderlineItemProps = { + as?: React.ElementType | 'a' | 'button' className?: string iconsVisible?: boolean loadingCounters?: boolean @@ -54,29 +53,42 @@ export type UnderlineItemProps = { icon?: FC | React.ReactElement id?: string ref?: React.Ref -} & React.ComponentPropsWithoutRef +} & SxProp -export const UnderlineItem = React.forwardRef((props, ref) => { - const {as: Component = 'a', children, counter, icon: Icon, iconsVisible, loadingCounters, className, ...rest} = props - return ( - - {iconsVisible && Icon && {isElement(Icon) ? Icon : }} - {children && ( - - {children} - - )} - {counter !== undefined ? ( - loadingCounters ? ( - - +export const UnderlineItem = forwardRef( + ( + { + as = 'a', + children, + counter, + icon: Icon, + iconsVisible, + loadingCounters, + className, + ...rest + }: PropsWithChildren, + forwardedRef, + ) => { + return ( + + {iconsVisible && Icon && {isElement(Icon) ? Icon : }} + {children && ( + + {children} - ) : ( - - {counter} - - ) - ) : null} - - ) -}) as PolymorphicForwardRefComponent> + )} + {counter !== undefined ? ( + loadingCounters ? ( + + + + ) : ( + + {counter} + + ) + ) : null} + + ) + }, +) as PolymorphicForwardRefComponent<'a', UnderlineItemProps> diff --git a/packages/styled-react/src/components/TabNav.tsx b/packages/styled-react/src/components/TabNav.tsx index 961d66ee51f..8743bfa6879 100644 --- a/packages/styled-react/src/components/TabNav.tsx +++ b/packages/styled-react/src/components/TabNav.tsx @@ -13,9 +13,8 @@ const StyledTabNav = styled(PrimerTabNav).withConfig({ ${sx} ` -const TabNavImpl = ({as, ...props}: TabNavProps) => { - return -} +// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error +const TabNavImpl = ({as, ...props}: TabNavProps) => const StyledTabNavLink = styled(PrimerTabNav.Link).withConfig({ shouldForwardProp: prop => (prop as keyof TabNavLinkProps) !== 'sx', diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx deleted file mode 100644 index 1f5f68eacf1..00000000000 --- a/packages/styled-react/src/components/UnderlinePanels.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { - UnderlinePanels as PrimerUnderlinePanels, - type UnderlinePanelsProps as PrimerUnderlinePanelsProps, - type UnderlinePanelsPanelProps as PrimerUnderlinePanelsPanelProps, - type UnderlinePanelsTabProps as PrimerUnderlinePanelsTabProps, -} from '@primer/react/experimental' -import styled from 'styled-components' -import {sx, type SxProp} from '../sx' - -type UnderlinePanelsProps = PrimerUnderlinePanelsProps & SxProp - -const StyledUnderlinePanels = styled(PrimerUnderlinePanels).withConfig({ - shouldForwardProp: prop => prop !== 'sx', -})` - ${sx} -` - -// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error -const UnderlinePanelsImpl = ({as, ...props}: UnderlinePanelsProps) => ( - -) - -UnderlinePanelsImpl.displayName = 'UnderlinePanels' - -type UnderlinePanelsPanelProps = PrimerUnderlinePanelsPanelProps & SxProp - -const StyledUnderlinePanelsPanel = styled(PrimerUnderlinePanels.Panel).withConfig({ - shouldForwardProp: prop => prop !== 'sx', -})` - ${sx} -` - -// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error -const UnderlinePanelsPanel = ({as, ...props}: UnderlinePanelsPanelProps) => { - return -} - -UnderlinePanelsPanel.displayName = 'UnderlinePanels.Panel' - -type UnderlinePanelsTabProps = PrimerUnderlinePanelsTabProps & SxProp - -const StyledUnderlinePanelsTab = styled(PrimerUnderlinePanels.Tab).withConfig({ - shouldForwardProp: prop => prop !== 'sx', -})` - ${sx} -` -// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error -const UnderlinePanelsTab = ({as, ...props}: UnderlinePanelsTabProps) => ( - -) - -UnderlinePanelsTab.displayName = 'UnderlinePanels.Tab' - -const UnderlinePanels = Object.assign(UnderlinePanelsImpl, { - Tab: UnderlinePanelsTab, - Panel: UnderlinePanelsPanel, -}) - -export {UnderlinePanels, type UnderlinePanelsProps, type UnderlinePanelsTabProps, type UnderlinePanelsPanelProps} diff --git a/packages/styled-react/src/experimental.tsx b/packages/styled-react/src/experimental.tsx index f120240dc00..74ff3de83ce 100644 --- a/packages/styled-react/src/experimental.tsx +++ b/packages/styled-react/src/experimental.tsx @@ -1,5 +1,4 @@ export {Dialog, type DialogProps} from './components/Dialog' - export { PageHeader, type PageHeaderProps, @@ -7,13 +6,6 @@ export { type PageHeaderTitleProps, } from './components/PageHeader' -export { - UnderlinePanels, - type UnderlinePanelsProps, - type UnderlinePanelsTabProps, - type UnderlinePanelsPanelProps, -} from './components/UnderlinePanels' - export {Tooltip, type TooltipProps} from './components/Tooltip' -export {Table} from '@primer/react/experimental' +export {Table, UnderlinePanels} from '@primer/react/experimental' From 3d7423eef69acd0eb24b3fa071391f3fdf1ae638 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 1 Oct 2025 00:07:53 -0400 Subject: [PATCH 2/9] re-add correct TabNav type --- packages/styled-react/src/components/TabNav.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/styled-react/src/components/TabNav.tsx b/packages/styled-react/src/components/TabNav.tsx index 8743bfa6879..961d66ee51f 100644 --- a/packages/styled-react/src/components/TabNav.tsx +++ b/packages/styled-react/src/components/TabNav.tsx @@ -13,8 +13,9 @@ const StyledTabNav = styled(PrimerTabNav).withConfig({ ${sx} ` -// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error -const TabNavImpl = ({as, ...props}: TabNavProps) => +const TabNavImpl = ({as, ...props}: TabNavProps) => { + return +} const StyledTabNavLink = styled(PrimerTabNav.Link).withConfig({ shouldForwardProp: prop => (prop as keyof TabNavLinkProps) !== 'sx', From 18ef895e338c4ea056d9c2cdef39def5faa8b936 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 1 Oct 2025 00:57:22 -0400 Subject: [PATCH 3/9] readd changes --- .../UnderlinePanels/UnderlinePanels.tsx | 18 ++-- .../components/UnderlineTabbedInterface.tsx | 100 ++++++++---------- .../src/components/UnderlinePanels.tsx | 30 ++++++ packages/styled-react/src/experimental.tsx | 9 +- 4 files changed, 93 insertions(+), 64 deletions(-) create mode 100644 packages/styled-react/src/components/UnderlinePanels.tsx diff --git a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx index 0a9ca088c3b..5067ae0f922 100644 --- a/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx +++ b/packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx @@ -7,6 +7,7 @@ import React, { type FC, type PropsWithChildren, useEffect, + type ElementType, } from 'react' import {TabContainerElement} from '@github/tab-container-element' import type {IconProps} from '@primer/octicons-react' @@ -17,7 +18,6 @@ import { UnderlineItem, type UnderlineItemProps, } from '../../internal/components/UnderlineTabbedInterface' -import {type BoxProps} from '../../Box' import {useId} from '../../hooks' import {invariant} from '../../utils/invariant' import {type SxProp} from '../../sx' @@ -25,7 +25,6 @@ import {useResizeObserver, type ResizeObserverEntry} from '../../hooks/useResize import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect' import classes from './UnderlinePanels.module.css' import {clsx} from 'clsx' -import {BoxWithFallback} from '../../internal/components/BoxWithFallback' export type UnderlinePanelsProps = { /** @@ -74,7 +73,7 @@ export type TabProps = PropsWithChildren<{ }> & SxProp -export type PanelProps = Omit +export type PanelProps = React.HTMLAttributes const TabContainerComponent = createComponent(TabContainerElement, 'tab-container') @@ -104,12 +103,13 @@ const UnderlinePanels: FC = ({ let panelIndex = 0 const childrenWithProps = Children.map(children, child => { - if (isValidElement(child) && child.type === Tab) { + if (isValidElement>(child) && child.type === Tab) { return cloneElement(child, {id: `${parentId}-tab-${tabIndex++}`, loadingCounters, iconsVisible}) } if (isValidElement(child) && child.type === Panel) { - return cloneElement(child, {'aria-labelledby': `${parentId}-tab-${panelIndex++}`}) + const childPanel = child as React.ReactElement + return cloneElement(childPanel, {'aria-labelledby': `${parentId}-tab-${panelIndex++}`}) } return child }) @@ -221,8 +221,12 @@ const Tab: FC = ({'aria-selected': ariaSelected, onSelect, ...props}) Tab.displayName = 'UnderlinePanels.Tab' -const Panel: FC = props => { - return +const Panel: FC = ({children, ...rest}) => { + return ( +
+ {children} +
+ ) } Panel.displayName = 'UnderlinePanels.Panel' diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx index a2887dd13ad..6bb6a388cae 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx @@ -1,36 +1,37 @@ // Used for UnderlineNav and UnderlinePanels components -import type React from 'react' -import {forwardRef, type FC, type PropsWithChildren} from 'react' +import React from 'react' +import {type ForwardedRef, forwardRef, type FC, type PropsWithChildren, type ElementType} from 'react' import {isElement} from 'react-is' import type {IconProps} from '@primer/octicons-react' import CounterLabel from '../../CounterLabel' -import {type SxProp} from '../../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../../utils/polymorphic' import classes from './UnderlineTabbedInterface.module.css' import {clsx} from 'clsx' -import {BoxWithFallback} from './BoxWithFallback' // The gap between the list items. It is a constant because the gap is used to calculate the possible number of items that can fit in the container. export const GAP = 8 -type UnderlineWrapperProps = { +type UnderlineWrapperProps = { slot?: string - as?: React.ElementType + as?: As className?: string - ref?: React.Ref -} & SxProp + ref?: React.Ref +} -export const UnderlineWrapper = forwardRef( - ({children, className, ...rest}: PropsWithChildren, forwardedRef) => { - return ( - - {children} - - ) - }, -) +export const UnderlineWrapper = forwardRef((props, ref) => { + const {children, className, as: Component = 'nav', ...rest} = props + return ( + } + {...rest} + > + {children} + + ) +}) as PolymorphicForwardRefComponent> export const UnderlineItemList = forwardRef(({children, ...rest}: PropsWithChildren, forwardedRef) => { return ( @@ -44,8 +45,8 @@ export const LoadingCounter = () => { return } -export type UnderlineItemProps = { - as?: React.ElementType | 'a' | 'button' +export type UnderlineItemProps = { + as?: As | 'a' | 'button' className?: string iconsVisible?: boolean loadingCounters?: boolean @@ -53,42 +54,29 @@ export type UnderlineItemProps = { icon?: FC | React.ReactElement id?: string ref?: React.Ref -} & SxProp +} & React.ComponentPropsWithoutRef -export const UnderlineItem = forwardRef( - ( - { - as = 'a', - children, - counter, - icon: Icon, - iconsVisible, - loadingCounters, - className, - ...rest - }: PropsWithChildren, - forwardedRef, - ) => { - return ( - - {iconsVisible && Icon && {isElement(Icon) ? Icon : }} - {children && ( - - {children} +export const UnderlineItem = React.forwardRef((props, ref) => { + const {as: Component = 'a', children, counter, icon: Icon, iconsVisible, loadingCounters, className, ...rest} = props + return ( + + {iconsVisible && Icon && {isElement(Icon) ? Icon : }} + {children && ( + + {children} + + )} + {counter !== undefined ? ( + loadingCounters ? ( + + - )} - {counter !== undefined ? ( - loadingCounters ? ( - - - - ) : ( - - {counter} - - ) - ) : null} - - ) - }, -) as PolymorphicForwardRefComponent<'a', UnderlineItemProps> + ) : ( + + {counter} + + ) + ) : null} + + ) +}) as PolymorphicForwardRefComponent> diff --git a/packages/styled-react/src/components/UnderlinePanels.tsx b/packages/styled-react/src/components/UnderlinePanels.tsx new file mode 100644 index 00000000000..d310ed39d39 --- /dev/null +++ b/packages/styled-react/src/components/UnderlinePanels.tsx @@ -0,0 +1,30 @@ +import { + UnderlinePanels as PrimerUnderlinePanels, + type UnderlinePanelsProps as PrimerUnderlinePanelsProps, + type UnderlinePanelsPanelProps, + type UnderlinePanelsTabProps, +} from '@primer/react/experimental' +import styled from 'styled-components' +import {sx, type SxProp} from '../sx' + +type UnderlinePanelsProps = PrimerUnderlinePanelsProps & SxProp + +const StyledUnderlinePanels = styled(PrimerUnderlinePanels).withConfig({ + shouldForwardProp: prop => prop !== 'sx', +})` + ${sx} +` + +// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error +const UnderlinePanelsImpl = ({as, ...props}: UnderlinePanelsProps) => ( + +) + +UnderlinePanelsImpl.displayName = 'UnderlinePanels' + +const UnderlinePanels = Object.assign(UnderlinePanelsImpl, { + Tab: PrimerUnderlinePanels.Tab, + Panel: PrimerUnderlinePanels.Panel, +}) + +export {UnderlinePanels, type UnderlinePanelsProps, type UnderlinePanelsTabProps, type UnderlinePanelsPanelProps} diff --git a/packages/styled-react/src/experimental.tsx b/packages/styled-react/src/experimental.tsx index 74ff3de83ce..65ea374d430 100644 --- a/packages/styled-react/src/experimental.tsx +++ b/packages/styled-react/src/experimental.tsx @@ -8,4 +8,11 @@ export { export {Tooltip, type TooltipProps} from './components/Tooltip' -export {Table, UnderlinePanels} from '@primer/react/experimental' +export { + UnderlinePanels, + type UnderlinePanelsProps, + type UnderlinePanelsTabProps, + type UnderlinePanelsPanelProps, +} from './components/UnderlinePanels' + +export {Table} from '@primer/react/experimental' From 5c3f726f45b2ea9d5c11bca3a61f9e856a6b01cd Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 1 Oct 2025 00:57:49 -0400 Subject: [PATCH 4/9] Create rude-windows-bathe.md --- .changeset/rude-windows-bathe.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/rude-windows-bathe.md diff --git a/.changeset/rude-windows-bathe.md b/.changeset/rude-windows-bathe.md new file mode 100644 index 00000000000..14cd81009e2 --- /dev/null +++ b/.changeset/rude-windows-bathe.md @@ -0,0 +1,6 @@ +--- +"@primer/react": patch +"@primer/styled-react": patch +--- + +Remove sx from UnderlinePanels From b7902d34168c261e383e17c74c17eed88418bfe9 Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 1 Oct 2025 00:58:52 -0400 Subject: [PATCH 5/9] readd changes --- packages/react/src/UnderlineNav/UnderlineNav.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx index 989395eca2c..0c8a417773d 100644 --- a/packages/react/src/UnderlineNav/UnderlineNav.tsx +++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx @@ -1,4 +1,4 @@ -import type {MutableRefObject, RefObject} from 'react' +import type {RefObject} from 'react' import React, {useRef, forwardRef, useCallback, useState, useEffect} from 'react' import {UnderlineNavContext} from './UnderlineNavContext' import type {ResizeObserverEntry} from '../hooks/useResizeObserver' @@ -144,7 +144,7 @@ export const UnderlineNav = forwardRef( forwardedRef, ) => { const backupRef = useRef(null) - const navRef = (forwardedRef ?? backupRef) as MutableRefObject + const navRef = (forwardedRef ?? backupRef) as RefObject const listRef = useRef(null) const moreMenuRef = useRef(null) const moreMenuBtnRef = useRef(null) @@ -205,7 +205,7 @@ export const UnderlineNav = forwardRef( const widthToFitIntoList = getItemsWidth(prospectiveListItem.props.children) // Check if there is any empty space on the right side of the list const availableSpace = - navRef.current.getBoundingClientRect().width - (listRef.current?.getBoundingClientRect().width ?? 0) + (navRef.current?.getBoundingClientRect().width ?? 0) - (listRef.current?.getBoundingClientRect().width ?? 0) // Calculate how many items need to be pulled in to the menu to make room for the selected menu item // I.e. if we need to pull 2 items in (index 0 and index 1), breakpoint (index) will return 1. From abef2973da035ee1fe10dd944eab5d6476f4592a Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 1 Oct 2025 00:59:48 -0400 Subject: [PATCH 6/9] readd file --- .changeset/chilly-lemons-promise.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chilly-lemons-promise.md diff --git a/.changeset/chilly-lemons-promise.md b/.changeset/chilly-lemons-promise.md new file mode 100644 index 00000000000..c566bd1c66a --- /dev/null +++ b/.changeset/chilly-lemons-promise.md @@ -0,0 +1,5 @@ +--- +"@primer/react": major +--- + +Remove sx from UnderlinePanels \ No newline at end of file From 3bfcefb3500d9997e1ecf66a41e02c4d86f615d9 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 1 Oct 2025 01:00:42 -0400 Subject: [PATCH 7/9] Update UnderlinePanels usage in changeset --- .changeset/rude-windows-bathe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rude-windows-bathe.md b/.changeset/rude-windows-bathe.md index 14cd81009e2..638323ea527 100644 --- a/.changeset/rude-windows-bathe.md +++ b/.changeset/rude-windows-bathe.md @@ -3,4 +3,4 @@ "@primer/styled-react": patch --- -Remove sx from UnderlinePanels +use UnderlinePanles.Tab, UnderlinePanels.Panel from @primer/react From 8c6f2076d0d968ba52d7032e12ea30f519568e5f Mon Sep 17 00:00:00 2001 From: Marie Lucca Date: Wed, 1 Oct 2025 01:06:30 -0400 Subject: [PATCH 8/9] remove test --- .../primer-react-experimental.browser.test.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx index 86ea2df3afd..f43f68c6ec0 100644 --- a/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react-experimental.browser.test.tsx @@ -37,16 +37,4 @@ describe('@primer/react/experimental', () => { ) expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') }) - - test('UnderlinePanels.Panel supports `sx` prop', () => { - render( - - tab - - panel - - , - ) - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - }) }) From 2c7b3b0240181ec7ac26c8119668d9f0f86935e1 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 1 Oct 2025 01:09:53 -0400 Subject: [PATCH 9/9] Update .changeset/rude-windows-bathe.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .changeset/rude-windows-bathe.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rude-windows-bathe.md b/.changeset/rude-windows-bathe.md index 638323ea527..194c1e0afab 100644 --- a/.changeset/rude-windows-bathe.md +++ b/.changeset/rude-windows-bathe.md @@ -3,4 +3,4 @@ "@primer/styled-react": patch --- -use UnderlinePanles.Tab, UnderlinePanels.Panel from @primer/react +use UnderlinePanels.Tab, UnderlinePanels.Panel from @primer/react