chore: Post 3000 LemonButtton cleanup (#19540)

frontend/src/layout/navigation-3000/components/MinimalNavigation.tsx

@@ -34,7 +34,6 @@ export function MinimalNavigation(): JSX.Element {
                 >
                     <LemonButton
                         type="tertiary"
-                        status="muted"
                         icon={<Lettermark name={currentTeam?.name} />}
                         onClick={toggleProjectSwitcher}
                     >
@@ -50,7 +49,6 @@ export function MinimalNavigation(): JSX.Element {
             >
                 <LemonButton
                     type="tertiary"
-                    status="muted"
                     icon={<ProfilePicture user={user} size="md" />}
                     onClick={toggleSitePopover}
                 >

frontend/src/layout/navigation-3000/components/NavbarButton.tsx

@@ -114,7 +114,7 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
                 className={clsx('NavbarButton', isUsingNewNav && here && 'NavbarButton--here')}
                 fullWidth
                 type="secondary"
-                stealth={true}
+                status="alt"
                 {...buttonProps}
             >
                 {content}

frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx

@@ -151,7 +151,7 @@ export function SidePanel(): JSX.Element | null {
                                     data-attr={`sidepanel-tab-${tab}`}
                                     active={activeTab === tab}
                                     type="secondary"
-                                    stealth={true}
+                                    status="alt"
                                 >
                                     {label}
                                 </LemonButton>
@@ -162,7 +162,7 @@ export function SidePanel(): JSX.Element | null {
                 {menuOptions ? (
                     <div className="shrink-0 flex items-center m-2">
                         <LemonMenu items={menuOptions}>
-                            <LemonButton size="small" status="stealth" icon={<IconEllipsis />} />
+                            <LemonButton size="small" icon={<IconEllipsis />} />
                         </LemonMenu>
                     </div>
                 ) : null}

frontend/src/layout/navigation/OrganizationSwitcher.tsx

@@ -36,7 +36,6 @@ export function OtherOrganizationButton({
         <LemonButton
             onClick={() => updateCurrentOrganization(organization.id)}
             icon={<Lettermark index={index} name={organization.name} />}
-            status="stealth"
             title={`Switch to organization ${organization.name}`}
             fullWidth
         >
@@ -87,7 +86,6 @@ export function OrganizationSwitcherOverlay(): JSX.Element {
             {currentOrganization && (
                 <LemonButton
                     icon={<Lettermark name={currentOrganization.name} />}
-                    status="stealth"
                     title={`Switch to organization ${currentOrganization.name}`}
                     fullWidth
                 >

frontend/src/layout/navigation/ProjectSwitcher.tsx

@@ -79,7 +79,6 @@ function CurrentProjectButton({ onClickInside }: { onClickInside?: () => void })
                 },
             }}
             title={`Switch to project ${currentTeam.name}`}
-            status="stealth"
             fullWidth
         >
             <ProjectName team={currentTeam} />
@@ -105,7 +104,6 @@ function OtherProjectButton({ team, onClickInside }: { team: TeamBasicType; onCl
                 },
             }}
             title={`Switch to project ${team.name}`}
-            status="stealth"
             fullWidth
         >
             <ProjectName team={team} />

frontend/src/layout/navigation/SideBar/PageButton.tsx

@@ -32,7 +32,6 @@ export function PageButton({ title, sideAction, identifier, highlight, ...button
             ? activeScene === identifier || sceneBreadcrumbKeys.includes(identifier)
             : activeScene === Scene.Dashboard && identifier === lastDashboardId)
 
-    const buttonStatus = isActive ? 'primary' : 'stealth'
     title = title || sceneConfigurations[identifier]?.name || identifier
 
     return (
@@ -41,7 +40,6 @@ export function PageButton({ title, sideAction, identifier, highlight, ...button
                 {sideAction ? (
                     <LemonButton
                         fullWidth
-                        status={buttonStatus}
                         active={isActive}
                         onClick={hideSideBarMobile}
                         sideAction={{
@@ -58,7 +56,6 @@ export function PageButton({ title, sideAction, identifier, highlight, ...button
                 ) : (
                     <LemonButton
                         fullWidth
-                        status={buttonStatus}
                         active={isActive}
                         data-attr={`menu-item-${identifier.toString().toLowerCase()}`}
                         onClick={hideSideBarMobile}

frontend/src/layout/navigation/SideBar/SideBar.tsx

@@ -314,7 +314,6 @@ function AppUrls({ setIsToolbarLaunchShown }: { setIsToolbarLaunchShown: (state:
                     {authorizedUrls.map((appUrl, index) => (
                         <LemonButton
                             className="LaunchToolbarButton"
-                            status="stealth"
                             fullWidth
                             key={index}
                             onClick={() => setIsToolbarLaunchShown(false)}
@@ -330,7 +329,6 @@ function AppUrls({ setIsToolbarLaunchShown }: { setIsToolbarLaunchShown: (state:
                         </LemonButton>
                     ))}
                     <LemonButton
-                        status="stealth"
                         data-attr="sidebar-launch-toolbar-add-new-url"
                         fullWidth
                         to={`${urls.toolbarLaunch()}?addNew=true`}

frontend/src/layout/navigation/SideBar/SideBarApps.tsx

@@ -43,11 +43,7 @@ export function SideBarApps(): JSX.Element {
                                           hideSideBarMobile()
                                       },
                                       overlay: (
-                                          <LemonButton
-                                              status="stealth"
-                                              onClick={() => openAppSourceEditor(id, pluginId)}
-                                              fullWidth
-                                          >
+                                          <LemonButton onClick={() => openAppSourceEditor(id, pluginId)} fullWidth>
                                               Edit source code
                                           </LemonButton>
                                       ),

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -66,7 +66,6 @@ function AccountInfo(): JSX.Element {
                 to={urls.settings('user')}
                 onClick={closeSitePopover}
                 data-attr="top-menu-item-me"
-                status="stealth"
                 fullWidth
                 tooltip="Account settings"
                 tooltipPlacement="left"
@@ -93,7 +92,6 @@ function CurrentOrganization({ organization }: { organization: OrganizationBasic
                 data-attr="top-menu-item-org-settings"
                 icon={<Lettermark name={organization.name} />}
                 sideIcon={<IconSettings />}
-                status="stealth"
                 fullWidth
                 to={urls.settings('organization')}
                 onClick={closeSitePopover}
@@ -229,7 +227,7 @@ function SignOutButton(): JSX.Element {
     const { logout } = useActions(userLogic)
 
     return (
-        <LemonButton onClick={logout} icon={<IconLogout />} status="stealth" fullWidth data-attr="top-menu-item-logout">
+        <LemonButton onClick={logout} icon={<IconLogout />} fullWidth data-attr="top-menu-item-logout">
             Sign out
         </LemonButton>
     )

frontend/src/layout/navigation/TopBar/YearInHogButton.tsx

@@ -22,7 +22,7 @@ export function YearInHogButton({ url }: { url: string | null }): JSX.Element |
             <div className={'absolute top-0 left-0 w-full h-full YearInHog__mask'} />
             <LemonButton
                 icon={<XmasTree />}
-                type={'secondary'}
+                type="secondary"
                 to={url}
                 targetBlank={true}
                 size={'small'}

frontend/src/lib/components/ActivationSidebar/ActivationSidebar.tsx

@@ -37,7 +37,6 @@ export const ActivationTask = ({
         fullWidth: true,
         type: 'secondary',
         icon: completed ? <IconCheckmark /> : skipped ? <IconClose /> : null,
-        status: completed ? 'primary-alt' : skipped ? 'muted' : undefined,
         tooltip: name,
     }
     if (url) {
@@ -58,7 +57,6 @@ export const ActivationTask = ({
                         icon: <IconClose />,
                         tooltip: 'Skip task',
                         onClick: () => skipTask(id),
-                        status: 'muted',
                     }}
                 >
                     {content}

frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx

@@ -71,7 +71,7 @@ const DashboardRelationRow = ({
             <span className="grow" />
             <LemonButton
                 type="secondary"
-                status={isAlreadyOnDashboard ? 'danger' : 'primary'}
+                status={isAlreadyOnDashboard ? 'danger' : 'default'}
                 loading={dashboardWithActiveAPICall === dashboard.id}
                 disabledReason={
                     !canEditInsight

frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx

@@ -243,14 +243,12 @@ function AnnotationCard({ annotation }: { annotation: AnnotationType }): JSX.Ele
                 <LemonButton
                     size="small"
                     icon={<IconEdit />}
-                    status="muted"
                     tooltip="Edit this annotation"
                     onClick={() => openModalToEditAnnotation(annotation, insightId)}
                 />
                 <LemonButton
                     size="small"
                     icon={<IconDelete />}
-                    status="muted"
                     tooltip="Delete this annotation"
                     onClick={() => deleteAnnotation(annotation)}
                 />

frontend/src/lib/components/Cards/CardMeta.tsx

@@ -70,8 +70,6 @@ export function CardMeta({
                                 <LemonButton
                                     icon={!areDetailsShown ? <IconSubtitles /> : <IconSubtitlesOff />}
                                     onClick={() => setAreDetailsShown((state) => !state)}
-                                    type="tertiary"
-                                    status="muted"
                                     size="small"
                                 >
                                     {showDetailsButtonLabel && `${!areDetailsShown ? 'Show' : 'Hide'} details`}

frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx

@@ -117,12 +117,11 @@ export function InsightMeta({
                 <>
                     {allInteractionsAllowed && (
                         <>
-                            <LemonButton status="stealth" to={urls.insightView(short_id)} fullWidth>
+                            <LemonButton to={urls.insightView(short_id)} fullWidth>
                                 View
                             </LemonButton>
                             {refresh && (
                                 <LemonButton
-                                    status="stealth"
                                     onClick={() => {
                                         refresh()
                                         reportDashboardItemRefreshed(insight)
@@ -136,13 +135,11 @@ export function InsightMeta({
                     )}
                     {editable && updateColor && (
                         <LemonButtonWithDropdown
-                            status="stealth"
                             dropdown={{
                                 overlay: Object.values(InsightColor).map((availableColor) => (
                                     <LemonButton
                                         key={availableColor}
                                         active={availableColor === (ribbonColor || InsightColor.White)}
-                                        status="stealth"
                                         onClick={() => updateColor(availableColor)}
                                         icon={
                                             availableColor !== InsightColor.White ? (
@@ -168,12 +165,10 @@ export function InsightMeta({
                     )}
                     {editable && moveToDashboard && otherDashboards.length > 0 && (
                         <LemonButtonWithDropdown
-                            status="stealth"
                             dropdown={{
                                 overlay: otherDashboards.map((otherDashboard) => (
                                     <LemonButton
                                         key={otherDashboard.id}
-                                        status="stealth"
                                         onClick={() => {
                                             moveToDashboard(otherDashboard)
                                         }}
@@ -194,17 +189,16 @@ export function InsightMeta({
                     )}
                     <LemonDivider />
                     {editable && allInteractionsAllowed && (
-                        <LemonButton status="stealth" to={urls.insightEdit(short_id)} fullWidth>
+                        <LemonButton to={urls.insightEdit(short_id)} fullWidth>
                             Edit
                         </LemonButton>
                     )}
                     {editable && (
-                        <LemonButton status="stealth" onClick={rename} fullWidth>
+                        <LemonButton onClick={rename} fullWidth>
                             Rename
                         </LemonButton>
                     )}
                     <LemonButton
-                        status="stealth"
                         onClick={duplicate}
                         fullWidth
                         data-attr={

frontend/src/lib/components/Cards/TextCard/TextCard.tsx

@@ -79,7 +79,6 @@ export function TextCardInternal(
                         overlay={
                             <>
                                 <LemonButton
-                                    status="stealth"
                                     fullWidth
                                     onClick={() =>
                                         dashboardId && push(urls.dashboardTextTile(dashboardId, textTile.id))
@@ -91,12 +90,10 @@ export function TextCardInternal(
 
                                 {moveToDashboard && otherDashboards.length > 0 && (
                                     <LemonButtonWithDropdown
-                                        status="stealth"
                                         dropdown={{
                                             overlay: otherDashboards.map((otherDashboard) => (
                                                 <LemonButton
                                                     key={otherDashboard.id}
-                                                    status="stealth"
                                                     onClick={() => {
                                                         moveToDashboard(otherDashboard)
                                                     }}
@@ -115,12 +112,7 @@ export function TextCardInternal(
                                         Move to
                                     </LemonButtonWithDropdown>
                                 )}
-                                <LemonButton
-                                    status="stealth"
-                                    onClick={duplicate}
-                                    fullWidth
-                                    data-attr={'duplicate-text-from-dashboard'}
-                                >
+                                <LemonButton onClick={duplicate} fullWidth data-attr={'duplicate-text-from-dashboard'}>
                                     Duplicate
                                 </LemonButton>
                                 {moreButtons && (

frontend/src/lib/components/CompactList/CompactList.stories.tsx

@@ -38,7 +38,7 @@ export function CompactList_({ loading }: { loading: boolean }): JSX.Element {
                         { properties: { name: 'Person 8' } },
                     ]}
                     renderRow={(person, index) => (
-                        <LemonButton key={index} fullWidth onClick={() => {}}>
+                        <LemonButton key={index} fullWidth>
                             <PersonDisplay withIcon person={person} />
                         </LemonButton>
                     )}
@@ -58,7 +58,7 @@ export function CompactList_({ loading }: { loading: boolean }): JSX.Element {
                     }}
                     items={[]}
                     renderRow={(person, index) => (
-                        <LemonButton key={index} fullWidth onClick={() => {}}>
+                        <LemonButton key={index} fullWidth>
                             <PersonDisplay withIcon person={person} />
                         </LemonButton>
                     )}

frontend/src/lib/components/DateFilter/DateFilter.tsx

@@ -120,7 +120,6 @@ export function DateFilter({
                                 key={key}
                                 onClick={() => setDate(values[0] || null, values[1] || null)}
                                 active={isActive}
-                                status="stealth"
                                 fullWidth
                             >
                                 {key === CUSTOM_OPTION_KEY ? CUSTOM_OPTION_VALUE : key}
@@ -143,10 +142,10 @@ export function DateFilter({
                     />
                 )}
                 <LemonDivider />
-                <LemonButton onClick={openDateToNow} active={isDateToNow} status="stealth" fullWidth>
+                <LemonButton onClick={openDateToNow} active={isDateToNow} fullWidth>
                     From custom date until now…
                 </LemonButton>
-                <LemonButton onClick={openFixedRange} active={isFixedRange} status="stealth" fullWidth>
+                <LemonButton onClick={openFixedRange} active={isFixedRange} fullWidth>
                     Custom fixed date range…
                 </LemonButton>
             </div>
@@ -160,8 +159,7 @@ export function DateFilter({
             disabled={disabled}
             className={className}
             size={size ?? 'small'}
-            type={'secondary'}
-            status="stealth"
+            type="secondary"
             dropdown={{
                 onClickOutside: close,
                 visible: isVisible,

frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx

@@ -1,7 +1,6 @@
 import './RollingDateRangeFilter.scss'
 
 import { LemonButton, LemonInput, LemonSelect, LemonSelectOptions } from '@posthog/lemon-ui'
-import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { dayjs } from 'lib/dayjs'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
@@ -42,10 +41,9 @@ export function RollingDateRangeFilter({
     return (
         <Tooltip title={makeLabel ? makeLabel(formattedDate) : undefined}>
             <LemonButton
-                className={clsx('RollingDateRangeFilter')}
+                className="RollingDateRangeFilter"
                 data-attr="rolling-date-range-filter"
                 onClick={select}
-                status="stealth"
                 active={selected}
             >
                 <p className="RollingDateRangeFilter__label">In the last</p>

frontend/src/lib/components/DebugNotice.tsx

@@ -31,13 +31,7 @@ export function DebugNotice(): JSX.Element | null {
         <div className="bg-bg-light cursor-pointer border-t" onClick={() => setNoticeHidden(true)}>
             <div className="p-2 border-l-4 border-primary text-primary-3000 truncate flex justify-between">
                 <b>DEBUG mode</b>
-                <LemonButton
-                    status="primary-alt"
-                    icon={<IconClose />}
-                    size="small"
-                    noPadding
-                    onClick={() => setNoticeHidden(true)}
-                />
+                <LemonButton icon={<IconClose />} size="small" noPadding onClick={() => setNoticeHidden(true)} />
             </div>
             <div className="p-2 border-l-4 border-danger text-danger-dark truncate">
                 Branch: <b>{debugInfo.branch}</b>