From 19498a711545779ae36cf27fe4a7a4dd9a0afdbd Mon Sep 17 00:00:00 2001 From: Siddhant Date: Wed, 13 May 2026 11:36:14 +0530 Subject: [PATCH 1/3] fix(ui): polish marketplace announcement card and dedupe V1 card V2 marketplace announcement card: - Decouple text / background / border into three props on AnnouncementCardV1Content (backgroundColor, borderColor, currentBackgroundColor) so they can use distinct design tokens. - Switch V2 to the blue-dark utility palette: --tw-color-utility-blue-dark-{50,500,600} for bg / border / text. Use the prefixed Tailwind variable name so it resolves at runtime. - Compact variant now renders at 27px tall with rounded-4px corners, flex-none so a fixed width sticks, and px-10 / py-6 padding on the title-section only. - Border moved from the inner .announcement-header to the outer .announcement-title-section so it follows the rounded corners. V1 home page announcement card: - Stop duplicating the JSX inlined during the Task-redesign migration (51ecf4502f) and delegate back to AnnouncementCardV1Content. The original Thread-based shape required fieldOperation/columnName which AnnouncementEntity no longer has - the migration inlined a stripped-down version instead of updating the shared component. - Generalize AnnouncementCardV1Content so the rich header (user + icon + entity link) renders whenever userName or entityName is provided. field-operation-text stays gated on fieldOperation; title paragraph below renders whenever the rich header was used and title is set. - V1 keeps its gradient look by passing the linear-gradient string through backgroundColor; V2 passes a solid color. --- .../AnnouncementItemV2.component.tsx | 4 +- .../AnnouncementCardV1.component.tsx | 130 ++++-------------- .../AnnouncementCardV1Content.component.tsx | 55 +++++--- .../announcement-card-v1-content.less | 1 - 4 files changed, 60 insertions(+), 130 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx index e588a293b692..68869a5ce0d6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx @@ -72,8 +72,10 @@ const AnnouncementItemV2 = ({ } }}> { - 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; + return ( -
-
-
-
- {userName && ( - e.stopPropagation()}> - {userName} - - )} - - {entityIcon} - - {entityFQN && entityType ? ( - - e.stopPropagation()}> - {entityName} - - - ) : ( - - {entityName} - - )} -
- - {getShortRelativeTime(timestamp)} - -
-
- - - {title} - - - {description && ( - - )} - - {!description && ( - - {t('message.no-announcement-message')} - - )} -
+ + {!description && ( + + {t('message.no-announcement-message')} + + )} ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx index 510f5b7a2a93..d58e72c6499b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx @@ -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; @@ -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', entityName: 'tw:!text-[11px] tw:!font-normal', iconSize: 'tw:size-[9px]', title: 'tw:text-xs tw:font-medium tw:!mb-0', @@ -59,6 +63,8 @@ const VARIANT_CONFIG = { }; const AnnouncementCardV1Content = ({ + backgroundColor, + borderColor, className, columnName, currentBackgroundColor, @@ -77,6 +83,8 @@ const AnnouncementCardV1Content = ({ const { t } = useTranslation(); const color = currentBackgroundColor ?? PRIMARY_COLOR; + const bgColor = backgroundColor ?? color; + const accentBorderColor = borderColor ?? color; const { announcementTitleSectionStyle, @@ -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: { @@ -100,7 +108,7 @@ const AnnouncementCardV1Content = ({ color, }, }; - }, [color]); + }, [color, bgColor, accentBorderColor]); const handleEntityClick = (e: React.MouseEvent) => { e.stopPropagation(); @@ -116,30 +124,35 @@ const AnnouncementCardV1Content = ({
- {fieldOperation && fieldOperation !== FieldOperation.None ? ( + {userName || entityName ? (
- - {userName} - - - {' '} - {getFieldOperationText(fieldOperation)} - + {userName && ( + + {userName} + + )} + {fieldOperation && fieldOperation !== FieldOperation.None && ( + + {' '} + {getFieldOperationText(fieldOperation)} + + )}
- {fieldOperation && fieldOperation !== FieldOperation.None && ( + {(userName || entityName) && title && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less index 45ef72b71d2e..f562df42d2a3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less @@ -90,7 +90,6 @@ .announcement-header { align-items: center; - border-left: 3px solid @primary-color; display: flex; flex: 1; font-weight: @font-semibold; From 5ec1df0812267ef5b8fc1ede7e3548d6cd73dff3 Mon Sep 17 00:00:00 2001 From: Siddhant Date: Thu, 14 May 2026 14:11:21 +0530 Subject: [PATCH 2/3] fix(ui): match announcements card to design spec colors Update border and background tokens on AnnouncementsWidgetV2 to use utility-blue-dark-100 (#D1E0FF) / utility-blue-dark-50 (#EFF4FF) per the Untitled UI spec, align the loading skeleton with the loaded card, and drop the zero-padded count format (01 -> 1). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../AnnouncementsWidgetV2.component.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx index ebf6d5ee78cd..b39b4e64d89d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx @@ -118,7 +118,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => { if (loading) { return (
@@ -131,7 +131,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => { return (
@@ -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}
From 5c8487d1880e49c9da64fdba3d232df7fa499039 Mon Sep 17 00:00:00 2001 From: Siddhant Date: Thu, 14 May 2026 14:22:18 +0530 Subject: [PATCH 3/3] fix(ui): use gray-blue-100 border on announcements card Switch the AnnouncementsWidgetV2 border from utility-blue-dark-100 to gray-blue-100 (#EAECF5) to match the updated design spec. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx index b39b4e64d89d..03a25d1d8b31 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx @@ -118,7 +118,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => { if (loading) { return (
@@ -131,7 +131,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => { return (