diff --git a/static/app/components/nav/primary/components.tsx b/static/app/components/nav/primary/components.tsx index 6863217d5e7669..d518dddc5dbd90 100644 --- a/static/app/components/nav/primary/components.tsx +++ b/static/app/components/nav/primary/components.tsx @@ -53,12 +53,20 @@ function recordPrimaryItemClick(analyticsKey: string, organization: Organization export function SidebarItem({ children, + label, + showLabel, ...props -}: {children: React.ReactNode} & React.HTMLAttributes<HTMLElement>) { +}: { + children: React.ReactNode; + label: string; + showLabel: boolean; +} & React.HTMLAttributes<HTMLElement>) { const {layout} = useNavContext(); return ( <IconDefaultsProvider legacySize={layout === NavLayout.MOBILE ? '14px' : '16px'}> - <li {...props}>{children}</li> + <Tooltip title={label} disabled={showLabel} position="right" skipWrapper delay={0}> + <li {...props}>{children}</li> + </Tooltip> </IconDefaultsProvider> ); } @@ -76,7 +84,7 @@ export function SidebarMenu({ const showLabel = forceLabel || layout === NavLayout.MOBILE; return ( - <SidebarItem> + <SidebarItem label={label} showLabel={showLabel}> <DropdownMenu position={layout === NavLayout.MOBILE ? 'bottom' : 'right-end'} shouldApplyMinWidth={false} @@ -120,21 +128,19 @@ export function SidebarLink({ const showLabel = forceLabel || layout === NavLayout.MOBILE; return ( - <SidebarItem> - <Tooltip title={label} disabled={showLabel} position="right" skipWrapper> - <NavLink - {...linkProps} - onClick={() => recordPrimaryItemClick(analyticsKey, organization)} - aria-selected={isActive} - aria-current={isActive ? 'page' : undefined} - aria-label={showLabel ? undefined : label} - isMobile={layout === NavLayout.MOBILE} - > - <InteractionStateLayer hasSelectedBackground={isActive} /> - {children} - {showLabel ? label : null} - </NavLink> - </Tooltip> + <SidebarItem label={label} showLabel={showLabel}> + <NavLink + {...linkProps} + onClick={() => recordPrimaryItemClick(analyticsKey, organization)} + aria-selected={isActive} + aria-current={isActive ? 'page' : undefined} + aria-label={showLabel ? undefined : label} + isMobile={layout === NavLayout.MOBILE} + > + <InteractionStateLayer hasSelectedBackground={isActive} /> + {children} + {showLabel ? label : null} + </NavLink> </SidebarItem> ); } @@ -151,20 +157,22 @@ export function SidebarButton({ const showLabel = layout === NavLayout.MOBILE; return ( - <NavButton - {...buttonProps} - isMobile={layout === NavLayout.MOBILE} - aria-label={showLabel ? undefined : label} - onClick={(e: React.MouseEvent<HTMLElement>) => { - recordPrimaryItemClick(analyticsKey, organization); - buttonProps.onClick?.(e); - onClick?.(e); - }} - > - <InteractionStateLayer /> - {children} - {showLabel ? label : null} - </NavButton> + <SidebarItem label={label} showLabel={showLabel}> + <NavButton + {...buttonProps} + isMobile={layout === NavLayout.MOBILE} + aria-label={showLabel ? undefined : label} + onClick={(e: React.MouseEvent<HTMLElement>) => { + recordPrimaryItemClick(analyticsKey, organization); + buttonProps.onClick?.(e); + onClick?.(e); + }} + > + <InteractionStateLayer /> + {children} + {showLabel ? label : null} + </NavButton> + </SidebarItem> ); } diff --git a/static/app/components/nav/primary/onboarding.tsx b/static/app/components/nav/primary/onboarding.tsx index 5908f61bf5ac0d..bebbab714c5344 100644 --- a/static/app/components/nav/primary/onboarding.tsx +++ b/static/app/components/nav/primary/onboarding.tsx @@ -73,7 +73,7 @@ function OnboardingItem({ return ( <GuideAnchor target="onboarding_sidebar" position="right"> - <SidebarItem> + <SidebarItem label={label} showLabel={showLabel}> <NavButton {...overlayTriggerProps} isMobile={layout === NavLayout.MOBILE} diff --git a/static/app/components/nav/primary/serviceIncidents.tsx b/static/app/components/nav/primary/serviceIncidents.tsx index 2e47a71c2c2d5c..d954fc48f8b8f7 100644 --- a/static/app/components/nav/primary/serviceIncidents.tsx +++ b/static/app/components/nav/primary/serviceIncidents.tsx @@ -1,8 +1,8 @@ +import {Fragment} from 'react'; import styled from '@emotion/styled'; import { SidebarButton, - SidebarItem, SidebarItemUnreadIndicator, } from 'sentry/components/nav/primary/components'; import { @@ -24,7 +24,7 @@ function ServiceIncidentsButton({incidents}: {incidents: StatuspageIncident[]}) } = usePrimaryButtonOverlay(); return ( - <SidebarItem> + <Fragment> <SidebarButton analyticsKey="statusupdate" label={t('Service status')} @@ -42,7 +42,7 @@ function ServiceIncidentsButton({incidents}: {incidents: StatuspageIncident[]}) ))} </PrimaryButtonOverlay> )} - </SidebarItem> + </Fragment> ); } export function PrimaryNavigationServiceIncidents() { diff --git a/static/app/components/nav/primary/whatsNew.tsx b/static/app/components/nav/primary/whatsNew.tsx index 6db26720ca5f78..080c7745d8711e 100644 --- a/static/app/components/nav/primary/whatsNew.tsx +++ b/static/app/components/nav/primary/whatsNew.tsx @@ -3,7 +3,6 @@ import {Fragment, useEffect, useMemo} from 'react'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import { SidebarButton, - SidebarItem, SidebarItemUnreadIndicator, } from 'sentry/components/nav/primary/components'; import { @@ -127,7 +126,7 @@ export function PrimaryNavigationWhatsNew() { } = usePrimaryButtonOverlay(); return ( - <SidebarItem> + <Fragment> <SidebarButton analyticsKey="broadcasts" label={t("What's New")} @@ -143,6 +142,6 @@ export function PrimaryNavigationWhatsNew() { <WhatsNewContent unseenPostIds={unseenPostIds} /> </PrimaryButtonOverlay> )} - </SidebarItem> + </Fragment> ); } diff --git a/static/gsApp/components/tryBusinessSidebarItem.tsx b/static/gsApp/components/tryBusinessSidebarItem.tsx index 1920b7bd97732a..e9830c965e8d1c 100644 --- a/static/gsApp/components/tryBusinessSidebarItem.tsx +++ b/static/gsApp/components/tryBusinessSidebarItem.tsx @@ -3,7 +3,6 @@ import {Component} from 'react'; import {prefersStackedNav} from 'sentry/components/nav/prefersStackedNav'; import { SidebarButton, - SidebarItem as NavSidebarItem, SidebarItemUnreadIndicator, } from 'sentry/components/nav/primary/components'; import SidebarItem from 'sentry/components/sidebar/sidebarItem'; @@ -45,19 +44,17 @@ function TryBusinessNavigationItem({ const showIsNew = isNew && !tryBusinessSeen; return ( - <NavSidebarItem> - <SidebarButton - label={t('Try Business')} - onClick={() => { - setTryBusinessSeen(true); - onClick(); - }} - analyticsKey="try-business" - > - <IconBusiness size="md" /> - {showIsNew && <SidebarItemUnreadIndicator />} - </SidebarButton> - </NavSidebarItem> + <SidebarButton + label={t('Try Business')} + onClick={() => { + setTryBusinessSeen(true); + onClick(); + }} + analyticsKey="try-business" + > + <IconBusiness size="md" /> + {showIsNew && <SidebarItemUnreadIndicator />} + </SidebarButton> ); }