SONAR-11714 Make badges round

diff --git a/server/sonar-web/src/main/js/app/styles/components/badges.css b/server/sonar-web/src/main/js/app/styles/components/badges.css
index 5704c6ed703f920c2becf3816e39f5d602903cb3..89b735f3b7185d66a79157d36a5a46c4a9d9e194 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/components/badges.css
+++ b/server/sonar-web/src/main/js/app/styles/components/badges.css
@@ -23,7 +23,7 @@
   height: var(--smallControlHeight);
   line-height: calc(var(--smallControlHeight) - 1px);
   padding: 0 var(--gridSize);
-  border-radius: 2px;
+  border-radius: 10px;
   font-size: var(--smallFontSize);
   min-width: 10px;
   letter-spacing: 0.03em;
@@ -47,12 +47,6 @@ a.badge {
   border-bottom: none;
 }
 
-.badge.is-rounded {
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 50px;
-}
-
 .badge-medium {
   height: var(--controlHeight);
   line-height: calc(var(--controlHeight));
@@ -111,7 +105,6 @@ a.badge {
 
 .badge-danger-light {
   border: 1px solid var(--alertBorderError) !important;
-  border-radius: 3px;
   background-color: var(--alertBackgroundError);
   color: #a94442;
 }
@@ -124,7 +117,6 @@ a.badge-danger-light:active {
 
 .badge-focus {
   border: 1px solid #faebcc;
-  border-radius: 3px;
   background-color: #fcf8e3;
   color: #8a6d3b;
   font-weight: 400;
@@ -147,7 +139,7 @@ a.badge-focus:active {
   line-height: calc(var(--smallControlHeight) - 1px);
   padding: 0 var(--gridSize);
   border: 1px solid var(--gray80);
-  border-radius: 2px;
+  border-radius: 10px;
   box-sizing: border-box;
   background-color: var(--gray80);
   font-size: var(--smallFontSize);

diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
index 600ee76ca42a35eb1a287a14a23c2b0ffc68944b..9fc909e9a9f9ce4f8176b65e108beb1f9802eb63 100644 (file)
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
@@ -60,7 +60,7 @@ export default class FacetHeader extends React.PureComponent<Props> {
     const value =
       values.length === 1 ? values[0] : translateWithParameters('x_selected', values.length);
     return (
-      <span className="badge badge-secondary is-rounded text-ellipsis" title={value}>
+      <span className="badge badge-secondary text-ellipsis" title={value}>
         {value}
       </span>
     );

diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
index 2e5979cbff64cc473f04d1a4c5d73f54be064219..d0b3085bc686bb0d90fdde4a672411b308df98ae 100644 (file)
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
@@ -22,7 +22,7 @@ exports[`should clear 1`] = `
     className="search-navigator-facet-header-value spacer-left spacer-right "
   >
     <span
-      className="badge badge-secondary is-rounded text-ellipsis"
+      className="badge badge-secondary text-ellipsis"
       title="x_selected.3"
     >
       x_selected.3
@@ -59,7 +59,7 @@ exports[`should render closed facet with value 1`] = `
     className="search-navigator-facet-header-value spacer-left spacer-right "
   >
     <span
-      className="badge badge-secondary is-rounded text-ellipsis"
+      className="badge badge-secondary text-ellipsis"
       title="foo"
     >
       foo
@@ -114,7 +114,7 @@ exports[`should render open facet with value 1`] = `
     className="search-navigator-facet-header-value spacer-left spacer-right "
   >
     <span
-      className="badge badge-secondary is-rounded text-ellipsis"
+      className="badge badge-secondary text-ellipsis"
       title="foo"
     >
       foo