Skip to content

feat(ui): Add debug FeatureBadge variant #116000

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chromy merged 3 commits into from
May 22, 2026
+7 −2
Merged

feat(ui): Add debug FeatureBadge variant #116000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a7e5a0b
feat(ui): Add debug FeatureBadge variant
chromy May 21, 2026
cb57450
Update static/app/components/core/badge/featureBadge.tsx
chromy May 22, 2026
8e5a0e5
Update static/app/components/core/badge/featureBadge.figma.tsx
chromy May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions static/app/components/core/badge/featureBadge.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ figma.connect(
beta: 'beta',
new: 'new',
experimental: 'experimental',
debug: 'debug',
}),
},
example: props => <FeatureBadge type={props.type} />,
Expand Down
6 changes: 5 additions & 1 deletion static/app/components/core/badge/featureBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styled from '@emotion/styled';
import {Tooltip, type TooltipProps} from '@sentry/scraps/tooltip';

import {IconBroadcast} from 'sentry/icons/iconBroadcast';
import {IconBug} from 'sentry/icons/iconBug';
import {IconLab} from 'sentry/icons/iconLab';
import {t} from 'sentry/locale';
import type {TagVariant} from 'sentry/utils/theme';
Expand All @@ -16,24 +17,27 @@ const defaultTitles: Record<FeatureBadgeProps['type'], string> = {
experimental: t(
'This feature is experimental! Try it out and let us know what you think. No promises!'
),
debug: t('This UI is for debugging purposes only'),
};

const variantMap: Record<FeatureBadgeProps['type'], TagVariant> = {
alpha: 'promotion',
beta: 'warning',
new: 'success',
experimental: 'muted',
debug: 'danger',
};

const iconMap: Record<FeatureBadgeProps['type'], React.ReactNode> = {
alpha: <IconLab isSolid size="xs" aria-hidden />,
beta: <IconLab isSolid size="xs" aria-hidden />,
new: <IconBroadcast size="xs" aria-hidden />,
Copy link
Copy Markdown
Contributor

@sentry sentry Bot May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The debug feature badge is incorrectly assigned the danger variant instead of the intended info variant in the variantMap.
Severity: LOW

Suggested Fix

In static/app/components/core/badge/featureBadge.tsx, change the variantMap entry for debug from 'danger' to 'info' to match the intended UI specification.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: static/app/components/core/badge/featureBadge.tsx#L34

Potential issue: The `variantMap` in `static/app/components/core/badge/featureBadge.tsx`
incorrectly maps the `debug` feature to the `danger` variant. The pull request's
description specifies that it should use the `info` variant. This results in the debug
badge being displayed with a red, "danger" style instead of a more neutral, "info"
style, which could be visually misleading for a standard debug/internal feature. This is
a UI semantic mismatch that contradicts the feature's specification.

Did we get this right? 👍 / 👎 to inform future reviews.

experimental: <IconLab isSolid size="xs" aria-hidden />,
debug: <IconBug size="xs" aria-hidden />,
};

export interface FeatureBadgeProps extends Omit<TagProps, 'children' | 'variant'> {
type: 'alpha' | 'beta' | 'new' | 'experimental';
type: 'alpha' | 'beta' | 'new' | 'experimental' | 'debug';
tooltipProps?: Partial<TooltipProps>;
}

Expand Down
2 changes: 1 addition & 1 deletion static/gsApp/views/seerAutomation/components/projectDetails/nightShift.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export function NightShift({canWrite, project}: Props) {
title={
<Flex gap="xs" align="center">
{t('Manually trigger night shift')}
<FeatureBadge type="alpha" />
<FeatureBadge type="debug" />
</Flex>
}
>
Expand Down
Loading