Skip to content

Commit c4d5afd

Browse files
authored
feat(design-system): align dropdown variants [AR-60232] (#456)
1 parent a3d191b commit c4d5afd

5 files changed

Lines changed: 56 additions & 17 deletions

File tree

.changeset/pink-dryers-tell.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@drivenets/design-system': patch
3+
---
4+
5+
Add `variant` prop to `DsDropdownMenuItem`

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,14 @@
4949
}
5050
}
5151
}
52+
53+
&.variant-error {
54+
color: var(--font-error);
55+
56+
&[data-highlighted] {
57+
background: var(--background-error-secondary-hover);
58+
}
59+
}
5260
}
5361

5462
.itemIcon {

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

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,12 @@ export const CheckboxList: Story = {
143143
const items = [
144144
{ id: 'item1', label: 'Menu text 1', description: 'Info Text' },
145145
{ id: 'item2', label: 'Menu text 2', description: 'Info Text' },
146+
{
147+
id: 'item-error',
148+
label: 'Error item',
149+
description: 'Something went wrong',
150+
variant: 'error' as const,
151+
},
146152
];
147153

148154
const groupedItems = [
@@ -202,23 +208,32 @@ export const CheckboxList: Story = {
202208
}}
203209
/>
204210
</DsDropdownMenu.Header>
205-
{filteredItems.map((item) => (
206-
<DsDropdownMenu.Item key={item.id} value={item.id}>
207-
<DsCheckbox
208-
tabIndex={-1}
209-
checked={selected.has(item.id)}
210-
onCheckedChange={() => toggleSelection(item.id)}
211-
/>
212-
<div className="item-content">
213-
<DsTypography className="item-label" variant="body-sm-reg">
214-
{item.label}
215-
</DsTypography>
216-
<DsTypography className="item-description" variant="body-xs-reg">
217-
{item.description}
218-
</DsTypography>
219-
</div>
220-
</DsDropdownMenu.Item>
221-
))}
211+
{filteredItems.map((item) => {
212+
const isError = 'variant' in item && item.variant === 'error';
213+
const errorStyle = isError ? { color: 'var(--font-error)' } : undefined;
214+
215+
return (
216+
<DsDropdownMenu.Item key={item.id} value={item.id} variant={isError ? 'error' : undefined}>
217+
{isError ? (
218+
<DsIcon icon="search" size="tiny" />
219+
) : (
220+
<DsCheckbox
221+
tabIndex={-1}
222+
checked={selected.has(item.id)}
223+
onCheckedChange={() => toggleSelection(item.id)}
224+
/>
225+
)}
226+
<div className="item-content">
227+
<DsTypography className="item-label" variant="body-sm-reg" style={errorStyle}>
228+
{item.label}
229+
</DsTypography>
230+
<DsTypography className="item-description" variant="body-xs-reg" style={errorStyle}>
231+
{item.description}
232+
</DsTypography>
233+
</div>
234+
</DsDropdownMenu.Item>
235+
);
236+
})}
222237
{!!filteredGroupedItems.length && (
223238
<DsDropdownMenu.ItemGroup>
224239
<DsDropdownMenu.ItemGroupLabel>Group Name</DsDropdownMenu.ItemGroupLabel>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const Content: React.FC<DsDropdownMenuContentProps> = ({
104104
const Item: React.FC<DsDropdownMenuItemProps> = ({
105105
disabled,
106106
selected,
107+
variant = 'default',
107108
value,
108109
asChild,
109110
onClick,
@@ -120,6 +121,7 @@ const Item: React.FC<DsDropdownMenuItemProps> = ({
120121
{
121122
[styles.selected]: selected,
122123
},
124+
variant === 'error' && styles['variant-error'],
123125
className,
124126
)}
125127
style={style}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import type { CSSProperties, MouseEvent, ReactNode } from 'react';
22
import type { Menu } from '@ark-ui/react/menu';
33
import type { IconType } from '../ds-icon';
44

5+
export const dropdownMenuItemVariants = ['default', 'error'] as const;
6+
export type DropdownMenuItemVariant = (typeof dropdownMenuItemVariants)[number];
7+
58
/**
69
* Base positioning type
710
*/
@@ -190,6 +193,12 @@ export interface DsDropdownMenuItemProps extends Pick<
190193
* Whether the item is selected (applies selected styling)
191194
*/
192195
selected?: boolean;
196+
/**
197+
* Status variant that applies colored text to convey item state.
198+
* `error` renders text in danger color.
199+
* @default 'default'
200+
*/
201+
variant?: DropdownMenuItemVariant;
193202
}
194203

195204
/**

0 commit comments

Comments
 (0)