SONAR-17708 Update Rating Badge size

20 files changed, 20 insertions, 61 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx
index 54717829ac2..285052276ff 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/CoverageFilter.tsx
@@ -77,11 +77,7 @@ function renderOption(option: number, selected: boolean) {
   return (
     <div className="display-flex-center">
       {option < NO_DATA_OPTION && (
-        <CoverageRating
-          muted={!selected}
-          size="small"
-          value={getCoverageRatingAverageValue(option)}
-        />
+        <CoverageRating muted={!selected} value={getCoverageRatingAverageValue(option)} />
       )}
       <span className="spacer-left">
         {option < NO_DATA_OPTION ? (
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx
index 57d9ac71690..9058f808479 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/IssuesFilter.tsx
@@ -83,7 +83,7 @@ export default function IssuesFilter(props: Props) {
 function renderOption(option: number, selected: boolean) {
   return (
     <span>
-      <Rating muted={!selected} small={true} value={option} />
+      <Rating muted={!selected} value={option} />
       <span className="spacer-left">
         {translateWithParameters('projects.facets.rating_x', formatMeasure(option, 'RATING'))}
       </span>
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SecurityReviewFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SecurityReviewFilter.tsx
index d67bd63b0ea..cb96b1cf8ea 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SecurityReviewFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SecurityReviewFilter.tsx
@@ -92,7 +92,7 @@ function renderAccessibleLabel(option: number) {
 function renderOption(option: number, selected: boolean) {
   return (
     <span>
-      <Rating muted={!selected} small={true} value={option} />
+      <Rating muted={!selected} value={option} />
       <span className="spacer-left">{labels[option]}</span>
     </span>
   );
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx
index 0eb7ad04860..ec1f090537c 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/SizeFilter.tsx
@@ -64,7 +64,7 @@ function getFacetValueForOption(facet: Facet, option: number) {
 function renderOption(option: number, selected: boolean) {
   return (
     <div className="display-flex-center">
-      <SizeRating muted={!selected} small={true} value={getSizeRatingAverageValue(option)} />
+      <SizeRating muted={!selected} value={getSizeRatingAverageValue(option)} />
       <span className="spacer-left">{getSizeRatingLabel(option)}</span>
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap
index cc8845fca55..b6cdba64d87 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/CoverageFilter-test.tsx.snap
@@ -33,7 +33,6 @@ exports[`renders 2`] = `
 >
   <CoverageRating
     muted={true}
-    size="small"
     value={75}
   />
   <span
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap
index a31a4afc1c4..f21d8b13b45 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/IssuesFilter-test.tsx.snap
@@ -28,7 +28,6 @@ exports[`renders 2`] = `
 <span>
   <Rating
     muted={true}
-    small={true}
     value={2}
   />
   <span
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityReviewFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityReviewFilter-test.tsx.snap
index 1489d874689..5e967d3fce5 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityReviewFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityReviewFilter-test.tsx.snap
@@ -39,7 +39,6 @@ exports[`renders: option 1`] = `
 <span>
   <Rating
     muted={true}
-    small={true}
     value={2}
   />
   <span
diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap
index 82fe4ec4ce3..d3e8cedaca7 100644
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SizeFilter-test.tsx.snap
@@ -31,7 +31,6 @@ exports[`renders 2`] = `
 >
   <SizeRating
     muted={true}
-    small={true}
     value={5000}
   />
   <span
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx
index 134e9a6635e..124121d5add 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsTooltipsContentIssues.tsx
@@ -53,7 +53,7 @@ export default function GraphsTooltipsContentIssues(props: GraphsTooltipsContent
       </td>
       <td className="text-right spacer-right">
         <span className="activity-graph-tooltip-value">{value}</span>
-        {ratingValue && <Rating className="spacer-left" small={true} value={ratingValue} />}
+        {ratingValue && <Rating className="spacer-left" value={ratingValue} />}
       </td>
       <td>{translatedName}</td>
     </tr>
diff --git a/server/sonar-web/src/main/js/components/measure/Measure.tsx b/server/sonar-web/src/main/js/components/measure/Measure.tsx
index b3d99084a10..2401d67c231 100644
--- a/server/sonar-web/src/main/js/components/measure/Measure.tsx
+++ b/server/sonar-web/src/main/js/components/measure/Measure.tsx
@@ -58,7 +58,7 @@ export default function Measure({
   }
 
   const tooltip = <RatingTooltipContent metricKey={metricKey} value={value} />;
-  const rating = <Rating small={small} value={value} />;
+  const rating = <Rating value={value} />;
 
   if (tooltip) {
     return (
diff --git a/server/sonar-web/src/main/js/components/search-navigator.css b/server/sonar-web/src/main/js/components/search-navigator.css
index 60a486ddcab..d8890724127 100644
--- a/server/sonar-web/src/main/js/components/search-navigator.css
+++ b/server/sonar-web/src/main/js/components/search-navigator.css
@@ -91,8 +91,8 @@ button.search-navigator-facet {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: var(--controlHeight);
-  margin: 0 0 1px 0;
+  height: calc(3.5 * var(--gridSize));
+  margin-bottom: 1px;
   padding: 0 calc(0.75 * var(--gridSize));
   border: 1px solid transparent;
   border-radius: 2px;
diff --git a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
index 1335b21ca15..1788106d839 100644
--- a/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
+++ b/server/sonar-web/src/main/js/components/ui/DuplicationsRating.css
@@ -31,8 +31,8 @@
 }
 
 .duplications-rating-small {
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-width: 3px;
 }
 
diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css
index db35cb8ab90..e1767218321 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -29,14 +29,6 @@
   justify-content: center;
 }
 
-.rating-small {
-  width: 20px;
-  height: 20px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  font-size: var(--mediumFontSize);
-}
-
 .rating-muted {
   background-color: var(--gray71) !important;
   color: var(--white) !important;
diff --git a/server/sonar-web/src/main/js/components/ui/Rating.tsx b/server/sonar-web/src/main/js/components/ui/Rating.tsx
index dc0fc2a581e..520320c9996 100644
--- a/server/sonar-web/src/main/js/components/ui/Rating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/Rating.tsx
@@ -30,21 +30,11 @@ interface Props extends React.AriaAttributes {
   value: string | number | undefined;
 }
 
-export default function Rating({
-  className,
-  muted = false,
-  small = false,
-  value,
-  ...ariaAttrs
-}: Props) {
+export default function Rating({ className, muted = false, value, ...ariaAttrs }: Props) {
   if (value === undefined) {
     return (
       <span
-        className={classNames(
-          'no-rating',
-          { 'rating-small': small, 'rating-muted': muted },
-          className
-        )}
+        className={classNames('no-rating', { 'rating-muted': muted }, className)}
         aria-label={translate('metric.no_rating')}
         {...ariaAttrs}
       >
@@ -56,12 +46,7 @@ export default function Rating({
   return (
     <span
       aria-label={translateWithParameters('metric.has_rating_X', formatted)}
-      className={classNames(
-        'rating',
-        `rating-${formatted}`,
-        { 'rating-small': small, 'rating-muted': muted },
-        className
-      )}
+      className={classNames('rating', `rating-${formatted}`, { 'rating-muted': muted }, className)}
       {...ariaAttrs}
     >
       {formatted}
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.css b/server/sonar-web/src/main/js/components/ui/SizeRating.css
index 9de0fe9fc3e..d082020c35e 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.css
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.css
@@ -31,14 +31,6 @@
   text-align: center;
 }
 
-.size-rating-small {
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
 .size-rating-muted {
   background-color: var(--gray71);
 }
diff --git a/server/sonar-web/src/main/js/components/ui/SizeRating.tsx b/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
index 1620f95914c..20eb683f05a 100644
--- a/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
+++ b/server/sonar-web/src/main/js/components/ui/SizeRating.tsx
@@ -24,11 +24,10 @@ import './SizeRating.css';
 
 export interface Props {
   muted?: boolean;
-  small?: boolean;
   value: number | null | undefined;
 }
 
-export default function SizeRating({ small = false, muted = false, value }: Props) {
+export default function SizeRating({ muted = false, value }: Props) {
   if (value == null) {
     return <div className="size-rating size-rating-muted">&nbsp;</div>;
   }
@@ -47,7 +46,6 @@ export default function SizeRating({ small = false, muted = false, value }: Prop
   }
 
   const className = classNames('size-rating', {
-    'size-rating-small': small,
     'size-rating-muted': muted,
   });
 
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx
index 5ee080eaa2d..34d9b1a94fe 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/Rating-test.tsx
@@ -26,11 +26,11 @@ it('renders numeric value', () => {
 });
 
 it('renders string value', () => {
-  expect(shallow(<Rating value="2.0" muted={true} small={true} />)).toMatchSnapshot();
+  expect(shallow(<Rating value="2.0" muted={true} />)).toMatchSnapshot();
 });
 
 it('renders undefined value', () => {
-  expect(shallow(<Rating value={undefined} muted={true} small={true} />)).toMatchSnapshot();
+  expect(shallow(<Rating value={undefined} muted={true} />)).toMatchSnapshot();
 });
 
 it('renders with a custom aria-label', () => {
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/SizeRating-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/SizeRating-test.tsx
index 5a20d0b0f9e..1d7c39f95d9 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/SizeRating-test.tsx
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/SizeRating-test.tsx
@@ -23,7 +23,7 @@ import SizeRating, { Props } from '../SizeRating';
 
 it('should render correctly', () => {
   expect(shallowRender()).toMatchSnapshot();
-  expect(shallowRender({ muted: true, small: true, value: 1000 })).toMatchSnapshot();
+  expect(shallowRender({ muted: true, value: 1000 })).toMatchSnapshot();
   expect(shallowRender({ value: 10000 })).toMatchSnapshot();
   expect(shallowRender({ value: 100000 })).toMatchSnapshot();
   expect(shallowRender({ value: 500000 })).toMatchSnapshot();
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap
index be2ef45164a..ae144aba8fc 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/Rating-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`renders numeric value 1`] = `
 exports[`renders string value 1`] = `
 <span
   aria-label="metric.has_rating_X.B"
-  className="rating rating-B rating-small rating-muted"
+  className="rating rating-B rating-muted"
 >
   B
 </span>
@@ -21,7 +21,7 @@ exports[`renders string value 1`] = `
 exports[`renders undefined value 1`] = `
 <span
   aria-label="metric.no_rating"
-  className="no-rating rating-small rating-muted"
+  className="no-rating rating-muted"
 >
   –
 </span>
diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/SizeRating-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/SizeRating-test.tsx.snap
index a35517cc685..cbbdbe32d2c 100644
--- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/SizeRating-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/SizeRating-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`should render correctly 1`] = `
 exports[`should render correctly 2`] = `
 <div
   aria-hidden="true"
-  className="size-rating size-rating-small size-rating-muted"
+  className="size-rating size-rating-muted"
 >
   S
 </div>