Skip to content

Commit 8dcf2a9

Browse files
siddhant1Siddhantclaude
authored
fix(ui): polish marketplace announcement card and dedupe V1 card (#28066)
* 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 (51ecf45) 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. * 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) <noreply@anthropic.com> * 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) <noreply@anthropic.com> --------- Co-authored-by: Siddhant <siddhant@MacBook-Pro-751.local> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 2d1d534 commit 8dcf2a9

5 files changed

Lines changed: 63 additions & 133 deletions

File tree

‎openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,10 @@ const AnnouncementItemV2 = ({
7272
}
7373
}}>
7474
<AnnouncementCardV1Content
75+
backgroundColor="var(--tw-color-utility-blue-dark-50)"
76+
borderColor="var(--tw-color-utility-blue-dark-500)"
7577
columnName={columnName}
76-
currentBackgroundColor="var(--color-utility-blue-100)"
78+
currentBackgroundColor="var(--tw-color-utility-blue-dark-600)"
7779
description={description}
7880
entityFQN={entityFQN}
7981
entityIcon={entityIcon}

‎openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
118118
if (loading) {
119119
return (
120120
<div
121-
className="tw:rounded-xl tw:border tw:border-border-primary tw:bg-utility-blue-100 tw:px-1 tw:pt-3 tw:pb-1"
121+
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"
122122
data-testid="announcements-widget-v2">
123123
<Loader size="small" />
124124
</div>
@@ -131,7 +131,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
131131

132132
return (
133133
<div
134-
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"
134+
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"
135135
data-testid="announcements-widget-v2">
136136
<div className="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:px-3">
137137
<div className="tw:flex tw:items-center tw:gap-2">
@@ -148,7 +148,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
148148
className="tw:rounded-md tw:bg-bg-primary tw:px-2 tw:py-0.5 tw:text-text-tertiary"
149149
size="text-sm"
150150
weight="medium">
151-
{String(announcements.length).padStart(2, '0')}
151+
{announcements.length}
152152
</Typography>
153153
</div>
154154
</div>

‎openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1.component.tsx‎

Lines changed: 23 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,11 @@ import { Card, Typography } from 'antd';
1414
import classNames from 'classnames';
1515
import { useMemo } from 'react';
1616
import { useTranslation } from 'react-i18next';
17-
import { Link } from 'react-router-dom';
1817
import { AnnouncementEntity } from '../../../../../rest/announcementsAPI';
19-
import { getShortRelativeTime } from '../../../../../utils/date-time/DateTimeUtils';
20-
import entityUtilClassBase from '../../../../../utils/EntityUtilClassBase';
2118
import { getEntityFQN, getEntityType } from '../../../../../utils/FeedUtils';
22-
import { getUserPath } from '../../../../../utils/RouterUtils';
2319
import { getEntityIcon } from '../../../../../utils/TableUtils';
24-
import RichTextEditorPreviewerV1 from '../../../../common/RichTextEditor/RichTextEditorPreviewerV1';
2520
import './announcement-card-v1.less';
21+
import AnnouncementCardV1Content from './AnnouncementCardV1Content.component';
2622

2723
interface AnnouncementCardV1Props {
2824
announcement: AnnouncementEntity;
@@ -61,115 +57,35 @@ const AnnouncementCardV1 = ({
6157
};
6258
}, [announcement]);
6359

64-
const {
65-
announcementTitleSectionStyle,
66-
announcementTitleStyle,
67-
userNameStyle,
68-
timeStampStyle,
69-
} = useMemo(() => {
70-
if (!currentBackgroundColor) {
71-
return {};
72-
}
73-
74-
return {
75-
announcementTitleSectionStyle: {
76-
background: `linear-gradient(270deg, #ffffff -12.07%, ${currentBackgroundColor} 500.72%)`,
77-
color: `${currentBackgroundColor} !important`,
78-
},
79-
announcementTitleStyle: {
80-
borderLeft: `3px solid ${currentBackgroundColor}`,
81-
color: `${currentBackgroundColor} !important`,
82-
},
83-
userNameStyle: {
84-
color: currentBackgroundColor,
85-
},
86-
timeStampStyle: {
87-
color: currentBackgroundColor,
88-
},
89-
};
90-
}, [currentBackgroundColor]);
91-
9260
const entityIcon = useMemo(() => getEntityIcon(entityType), [entityType]);
9361

62+
const gradientBackground = currentBackgroundColor
63+
? `linear-gradient(270deg, #ffffff -12.07%, ${currentBackgroundColor} 500.72%)`
64+
: undefined;
65+
9466
return (
9567
<Card
9668
className={classNames('announcement-card-v1', disabled ? 'disabled' : '')}
9769
data-testid={`announcement-card-v1-${announcement.id}`}
9870
onClick={onClick}>
99-
<div className="announcement-card-v1-content">
100-
<div className="announcement-header-container">
101-
<div
102-
className="announcement-title-section"
103-
style={announcementTitleSectionStyle}>
104-
<div className="announcement-header" style={announcementTitleStyle}>
105-
{userName && (
106-
<Link
107-
className="user-name"
108-
data-testid="user-link"
109-
style={userNameStyle}
110-
to={getUserPath(userName)}
111-
onClick={(e) => e.stopPropagation()}>
112-
{userName}
113-
</Link>
114-
)}
115-
<span
116-
className="announcement-card-entity-icon"
117-
style={{ color: currentBackgroundColor ?? 'inherit' }}>
118-
{entityIcon}
119-
</span>
120-
{entityFQN && entityType ? (
121-
<Typography.Text
122-
ellipsis={{ tooltip: true }}
123-
style={{ color: currentBackgroundColor ?? 'inherit' }}>
124-
<Link
125-
className="announcement-entity-name"
126-
data-testid="announcement-entity-link"
127-
style={{ color: currentBackgroundColor ?? 'inherit' }}
128-
to={entityUtilClassBase.getEntityLink(
129-
entityType,
130-
entityFQN
131-
)}
132-
onClick={(e) => e.stopPropagation()}>
133-
{entityName}
134-
</Link>
135-
</Typography.Text>
136-
) : (
137-
<Typography.Text
138-
className="announcement-entity-name"
139-
ellipsis={{ tooltip: true }}
140-
style={{ color: currentBackgroundColor ?? 'inherit' }}>
141-
{entityName}
142-
</Typography.Text>
143-
)}
144-
</div>
145-
<Typography.Text className="timestamp" style={timeStampStyle}>
146-
{getShortRelativeTime(timestamp)}
147-
</Typography.Text>
148-
</div>
149-
</div>
150-
151-
<Typography.Paragraph
152-
className="announcement-title"
153-
ellipsis={{ tooltip: true, rows: 2 }}>
154-
{title}
155-
</Typography.Paragraph>
156-
157-
{description && (
158-
<RichTextEditorPreviewerV1
159-
className="announcement-description"
160-
data-testid="announcement-description"
161-
markdown={description}
162-
maxLength={200}
163-
showReadMoreBtn={false}
164-
/>
165-
)}
166-
167-
{!description && (
168-
<Typography.Text className="text-grey-muted text-xs">
169-
{t('message.no-announcement-message')}
170-
</Typography.Text>
171-
)}
172-
</div>
71+
<AnnouncementCardV1Content
72+
backgroundColor={gradientBackground}
73+
columnName=""
74+
currentBackgroundColor={currentBackgroundColor}
75+
description={description}
76+
entityFQN={entityFQN}
77+
entityIcon={entityIcon}
78+
entityName={entityName}
79+
entityType={entityType}
80+
timestamp={timestamp}
81+
title={title}
82+
userName={userName}
83+
/>
84+
{!description && (
85+
<Typography.Text className="text-grey-muted text-xs">
86+
{t('message.no-announcement-message')}
87+
</Typography.Text>
88+
)}
17389
</Card>
17490
);
17591
};

‎openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import './announcement-card-v1-content.less';
2626
const PRIMARY_COLOR = 'var(--ant-primary-color)';
2727

2828
interface AnnouncementCardV1ContentProps {
29+
backgroundColor?: string;
30+
borderColor?: string;
2931
className?: string;
3032
columnName: string;
3133
currentBackgroundColor?: string;
@@ -44,13 +46,15 @@ interface AnnouncementCardV1ContentProps {
4446
const VARIANT_CONFIG = {
4547
default: {
4648
header: 'tw:h-11 tw:text-[16px] tw:rounded-lg',
49+
titleSection: '',
4750
entityName: 'tw:!text-base tw:!font-medium',
4851
iconSize: 'tw:size-4',
4952
title: 'tw:text-sm tw:font-medium tw:!mb-1',
5053
description: 'tw:text-sm tw:mt-2',
5154
},
5255
compact: {
53-
header: 'tw:h-[30px] tw:text-xs tw:rounded-l-md',
56+
header: 'tw:h-[30px] tw:flex-none tw:text-xs tw:rounded-[4px]',
57+
titleSection: 'tw:px-[10px] tw:py-[6px] tw:pl-1',
5458
entityName: 'tw:!text-[11px] tw:!font-normal',
5559
iconSize: 'tw:size-[9px]',
5660
title: 'tw:text-xs tw:font-medium tw:!mb-0',
@@ -59,6 +63,8 @@ const VARIANT_CONFIG = {
5963
};
6064

6165
const AnnouncementCardV1Content = ({
66+
backgroundColor,
67+
borderColor,
6268
className,
6369
columnName,
6470
currentBackgroundColor,
@@ -77,6 +83,8 @@ const AnnouncementCardV1Content = ({
7783
const { t } = useTranslation();
7884

7985
const color = currentBackgroundColor ?? PRIMARY_COLOR;
86+
const bgColor = backgroundColor ?? color;
87+
const accentBorderColor = borderColor ?? color;
8088

8189
const {
8290
announcementTitleSectionStyle,
@@ -86,11 +94,11 @@ const AnnouncementCardV1Content = ({
8694
} = useMemo(() => {
8795
return {
8896
announcementTitleSectionStyle: {
89-
background: `linear-gradient(270deg, #ffffff -12.07%, ${color} 500.72%)`,
97+
background: bgColor,
98+
borderLeft: `3px solid ${accentBorderColor}`,
9099
color: `${color} !important`,
91100
},
92101
announcementTitleStyle: {
93-
borderLeft: `3px solid ${color}`,
94102
color: `${color} !important`,
95103
},
96104
userNameStyle: {
@@ -100,7 +108,7 @@ const AnnouncementCardV1Content = ({
100108
color,
101109
},
102110
};
103-
}, [color]);
111+
}, [color, bgColor, accentBorderColor]);
104112

105113
const handleEntityClick = (e: React.MouseEvent) => {
106114
e.stopPropagation();
@@ -116,30 +124,35 @@ const AnnouncementCardV1Content = ({
116124
<div
117125
className={classNames(
118126
'announcement-title-section',
119-
variantConfig.header
127+
variantConfig.header,
128+
variantConfig.titleSection
120129
)}
121130
style={announcementTitleSectionStyle}>
122-
{fieldOperation && fieldOperation !== FieldOperation.None ? (
131+
{userName || entityName ? (
123132
<div
124133
className={classNames(
125134
'announcement-header',
126135
variantConfig.header
127136
)}
128137
style={announcementTitleStyle}>
129-
<Link
130-
className="user-name"
131-
data-testid="user-link"
132-
style={userNameStyle}
133-
to={getUserPath(userName)}
134-
onClick={handleUserClick}>
135-
{userName}
136-
</Link>
137-
<Typography.Text
138-
className="field-operation-text"
139-
style={{ color }}>
140-
{' '}
141-
{getFieldOperationText(fieldOperation)}
142-
</Typography.Text>
138+
{userName && (
139+
<Link
140+
className="user-name"
141+
data-testid="user-link"
142+
style={userNameStyle}
143+
to={getUserPath(userName)}
144+
onClick={handleUserClick}>
145+
{userName}
146+
</Link>
147+
)}
148+
{fieldOperation && fieldOperation !== FieldOperation.None && (
149+
<Typography.Text
150+
className="field-operation-text"
151+
style={{ color }}>
152+
{' '}
153+
{getFieldOperationText(fieldOperation)}
154+
</Typography.Text>
155+
)}
143156
<span
144157
className={classNames(
145158
'announcement-card-entity-icon tw:flex tw:items-center',
@@ -204,7 +217,7 @@ const AnnouncementCardV1Content = ({
204217
</div>
205218
</div>
206219

207-
{fieldOperation && fieldOperation !== FieldOperation.None && (
220+
{(userName || entityName) && title && (
208221
<Typography.Paragraph
209222
className={classNames('announcement-title', variantConfig.title)}
210223
ellipsis={{ tooltip: true, rows: 2 }}>

‎openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090

9191
.announcement-header {
9292
align-items: center;
93-
border-left: 3px solid @primary-color;
9493
display: flex;
9594
flex: 1;
9695
font-weight: @font-semibold;

0 commit comments

Comments
 (0)