SONAR-21169 SONAR-21171 Fix rule and issue font color and spacing according to match UX spec

5 files changed, 25 insertions, 20 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index 6452b4081e2..ac6633b5e91 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -241,7 +241,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
               )}
             </div>
 
-            <ul className="sw-flex sw-gap-2 sw-items-center sw-body-xs">
+            <TextSubdued as="ul" className="sw-flex sw-gap-1 sw-items-center sw-body-xs">
               <li>{rule.langName}</li>
 
               <SeparatorCircleIcon aria-hidden as="li" />
@@ -260,13 +260,11 @@ export default class RuleListItem extends React.PureComponent<Props> {
                     },
                   ]}
                 >
-                  <TextSubdued className="sw-whitespace-nowrap">
-                    <TypeHelper
-                      className="sw-flex sw-items-center"
-                      iconFill="iconTypeDisabled"
-                      type={rule.type}
-                    />
-                  </TextSubdued>
+                  <TypeHelper
+                    className="sw-flex sw-items-center"
+                    iconFill="iconTypeDisabled"
+                    type={rule.type}
+                  />
                 </DocumentationTooltip>
               </li>
 
@@ -305,7 +303,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
                   </li>
                 </>
               )}
-            </ul>
+            </TextSubdued>
 
             <div className="sw-flex sw-items-center">{this.renderActions()}</div>
           </div>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
index c00d796976a..5121fd5f036 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
@@ -52,7 +52,7 @@ export default function IssueMetaBar(props: Readonly<Props>) {
     'sw-body-xs sw-overflow-hidden sw-whitespace-nowrap sw-max-w-abs-150';
 
   return (
-    <ul className="sw-flex sw-items-center sw-gap-2 sw-body-xs">
+    <ul className="sw-flex sw-items-center sw-gap-1 sw-body-xs">
       {issue.quickFixAvailable && (
         <>
           <li className={issueMetaListItemClassNames}>
@@ -133,11 +133,11 @@ export default function IssueMetaBar(props: Readonly<Props>) {
 
       <SeparatorCircleIcon aria-hidden as="li" />
 
-      <IssueType issue={issue} />
+      <IssueType issue={issue} height={12} width={12} />
 
       <SeparatorCircleIcon data-guiding-id="issue-4" aria-hidden as="li" />
 
-      <IssueSeverity issue={issue} />
+      <IssueSeverity issue={issue} height={12} width={12} />
     </ul>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx
index 1216d20d4a0..1d93986cbfe 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueSeverity.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { TextSubdued } from 'design-system';
+import { IconProps, TextSubdued } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
 import { IssueSeverity as IssueSeverityType } from '../../../types/issues';
@@ -27,11 +27,11 @@ import DocumentationTooltip from '../../common/DocumentationTooltip';
 import IssueSeverityIcon from '../../icon-mappers/IssueSeverityIcon';
 import { DeprecatedFieldTooltip } from './DeprecatedFieldTooltip';
 
-interface Props {
+interface Props extends IconProps {
   issue: Pick<Issue, 'severity'>;
 }
 
-export default function IssueSeverity({ issue }: Readonly<Props>) {
+export default function IssueSeverity({ issue, ...iconProps }: Readonly<Props>) {
   return (
     <DocumentationTooltip
       content={<DeprecatedFieldTooltip field="severity" />}
@@ -47,6 +47,7 @@ export default function IssueSeverity({ issue }: Readonly<Props>) {
           fill="iconSeverityDisabled"
           severity={issue.severity as IssueSeverityType}
           aria-hidden
+          {...iconProps}
         />
         {translate('severity', issue.severity)}
       </TextSubdued>
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx
index 360225bd253..28837558a9f 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueType.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { TextSubdued } from 'design-system';
+import { IconProps, TextSubdued } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../../helpers/l10n';
 import { Issue } from '../../../types/types';
@@ -26,11 +26,11 @@ import DocumentationTooltip from '../../common/DocumentationTooltip';
 import IssueTypeIcon from '../../icon-mappers/IssueTypeIcon';
 import { DeprecatedFieldTooltip } from './DeprecatedFieldTooltip';
 
-interface Props {
+interface Props extends IconProps {
   issue: Pick<Issue, 'type'>;
 }
 
-export default function IssueType({ issue }: Readonly<Props>) {
+export default function IssueType({ issue, ...iconProps }: Readonly<Props>) {
   return (
     <DocumentationTooltip
       content={<DeprecatedFieldTooltip field="type" />}
@@ -42,7 +42,7 @@ export default function IssueType({ issue }: Readonly<Props>) {
       ]}
     >
       <TextSubdued className="sw-flex sw-items-center sw-gap-1/2">
-        <IssueTypeIcon fill="iconTypeDisabled" type={issue.type} aria-hidden />
+        <IssueTypeIcon fill="iconTypeDisabled" type={issue.type} aria-hidden {...iconProps} />
         {translate('issue.type', issue.type)}
       </TextSubdued>
     </DocumentationTooltip>
diff --git a/server/sonar-web/src/main/js/components/shared/TypeHelper.tsx b/server/sonar-web/src/main/js/components/shared/TypeHelper.tsx
index fc2a4b2bbb4..1e88929f6f3 100644
--- a/server/sonar-web/src/main/js/components/shared/TypeHelper.tsx
+++ b/server/sonar-web/src/main/js/components/shared/TypeHelper.tsx
@@ -32,7 +32,13 @@ interface Props {
 export default function TypeHelper(props: Props) {
   return (
     <span className={props.className}>
-      <IssueTypeIcon className="sw-mr-1" type={props.type} fill={props.iconFill} />
+      <IssueTypeIcon
+        className="sw-mr-1"
+        type={props.type}
+        fill={props.iconFill}
+        height={12}
+        width={12}
+      />
       {translate('issue.type', props.type)}
     </span>
   );