From 6e2be7a62d6e09b9dbd81024a0d818e5ee3790e9 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Mon, 3 Mar 2025 12:58:00 -0500 Subject: [PATCH 1/5] badge: chonkify badge and tags --- .../app/components/core/badge/index.chonk.tsx | 46 ++++----- .../app/components/core/badge/tag.chonk.tsx | 93 +++++++++++++++++++ static/app/components/core/badge/tag.tsx | 8 +- 3 files changed, 120 insertions(+), 27 deletions(-) create mode 100644 static/app/components/core/badge/tag.chonk.tsx diff --git a/static/app/components/core/badge/index.chonk.tsx b/static/app/components/core/badge/index.chonk.tsx index 6878ee3fb7f7dc..76b5f28b24f0c4 100644 --- a/static/app/components/core/badge/index.chonk.tsx +++ b/static/app/components/core/badge/index.chonk.tsx @@ -50,26 +50,22 @@ 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': @@ -77,35 +73,33 @@ function makeChonkBadgeTheme( 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 new file mode 100644 index 00000000000000..e166a7cd39b956 --- /dev/null +++ b/static/app/components/core/badge/tag.chonk.tsx @@ -0,0 +1,93 @@ +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 { + type: TagType; +} + +export function chonkTagPropMapping(props: TagProps): ChonkTagProps { + return { + ...props, + type: + props.type === 'highlight' + ? 'info' + : props.type === 'error' + ? 'danger' + : props.type === 'white' + ? 'default' + : props.type === 'black' + ? 'default' + : props.type === undefined + ? 'default' + : 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, + theme: DO_NOT_USE_ChonkTheme +): React.CSSProperties { + switch (type) { + 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 index 186aab8b5df980..8bc6f15f4e25a8 100644 --- 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 @@ -18,6 +21,7 @@ type TagType = | 'info' | 'white' | 'black'; + export interface TagProps extends React.HTMLAttributes { /** * Icon on the left side. @@ -64,7 +68,7 @@ export const Tag = forwardRef( } ); -const StyledTag = styled('div')<{ +const TagPill = styled('div')<{ type: TagType; }>` font-size: ${p => p.theme.fontSizeSmall}; @@ -85,6 +89,8 @@ const StyledTag = styled('div')<{ } `; +const StyledTag = withChonk(TagPill, ChonkTag.TagPill, ChonkTag.chonkTagPropMapping); + const Text = styled('div')` overflow: hidden; white-space: nowrap; From 14d7026ebee65824b29f65d16f489cb5219538c9 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Tue, 4 Mar 2025 08:56:15 -0500 Subject: [PATCH 2/5] tag: use partial record to map type --- .../app/components/core/badge/tag.chonk.tsx | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/static/app/components/core/badge/tag.chonk.tsx b/static/app/components/core/badge/tag.chonk.tsx index e166a7cd39b956..355f5889137505 100644 --- a/static/app/components/core/badge/tag.chonk.tsx +++ b/static/app/components/core/badge/tag.chonk.tsx @@ -8,24 +8,20 @@ import {unreachable} from 'sentry/utils/unreachable'; type TagType = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'promotion'; interface ChonkTagProps extends Omit { - type: TagType; + type?: TagType; } +const LegacyMapping: Partial, TagType>> = { + highlight: 'info', + error: 'danger', + white: 'default', + black: 'default', +}; + export function chonkTagPropMapping(props: TagProps): ChonkTagProps { return { ...props, - type: - props.type === 'highlight' - ? 'info' - : props.type === 'error' - ? 'danger' - : props.type === 'white' - ? 'default' - : props.type === 'black' - ? 'default' - : props.type === undefined - ? 'default' - : props.type, + type: props.type && LegacyMapping[props.type], }; } From 0a8c2ed990b25b80d1503dd80a1b73ac00a0f6cf Mon Sep 17 00:00:00 2001 From: JonasBa Date: Tue, 4 Mar 2025 09:08:32 -0500 Subject: [PATCH 3/5] tag: add undefined case --- static/app/components/core/badge/tag.chonk.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/static/app/components/core/badge/tag.chonk.tsx b/static/app/components/core/badge/tag.chonk.tsx index 355f5889137505..ff94b8f77551b8 100644 --- a/static/app/components/core/badge/tag.chonk.tsx +++ b/static/app/components/core/badge/tag.chonk.tsx @@ -26,7 +26,7 @@ export function chonkTagPropMapping(props: TagProps): ChonkTagProps { } export const TagPill = chonkStyled('div')<{ - type: TagType; + type?: TagType; }>` ${p => ({...makeTagPillTheme(p.type, p.theme)})}; @@ -46,10 +46,11 @@ export const TagPill = chonkStyled('div')<{ `; function makeTagPillTheme( - type: TagType, + type: TagType | undefined, theme: DO_NOT_USE_ChonkTheme ): React.CSSProperties { switch (type) { + case undefined: case 'default': return { background: theme.colors.dynamic.surface300, From 55304f5ef9f371730ea129af3dbb3799e3bd9f88 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Wed, 5 Mar 2025 09:32:53 -0500 Subject: [PATCH 4/5] lowercase mapping --- static/app/components/core/badge/tag.chonk.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/components/core/badge/tag.chonk.tsx b/static/app/components/core/badge/tag.chonk.tsx index ff94b8f77551b8..66fecc1cf63c76 100644 --- a/static/app/components/core/badge/tag.chonk.tsx +++ b/static/app/components/core/badge/tag.chonk.tsx @@ -11,7 +11,7 @@ interface ChonkTagProps extends Omit { type?: TagType; } -const LegacyMapping: Partial, TagType>> = { +const legacyMapping: Partial, TagType>> = { highlight: 'info', error: 'danger', white: 'default', @@ -21,7 +21,7 @@ const LegacyMapping: Partial, TagType>> = { export function chonkTagPropMapping(props: TagProps): ChonkTagProps { return { ...props, - type: props.type && LegacyMapping[props.type], + type: props.type && legacyMapping[props.type], }; } From a87a3250ee051fe07c1f15bdee9ed478af8b7513 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Wed, 5 Mar 2025 10:00:57 -0500 Subject: [PATCH 5/5] fix tagPill type prop --- static/app/components/core/badge/tag.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/core/badge/tag.tsx b/static/app/components/core/badge/tag.tsx index de8f591c1d945f..72d5c140b0bccb 100644 --- a/static/app/components/core/badge/tag.tsx +++ b/static/app/components/core/badge/tag.tsx @@ -66,7 +66,7 @@ export const Tag = forwardRef( ); const TagPill = styled('div')<{ - type: TagType; + type: NonNullable; }>` font-size: ${p => p.theme.fontSizeSmall}; background-color: ${p => p.theme.tag[p.type].background};