SONAR-21639 Start using new RadioButtonGroup and deprecate legacy RadioButton component

3 files changed, 10 insertions, 34 deletions

diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
index 9072d93ae65..d5ba01e2485 100644
--- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx
+++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
@@ -30,7 +30,6 @@ import NavLink from './NavLink';
 import { Tooltip } from './Tooltip';
 import { ClipboardBase } from './clipboard';
 import { Checkbox } from './input/Checkbox';
-import { RadioButton } from './input/RadioButton';
 
 interface Props extends React.HtmlHTMLAttributes<HTMLMenuElement> {
   children?: React.ReactNode;
@@ -198,30 +197,6 @@ export function ItemCheckbox(props: ItemCheckboxProps) {
   );
 }
 
-interface ItemRadioButtonProps extends ListItemProps {
-  checked: boolean;
-  disabled?: boolean;
-  onCheck: (value: string) => void;
-  value: string;
-}
-
-export function ItemRadioButton(props: ItemRadioButtonProps) {
-  const { checked, children, className, disabled, innerRef, onCheck, value, ...liProps } = props;
-  return (
-    <li ref={innerRef} role="none" {...liProps}>
-      <ItemRadioButtonStyled
-        checked={checked}
-        className={classNames(className, { disabled })}
-        disabled={disabled}
-        onCheck={onCheck}
-        value={value}
-      >
-        {children}
-      </ItemRadioButtonStyled>
-    </li>
-  );
-}
-
 interface ItemCopyProps {
   children?: React.ReactNode;
   className?: string;
@@ -398,8 +373,3 @@ const ItemCheckboxStyled = styled(Checkbox)`
   --color: ${themeContrast('dropdownMenu')};
   ${itemStyle}
 `;
-
-const ItemRadioButtonStyled = styled(RadioButton)`
-  --color: ${themeContrast('dropdownMenu')};
-  ${itemStyle}
-`;
diff --git a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx
index 087a89bcdb3..5e2aebceb65 100644
--- a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx
@@ -30,7 +30,6 @@ import {
   ItemHeader,
   ItemLink,
   ItemNavLink,
-  ItemRadioButton,
 } from '../DropdownMenu';
 import { Tooltip } from '../Tooltip';
 import { MenuIcon } from '../icons/MenuIcon';
@@ -74,9 +73,6 @@ function renderDropdownMenu() {
       <ItemCheckbox checked onCheck={noop}>
         Checkbox item
       </ItemCheckbox>
-      <ItemRadioButton checked={false} onCheck={noop} value="radios">
-        Radio item
-      </ItemRadioButton>
     </DropdownMenu>,
   );
 }
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 7ee29e59f89..f36d7ec762f 100644
--- a/server/sonar-web/design-system/src/components/input/RadioButton.tsx
+++ b/server/sonar-web/design-system/src/components/input/RadioButton.tsx
@@ -39,6 +39,11 @@ type Props =
   | ({ onCheck: (value: string) => void; value: string } & PropsBase)
   | ({ onCheck: () => void; value: never } & PropsBase);
 
+/** @deprecated Use RadioButtonGroup from Echoes instead.
+ *
+ * Individual Radio Buttons can't be used anymore.
+ * Instead, build the list of options and pass it to the RadioButtonGroup component.
+ */
 export function RadioButton({
   checked,
   children,
@@ -88,6 +93,11 @@ const LabelStyled = styled.label<{ disabled?: boolean }>`
   }
 `;
 
+/** @deprecated Use RadioButtonGroup from Echoes instead.
+ *
+ * Individual Radio Buttons can't be used anymore.
+ * Instead, build the list of options and pass it to the RadioButtonGroup component.
+ */
 export const RadioButtonStyled = styled.input`
   appearance: none; //disables native style
   border: ${themeBorder('default', 'radioBorder')};