From e37c60523b20577809ed2c36734c7f10348023ff Mon Sep 17 00:00:00 2001 From: JonasBa Date: Tue, 20 May 2025 10:11:05 -0400 Subject: [PATCH 1/2] tag: fix bad tag change and flickering text --- .../app/components/core/avatar/avatarList.tsx | 34 +++---------------- .../app/components/core/avatar/baseAvatar.tsx | 7 +--- static/app/components/core/badge/index.tsx | 2 +- .../list/releaseCard/releaseCardCommits.tsx | 13 ++++--- 4 files changed, 14 insertions(+), 42 deletions(-) diff --git a/static/app/components/core/avatar/avatarList.tsx b/static/app/components/core/avatar/avatarList.tsx index 63a4280c395b3e..757fd438818259 100644 --- a/static/app/components/core/avatar/avatarList.tsx +++ b/static/app/components/core/avatar/avatarList.tsx @@ -3,8 +3,8 @@ import styled from '@emotion/styled'; import {TeamAvatar} from 'sentry/components/core/avatar/teamAvatar'; import {UserAvatar, type UserAvatarProps} from 'sentry/components/core/avatar/userAvatar'; +import {Tag} from 'sentry/components/core/badge/tag'; import {Tooltip} from 'sentry/components/core/tooltip'; -import {space} from 'sentry/styles/space'; import type {Actor} from 'sentry/types/core'; import type {Team} from 'sentry/types/organization'; import type {AvatarUser} from 'sentry/types/user'; @@ -39,9 +39,9 @@ export function CollapsedAvatars({ if (hasStreamlinedUI) { return ( - + {children} - + ); } return ( @@ -102,7 +102,7 @@ function AvatarList({ size={avatarSize} data-test-id="avatarList-collapsedavatars" > - {numCollapsedAvatars < 99 && +} + {numCollapsedAvatars < 99 && '+'} {numCollapsedAvatars} @@ -203,29 +203,3 @@ const CollapsedAvatarsCicle = styled('div')<{size: number}>` border-radius: 50%; ${AvatarStyle}; `; - -const CollapsedAvatarPill = styled('div')` - ${AvatarStyle}; - - display: flex; - align-items: center; - gap: ${space(0.25)}; - font-weight: ${p => p.theme.fontWeightNormal}; - color: ${p => p.theme.subText}; - height: 24px; - padding: 0 ${space(1)}; - background-color: ${p => p.theme.surface400}; - border: 1px solid ${p => p.theme.border}; - border-radius: 24px; - - ${AvatarListWrapper}:hover & { - background-color: ${p => p.theme.surface100}; - cursor: pointer; - } -`; - -const Plus = styled('span')` - font-size: 10px; - margin-left: 1px; - margin-right: -1px; -`; diff --git a/static/app/components/core/avatar/baseAvatar.tsx b/static/app/components/core/avatar/baseAvatar.tsx index cb540942d5998f..03e7fa7c24d696 100644 --- a/static/app/components/core/avatar/baseAvatar.tsx +++ b/static/app/components/core/avatar/baseAvatar.tsx @@ -106,7 +106,7 @@ export function BaseAvatar({ ); return ( - + } data-test-id={`${type}-avatar`} @@ -115,7 +115,6 @@ export function BaseAvatar({ suggested={!!suggested} style={{...(size ? {height: size, width: size} : {}), ...style}} title={title} - hasTooltip={hasTooltip} {...props} > {hasError @@ -137,7 +136,6 @@ export function BaseAvatar({ // Note: Avatar will not always be a child of a flex layout, but this seems like a // sensible default. const AvatarContainer = styled('span')<{ - hasTooltip: boolean; round: boolean; suggested: boolean; }>` @@ -145,9 +143,6 @@ const AvatarContainer = styled('span')<{ border-radius: ${p => (p.round ? '50%' : '3px')}; border: ${p => (p.suggested ? `1px dashed ${p.theme.subText}` : 'none')}; background-color: ${p => (p.suggested ? p.theme.background : 'none')}; - :hover { - pointer-events: ${p => (p.hasTooltip ? 'none' : 'auto')}; - } `; interface BackgroundAvatarProps extends React.HTMLAttributes { diff --git a/static/app/components/core/badge/index.tsx b/static/app/components/core/badge/index.tsx index dc2c93df2e36ba..8d095c484ba280 100644 --- a/static/app/components/core/badge/index.tsx +++ b/static/app/components/core/badge/index.tsx @@ -77,7 +77,7 @@ const StyledBadge = styled('span')` min-width: 20px; line-height: 20px; border-radius: 20px; - font-weight: ${p => p.theme.fontWeightBold}; + font-weight: ${p => p.theme.fontWeightNormal}; /* @TODO(jonasbadalic) can we standardize this transition? */ transition: background 100ms linear; diff --git a/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx b/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx index cbab1545ab75ea..418907fa0c6858 100644 --- a/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx +++ b/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx @@ -42,15 +42,18 @@ function ReleaseCardCommits({release, withHeading = true}: Props) { ].join(' '); return ( -
+ {withHeading && {releaseSummary}} - - - -
+ + ); } +const ReleaseStatsContainer = styled('div')` + display: flex; + align-items: center; +`; + const ReleaseSummaryHeading = styled('div')` color: ${p => p.theme.subText}; font-size: ${p => p.theme.fontSizeSmall}; From dbc0ef8876979b6a9a3a51284ad44e256b23dac6 Mon Sep 17 00:00:00 2001 From: JonasBa Date: Tue, 20 May 2025 11:51:32 -0400 Subject: [PATCH 2/2] tags: use flex container --- .../releases/list/releaseCard/releaseCardCommits.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx b/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx index 418907fa0c6858..bfd1f1cb261d31 100644 --- a/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx +++ b/static/app/views/releases/list/releaseCard/releaseCardCommits.tsx @@ -1,6 +1,7 @@ import {useMemo} from 'react'; import styled from '@emotion/styled'; +import {Flex} from 'sentry/components/container/flex'; import AvatarList from 'sentry/components/core/avatar/avatarList'; import {t, tn} from 'sentry/locale'; import {space} from 'sentry/styles/space'; @@ -42,18 +43,13 @@ function ReleaseCardCommits({release, withHeading = true}: Props) { ].join(' '); return ( - + {withHeading && {releaseSummary}} - + ); } -const ReleaseStatsContainer = styled('div')` - display: flex; - align-items: center; -`; - const ReleaseSummaryHeading = styled('div')` color: ${p => p.theme.subText}; font-size: ${p => p.theme.fontSizeSmall};