SONAR-21142 Update issues and rules page severity icons with transparency & gray...

diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
index eb11d28750a911a83417d69848d8edb5aef23121..dd28b8cba0dedb0007324f9b1fafe3cd83407550 100644 (file)
--- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityHighIcon.tsx
@@ -21,15 +21,20 @@ import { useTheme } from '@emotion/react';
 import { themeColor } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
 
-export function SoftwareImpactSeverityHighIcon(iconProps: IconProps) {
+export function SoftwareImpactSeverityHighIcon({
+  disabled,
+  ...iconProps
+}: IconProps & { disabled?: boolean }) {
   const theme = useTheme();
+  const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityHigh';
 
   return (
     <CustomIcon {...iconProps}>
-      <circle cx="8" cy="8" fill={themeColor('iconSoftwareImpactSeverityHigh')({ theme })} r="7" />
       <path
-        d="M5 6.67113C5 6.56986 5.05583 6.47727 5.14421 6.43198L7.88334 5.02823C7.95678 4.99059 8.04322 4.99059 8.11666 5.02823L10.8558 6.43198C10.9442 6.47727 11 6.56986 11 6.67113V10.7324C11 10.9191 10.8181 11.0483 10.6475 10.9827L8.0916 10.0003C8.03254 9.97763 7.96746 9.97763 7.9084 10.0003L5.35247 10.9827C5.18192 11.0483 5 10.9191 5 10.7324V6.67113Z"
-        fill="white"
+        clipRule="evenodd"
+        d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM4.14421 5.43198C4.05583 5.47727 4 5.56986 4 5.67113V9.73238C4 9.91906 4.18192 10.0483 4.35247 9.98273L6.9084 9.00033C6.96746 8.97763 7.03254 8.97763 7.0916 9.00033L9.64753 9.98273C9.81808 10.0483 10 9.91906 10 9.73238V5.67113C10 5.56986 9.94417 5.47727 9.85579 5.43198L7.11666 4.02823C7.04322 3.99059 6.95678 3.99059 6.88334 4.02823L4.14421 5.43198Z"
+        fill={themeColor(color)({ theme })}
+        fillRule="evenodd"
       />
     </CustomIcon>
   );

diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
index 3a9f0f050b72dca1696cac49c34e77b6fe39cc31..ffabf53938f6a57047c6d40a51e1012c6100b5e4 100644 (file)
--- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityLowIcon.tsx
@@ -21,18 +21,20 @@ import { useTheme } from '@emotion/react';
 import { themeColor } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
 
-export function SoftwareImpactSeverityLowIcon(iconProps: IconProps) {
+export function SoftwareImpactSeverityLowIcon({
+  disabled,
+  ...iconProps
+}: IconProps & { disabled?: boolean }) {
   const theme = useTheme();
+  const color = disabled ? 'iconSoftwareImpactSeverityDisabled' : 'iconSoftwareImpactSeverityLow';
 
   return (
     <CustomIcon {...iconProps}>
-      <circle cx="8" cy="8" fill={themeColor('iconSoftwareImpactSeverityLow')({ theme })} r="7" />
       <path
-        d="M5.23223 6.93218L8 9.69995L10.7678 6.93218"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
+        clipRule="evenodd"
+        d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM3.7019 6.46256L6.46967 9.23033C6.76256 9.52322 7.23744 9.52322 7.53033 9.23033L10.2981 6.46256C10.591 6.16967 10.591 5.6948 10.2981 5.4019C10.0052 5.10901 9.53033 5.10901 9.23744 5.4019L7 7.63934L4.76256 5.4019C4.46967 5.10901 3.9948 5.10901 3.7019 5.4019C3.40901 5.6948 3.40901 6.16967 3.7019 6.46256Z"
+        fill={themeColor(color)({ theme })}
+        fillRule="evenodd"
       />
     </CustomIcon>
   );

diff --git a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
index dca3142a9f0ba9b8a525ac1fbf1eb5fec55904c9..7ce20837ffa2c6c65195b83f24a612ab9194b36c 100644 (file)
--- a/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
+++ b/server/sonar-web/design-system/src/components/icons/SoftwareImpactSeverityMediumIcon.tsx
@@ -21,23 +21,22 @@ import { useTheme } from '@emotion/react';
 import { themeColor } from '../../helpers';
 import { CustomIcon, IconProps } from './Icon';
 
-export function SoftwareImpactSeverityMediumIcon(iconProps: IconProps) {
+export function SoftwareImpactSeverityMediumIcon({
+  disabled,
+  ...iconProps
+}: IconProps & { disabled?: boolean }) {
   const theme = useTheme();
+  const color = disabled
+    ? 'iconSoftwareImpactSeverityDisabled'
+    : 'iconSoftwareImpactSeverityMedium';
 
   return (
     <CustomIcon {...iconProps}>
-      <circle
-        cx="8"
-        cy="8"
-        fill={themeColor('iconSoftwareImpactSeverityMedium')({ theme })}
-        r="7"
-      />
       <path
-        d="M10.7678 9.49994L8 6.73218L5.23223 9.49994"
-        stroke="white"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
+        clipRule="evenodd"
+        d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM10.2981 7.96967L7.53033 5.2019C7.23744 4.90901 6.76256 4.90901 6.46967 5.2019L3.7019 7.96967C3.40901 8.26256 3.40901 8.73744 3.7019 9.03033C3.9948 9.32322 4.46967 9.32322 4.76256 9.03033L7 6.79289L9.23744 9.03033C9.53033 9.32322 10.0052 9.32322 10.2981 9.03033C10.591 8.73744 10.591 8.26256 10.2981 7.96967Z"
+        fill={themeColor(color)({ theme })}
+        fillRule="evenodd"
       />
     </CustomIcon>
   );

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 7d81a586d65ca4b0753d646e359db412e74c5f18..3d5196a1f732459654830ace5677498a65410803 100644 (file)
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -365,6 +365,7 @@ export const lightTheme = {
     iconSoftwareImpactSeverityHigh: COLORS.red[500],
     iconSoftwareImpactSeverityMedium: COLORS.yellow[700],
     iconSoftwareImpactSeverityLow: COLORS.blue[700],
+    iconSoftwareImpactSeverityDisabled: COLORS.blueGrey[300],
     iconSeverityMajor: danger.light,
     iconSeverityMinor: COLORS.yellowGreen[400],
     iconSeverityInfo: COLORS.blue[400],

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
index 6948418aa2068ab6e100074a1274c3eb24567675..d21eb25573c4bb6425bb0e9e795f16300c765330 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/Facet.tsx
@@ -45,7 +45,7 @@ interface Props extends BasicProps {
   options?: string[];
   property: FacetKey;
   renderFooter?: () => React.ReactNode;
-  renderName?: (value: string) => React.ReactNode;
+  renderName?: (value: string, disabled: boolean) => React.ReactNode;
   renderTextName?: (value: string) => string;
   singleSelection?: boolean;
 }
@@ -76,6 +76,7 @@ export default class Facet extends React.PureComponent<Props> {
   renderItem = (value: string) => {
     const active = this.props.values.includes(value);
     const stat = this.getStat(value);
+    const disabled = stat === 0 || typeof stat === 'undefined';
     const { renderName = defaultRenderName, renderTextName = defaultRenderName } = this.props;
 
     return (
@@ -83,7 +84,7 @@ export default class Facet extends React.PureComponent<Props> {
         className="it__search-navigator-facet"
         active={active}
         key={value}
-        name={renderName(value)}
+        name={renderName(value, disabled)}
         onClick={this.handleItemClick}
         stat={stat && formatMeasure(stat, MetricType.ShortInteger)}
         value={value}

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx
index 46b44fd329e9f781f3fd6bad9b10e00518ce0619..634e8c060eacd0aaaee843364db175d9d1d25c74 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SeverityFacet.tsx
@@ -28,9 +28,9 @@ import Facet, { BasicProps } from './Facet';
 
 export default function SeverityFacet(props: BasicProps) {
   const renderName = React.useCallback(
-    (severity: string) => (
-      <div className="sw-flex">
-        <SoftwareImpactSeverityIcon severity={severity} />
+    (severity: string, disabled: boolean) => (
+      <div className="sw-flex sw-items-center">
+        <SoftwareImpactSeverityIcon severity={severity} disabled={disabled} />
         <span className="sw-ml-1">{translate('severity', severity)}</span>
       </div>
     ),

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
index 6d5d2340dc3c38dbafd7456a34bb5cf0bc893370..6006ce6105c7de64efb4f8a91f8cf4493c8fba9d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SeverityFacet.tsx
@@ -40,7 +40,9 @@ export function SeverityFacet(props: Props) {
       itemNamePrefix="severity"
       listItems={IMPACT_SEVERITIES}
       selectedItems={severities}
-      renderIcon={(severity: string) => <SoftwareImpactSeverityIcon severity={severity} />}
+      renderIcon={(severity: string, disabled: boolean) => (
+        <SoftwareImpactSeverityIcon severity={severity} disabled={disabled} />
+      )}
       help={
         <DocumentationTooltip
           placement="right"

diff --git a/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx b/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx
index a5e908258763d2347f0e08af2c2edf057030bc6b..404ed594986a848393c7d9757cce9b5f3fa99ca1 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/sidebar/SimpleListStyleFacet.tsx
@@ -42,7 +42,7 @@ interface Props<T = string> extends CommonProps {
   listItems: Array<T>;
   itemNamePrefix: string;
   selectedItems: Array<T>;
-  renderIcon?: (item: string) => React.ReactNode;
+  renderIcon?: (item: string, disabled: boolean) => React.ReactNode;
 }
 
 export function SimpleListStyleFacet(props: Props) {
@@ -82,13 +82,14 @@ export function SimpleListStyleFacet(props: Props) {
         {listItems.map((item) => {
           const active = selectedItems.includes(item);
           const stat = stats[item];
+          const disabled = stat === 0 || typeof stat === 'undefined';
 
           return (
             <FacetItem
               active={active}
               className="it__search-navigator-facet"
               key={item}
-              icon={renderIcon?.(item)}
+              icon={renderIcon?.(item, disabled)}
               name={translate(itemNamePrefix, item)}
               onClick={(itemValue, multiple) => {
                 if (multiple) {

diff --git a/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx b/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx
index 000e963df618bbe4c8a8426f3645cf33033b2849..23331ddb759c5fc5d63228a66e603fd6016cce97 100644 (file)
--- a/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx
+++ b/server/sonar-web/src/main/js/components/icons/SoftwareImpactSeverityIcon.tsx
@@ -30,6 +30,7 @@ import { IconProps } from './Icon';
 
 interface Props extends IconProps {
   severity: string | null | undefined;
+  disabled?: boolean;
 }
 
 const severityIcons: Dict<(props: IconProps) => React.ReactElement> = {
@@ -38,7 +39,7 @@ const severityIcons: Dict<(props: IconProps) => React.ReactElement> = {
   [SoftwareImpactSeverity.Low]: SoftwareImpactSeverityLowIcon,
 };
 
-export default function SoftwareImpactSeverityIcon({ severity, ...iconProps }: Props) {
+export default function SoftwareImpactSeverityIcon({ severity, ...iconProps }: Readonly<Props>) {
   if (typeof severity !== 'string' || !severityIcons[severity]) {
     return null;
   }