From 03f6be4bc39dae4de3431963a3f3c49b9dc2cea2 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Mon, 24 Feb 2025 09:52:45 -0500 Subject: [PATCH 1/4] components: move badge to components/core --- static/app/components/badge/badge.tsx | 84 +------------------ static/app/components/badge/featureBadge.tsx | 2 +- .../app/components/compactSelect/control.tsx | 2 +- .../{badge => core}/badge.stories.tsx | 2 +- static/app/components/core/badge.tsx | 81 ++++++++++++++++++ .../feedback/list/mailboxPicker.tsx | 2 +- .../notificationActionItem.tsx | 2 +- .../environmentPageFilter/trigger.tsx | 2 +- .../projectPageFilter/trigger.tsx | 2 +- .../components/replays/header/errorCounts.tsx | 2 +- .../components/replays/replayCountBadge.tsx | 2 +- .../views/alerts/list/rules/teamFilter.tsx | 2 +- .../views/dashboards/editAccessSelector.tsx | 2 +- .../dashboards/releasesSelectControl.tsx | 2 +- .../app/views/dashboards/widgetCard/index.tsx | 2 +- .../dashboards/widgets/common/widgetFrame.tsx | 4 +- .../views/insights/pages/domainViewHeader.tsx | 2 +- static/app/views/issueDetails/header.tsx | 2 +- static/app/views/issueList/header.tsx | 2 +- .../releases/detail/header/releaseHeader.tsx | 2 +- .../settings/components/settingsNavItem.tsx | 2 +- .../components/settingsNavItemDeprecated.tsx | 2 +- .../project/navigationConfiguration.tsx | 2 +- .../projectOwnership/ownershipOwnerFilter.tsx | 2 +- 24 files changed, 107 insertions(+), 104 deletions(-) rename static/app/components/{badge => core}/badge.stories.tsx (93%) create mode 100644 static/app/components/core/badge.tsx diff --git a/static/app/components/badge/badge.tsx b/static/app/components/badge/badge.tsx index a60a919a1b42db..a55c53f88ca7b0 100644 --- a/static/app/components/badge/badge.tsx +++ b/static/app/components/badge/badge.tsx @@ -1,81 +1,3 @@ -import {useTheme} from '@emotion/react'; -import styled from '@emotion/styled'; - -import {space} from 'sentry/styles/space'; - -const useBadgeColors = () => { - const theme = useTheme(); - - return { - default: { - background: theme.gray100, - color: theme.gray500, - }, - alpha: { - background: `linear-gradient(90deg, ${theme.pink300}, ${theme.yellow300})`, - color: theme.white, - }, - beta: { - background: `linear-gradient(90deg, ${theme.purple300}, ${theme.pink300})`, - color: theme.white, - }, - new: { - background: `linear-gradient(90deg, ${theme.blue300}, ${theme.green300})`, - color: theme.white, - }, - experimental: { - background: theme.gray100, - color: theme.gray500, - }, - internal: { - background: theme.gray100, - color: theme.gray500, - }, - warning: { - background: theme.yellow300, - color: theme.gray500, - }, - gray: { - background: `rgba(43, 34, 51, 0.08)`, - color: theme.gray500, - }, - } satisfies Record; -}; - -export type BadgeType = keyof ReturnType; -type BadgeColors = {background: string; color: string}; - -export interface BadgeProps extends React.HTMLAttributes { - text?: string | number | null; - type?: BadgeType; -} - -function Badge({children, type = 'default', text, ...props}: BadgeProps) { - const badgeColors = useBadgeColors(); - - return ( - - {children ?? text} - - ); -} - -const StyledBadge = styled('span')` - display: inline-block; - height: 20px; - min-width: 20px; - line-height: 20px; - border-radius: 20px; - padding: 0 5px; - margin-left: ${space(0.5)}; - font-size: 75%; - font-weight: ${p => p.theme.fontWeightBold}; - text-align: center; - color: ${p => p.badgeColors.color}; - background: ${p => p.badgeColors.background}; - transition: background 100ms linear; - - position: relative; -`; - -export default Badge; +// biome-ignore lint/performance/noBarrelFile: deprecated +export * from 'sentry/components/core/badge'; +export {default} from 'sentry/components/core/badge'; diff --git a/static/app/components/badge/featureBadge.tsx b/static/app/components/badge/featureBadge.tsx index 87a943020ed605..65f32be452a363 100644 --- a/static/app/components/badge/featureBadge.tsx +++ b/static/app/components/badge/featureBadge.tsx @@ -4,8 +4,8 @@ import styled from '@emotion/styled'; import type {SeverityLevel} from '@sentry/core'; import {captureException, withScope} from '@sentry/react'; -import Badge, {type BadgeType} from 'sentry/components/badge/badge'; import CircleIndicator from 'sentry/components/circleIndicator'; +import Badge, {type BadgeType} from 'sentry/components/core/badge'; import type {TooltipProps} from 'sentry/components/tooltip'; import {Tooltip} from 'sentry/components/tooltip'; import {t} from 'sentry/locale'; diff --git a/static/app/components/compactSelect/control.tsx b/static/app/components/compactSelect/control.tsx index b8062d413cb40a..f80bebb7348239 100644 --- a/static/app/components/compactSelect/control.tsx +++ b/static/app/components/compactSelect/control.tsx @@ -16,8 +16,8 @@ import {mergeProps} from '@react-aria/utils'; import type {ListState} from '@react-stately/list'; import type {OverlayTriggerState} from '@react-stately/overlays'; -import Badge from 'sentry/components/badge/badge'; import {Button} from 'sentry/components/button'; +import Badge from 'sentry/components/core/badge'; import type {DropdownButtonProps} from 'sentry/components/dropdownButton'; import DropdownButton from 'sentry/components/dropdownButton'; import LoadingIndicator from 'sentry/components/loadingIndicator'; diff --git a/static/app/components/badge/badge.stories.tsx b/static/app/components/core/badge.stories.tsx similarity index 93% rename from static/app/components/badge/badge.stories.tsx rename to static/app/components/core/badge.stories.tsx index 3c7fcb4e6bf69d..08c33655169c1e 100644 --- a/static/app/components/badge/badge.stories.tsx +++ b/static/app/components/core/badge.stories.tsx @@ -1,4 +1,4 @@ -import Badge from 'sentry/components/badge/badge'; +import Badge from 'sentry/components/core/badge'; import JSXProperty from 'sentry/components/stories/jsxProperty'; import SideBySide from 'sentry/components/stories/sideBySide'; import storyBook from 'sentry/stories/storyBook'; diff --git a/static/app/components/core/badge.tsx b/static/app/components/core/badge.tsx new file mode 100644 index 00000000000000..a60a919a1b42db --- /dev/null +++ b/static/app/components/core/badge.tsx @@ -0,0 +1,81 @@ +import {useTheme} from '@emotion/react'; +import styled from '@emotion/styled'; + +import {space} from 'sentry/styles/space'; + +const useBadgeColors = () => { + const theme = useTheme(); + + return { + default: { + background: theme.gray100, + color: theme.gray500, + }, + alpha: { + background: `linear-gradient(90deg, ${theme.pink300}, ${theme.yellow300})`, + color: theme.white, + }, + beta: { + background: `linear-gradient(90deg, ${theme.purple300}, ${theme.pink300})`, + color: theme.white, + }, + new: { + background: `linear-gradient(90deg, ${theme.blue300}, ${theme.green300})`, + color: theme.white, + }, + experimental: { + background: theme.gray100, + color: theme.gray500, + }, + internal: { + background: theme.gray100, + color: theme.gray500, + }, + warning: { + background: theme.yellow300, + color: theme.gray500, + }, + gray: { + background: `rgba(43, 34, 51, 0.08)`, + color: theme.gray500, + }, + } satisfies Record; +}; + +export type BadgeType = keyof ReturnType; +type BadgeColors = {background: string; color: string}; + +export interface BadgeProps extends React.HTMLAttributes { + text?: string | number | null; + type?: BadgeType; +} + +function Badge({children, type = 'default', text, ...props}: BadgeProps) { + const badgeColors = useBadgeColors(); + + return ( + + {children ?? text} + + ); +} + +const StyledBadge = styled('span')` + display: inline-block; + height: 20px; + min-width: 20px; + line-height: 20px; + border-radius: 20px; + padding: 0 5px; + margin-left: ${space(0.5)}; + font-size: 75%; + font-weight: ${p => p.theme.fontWeightBold}; + text-align: center; + color: ${p => p.badgeColors.color}; + background: ${p => p.badgeColors.background}; + transition: background 100ms linear; + + position: relative; +`; + +export default Badge; diff --git a/static/app/components/feedback/list/mailboxPicker.tsx b/static/app/components/feedback/list/mailboxPicker.tsx index c161379456199d..6718933a39ed19 100644 --- a/static/app/components/feedback/list/mailboxPicker.tsx +++ b/static/app/components/feedback/list/mailboxPicker.tsx @@ -1,5 +1,5 @@ -import Badge from 'sentry/components/badge/badge'; import {Flex} from 'sentry/components/container/flex'; +import Badge from 'sentry/components/core/badge'; import type decodeMailbox from 'sentry/components/feedback/decodeMailbox'; import useMailboxCounts from 'sentry/components/feedback/list/useMailboxCounts'; import {SegmentedControl} from 'sentry/components/segmentedControl'; diff --git a/static/app/components/notificationActions/notificationActionItem.tsx b/static/app/components/notificationActions/notificationActionItem.tsx index be73cb43aea6b1..5142fb7499b143 100644 --- a/static/app/components/notificationActions/notificationActionItem.tsx +++ b/static/app/components/notificationActions/notificationActionItem.tsx @@ -6,11 +6,11 @@ import { addLoadingMessage, addSuccessMessage, } from 'sentry/actionCreators/indicator'; -import Badge from 'sentry/components/badge/badge'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import Card from 'sentry/components/card'; import {openConfirmModal} from 'sentry/components/confirm'; +import Badge from 'sentry/components/core/badge'; import type {MenuItemProps} from 'sentry/components/dropdownMenu'; import {DropdownMenu} from 'sentry/components/dropdownMenu'; import OnCallServiceForm from 'sentry/components/notificationActions/forms/onCallServiceForm'; diff --git a/static/app/components/organizations/environmentPageFilter/trigger.tsx b/static/app/components/organizations/environmentPageFilter/trigger.tsx index 26150cfafa9fad..1b7d980e529e2c 100644 --- a/static/app/components/organizations/environmentPageFilter/trigger.tsx +++ b/static/app/components/organizations/environmentPageFilter/trigger.tsx @@ -1,7 +1,7 @@ import {forwardRef} from 'react'; import styled from '@emotion/styled'; -import Badge from 'sentry/components/badge/badge'; +import Badge from 'sentry/components/core/badge'; import type {DropdownButtonProps} from 'sentry/components/dropdownButton'; import DropdownButton from 'sentry/components/dropdownButton'; import {t} from 'sentry/locale'; diff --git a/static/app/components/organizations/projectPageFilter/trigger.tsx b/static/app/components/organizations/projectPageFilter/trigger.tsx index d5a9ee4fa06119..4347cc2038bb51 100644 --- a/static/app/components/organizations/projectPageFilter/trigger.tsx +++ b/static/app/components/organizations/projectPageFilter/trigger.tsx @@ -1,7 +1,7 @@ import {forwardRef} from 'react'; import styled from '@emotion/styled'; -import Badge from 'sentry/components/badge/badge'; +import Badge from 'sentry/components/core/badge'; import type {DropdownButtonProps} from 'sentry/components/dropdownButton'; import DropdownButton from 'sentry/components/dropdownButton'; import PlatformList from 'sentry/components/platformList'; diff --git a/static/app/components/replays/header/errorCounts.tsx b/static/app/components/replays/header/errorCounts.tsx index 8c9f2d824a2aed..a737b6927db328 100644 --- a/static/app/components/replays/header/errorCounts.tsx +++ b/static/app/components/replays/header/errorCounts.tsx @@ -2,7 +2,7 @@ import {Fragment, useCallback} from 'react'; import styled from '@emotion/styled'; import ProjectAvatar from 'sentry/components/avatar/projectAvatar'; -import Badge from 'sentry/components/badge/badge'; +import Badge from 'sentry/components/core/badge'; import Link from 'sentry/components/links/link'; import CountTooltipContent from 'sentry/components/replays/countTooltipContent'; import useErrorCountPerProject from 'sentry/components/replays/header/useErrorCountPerProject'; diff --git a/static/app/components/replays/replayCountBadge.tsx b/static/app/components/replays/replayCountBadge.tsx index 9fbeaea0774762..8aa1ebfc74576c 100644 --- a/static/app/components/replays/replayCountBadge.tsx +++ b/static/app/components/replays/replayCountBadge.tsx @@ -1,4 +1,4 @@ -import Badge from 'sentry/components/badge/badge'; +import Badge from 'sentry/components/core/badge'; function ReplayCountBadge({count}: {count: undefined | number}) { const display = count && count > 50 ? '50+' : count ?? null; diff --git a/static/app/views/alerts/list/rules/teamFilter.tsx b/static/app/views/alerts/list/rules/teamFilter.tsx index 5816188ef76bb7..366c9451ddff7c 100644 --- a/static/app/views/alerts/list/rules/teamFilter.tsx +++ b/static/app/views/alerts/list/rules/teamFilter.tsx @@ -4,8 +4,8 @@ import debounce from 'lodash/debounce'; import partition from 'lodash/partition'; import TeamAvatar from 'sentry/components/avatar/teamAvatar'; -import Badge from 'sentry/components/badge/badge'; import {CompactSelect} from 'sentry/components/compactSelect'; +import Badge from 'sentry/components/core/badge'; import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants'; import {IconUser} from 'sentry/icons'; import {t} from 'sentry/locale'; diff --git a/static/app/views/dashboards/editAccessSelector.tsx b/static/app/views/dashboards/editAccessSelector.tsx index fb98c19d72eaf9..f07102f0d2492c 100644 --- a/static/app/views/dashboards/editAccessSelector.tsx +++ b/static/app/views/dashboards/editAccessSelector.tsx @@ -8,11 +8,11 @@ import {hasEveryAccess} from 'sentry/components/acl/access'; import Avatar from 'sentry/components/avatar'; import AvatarList, {CollapsedAvatars} from 'sentry/components/avatar/avatarList'; import TeamAvatar from 'sentry/components/avatar/teamAvatar'; -import Badge from 'sentry/components/badge/badge'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import {CompactSelect} from 'sentry/components/compactSelect'; import {CheckWrap} from 'sentry/components/compactSelect/styles'; +import Badge from 'sentry/components/core/badge'; import UserBadge from 'sentry/components/idBadge/userBadge'; import {InnerWrap, LeadingItems} from 'sentry/components/menuListItem'; import {Tooltip} from 'sentry/components/tooltip'; diff --git a/static/app/views/dashboards/releasesSelectControl.tsx b/static/app/views/dashboards/releasesSelectControl.tsx index 65ce1a37e531f7..9972b14a477077 100644 --- a/static/app/views/dashboards/releasesSelectControl.tsx +++ b/static/app/views/dashboards/releasesSelectControl.tsx @@ -2,8 +2,8 @@ import {useEffect, useState} from 'react'; import styled from '@emotion/styled'; import debounce from 'lodash/debounce'; -import Badge from 'sentry/components/badge/badge'; import {CompactSelect} from 'sentry/components/compactSelect'; +import Badge from 'sentry/components/core/badge'; import TextOverflow from 'sentry/components/textOverflow'; import {DEFAULT_DEBOUNCE_DURATION} from 'sentry/constants'; import {IconReleases} from 'sentry/icons'; diff --git a/static/app/views/dashboards/widgetCard/index.tsx b/static/app/views/dashboards/widgetCard/index.tsx index d5b01178f427bd..b4bb4a9ec05d03 100644 --- a/static/app/views/dashboards/widgetCard/index.tsx +++ b/static/app/views/dashboards/widgetCard/index.tsx @@ -4,7 +4,7 @@ import type {LegendComponentOption} from 'echarts'; import type {Location} from 'history'; import type {Client} from 'sentry/api'; -import type {BadgeProps} from 'sentry/components/badge/badge'; +import type {BadgeProps} from 'sentry/components/core/badge'; import ErrorBoundary from 'sentry/components/errorBoundary'; import {isWidgetViewerPath} from 'sentry/components/modals/widgetViewerModal/utils'; import PanelAlert from 'sentry/components/panels/panelAlert'; diff --git a/static/app/views/dashboards/widgets/common/widgetFrame.tsx b/static/app/views/dashboards/widgets/common/widgetFrame.tsx index 8c32b98e692db5..79282b930fd3c5 100644 --- a/static/app/views/dashboards/widgets/common/widgetFrame.tsx +++ b/static/app/views/dashboards/widgets/common/widgetFrame.tsx @@ -1,9 +1,9 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; -import type {BadgeProps} from 'sentry/components/badge/badge'; -import Badge from 'sentry/components/badge/badge'; import {Button, LinkButton} from 'sentry/components/button'; +import type {BadgeProps} from 'sentry/components/core/badge'; +import Badge from 'sentry/components/core/badge'; import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu'; import {Tooltip} from 'sentry/components/tooltip'; import {IconEllipsis, IconExpand, IconWarning} from 'sentry/icons'; diff --git a/static/app/views/insights/pages/domainViewHeader.tsx b/static/app/views/insights/pages/domainViewHeader.tsx index bc221331ebbb5d..6f99c82c0bcb3f 100644 --- a/static/app/views/insights/pages/domainViewHeader.tsx +++ b/static/app/views/insights/pages/domainViewHeader.tsx @@ -1,9 +1,9 @@ import {Fragment} from 'react'; import styled from '@emotion/styled'; -import Badge from 'sentry/components/badge/badge'; import {Breadcrumbs, type Crumb} from 'sentry/components/breadcrumbs'; import ButtonBar from 'sentry/components/buttonBar'; +import Badge from 'sentry/components/core/badge'; import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton'; import * as Layout from 'sentry/components/layouts/thirds'; import {extractSelectionParameters} from 'sentry/components/organizations/pageFilters/utils'; diff --git a/static/app/views/issueDetails/header.tsx b/static/app/views/issueDetails/header.tsx index 8cec4b451e129b..fdbbbcccff3006 100644 --- a/static/app/views/issueDetails/header.tsx +++ b/static/app/views/issueDetails/header.tsx @@ -4,9 +4,9 @@ import type {LocationDescriptor} from 'history'; import omit from 'lodash/omit'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; -import Badge from 'sentry/components/badge/badge'; import FeatureBadge from 'sentry/components/badge/featureBadge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; +import Badge from 'sentry/components/core/badge'; import Count from 'sentry/components/count'; import EventOrGroupTitle from 'sentry/components/eventOrGroupTitle'; import EventMessage from 'sentry/components/events/eventMessage'; diff --git a/static/app/views/issueList/header.tsx b/static/app/views/issueList/header.tsx index fe27198ed52601..4b3231f63f80c1 100644 --- a/static/app/views/issueList/header.tsx +++ b/static/app/views/issueList/header.tsx @@ -2,9 +2,9 @@ import type {ReactNode} from 'react'; import styled from '@emotion/styled'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; -import Badge from 'sentry/components/badge/badge'; import {Button} from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; +import Badge from 'sentry/components/core/badge'; import GlobalEventProcessingAlert from 'sentry/components/globalEventProcessingAlert'; import * as Layout from 'sentry/components/layouts/thirds'; import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip'; diff --git a/static/app/views/releases/detail/header/releaseHeader.tsx b/static/app/views/releases/detail/header/releaseHeader.tsx index 43469effcc4cd5..c146dc1c47f3bf 100644 --- a/static/app/views/releases/detail/header/releaseHeader.tsx +++ b/static/app/views/releases/detail/header/releaseHeader.tsx @@ -3,9 +3,9 @@ import styled from '@emotion/styled'; import type {Location} from 'history'; import pick from 'lodash/pick'; -import Badge from 'sentry/components/badge/badge'; import {Breadcrumbs} from 'sentry/components/breadcrumbs'; import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton'; +import Badge from 'sentry/components/core/badge'; import IdBadge from 'sentry/components/idBadge'; import * as Layout from 'sentry/components/layouts/thirds'; import ExternalLink from 'sentry/components/links/externalLink'; diff --git a/static/app/views/settings/components/settingsNavItem.tsx b/static/app/views/settings/components/settingsNavItem.tsx index 05ea692a87de85..6f8d85378a1e84 100644 --- a/static/app/views/settings/components/settingsNavItem.tsx +++ b/static/app/views/settings/components/settingsNavItem.tsx @@ -2,8 +2,8 @@ import type {ReactElement} from 'react'; import {Fragment} from 'react'; import styled from '@emotion/styled'; -import Badge from 'sentry/components/badge/badge'; import FeatureBadge from 'sentry/components/badge/featureBadge'; +import Badge from 'sentry/components/core/badge'; import HookOrDefault from 'sentry/components/hookOrDefault'; import {SecondaryNav} from 'sentry/components/nav/secondary'; import {Tooltip} from 'sentry/components/tooltip'; diff --git a/static/app/views/settings/components/settingsNavItemDeprecated.tsx b/static/app/views/settings/components/settingsNavItemDeprecated.tsx index 2781b28c5bbb3a..cfdf839687340c 100644 --- a/static/app/views/settings/components/settingsNavItemDeprecated.tsx +++ b/static/app/views/settings/components/settingsNavItemDeprecated.tsx @@ -4,8 +4,8 @@ import {NavLink as RouterNavLink} from 'react-router-dom'; import styled from '@emotion/styled'; import type {LocationDescriptor} from 'history'; -import Badge from 'sentry/components/badge/badge'; import FeatureBadge from 'sentry/components/badge/featureBadge'; +import Badge from 'sentry/components/core/badge'; import HookOrDefault from 'sentry/components/hookOrDefault'; import {Tooltip} from 'sentry/components/tooltip'; import {t} from 'sentry/locale'; diff --git a/static/app/views/settings/project/navigationConfiguration.tsx b/static/app/views/settings/project/navigationConfiguration.tsx index d8cd2aabb48e58..dded23d98e44ce 100644 --- a/static/app/views/settings/project/navigationConfiguration.tsx +++ b/static/app/views/settings/project/navigationConfiguration.tsx @@ -1,4 +1,4 @@ -import Badge from 'sentry/components/badge/badge'; +import Badge from 'sentry/components/core/badge'; import {t} from 'sentry/locale'; import ConfigStore from 'sentry/stores/configStore'; import type {Organization} from 'sentry/types/organization'; diff --git a/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx b/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx index 7a8d08fc084573..8d28d201ebf396 100644 --- a/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx +++ b/static/app/views/settings/project/projectOwnership/ownershipOwnerFilter.tsx @@ -2,8 +2,8 @@ import {Fragment, useMemo} from 'react'; import styled from '@emotion/styled'; import ActorAvatar from 'sentry/components/avatar/actorAvatar'; -import Badge from 'sentry/components/badge/badge'; import {CompactSelect} from 'sentry/components/compactSelect'; +import Badge from 'sentry/components/core/badge'; import {IconUser} from 'sentry/icons'; import {t} from 'sentry/locale'; import type {Actor} from 'sentry/types/core'; From 365e0760264aa97144f22ceee550407b7fc580ad Mon Sep 17 00:00:00 2001 From: JonasBa Date: Mon, 24 Feb 2025 09:53:32 -0500 Subject: [PATCH 2/4] components: deprecate old badge import --- static/app/components/badge/badge.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/static/app/components/badge/badge.tsx b/static/app/components/badge/badge.tsx index a55c53f88ca7b0..e7463dc681a085 100644 --- a/static/app/components/badge/badge.tsx +++ b/static/app/components/badge/badge.tsx @@ -1,3 +1,9 @@ +/** + * @deprecated use `import Badge from 'sentry/components/core/badge'` instead + */ // biome-ignore lint/performance/noBarrelFile: deprecated export * from 'sentry/components/core/badge'; +/** + * @deprecated use `import Badge from 'sentry/components/core/badge'` instead + */ export {default} from 'sentry/components/core/badge'; From 364ad8d3f4f48218b1520877aaf9dbce86984da8 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Mon, 24 Feb 2025 09:56:32 -0500 Subject: [PATCH 3/4] ref: remove deprecated badge export --- static/app/components/badge/badge.tsx | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 static/app/components/badge/badge.tsx diff --git a/static/app/components/badge/badge.tsx b/static/app/components/badge/badge.tsx deleted file mode 100644 index e7463dc681a085..00000000000000 --- a/static/app/components/badge/badge.tsx +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @deprecated use `import Badge from 'sentry/components/core/badge'` instead - */ -// biome-ignore lint/performance/noBarrelFile: deprecated -export * from 'sentry/components/core/badge'; -/** - * @deprecated use `import Badge from 'sentry/components/core/badge'` instead - */ -export {default} from 'sentry/components/core/badge'; From bdc4a351213b441b067442b211cda65c35a838a9 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Mon, 24 Feb 2025 15:02:37 -0500 Subject: [PATCH 4/4] ref: remove bad deletion --- static/app/components/core/badge.tsx | 90 +++++++++++++++++++++++++--- 1 file changed, 81 insertions(+), 9 deletions(-) diff --git a/static/app/components/core/badge.tsx b/static/app/components/core/badge.tsx index e7463dc681a085..a60a919a1b42db 100644 --- a/static/app/components/core/badge.tsx +++ b/static/app/components/core/badge.tsx @@ -1,9 +1,81 @@ -/** - * @deprecated use `import Badge from 'sentry/components/core/badge'` instead - */ -// biome-ignore lint/performance/noBarrelFile: deprecated -export * from 'sentry/components/core/badge'; -/** - * @deprecated use `import Badge from 'sentry/components/core/badge'` instead - */ -export {default} from 'sentry/components/core/badge'; +import {useTheme} from '@emotion/react'; +import styled from '@emotion/styled'; + +import {space} from 'sentry/styles/space'; + +const useBadgeColors = () => { + const theme = useTheme(); + + return { + default: { + background: theme.gray100, + color: theme.gray500, + }, + alpha: { + background: `linear-gradient(90deg, ${theme.pink300}, ${theme.yellow300})`, + color: theme.white, + }, + beta: { + background: `linear-gradient(90deg, ${theme.purple300}, ${theme.pink300})`, + color: theme.white, + }, + new: { + background: `linear-gradient(90deg, ${theme.blue300}, ${theme.green300})`, + color: theme.white, + }, + experimental: { + background: theme.gray100, + color: theme.gray500, + }, + internal: { + background: theme.gray100, + color: theme.gray500, + }, + warning: { + background: theme.yellow300, + color: theme.gray500, + }, + gray: { + background: `rgba(43, 34, 51, 0.08)`, + color: theme.gray500, + }, + } satisfies Record; +}; + +export type BadgeType = keyof ReturnType; +type BadgeColors = {background: string; color: string}; + +export interface BadgeProps extends React.HTMLAttributes { + text?: string | number | null; + type?: BadgeType; +} + +function Badge({children, type = 'default', text, ...props}: BadgeProps) { + const badgeColors = useBadgeColors(); + + return ( + + {children ?? text} + + ); +} + +const StyledBadge = styled('span')` + display: inline-block; + height: 20px; + min-width: 20px; + line-height: 20px; + border-radius: 20px; + padding: 0 5px; + margin-left: ${space(0.5)}; + font-size: 75%; + font-weight: ${p => p.theme.fontWeightBold}; + text-align: center; + color: ${p => p.badgeColors.color}; + background: ${p => p.badgeColors.background}; + transition: background 100ms linear; + + position: relative; +`; + +export default Badge;