admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(twenty-front/Button): add loading state on Button (#10536)

Browse Source
This commit is contained in:
Antoine Moreaux
2025-03-03 11:04:32 +01:00
committed by GitHub
parent 2e4c596644
commit 51c34b77d9
19 changed files with 374 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
View File

@ -17,12 +17,12 @@ import {
useFloating,
} from '@floating-ui/react';
import { MouseEvent, ReactNode } from 'react';
import { flushSync } from 'react-dom';
import { Keys } from 'react-hotkeys-hook';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared';
import { sleep } from '~/utils/sleep';
import { useDropdown } from '../hooks/useDropdown';
import { flushSync } from 'react-dom';
const StyledDropdownFallbackAnchor = styled.div`
left: 0;

14
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -82,9 +82,7 @@ export const Empty: Story = {
play: async () => {
const canvas = within(document.body);
const buttons = await canvas.findAllByRole('button', {
name: 'Open Dropdown',
});
const buttons = await canvas.findAllByRole('button');
userEvent.click(buttons[0]);
await waitFor(async () => {
@ -225,16 +223,16 @@ export const WithHeaders: Story = {
<StyledDropdownMenuSubheader>Subheader 1</StyledDropdownMenuSubheader>
<DropdownMenuItemsContainer hasMaxHeight>
<>
{optionsMock.slice(0, 3).map(({ name }) => (
<MenuItem text={name} />
{optionsMock.slice(0, 3).map((item) => (
<MenuItem key={item.id} text={item.name} />
))}
</>
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<StyledDropdownMenuSubheader>Subheader 2</StyledDropdownMenuSubheader>
<DropdownMenuItemsContainer>
{optionsMock.slice(3).map(({ name }) => (
<MenuItem text={name} />
{optionsMock.slice(3).map((item) => (
<MenuItem key={item.id} text={item.name} />
))}
</DropdownMenuItemsContainer>
</>
@ -282,7 +280,7 @@ export const WithInput: Story = {
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{optionsMock.map(({ name }) => (
<MenuItem text={name} />
<MenuItem key={name} text={name} />
))}
</DropdownMenuItemsContainer>
</>