feat(design-system): align dropdown variants [AR-60232] (#456)

Author: vpolessky-dn

.changeset/pink-dryers-tell.md

@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+Add `variant` prop to `DsDropdownMenuItem`

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

@@ -49,6 +49,14 @@
 			}
 		}
 	}
+
+	&.variant-error {
+		color: var(--font-error);
+
+		&[data-highlighted] {
+			background: var(--background-error-secondary-hover);
+		}
+	}
 }
 
 .itemIcon {

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

@@ -143,6 +143,12 @@ export const CheckboxList: Story = {
 		const items = [
 			{ id: 'item1', label: 'Menu text 1', description: 'Info Text' },
 			{ id: 'item2', label: 'Menu text 2', description: 'Info Text' },
+			{
+				id: 'item-error',
+				label: 'Error item',
+				description: 'Something went wrong',
+				variant: 'error' as const,
+			},
 		];
 
 		const groupedItems = [
@@ -202,23 +208,32 @@ export const CheckboxList: Story = {
 							}}
 						/>
 					</DsDropdownMenu.Header>
-					{filteredItems.map((item) => (
-						<DsDropdownMenu.Item key={item.id} value={item.id}>
-							<DsCheckbox
-								tabIndex={-1}
-								checked={selected.has(item.id)}
-								onCheckedChange={() => toggleSelection(item.id)}
-							/>
-							<div className="item-content">
-								<DsTypography className="item-label" variant="body-sm-reg">
-									{item.label}
-								</DsTypography>
-								<DsTypography className="item-description" variant="body-xs-reg">
-									{item.description}
-								</DsTypography>
-							</div>
-						</DsDropdownMenu.Item>
-					))}
+					{filteredItems.map((item) => {
+						const isError = 'variant' in item && item.variant === 'error';
+						const errorStyle = isError ? { color: 'var(--font-error)' } : undefined;
+
+						return (
+							<DsDropdownMenu.Item key={item.id} value={item.id} variant={isError ? 'error' : undefined}>
+								{isError ? (
+									<DsIcon icon="search" size="tiny" />
+								) : (
+									<DsCheckbox
+										tabIndex={-1}
+										checked={selected.has(item.id)}
+										onCheckedChange={() => toggleSelection(item.id)}
+									/>
+								)}
+								<div className="item-content">
+									<DsTypography className="item-label" variant="body-sm-reg" style={errorStyle}>
+										{item.label}
+									</DsTypography>
+									<DsTypography className="item-description" variant="body-xs-reg" style={errorStyle}>
+										{item.description}
+									</DsTypography>
+								</div>
+							</DsDropdownMenu.Item>
+						);
+					})}
 					{!!filteredGroupedItems.length && (
 						<DsDropdownMenu.ItemGroup>
 							<DsDropdownMenu.ItemGroupLabel>Group Name</DsDropdownMenu.ItemGroupLabel>

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

@@ -104,6 +104,7 @@ const Content: React.FC<DsDropdownMenuContentProps> = ({
 const Item: React.FC<DsDropdownMenuItemProps> = ({
 	disabled,
 	selected,
+	variant = 'default',
 	value,
 	asChild,
 	onClick,
@@ -120,6 +121,7 @@ const Item: React.FC<DsDropdownMenuItemProps> = ({
 				{
 					[styles.selected]: selected,
 				},
+				variant === 'error' && styles['variant-error'],
 				className,
 			)}
 			style={style}

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

@@ -2,6 +2,9 @@ import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import type { Menu } from '@ark-ui/react/menu';
 import type { IconType } from '../ds-icon';
 
+export const dropdownMenuItemVariants = ['default', 'error'] as const;
+export type DropdownMenuItemVariant = (typeof dropdownMenuItemVariants)[number];
+
 /**
  * Base positioning type
  */
@@ -190,6 +193,12 @@ export interface DsDropdownMenuItemProps extends Pick<
 	 * Whether the item is selected (applies selected styling)
 	 */
 	selected?: boolean;
+	/**
+	 * Status variant that applies colored text to convey item state.
+	 * `error` renders text in danger color.
+	 * @default 'default'
+	 */
+	variant?: DropdownMenuItemVariant;
 }
 
 /**