badge: chonkify badge and tags (#86207)

Designs have changed, this PR adjusts them to the latest spec
getsentry · Mar 5, 2025 · d8f014d · d8f014d
1 parent d4f1917
commit d8f014d
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 27 deletions.
diff --git a/static/app/components/core/badge/index.chonk.tsx b/static/app/components/core/badge/index.chonk.tsx
@@ -50,62 +50,56 @@ function makeChonkBadgeTheme(
     case 'alpha':
       return {
         color: theme.colors.static.black,
-        // @TODO(jonasbadalic) should this use theme colors?
-        background: `linear-gradient(103deg, #EE8019 0%, #FAA80A 25%, #FBB20B 50%, #FAA80A 75%, #EE8019 100%);`,
+        background: theme.colors.static.pink400,
       };
     case 'beta':
       return {
-        color: theme.colors.static.white,
-        // @TODO(jonasbadalic) should this use theme colors?
-        background: `linear-gradient(103deg, #FC8B61 0%, #FC5F64 50%, #F32474 100%);`,
+        color: theme.colors.static.black,
+        background: theme.colors.static.yellow400,
       };
     case 'new':
       return {
-        color: theme.colors.static.white,
-        // @TODO(jonasbadalic) should this use theme colors?
-        background: `linear-gradient(103deg, #7B51F8 0%, #F644AB 100%);`,
+        color: theme.colors.static.black,
+        background: theme.colors.static.green400,
       };
     case 'experimental':
       return {
-        color: theme.colors.static.white,
-        // @TODO(jonasbadalic) should this use theme colors?
-        background: `linear-gradient(103deg, #4E2A9A 0%, #7C30A9 25%, #A737B4 50%, #F2306F 75%, #EE8019 100%);`,
+        color: theme.colors.dynamic.grayTransparent400,
+        background: theme.colors.dynamic.surface300,
       };
     // End feature badge variants
     case 'default':
       return {
         background: theme.colors.dynamic.surface300,
         color: theme.colors.dynamic.grayTransparent400,
       };
+
+    // Highlight maps to info badge for now, but the highlight variant should be removed
+    case 'highlight':
     case 'info':
       return {
-        background: theme.colors.static.blue400,
-        color: theme.colors.static.white,
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.blue400,
       };
     case 'success':
       return {
-        background: theme.colors.static.green400,
-        color: theme.colors.static.black,
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.green400,
       };
     case 'warning':
       return {
-        background: theme.colors.static.yellow400,
-        color: theme.colors.static.black,
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.yellow400,
       };
     case 'danger':
       return {
-        background: theme.colors.static.red400,
-        color: theme.colors.static.white,
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.red400,
       };
     case 'promotion':
       return {
-        background: theme.colors.static.pink400,
-        color: theme.colors.static.black,
-      };
-    case 'highlight':
-      return {
-        background: theme.colors.dynamic.blue400,
-        color: theme.colors.static.white,
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.pink400,
       };
     default:
       unreachable(p.type);

diff --git a/static/app/components/core/badge/tag.chonk.tsx b/static/app/components/core/badge/tag.chonk.tsx
@@ -0,0 +1,90 @@
+import type {DO_NOT_USE_ChonkTheme} from '@emotion/react';
+
+import type {TagProps} from 'sentry/components/core/badge/tag';
+import {space} from 'sentry/styles/space';
+import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
+import {unreachable} from 'sentry/utils/unreachable';
+
+type TagType = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'promotion';
+
+interface ChonkTagProps extends Omit<TagProps, 'type'> {
+  type?: TagType;
+}
+
+const legacyMapping: Partial<Record<NonNullable<TagProps['type']>, TagType>> = {
+  highlight: 'info',
+  error: 'danger',
+  white: 'default',
+  black: 'default',
+};
+
+export function chonkTagPropMapping(props: TagProps): ChonkTagProps {
+  return {
+    ...props,
+    type: props.type && legacyMapping[props.type],
+  };
+}
+
+export const TagPill = chonkStyled('div')<{
+  type?: TagType;
+}>`
+  ${p => ({...makeTagPillTheme(p.type, p.theme)})};
+
+  font-size: ${p => p.theme.fontSizeSmall};
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  border-radius: 20px;
+  padding: 0 ${space(1)};
+  max-width: 166px;
+
+  /* @TODO(jonasbadalic): We need to override button colors because they wrongly default to a blue color... */
+  button,
+  button:hover {
+    color: currentColor;
+  }
+`;
+
+function makeTagPillTheme(
+  type: TagType | undefined,
+  theme: DO_NOT_USE_ChonkTheme
+): React.CSSProperties {
+  switch (type) {
+    case undefined:
+    case 'default':
+      return {
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.grayTransparent400,
+      };
+
+    // Highlight maps to info badge for now, but the highlight variant should be removed
+    case 'info':
+      return {
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.blue400,
+      };
+    case 'success':
+      return {
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.green400,
+      };
+    case 'warning':
+      return {
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.yellow400,
+      };
+    case 'danger':
+      return {
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.red400,
+      };
+    case 'promotion':
+      return {
+        background: theme.colors.dynamic.surface300,
+        color: theme.colors.dynamic.pink400,
+      };
+    default:
+      unreachable(type);
+      throw new TypeError(`Unsupported badge type: ${type}`);
+  }
+}
diff --git a/static/app/components/core/badge/tag.tsx b/static/app/components/core/badge/tag.tsx
@@ -6,6 +6,9 @@ import {IconClose} from 'sentry/icons';
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {withChonk} from 'sentry/utils/theme/withChonk';
+
+import * as ChonkTag from './tag.chonk';
 
 type TagType =
   // @TODO(jonasbadalic): "default" is a bad API naming
@@ -62,7 +65,7 @@ export const Tag = forwardRef<HTMLDivElement, TagProps>(
   }
 );
 
-const StyledTag = styled('div')<{
+const TagPill = styled('div')<{
   type: NonNullable<TagProps['type']>;
 }>`
   font-size: ${p => p.theme.fontSizeSmall};
@@ -83,6 +86,8 @@ const StyledTag = styled('div')<{
   }
 `;
 
+const StyledTag = withChonk(TagPill, ChonkTag.TagPill, ChonkTag.chonkTagPropMapping);
+
 const Text = styled('div')`
   overflow: hidden;
   white-space: nowrap;