SONAR-19510 Improve styling of disabled radio buttons

9 files changed, 38 insertions, 24 deletions

diff --git a/server/sonar-web/design-system/src/components/RadioButton.tsx b/server/sonar-web/design-system/src/components/RadioButton.tsx
index 7bfd61f4bbc..f374db14dc7 100644
--- a/server/sonar-web/design-system/src/components/RadioButton.tsx
+++ b/server/sonar-web/design-system/src/components/RadioButton.tsx
@@ -53,7 +53,16 @@ export function RadioButton({
   };
 
   return (
-    <label className={classNames('sw-flex sw-items-center sw-cursor-pointer', className)}>
+    <label
+      className={classNames(
+        'sw-flex sw-items-center',
+        {
+          'sw-cursor-pointer': !disabled,
+          'sw-cursor-not-allowed': disabled,
+        },
+        className
+      )}
+    >
       <RadioButtonStyled
         aria-disabled={disabled}
         checked={checked}
@@ -72,6 +81,8 @@ export const RadioButtonStyled = styled.input`
   appearance: none; //disables native style
   border: ${themeBorder('default', 'radioBorder')};
 
+  ${tw`sw-cursor-pointer`}
+
   ${tw`sw-w-4 sw-min-w-4 sw-h-4 sw-min-h-4`}
   ${tw`sw-p-1 sw-mr-2`}
   ${tw`sw-inline-block`}
@@ -107,8 +118,6 @@ export const RadioButtonStyled = styled.input`
     border: ${themeBorder('default', 'radioDisabledBorder')};
     background-clip: unset;
 
-    ${tw`sw-cursor-not-allowed`}
-
     &.is-checked,
     &:checked {
       background-image: linear-gradient(
@@ -120,9 +129,9 @@ export const RadioButtonStyled = styled.input`
           to right,
           ${themeColor('radioDisabledBackground')},
           ${themeColor('radioDisabledBackground')}
-        );
-      background-clip: content-box, padding-box;
-      border: ${themeBorder('default', 'radioDisabledBorder')};
+        ) !important;
+      background-clip: content-box, padding-box !important;
+      border: ${themeBorder('default', 'radioDisabledBorder')} !important;
     }
   }
 `;
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/Manual-it.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/Manual-it.tsx
index dfa41c26dd8..daffdc75925 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/Manual-it.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/Manual-it.tsx
@@ -149,7 +149,7 @@ it('global NCD option should be disabled if not compliant', async () => {
 
   expect(ui.newCodeDefinitionHeader.get()).toBeInTheDocument();
   expect(ui.inheritGlobalNcdRadio.get()).toBeInTheDocument();
-  expect(ui.inheritGlobalNcdRadio.get()).toHaveClass('disabled');
+  expect(ui.inheritGlobalNcdRadio.get()).toBeDisabled();
   expect(ui.projectCreateButton.get()).toBeDisabled();
 });
 
@@ -182,9 +182,9 @@ it.each([ui.ncdOptionRefBranchRadio, ui.ncdOptionPreviousVersionRadio])(
 
     expect(ui.newCodeDefinitionHeader.get()).toBeInTheDocument();
     expect(ui.inheritGlobalNcdRadio.get()).toBeInTheDocument();
-    expect(ui.inheritGlobalNcdRadio.get()).toHaveClass('disabled');
+    expect(ui.inheritGlobalNcdRadio.get()).toBeDisabled();
     expect(ui.projectCreateButton.get()).toBeDisabled();
-    expect(ui.overrideNcdRadio.get()).not.toHaveClass('disabled');
+    expect(ui.overrideNcdRadio.get()).toBeEnabled();
     expect(option.get()).toHaveClass('disabled');
 
     await user.click(ui.overrideNcdRadio.get());
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingAnalysis.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingAnalysis.tsx
index 458436640ba..ca5db89b7e0 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingAnalysis.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingAnalysis.tsx
@@ -30,6 +30,7 @@ export interface Props {
 export default function BaselineSettingAnalysis({ onSelect, selected }: Props) {
   return (
     <RadioCard
+      noRadio
       disabled
       onClick={() => onSelect(NewCodePeriodSettingType.SPECIFIC_ANALYSIS)}
       selected={selected}
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
index 36f9b536d8e..adf4c56df1b 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/BaselineSettingReferenceBranch.tsx
@@ -95,6 +95,7 @@ export default function BaselineSettingReferenceBranch(props: BaselineSettingRef
 
   return (
     <RadioCard
+      noRadio
       className={className}
       disabled={disabled}
       onClick={() => props.onSelect(NewCodePeriodSettingType.REFERENCE_BRANCH)}
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineSelector.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineSelector.tsx
index f1104622cfe..f20cc30acfc 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineSelector.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/ProjectBaselineSelector.tsx
@@ -18,10 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import classNames from 'classnames';
+import { RadioButton } from 'design-system';
 import * as React from 'react';
-import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
-import Radio from '../../../components/controls/Radio';
 import Tooltip from '../../../components/controls/Tooltip';
+import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import GlobalNewCodeDefinitionDescription from '../../../components/new-code-definition/GlobalNewCodeDefinitionDescription';
 import NewCodeDefinitionDaysOption from '../../../components/new-code-definition/NewCodeDefinitionDaysOption';
 import NewCodeDefinitionPreviousVersionOption from '../../../components/new-code-definition/NewCodeDefinitionPreviousVersionOption';
@@ -99,7 +99,7 @@ export default function ProjectBaselineSelector(props: ProjectBaselineSelectorPr
   return (
     <form className="project-baseline-selector" onSubmit={props.onSubmit}>
       <div className="big-spacer-top spacer-bottom" role="radiogroup">
-        <Radio
+        <RadioButton
           checked={!overrideGeneralSetting}
           className="big-spacer-bottom"
           disabled={!isGlobalNcdCompliant}
@@ -115,7 +115,7 @@ export default function ProjectBaselineSelector(props: ProjectBaselineSelectorPr
           >
             <span>{translate('project_baseline.global_setting')}</span>
           </Tooltip>
-        </Radio>
+        </RadioButton>
 
         <div className="sw-ml-4">
           <GlobalNewCodeDefinitionDescription
@@ -125,14 +125,14 @@ export default function ProjectBaselineSelector(props: ProjectBaselineSelectorPr
           />
         </div>
 
-        <Radio
+        <RadioButton
           checked={overrideGeneralSetting}
           className="huge-spacer-top"
           onCheck={() => props.onToggleSpecificSetting(true)}
           value="specific"
         >
           {translate('project_baseline.specific_setting')}
-        </Radio>
+        </RadioButton>
       </div>
 
       <div className="big-spacer-left big-spacer-right project-baseline-setting">
diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/ProjectBaselineApp-it.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/ProjectBaselineApp-it.tsx
index c26cbc5c972..b10faa7cdec 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/ProjectBaselineApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/ProjectBaselineApp-it.tsx
@@ -75,7 +75,7 @@ it('prevents selection of global setting if it is not compliant and warns non-ad
   await ui.appIsLoaded();
 
   expect(ui.generalSettingRadio.get()).toBeChecked();
-  expect(ui.generalSettingRadio.get()).toHaveClass('disabled');
+  expect(ui.generalSettingRadio.get()).toBeDisabled();
   expect(ui.complianceWarning.get()).toBeVisible();
 });
 
@@ -91,7 +91,7 @@ it('prevents selection of global setting if it is not compliant and warns admin
   await ui.appIsLoaded();
 
   expect(ui.generalSettingRadio.get()).toBeChecked();
-  expect(ui.generalSettingRadio.get()).toHaveClass('disabled');
+  expect(ui.generalSettingRadio.get()).toBeDisabled();
   expect(ui.complianceWarningAdmin.get()).toBeVisible();
   expect(ui.complianceWarning.query()).not.toBeInTheDocument();
 });
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx
index e6482306e27..3d9511bbfc0 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx
@@ -41,6 +41,7 @@ export default function NewCodeDefinitionDaysOption(props: Props) {
 
   return (
     <RadioCard
+      noRadio
       className={className}
       disabled={disabled}
       onClick={() => onSelect(NewCodePeriodSettingType.NUMBER_OF_DAYS)}
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx
index 263dbc0429e..ec113fb06a1 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx
@@ -37,6 +37,7 @@ export default function NewCodeDefinitionPreviousVersionOption({
 }: Props) {
   return (
     <RadioCard
+      noRadio
       disabled={disabled}
       onClick={() => onSelect(NewCodePeriodSettingType.PREVIOUS_VERSION)}
       selected={selected}
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
index a6d8887f6c0..ef28eeff0fe 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { RadioButton } from 'design-system/lib';
 import { noop } from 'lodash';
 import * as React from 'react';
 import { useEffect } from 'react';
@@ -28,7 +29,6 @@ import {
   NewCodePeriodSettingType,
   NewCodePeriodWithCompliance,
 } from '../../types/types';
-import Radio from '../controls/Radio';
 import RadioCard from '../controls/RadioCard';
 import Tooltip from '../controls/Tooltip';
 import { Alert } from '../ui/Alert';
@@ -95,8 +95,8 @@ export default function NewCodeDefinitionSelector(props: Props) {
         <strong>{translate('new_code_definition.question')}</strong>
       </p>
       <div className="big-spacer-top spacer-bottom" role="radiogroup">
-        <Radio
-          ariaLabel={translate('new_code_definition.global_setting')}
+        <RadioButton
+          aria-label={translate('new_code_definition.global_setting')}
           checked={selectedNcdType === NewCodePeriodSettingType.INHERITED}
           className="big-spacer-bottom"
           disabled={!iGlobalNcdCompliant}
@@ -112,7 +112,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
           >
             <span>{translate('new_code_definition.global_setting')}</span>
           </Tooltip>
-        </Radio>
+        </RadioButton>
 
         <div className="sw-ml-4">
           {globalNcd && (
@@ -124,8 +124,8 @@ export default function NewCodeDefinitionSelector(props: Props) {
           )}
         </div>
 
-        <Radio
-          ariaLabel={translate('new_code_definition.specific_setting')}
+        <RadioButton
+          aria-label={translate('new_code_definition.specific_setting')}
           checked={Boolean(
             selectedNcdType && selectedNcdType !== NewCodePeriodSettingType.INHERITED
           )}
@@ -134,7 +134,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
           value="specific"
         >
           {translate('new_code_definition.specific_setting')}
-        </Radio>
+        </RadioButton>
       </div>
 
       <div className="big-spacer-left big-spacer-right project-baseline-setting">
@@ -160,6 +160,7 @@ export default function NewCodeDefinitionSelector(props: Props) {
           />
 
           <RadioCard
+            noRadio
             disabled={Boolean(
               !selectedNcdType || selectedNcdType === NewCodePeriodSettingType.INHERITED
             )}