SONAR-17708 Update Rating Badge size

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 54717829ac2550aa51b661715d30b110f328f12b..285052276ff1d5bf2dde06f2c1082ed87fb018ef 100644 (file)
--- 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 57d9ac716905f52f45cd7cdb7ab241626e9602f3..9058f808479e1c8ff06fe2cf9f8587bb18d4eba2 100644 (file)
--- 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 d67bd63b0ea9fc7634ce568992fd99dbdd596076..cb96b1cf8ea75f2cabe4a0d77aa2367eea7354f6 100644 (file)
--- 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 0eb7ad048600844343ca70fbc2d203f3cdec886e..ec1f090537c24b51b446d33495c41f765c511e15 100644 (file)
--- 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 cc8845fca5543e853397ed4c8eb5283c86288ea6..b6cdba64d871656cf019322de13df4d52ee0716c 100644 (file)
--- 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 a31a4afc1c4ac229b25dd7144c5137c76de40d55..f21d8b13b45892cb517a108f04e766b0cb9c16c3 100644 (file)
--- 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 1489d874689f18934aae959402eb6fe2a1bc96f0..5e967d3fce51ef18142009775b7931daf543928e 100644 (file)
--- 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 82fe4ec4ce3d89d60b38715f461c48fa538bff06..d3e8cedaca74ed04b0a4350167aaffc1b8480ae3 100644 (file)
--- 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 134e9a6635e77ebfe6feb15822c4820abf8adf48..124121d5addfe4afc7c1d0495564c051ba6895db 100644 (file)
--- 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 b3d99084a107e011ae08aee08d146cd943581048..2401d67c2316d30115f2930e1b02044e1ffbda90 100644 (file)
--- 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 60a486ddcabca488e6474bceadd6f986f6900321..d8890724127a6d294407bb2fc66c1ff3a677946f 100644 (file)
--- 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 1335b21ca152e1d8ffd94a88248c0d9a7dbecb7a..1788106d83977d5abd22e900497b5304dc78da4f 100644 (file)
--- 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 db35cb8ab9070228d3573ae9fdfee5822de53455..e1767218321a71bf951bc14c9385463482e6ec5c 100644 (file)
--- 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 dc0fc2a581e371f5574d54881b850db302c2321e..520320c99968c6cec28ba6cfef417055120749db 100644 (file)
--- 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 9de0fe9fc3ef7c4ca69f15897143dca8c6fe6bbe..d082020c35ea22e0674a2d00776a9221253feee5 100644 (file)
--- 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 1620f95914cb41bebe7051fc8085571047589662..20eb683f05a700dea53d86863e08e78c02b96e82 100644 (file)
--- 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 5ee080eaa2d4bce07c38cfa73f19381674db401e..34d9b1a94fe7ec6884afce0bfa1de9be7f9aa817 100644 (file)
--- 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 5a20d0b0f9e8be29c7bffa271b937f67f3db4463..1d7c39f95d9703f8c81e473f7cdb3103fd3b9e11 100644 (file)
--- 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 be2ef45164a15d648232c8d3781df545a6de2130..ae144aba8fcf6063ec7703fa20e95e9640a284c5 100644 (file)
--- 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 a35517cc685b0f272f7255d1d015ff6cf882a072..cbbdbe32d2c15d97e0ca10c3974bcbc87d44abef 100644 (file)
--- 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>