diff --git a/.changeset/rich-walls-fold.md b/.changeset/rich-walls-fold.md new file mode 100644 index 00000000000..3686058b6fa --- /dev/null +++ b/.changeset/rich-walls-fold.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Update SideNav component to no longer support sx. diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx index 0f47c4ca639..0e80ceb2855 100644 --- a/packages/react/src/SideNav.tsx +++ b/packages/react/src/SideNav.tsx @@ -4,9 +4,7 @@ import Link, {type LinkProps} from './Link' import type React from 'react' import {type PropsWithChildren} from 'react' import {clsx} from 'clsx' -import type {SxProp} from './sx' import classes from './SideNav.module.css' -import {BoxWithFallback} from './internal/components/BoxWithFallback' type SideNavBaseProps = { as?: React.ElementType @@ -15,16 +13,15 @@ type SideNavBaseProps = { className?: string children?: React.ReactNode 'aria-label'?: string -} & SxProp +} function SideNav({ - as = 'nav', + as: Component = 'nav', variant = 'normal', className, bordered, children, 'aria-label': ariaLabel, - sx: sxProp, }: SideNavBaseProps) { const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal' const newClassName = clsx( @@ -39,9 +36,9 @@ function SideNav({ ) return ( - + {children} - + ) } @@ -58,15 +55,9 @@ const SideNavLink = ({selected, to, variant, className, children, ...rest}: Styl // according to their docs, NavLink supports aria-current: // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string return ( - + {children} - + ) }