Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Dropdown): add support for active items #2148

Closed
wants to merge 1 commit into from
Closed

feat(Dropdown): add support for active items #2148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion packages/components/src/components/Dropdown/Dropdown.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* (c) Copyright Frontify Ltd., all rights reserved. */

import { IconIcon } from '@frontify/fondue-icons';
import { IconCheckMark, IconIcon } from '@frontify/fondue-icons';
import { type Meta, type StoryObj } from '@storybook/react';
import { useState } from 'react';

Expand Down Expand Up @@ -63,6 +63,26 @@ export const Default: Story = {
),
};

export const ActiveItem: Story = {
render: ({ ...args }) => (
<Dropdown.Root {...args}>
<Dropdown.Trigger>
<Button>Trigger</Button>
</Dropdown.Trigger>
<Dropdown.Content>
<Dropdown.Item active onSelect={() => {}}>
Item 1
<Dropdown.Slot name="right">
<IconCheckMark size={16} />
</Dropdown.Slot>
</Dropdown.Item>
<Dropdown.Item onSelect={() => {}}>Item 2</Dropdown.Item>
<Dropdown.Item onSelect={() => {}}>Item 3</Dropdown.Item>
</Dropdown.Content>
</Dropdown.Root>
),
};

export const LinkItems: Story = {
render: ({ ...args }) => (
<Dropdown.Root {...args}>
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,10 @@ DropdownSubContent.displayName = 'Dropdown.SubContent';

export type DropdownItemProps = {
children: ReactNode;
/**
* Marks the item as active.
*/
active?: boolean;
/**
* Disables the item.
*/
Expand All @@ -221,6 +225,7 @@ export type DropdownItemProps = {
export const DropdownItem = (
{
children,
active,
disabled,
textValue,
onSelect,
Expand All @@ -239,6 +244,7 @@ export const DropdownItem = (
onSelect={onSelect}
className={styles.item}
textValue={textValue}
data-active={active}
data-test-id={dataTestId}
data-emphasis={emphasis}
ref={ref}
Expand Down
18 changes: 18 additions & 0 deletions packages/components/src/components/Dropdown/__tests__/Dropdown.ct.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,3 +323,21 @@ test('should not focus trigger on close', async ({ mount, page }) => {
await page.mouse.click(0, 0);
await expect(triggerElement).not.toBeFocused();
});

test('should render a dropdown item with active state', async ({ mount, page }) => {
await mount(
<Dropdown.Root open>
<Dropdown.Trigger>
<Button data-test-id={DROPDOWN_TRIGGER_TEST_ID}>Trigger</Button>
</Dropdown.Trigger>
<Dropdown.Content data-test-id={DROPDOWN_CONTENT_TEST_ID}>
<Dropdown.Item onSelect={() => {}} active>
Item 1
</Dropdown.Item>
</Dropdown.Content>
</Dropdown.Root>,
);

const dropdownItemElement = page.getByTestId(DROPDOWN_CONTENT_TEST_ID);
await expect(dropdownItemElement.getByRole('menuitem').first()).toHaveAttribute('data-active', 'true');
});
5 changes: 5 additions & 0 deletions packages/components/src/components/Dropdown/styles/dropdown.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@
color: var(--text-color-weak);
outline-style: none;

&[data-active='true'] {
background-color: var(--box-neutral-color);
color: var(--text-color);
}

&[data-state='open'] {
background-color: var(--box-neutral-color);
color: var(--text-color);
Expand Down
Loading