Skip to content

fix(ui): polish marketplace announcement card and dedupe V1 card #28066

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
siddhant1 merged 4 commits into from
May 14, 2026
Merged

fix(ui): polish marketplace announcement card and dedupe V1 card #28066

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
19498a7
fix(ui): polish marketplace announcement card and dedupe V1 card
May 13, 2026
5ec1df0
fix(ui): match announcements card to design spec colors
May 14, 2026
5c8487d
fix(ui): use gray-blue-100 border on announcements card
May 14, 2026
44b4fc4
Merge branch 'main' into fix/marketplace-announcement-card-styling
siddhant1 May 14, 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
4 changes: 3 additions & 1 deletion .../ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,10 @@ const AnnouncementItemV2 = ({
}
}}>
<AnnouncementCardV1Content
backgroundColor="var(--tw-color-utility-blue-dark-50)"
borderColor="var(--tw-color-utility-blue-dark-500)"
columnName={columnName}
currentBackgroundColor="var(--color-utility-blue-100)"
currentBackgroundColor="var(--tw-color-utility-blue-dark-600)"
description={description}
Comment on lines 74 to 79
entityFQN={entityFQN}
entityIcon={entityIcon}
Expand Down
6 changes: 3 additions & 3 deletions .../src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
if (loading) {
return (
<div
className="tw:rounded-xl tw:border tw:border-border-primary tw:bg-utility-blue-100 tw:px-1 tw:pt-3 tw:pb-1"
className="tw:rounded-xl tw:border tw:border-gray-blue-100 tw:bg-utility-blue-dark-50 tw:px-1 tw:pt-3 tw:pb-1"
data-testid="announcements-widget-v2">
<Loader size="small" />
</div>
Expand All @@ -131,7 +131,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {

return (
<div
className="tw:rounded-xl tw:border tw:border-border-primary tw:bg-utility-blue-100 tw:px-1 tw:pt-3 tw:pb-1 tw:mb-5"
className="tw:rounded-xl tw:border tw:border-gray-blue-100 tw:bg-utility-blue-dark-50 tw:px-1 tw:pt-3 tw:pb-1 tw:mb-5"
Comment thread
siddhant1 marked this conversation as resolved.
data-testid="announcements-widget-v2">
<div className="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:px-3">
<div className="tw:flex tw:items-center tw:gap-2">
Expand All @@ -148,7 +148,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
className="tw:rounded-md tw:bg-bg-primary tw:px-2 tw:py-0.5 tw:text-text-tertiary"
size="text-sm"
weight="medium">
{String(announcements.length).padStart(2, '0')}
{announcements.length}
Comment thread
siddhant1 marked this conversation as resolved.
</Typography>
</div>
</div>
Expand Down
130 changes: 23 additions & 107 deletions .../MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,11 @@ import { Card, Typography } from 'antd';
import classNames from 'classnames';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { AnnouncementEntity } from '../../../../../rest/announcementsAPI';
import { getShortRelativeTime } from '../../../../../utils/date-time/DateTimeUtils';
import entityUtilClassBase from '../../../../../utils/EntityUtilClassBase';
import { getEntityFQN, getEntityType } from '../../../../../utils/FeedUtils';
import { getUserPath } from '../../../../../utils/RouterUtils';
import { getEntityIcon } from '../../../../../utils/TableUtils';
import RichTextEditorPreviewerV1 from '../../../../common/RichTextEditor/RichTextEditorPreviewerV1';
import './announcement-card-v1.less';
import AnnouncementCardV1Content from './AnnouncementCardV1Content.component';

interface AnnouncementCardV1Props {
announcement: AnnouncementEntity;
Expand Down Expand Up @@ -61,115 +57,35 @@ const AnnouncementCardV1 = ({
};
}, [announcement]);

const {
announcementTitleSectionStyle,
announcementTitleStyle,
userNameStyle,
timeStampStyle,
} = useMemo(() => {
if (!currentBackgroundColor) {
return {};
}

return {
announcementTitleSectionStyle: {
background: `linear-gradient(270deg, #ffffff -12.07%, ${currentBackgroundColor} 500.72%)`,
color: `${currentBackgroundColor} !important`,
},
announcementTitleStyle: {
borderLeft: `3px solid ${currentBackgroundColor}`,
color: `${currentBackgroundColor} !important`,
},
userNameStyle: {
color: currentBackgroundColor,
},
timeStampStyle: {
color: currentBackgroundColor,
},
};
}, [currentBackgroundColor]);

const entityIcon = useMemo(() => getEntityIcon(entityType), [entityType]);

const gradientBackground = currentBackgroundColor
? `linear-gradient(270deg, #ffffff -12.07%, ${currentBackgroundColor} 500.72%)`
: undefined;
Comment on lines +62 to +64
Copy link
Copy Markdown

@gitar-bot gitar-bot Bot May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

⚠️ Edge Case: V1 card gets solid background when currentBackgroundColor is falsy

When currentBackgroundColor is not provided (or falsy) to AnnouncementCardV1, gradientBackground will be undefined. In AnnouncementCardV1Content, this causes bgColor to fall back to color (which is PRIMARY_COLOR), resulting in a solid primary-color background + 3px border being applied.

The old inlined V1 code returned an empty style object {} when currentBackgroundColor was falsy — meaning no inline background/border at all. This is a behavioral regression for that edge case.

In practice, the parent AnnouncementsWidgetV1 always passes a bgColor derived from theme config, so this may not surface in production, but it's a latent bug if the component is reused or tested without that prop.

Always provide a gradient background (matching the old AnnouncementCardV1Content default behavior) so the fallback is consistent regardless of whether currentBackgroundColor is set.:

const gradientBackground = currentBackgroundColor
  ? `linear-gradient(270deg, #ffffff -12.07%, ${currentBackgroundColor} 500.72%)`
  : `linear-gradient(270deg, #ffffff -12.07%, var(--ant-primary-color) 500.72%)`;

Was this helpful? React with 👍 / 👎


return (
<Card
className={classNames('announcement-card-v1', disabled ? 'disabled' : '')}
data-testid={`announcement-card-v1-${announcement.id}`}
onClick={onClick}>
<div className="announcement-card-v1-content">
<div className="announcement-header-container">
<div
className="announcement-title-section"
style={announcementTitleSectionStyle}>
<div className="announcement-header" style={announcementTitleStyle}>
{userName && (
<Link
className="user-name"
data-testid="user-link"
style={userNameStyle}
to={getUserPath(userName)}
onClick={(e) => e.stopPropagation()}>
{userName}
</Link>
)}
<span
className="announcement-card-entity-icon"
style={{ color: currentBackgroundColor ?? 'inherit' }}>
{entityIcon}
</span>
{entityFQN && entityType ? (
<Typography.Text
ellipsis={{ tooltip: true }}
style={{ color: currentBackgroundColor ?? 'inherit' }}>
<Link
className="announcement-entity-name"
data-testid="announcement-entity-link"
style={{ color: currentBackgroundColor ?? 'inherit' }}
to={entityUtilClassBase.getEntityLink(
entityType,
entityFQN
)}
onClick={(e) => e.stopPropagation()}>
{entityName}
</Link>
</Typography.Text>
) : (
<Typography.Text
className="announcement-entity-name"
ellipsis={{ tooltip: true }}
style={{ color: currentBackgroundColor ?? 'inherit' }}>
{entityName}
</Typography.Text>
)}
</div>
<Typography.Text className="timestamp" style={timeStampStyle}>
{getShortRelativeTime(timestamp)}
</Typography.Text>
</div>
</div>

<Typography.Paragraph
className="announcement-title"
ellipsis={{ tooltip: true, rows: 2 }}>
{title}
</Typography.Paragraph>

{description && (
<RichTextEditorPreviewerV1
className="announcement-description"
data-testid="announcement-description"
markdown={description}
maxLength={200}
showReadMoreBtn={false}
/>
)}

{!description && (
<Typography.Text className="text-grey-muted text-xs">
{t('message.no-announcement-message')}
</Typography.Text>
)}
</div>
<AnnouncementCardV1Content
backgroundColor={gradientBackground}
columnName=""
currentBackgroundColor={currentBackgroundColor}
description={description}
entityFQN={entityFQN}
entityIcon={entityIcon}
entityName={entityName}
entityType={entityType}
timestamp={timestamp}
title={title}
userName={userName}
/>
{!description && (
<Typography.Text className="text-grey-muted text-xs">
{t('message.no-announcement-message')}
</Typography.Text>
Comment thread
siddhant1 marked this conversation as resolved.
)}
Comment thread
siddhant1 marked this conversation as resolved.
</Card>
);
};
Expand Down
55 changes: 34 additions & 21 deletions .../Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import './announcement-card-v1-content.less';
const PRIMARY_COLOR = 'var(--ant-primary-color)';

interface AnnouncementCardV1ContentProps {
backgroundColor?: string;
borderColor?: string;
className?: string;
columnName: string;
currentBackgroundColor?: string;
Expand All @@ -44,13 +46,15 @@ interface AnnouncementCardV1ContentProps {
const VARIANT_CONFIG = {
default: {
header: 'tw:h-11 tw:text-[16px] tw:rounded-lg',
titleSection: '',
entityName: 'tw:!text-base tw:!font-medium',
iconSize: 'tw:size-4',
title: 'tw:text-sm tw:font-medium tw:!mb-1',
description: 'tw:text-sm tw:mt-2',
},
compact: {
header: 'tw:h-[30px] tw:text-xs tw:rounded-l-md',
header: 'tw:h-[30px] tw:flex-none tw:text-xs tw:rounded-[4px]',
titleSection: 'tw:px-[10px] tw:py-[6px] tw:pl-1',
Comment on lines +56 to +57
entityName: 'tw:!text-[11px] tw:!font-normal',
iconSize: 'tw:size-[9px]',
title: 'tw:text-xs tw:font-medium tw:!mb-0',
Expand All @@ -59,6 +63,8 @@ const VARIANT_CONFIG = {
};

const AnnouncementCardV1Content = ({
backgroundColor,
borderColor,
className,
columnName,
currentBackgroundColor,
Expand All @@ -77,6 +83,8 @@ const AnnouncementCardV1Content = ({
const { t } = useTranslation();

const color = currentBackgroundColor ?? PRIMARY_COLOR;
const bgColor = backgroundColor ?? color;
const accentBorderColor = borderColor ?? color;

const {
announcementTitleSectionStyle,
Expand All @@ -86,11 +94,11 @@ const AnnouncementCardV1Content = ({
} = useMemo(() => {
return {
announcementTitleSectionStyle: {
background: `linear-gradient(270deg, #ffffff -12.07%, ${color} 500.72%)`,
background: bgColor,
borderLeft: `3px solid ${accentBorderColor}`,
color: `${color} !important`,
},
announcementTitleStyle: {
borderLeft: `3px solid ${color}`,
color: `${color} !important`,
},
userNameStyle: {
Expand All @@ -100,7 +108,7 @@ const AnnouncementCardV1Content = ({
color,
},
};
}, [color]);
}, [color, bgColor, accentBorderColor]);

const handleEntityClick = (e: React.MouseEvent) => {
e.stopPropagation();
Expand All @@ -116,30 +124,35 @@ const AnnouncementCardV1Content = ({
<div
className={classNames(
'announcement-title-section',
variantConfig.header
variantConfig.header,
variantConfig.titleSection
)}
style={announcementTitleSectionStyle}>
{fieldOperation && fieldOperation !== FieldOperation.None ? (
{userName || entityName ? (
<div
className={classNames(
'announcement-header',
variantConfig.header
)}
style={announcementTitleStyle}>
<Link
className="user-name"
data-testid="user-link"
style={userNameStyle}
to={getUserPath(userName)}
onClick={handleUserClick}>
{userName}
</Link>
<Typography.Text
className="field-operation-text"
style={{ color }}>
{' '}
{getFieldOperationText(fieldOperation)}
</Typography.Text>
{userName && (
<Link
className="user-name"
data-testid="user-link"
style={userNameStyle}
to={getUserPath(userName)}
onClick={handleUserClick}>
{userName}
</Link>
)}
{fieldOperation && fieldOperation !== FieldOperation.None && (
<Typography.Text
className="field-operation-text"
style={{ color }}>
{' '}
{getFieldOperationText(fieldOperation)}
</Typography.Text>
)}
<span
className={classNames(
'announcement-card-entity-icon tw:flex tw:items-center',
Expand Down Expand Up @@ -204,7 +217,7 @@ const AnnouncementCardV1Content = ({
</div>
</div>

{fieldOperation && fieldOperation !== FieldOperation.None && (
{(userName || entityName) && title && (
<Typography.Paragraph
className={classNames('announcement-title', variantConfig.title)}
ellipsis={{ tooltip: true, rows: 2 }}>
Expand Down
1 change: 0 additions & 1 deletion ...MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,6 @@

.announcement-header {
align-items: center;
border-left: 3px solid @primary-color;
display: flex;
flex: 1;
font-weight: @font-semibold;
Expand Down
Loading