SONAR-18776 Changing all tooltips to follow design system style

diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.css b/server/sonar-web/src/main/js/components/controls/Tooltip.css
index 9d865f8c3d2683f7d7db7be668e553cc5efc93f3..55f51d2dabf875146b14369789a0535e7a241911 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.css
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.css
@@ -23,9 +23,9 @@
   display: block;
   height: auto;
   box-sizing: border-box;
-  font-size: var(--baseFontSize);
-  font-weight: 300;
-  line-height: 1.5;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
   animation: fadeIn 0.3s forwards;
 }
 
@@ -57,8 +57,8 @@
   overflow: hidden;
   word-break: break-word;
   padding: 12px 17px;
-  color: #fff;
-  background-color: #475760;
+  color: #eff2f9;
+  background-color: #2a2f40;
   letter-spacing: 0.04em;
 }
 
@@ -68,8 +68,8 @@
 }
 
 .tooltip-inner a {
-  border-bottom-color: #8da6b3;
-  color: #a5d0ea;
+  border-bottom-color: #bdc6ff;
+  color: #bdc6ff;
 }
 
 .tooltip-inner hr {
@@ -112,7 +112,7 @@
   left: 50%;
   transform: translateX(-5px);
   border-width: 0 5px 5px;
-  border-bottom-color: #475760;
+  border-bottom-color: #2a2f40;
 }
 
 /* Workaround for react issue with onMouseLeave in disabled buttons: https://github.com/facebook/react/issues/4251 */

diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
index eac57073053b4cbd5a6b343b53a225304144d63e..0aeaad34b4157cb81e7363361442fee5156e86af 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
@@ -126,18 +126,14 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
     if (
       // opens
       (this.props.visible === true && !prevProps.visible) ||
-      (this.props.visible === undefined &&
-        this.state.visible === true &&
-        prevState.visible === false)
+      (this.props.visible === undefined && this.state.visible && !prevState.visible)
     ) {
       this.positionTooltip();
       this.addEventListeners();
     } else if (
       // closes
       (!this.props.visible && prevProps.visible === true) ||
-      (this.props.visible === undefined &&
-        this.state.visible === false &&
-        prevState.visible === true)
+      (this.props.visible === undefined && !this.state.visible && prevState.visible)
     ) {
       this.clearPosition();
       this.removeEventListeners();
@@ -402,7 +398,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
 
     return (
       <div
-        className={classNames(`${classNameSpace}-inner`, { hidden: !isVisible })}
+        className={classNames(`${classNameSpace}-inner sw-font-sans`, { hidden: !isVisible })}
         id={this.id}
         role="tooltip"
         aria-hidden={!isInteractive || !isVisible}

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap
index b6373fd9dd39bc948a87266f7f521d37fdce0e2a..ce84e743745b6431c1b9fe9a5734cfc91770042a 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap
@@ -24,7 +24,7 @@ exports[`should render 1`] = `
   />
   <div
     aria-hidden={true}
-    className="tooltip-inner hidden"
+    className="tooltip-inner sw-font-sans hidden"
     id="tooltip-1"
     role="tooltip"
   >