SONAR-19032 MIUI cleanup part 1 (#10627)

Co-authored-by: David Cho-Lerat <david.cho-lerat@sonarsource.com>
Co-authored-by: Jeremy Davis <jeremy.davis@sonarsource.com>

10 files changed, 29 insertions, 58 deletions

diff --git a/server/sonar-web/design-system/.eslintrc b/server/sonar-web/design-system/.eslintrc
index 07e825a3518..b6218abddcd 100644
--- a/server/sonar-web/design-system/.eslintrc
+++ b/server/sonar-web/design-system/.eslintrc
@@ -22,7 +22,7 @@
     "local-rules/use-metrictype-enum": "warn",
     "local-rules/use-visibility-enum": "warn",
     "local-rules/convert-class-to-function-component": "warn",
-    "local-rules/no-conditional-rendering-of-deferredspinner": "warn",
+    "local-rules/no-conditional-rendering-of-spinner": "warn",
     "local-rules/use-jest-mocked": "warn",
 
     // New rules added after updating eslint packages to more recent versions than eslint-config-sonarqube
diff --git a/server/sonar-web/design-system/src/components/Banner.tsx b/server/sonar-web/design-system/src/components/Banner.tsx
index 4da28d16d1e..f7053a03924 100644
--- a/server/sonar-web/design-system/src/components/Banner.tsx
+++ b/server/sonar-web/design-system/src/components/Banner.tsx
@@ -30,6 +30,7 @@ export type Variant = 'error' | 'warning' | 'success' | 'info';
 
 interface Props {
   children: ReactNode;
+  className?: string;
   onDismiss?: VoidFunction;
   variant: Variant;
 }
@@ -61,19 +62,19 @@ function getVariantInfo(variant: Variant) {
   return variantList[variant];
 }
 
-export function Banner({ children, onDismiss, variant }: Props) {
+export function Banner({ children, className, onDismiss, variant }: Props) {
   const variantInfo = getVariantInfo(variant);
 
   const intl = useIntl();
 
   return (
-    <div role="alert" style={{ height: LAYOUT_BANNER_HEIGHT }}>
+    <div className={className} role="alert" style={{ height: LAYOUT_BANNER_HEIGHT }}>
       <BannerWrapper
         backGroundColor={variantInfo.backGroundColor}
         fontColor={variantInfo.fontColor}
       >
         <BannerInner>
-          <div className="sw-flex">
+          <div className="sw-flex sw-items-center">
             <div className="sw-mr-3">{variantInfo.icon}</div>
             {children}
           </div>
@@ -103,7 +104,7 @@ const BannerWrapper = styled.div<{
   height: inherit;
   background-color: ${({ backGroundColor }) => themeColor(backGroundColor)};
   color: ${({ fontColor }) => themeColor(fontColor)};
-  ${tw`sw-z-global-navbar sw-fixed sw-w-full`}
+  ${tw`sw-z-popup sw-fixed sw-w-full`}
   ${tw`sw-sticky sw-top-0`}
 `;
 
diff --git a/server/sonar-web/design-system/src/components/Spinner.tsx b/server/sonar-web/design-system/src/components/Spinner.tsx
index a0ecc957962..d76bbfef775 100644
--- a/server/sonar-web/design-system/src/components/Spinner.tsx
+++ b/server/sonar-web/design-system/src/components/Spinner.tsx
@@ -49,16 +49,25 @@ export function Spinner(props: React.PropsWithChildren<Props>) {
   }
 
   return (
-    <>
+    // Below: using <></> won't work in extenstions ('React' is not defined). This is because the
+    // name 'React' would already have been minified to something else when <> is resolved to
+    // React.Fragment
+    // eslint-disable-next-line react/jsx-fragments
+    <React.Fragment>
       <div className="sw-relative">
-        <div className={classNames('sw-overflow-hidden', { 'sw-sr-only': !loading })}>
+        <div
+          className={classNames('sw-overflow-hidden', {
+            'sw-sr-only': !loading,
+            it__loading: loading,
+          })}
+        >
           <StyledSpinner aria-live="polite" className={className} role="status">
             {loading && <span className="sw-sr-only">{ariaLabel}</span>}
           </StyledSpinner>
         </div>
       </div>
       {!loading && (children ?? (placeholder && <Placeholder className={className} />) ?? null)}
-    </>
+    </React.Fragment>
   );
 }
 
diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
index 6d2f58112e9..b279c96b379 100644
--- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
+++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap
@@ -91,12 +91,6 @@ exports[`should highlight code content correctly 1`] = `
   pointer-events: none;
 }
 
-.emotion-4:hover,
-.emotion-4:active,
-.emotion-4:focus {
-  border-color: rgb(197,205,223);
-}
-
 .code-snippet-highlighted-oneline .emotion-4 {
   bottom: 0.5rem;
 }
@@ -303,12 +297,6 @@ exports[`should show full size when multiline with no editing 1`] = `
   pointer-events: none;
 }
 
-.emotion-4:hover,
-.emotion-4:active,
-.emotion-4:focus {
-  border-color: rgb(197,205,223);
-}
-
 .code-snippet-highlighted-oneline .emotion-4 {
   bottom: 0.5rem;
 }
@@ -519,12 +507,6 @@ exports[`should show reduced size when single line with no editing 1`] = `
   pointer-events: none;
 }
 
-.emotion-4:hover,
-.emotion-4:active,
-.emotion-4:focus {
-  border-color: rgb(197,205,223);
-}
-
 .code-snippet-highlighted-oneline .emotion-4 {
   bottom: 0.5rem;
 }
diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx b/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx
index fafaa4259cc..bd898e1e4ed 100644
--- a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx
+++ b/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx
@@ -27,10 +27,4 @@ export const ButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = s
   --color: ${themeContrast('buttonSecondary')};
   --focus: ${themeColor('buttonSecondaryBorder', OPACITY_20_PERCENT)};
   --border: ${themeBorder('default', 'buttonSecondaryBorder')};
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-color: ${themeColor('buttonSecondaryBorder')};
-  }
 `;
diff --git a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx b/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx
index c3cb55e3e8d..94935bf0bf0 100644
--- a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx
+++ b/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx
@@ -27,10 +27,4 @@ export const DangerButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps
   --color: ${themeContrast('dangerButtonSecondary')};
   --focus: ${themeColor('dangerButtonSecondaryFocus', OPACITY_20_PERCENT)};
   --border: ${themeBorder('default', 'dangerButtonSecondaryBorder')};
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-color: ${themeColor('dangerButtonSecondaryBorder')};
-  }
 `;
diff --git a/server/sonar-web/design-system/src/components/input/DatePicker.tsx b/server/sonar-web/design-system/src/components/input/DatePicker.tsx
index e282d1e4eed..89d4c415549 100644
--- a/server/sonar-web/design-system/src/components/input/DatePicker.tsx
+++ b/server/sonar-web/design-system/src/components/input/DatePicker.tsx
@@ -236,13 +236,11 @@ const StyledInteractiveIcon = styled(InteractiveIcon)`
 `;
 
 const StyledInputField = styled(InputField)`
-  input[type='text']& {
-    ${tw`sw-pl-8`};
-    ${tw`sw-cursor-pointer`};
+  ${tw`sw-pl-8`};
+  ${tw`sw-cursor-pointer`};
 
-    &.is-filled {
-      ${tw`sw-pr-8`};
-    }
+  &.is-filled {
+    ${tw`sw-pr-8`};
   }
 `;
 
diff --git a/server/sonar-web/design-system/src/components/input/InputField.tsx b/server/sonar-web/design-system/src/components/input/InputField.tsx
index 2d37c9b095f..3690c438216 100644
--- a/server/sonar-web/design-system/src/components/input/InputField.tsx
+++ b/server/sonar-web/design-system/src/components/input/InputField.tsx
@@ -129,14 +129,9 @@ const baseStyle = (props: ThemedProps) => css`
 `;
 
 const StyledInput = styled.input`
-  input[type='text']&,
-  input[type='number']&,
-  input[type='password']&,
-  input[type='email']& {
-    ${getInputVariant}
-    ${baseStyle}
-    ${tw`sw-h-control`}
-  }
+  ${getInputVariant}
+  ${baseStyle}
+  ${tw`sw-h-control`}
 `;
 
 const StyledTextArea = styled.textarea`
diff --git a/server/sonar-web/design-system/src/components/input/RadioButton.tsx b/server/sonar-web/design-system/src/components/input/RadioButton.tsx
index 2797de1b7f5..7ee29e59f89 100644
--- a/server/sonar-web/design-system/src/components/input/RadioButton.tsx
+++ b/server/sonar-web/design-system/src/components/input/RadioButton.tsx
@@ -140,9 +140,9 @@ export const RadioButtonStyled = styled.input`
           to right,
           ${themeColor('radioDisabledBackground')},
           ${themeColor('radioDisabledBackground')}
-        ) !important;
-      background-clip: content-box, padding-box !important;
-      border: ${themeBorder('default', 'radioDisabledBorder')} !important;
+        );
+      background-clip: content-box, padding-box;
+      border: ${themeBorder('default', 'radioDisabledBorder')};
     }
   }
 `;
diff --git a/server/sonar-web/design-system/src/components/modal/Modal.tsx b/server/sonar-web/design-system/src/components/modal/Modal.tsx
index 8ba03e93d02..d7654dbce00 100644
--- a/server/sonar-web/design-system/src/components/modal/Modal.tsx
+++ b/server/sonar-web/design-system/src/components/modal/Modal.tsx
@@ -92,7 +92,7 @@ export function Modal({
 
       <ReactModal
         aria={{ labelledby: 'modal_header_title' }}
-        className={classNames('design-system-modal-contents modal', { large: isLarge })}
+        className={classNames('design-system-modal-contents', { large: isLarge })}
         isOpen={isOpen}
         onRequestClose={onClose}
         overlayClassName="design-system-modal-overlay"
@@ -148,8 +148,6 @@ const globalStyles = ({ theme }: { theme: Theme }) => css`
     &.large {
       max-width: 1280px;
       min-width: 1040px;
-      transform: translateX(-50%);
-      margin-left: 0px;
     }
   }