diff options
Diffstat (limited to 'server/sonar-web/design-system')
3 files changed, 22 insertions, 5 deletions
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/HotspotRating-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/HotspotRating-test.tsx.snap index 741beaababd..900f1f226d9 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/HotspotRating-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/HotspotRating-test.tsx.snap @@ -74,7 +74,7 @@ exports[`should render HotspotRating with MEDIUM rating 1`] = ` <circle cx="8" cy="8" - fill="rgb(255,214,175)" + fill="rgb(254,205,202)" r="7" /> <path diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/MetricsRatingBadge.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/MetricsRatingBadge.tsx index bf1555b1b93..9276c9b286a 100644 --- a/server/sonar-web/design-system/src/sonar-aligned/components/MetricsRatingBadge.tsx +++ b/server/sonar-web/design-system/src/sonar-aligned/components/MetricsRatingBadge.tsx @@ -26,6 +26,7 @@ import { RatingLabel } from '../types/measures'; type sizeType = keyof typeof SIZE_MAPPING; interface Props extends React.AriaAttributes { className?: string; + isLegacy?: boolean; label?: string; rating?: RatingLabel; size?: sizeType; @@ -40,7 +41,10 @@ const SIZE_MAPPING = { }; export const MetricsRatingBadge = forwardRef<HTMLDivElement, Props>( - ({ className, size = 'sm', label, rating, ...ariaAttrs }: Readonly<Props>, ref) => { + ( + { className, size = 'sm', isLegacy = true, label, rating, ...ariaAttrs }: Readonly<Props>, + ref, + ) => { if (!rating) { return ( <StyledNoRatingBadge @@ -58,6 +62,7 @@ export const MetricsRatingBadge = forwardRef<HTMLDivElement, Props>( <MetricsRatingBadgeStyled aria-label={label} className={className} + isLegacy={isLegacy} rating={rating} ref={ref} size={SIZE_MAPPING[size]} @@ -91,12 +96,17 @@ const getFontSize = (size: string) => { } }; -const MetricsRatingBadgeStyled = styled.div<{ rating: RatingLabel; size: string }>` +const MetricsRatingBadgeStyled = styled.div<{ + isLegacy: boolean; + rating: RatingLabel; + size: string; +}>` width: ${getProp('size')}; height: ${getProp('size')}; color: ${({ rating }) => themeContrast(`rating.${rating}`)}; font-size: ${({ size }) => getFontSize(size)}; - background-color: ${({ rating }) => themeColor(`rating.${rating}`)}; + background-color: ${({ rating, isLegacy }) => + themeColor(`rating.${isLegacy ? 'legacy.' : ''}${rating}`)}; user-select: none; display: inline-flex; diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts index 098ca5ce763..dce350b51b6 100644 --- a/server/sonar-web/design-system/src/theme/light.ts +++ b/server/sonar-web/design-system/src/theme/light.ts @@ -465,10 +465,17 @@ export const lightTheme = { sizeIndicator: COLORS.blue[500], // rating colors + 'rating.legacy.A': COLORS.green[200], + 'rating.legacy.B': COLORS.yellowGreen[200], + 'rating.legacy.C': COLORS.yellow[200], + 'rating.legacy.D': COLORS.orange[200], + 'rating.legacy.E': COLORS.red[200], + + // rating colors 'rating.A': COLORS.green[200], 'rating.B': COLORS.yellowGreen[200], 'rating.C': COLORS.yellow[200], - 'rating.D': COLORS.orange[200], + 'rating.D': COLORS.red[200], 'rating.E': COLORS.red[200], // rating donut outside circle indicators |