refactor(design-system)!: remove deprecated DsDropdownMenuLegacy and DsRadioGroupLegacy [AR-53409] (#340)

Author: mmurawski-dn

.changeset/fluffy-clubs-greet.md

@@ -0,0 +1,7 @@
+---
+'@drivenets/design-system': major
+'@drivenets/eslint-plugin-design-system': major
+---
+
+Remove deprecated components `DsDropdownMenuLegacy` and `DsRadioGroupLegacy`
+Remove deprecation eslint rules for `DsDropdownMenuLegacy` and `DsRadioGroupLegacy`

packages/design-system/package.json

@@ -62,9 +62,7 @@
 		"@radix-ui/react-checkbox": "^1.3.3",
 		"@radix-ui/react-collapsible": "^1.1.12",
 		"@radix-ui/react-dialog": "^1.1.15",
-		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-radio-group": "^1.3.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-tooltip": "^1.2.8",
 		"@radix-ui/react-visually-hidden": "^1.2.4",

packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu-legacy.stories.tsx

@@ -1,4 +1,3 @@
-@use '../../styles/typography';
 @use '../../styles/shared/dropdown';
 
 .content {
@@ -111,20 +110,3 @@
 .triggerItemIcon {
 	margin-left: auto;
 }
-
-/** Legacy classes */
-.contentLegacy {
-	@include dropdown.dropdown-content;
-	min-width: 200px;
-	width: var(--radix-select-trigger-width);
-}
-
-.viewportLegacy {
-	@include dropdown.dropdown-viewport;
-}
-
-.itemLegacy {
-	@include dropdown.dropdown-item;
-	@include typography.p-special;
-	@include typography.ellipsis;
-}

packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss

@@ -1,13 +1,11 @@
 import type React from 'react';
 import { createContext, Fragment, useContext, useState } from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Menu } from '@ark-ui/react/menu';
 import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import styles from './ds-dropdown-menu.module.scss';
 import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
-import { DsTextInput } from '../ds-text-input';
 import type {
 	DsDropdownMenuActionsProps,
 	DsDropdownMenuContentProps,
@@ -17,7 +15,6 @@ import type {
 	DsDropdownMenuItemGroupProps,
 	DsDropdownMenuItemIndicatorProps,
 	DsDropdownMenuItemProps,
-	DsDropdownMenuLegacyProps,
 	DsDropdownMenuPositioning,
 	DsDropdownMenuRootProps,
 	DsDropdownMenuSeparatorProps,
@@ -279,95 +276,6 @@ const TriggerItem: React.FC<DsDropdownMenuTriggerItemProps> = ({ className, styl
 	);
 };
 
-/**
- * DEPRECATED: Legacy DsDropdownMenu component with options array
- * Use compound component pattern instead
- * @deprecated
- */
-/* c8 ignore start */
-export const DsDropdownMenuLegacy: React.FC<DsDropdownMenuLegacyProps> = ({
-	options,
-	children,
-	contentGap = 0,
-	className,
-	style,
-	align = 'center',
-	side = 'bottom',
-	disablePortal = false,
-	disableSearch = true,
-	selected,
-	onSelect,
-}) => {
-	const [open, setOpen] = useState(false);
-	const [searchTerm, setSearchTerm] = useState('');
-
-	const Wrapper = disablePortal ? Fragment : DropdownMenu.Portal;
-
-	const filteredOptions = disableSearch
-		? options
-		: options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
-
-	return (
-		<DropdownMenu.Root open={open} onOpenChange={setOpen}>
-			<DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
-			<Wrapper>
-				<DropdownMenu.Content
-					className={classNames(styles.contentLegacy, styles.viewportLegacy)}
-					sideOffset={contentGap}
-					align={align}
-					side={side}
-				>
-					{!disableSearch && (
-						<DsTextInput
-							placeholder="Search"
-							value={searchTerm}
-							onValueChange={setSearchTerm}
-							slots={{
-								startAdornment: <DsIcon icon="search" size="tiny" />,
-							}}
-							onKeyDown={(e) => e.stopPropagation()}
-						/>
-					)}
-					{filteredOptions.map((option, i) => (
-						<DropdownMenu.Item
-							key={i}
-							disabled={option.disabled}
-							className={classNames(
-								styles.itemLegacy,
-								{
-									[styles.selected]: selected === option.value,
-								},
-								className,
-							)}
-							style={style}
-							onClick={(e) => {
-								e.stopPropagation();
-
-								if (!option.disabled) {
-									if (option.value) {
-										onSelect?.(option.value);
-									}
-									option.onClick?.(e);
-									setOpen(false);
-								}
-							}}
-						>
-							{option.icon && <DsIcon icon={option.icon} className={styles.itemIcon} />}
-							<span className={styles.label}>{option.label}</span>
-							{option.value && selected === option.value && (
-								<span className={styles.indicator}>
-									<DsIcon icon="check" />
-								</span>
-							)}
-						</DropdownMenu.Item>
-					))}
-				</DropdownMenu.Content>
-			</Wrapper>
-		</DropdownMenu.Root>
-	);
-};
-/* c8 ignore stop */
-
 /**
  * Design system  DsDropdownMenu component
  *

packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx

@@ -1,6 +1,5 @@
-import type { CSSProperties, MouseEvent, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { Menu } from '@ark-ui/react/menu';
-import type { IconType } from '../ds-icon';
 
 /**
  * Base positioning type
@@ -15,92 +14,6 @@ export type DsDropdownMenuPositioning = Pick<
 	'placement' | 'gutter' | 'sameWidth' | 'getAnchorRect'
 >;
 
-/**
- * DEPRECATED: Legacy dropdown menu option configuration
- * Use compound component pattern instead
- * @deprecated
- */
-export interface DsDropdownMenuOptionLegacy {
-	/**
-	 * Display label for the menu option
-	 */
-	label: string;
-	/**
-	 * Optional icon to display
-	 */
-	icon?: IconType;
-	/**
-	 * Whether this option is disabled
-	 */
-	disabled?: boolean;
-	/**
-	 * Click handler for the option
-	 */
-	onClick?: (e: MouseEvent<HTMLElement>) => void;
-	/**
-	 * Optional value for selection tracking
-	 */
-	value?: string;
-}
-
-/**
- * DEPRECATED: Legacy props for DsDropdownMenuLegacy component
- * Use compound component pattern instead
- * @deprecated
- */
-export interface DsDropdownMenuLegacyProps {
-	/**
-	 * The options to be displayed in the dropdown menu
-	 */
-	options: DsDropdownMenuOptionLegacy[];
-	/**
-	 * Optional children to be rendered inside the component
-	 * Typically used for the trigger element
-	 */
-	children?: ReactNode | undefined;
-	/**
-	 * The gap between the trigger and dropdown content in pixels
-	 * @default 0
-	 */
-	contentGap?: number;
-	/**
-	 * Additional CSS class names
-	 */
-	className?: string;
-	/**
-	 * Optional inline styles to apply to the component
-	 */
-	style?: CSSProperties;
-	/**
-	 * The alignment of the dropdown content
-	 * @default 'center'
-	 */
-	align?: 'start' | 'center' | 'end';
-	/**
-	 * The side of the dropdown content
-	 * @default 'bottom'
-	 */
-	side?: 'top' | 'right' | 'bottom' | 'left';
-	/**
-	 * Whether to render in place instead of using portals
-	 * @default false
-	 */
-	disablePortal?: boolean;
-	/**
-	 * Whether to disable the search functionality
-	 * @default false
-	 */
-	disableSearch?: boolean;
-	/**
-	 * Currently selected value (for selection tracking)
-	 */
-	selected?: string;
-	/**
-	 * Callback when an option with a value is selected
-	 */
-	onSelect?: (value: string) => void;
-}
-
 /**
  * Props for the DsDropdownMenu Root component
  */

packages/design-system/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts

@@ -1,2 +1,2 @@
-export { DsDropdownMenu, DsDropdownMenuLegacy } from './ds-dropdown-menu';
+export { DsDropdownMenu } from './ds-dropdown-menu';
 export * from './ds-dropdown-menu.types';