Fix stories again

This commit is contained in:
Charles Bochet
2025-03-13 16:49:23 +01:00
parent 37afb38479
commit 4f0fd0c9f3
4 changed files with 14 additions and 27 deletions

View File

@ -161,12 +161,15 @@ export const Disabled: Story = {
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
const editor = await waitFor(() => {
const editor = canvasElement.querySelector('.ProseMirror > p');
expect(editor).toBeVisible();
return editor;
});
const variablePicker = canvas.queryByText('VariablePicker');
expect(variablePicker).not.toBeInTheDocument();
const editor = canvasElement.querySelector('.ProseMirror > p');
expect(editor).toBeVisible();
const defaultValue = await canvas.findByText('Text field');
expect(defaultValue).toBeVisible();
@ -224,8 +227,11 @@ export const HasHistory: Story = {
const canvas = within(canvasElement);
const editor = canvasElement.querySelector('.ProseMirror > p');
expect(editor).toBeVisible();
const editor = await waitFor(() => {
const editor = canvasElement.querySelector('.ProseMirror > p');
expect(editor).toBeVisible();
return editor;
});
const addVariableButton = await canvas.findByRole('button', {
name: 'Add variable',

View File

@ -44,7 +44,6 @@ const StyledUnShrinkableContainer = styled.div`
export type ExpandableListProps = {
isChipCountDisplayed?: boolean;
withExpandedListBorder?: boolean;
};
export type ChildrenProperty = {
@ -55,7 +54,6 @@ export type ChildrenProperty = {
export const ExpandableList = ({
children,
isChipCountDisplayed: isChipCountDisplayedFromProps,
withExpandedListBorder = false,
}: {
children: ReactElement[];
} & ExpandableListProps) => {
@ -166,7 +164,6 @@ export const ExpandableList = ({
<ExpandedListDropdown
anchorElement={containerRef.current ?? undefined}
onClickOutside={handleClickOutside}
withBorder={withExpandedListBorder}
>
{children}
</ExpandedListDropdown>

View File

@ -1,33 +1,23 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
import { ReactNode } from 'react';
import { StyledDropdownContentContainer } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
type ExpandedListDropdownProps = {
anchorElement?: HTMLElement;
children: ReactNode;
onClickOutside?: () => void;
withBorder?: boolean;
};
const StyledExpandedListContainer = styled.div<{
withBorder?: boolean;
}>`
const StyledExpandedListContainer = styled.div`
display: flex;
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(2)};
${({ theme, withBorder }) =>
withBorder &&
css`
outline: 1px solid ${theme.font.color.extraLight};
`};
`;
// TODO: unify this and use Dropdown component instead
@ -35,7 +25,6 @@ export const ExpandedListDropdown = ({
anchorElement,
children,
onClickOutside,
withBorder,
}: ExpandedListDropdownProps) => {
const { refs, floatingStyles } = useFloating({
placement: 'bottom-start',
@ -65,7 +54,7 @@ export const ExpandedListDropdown = ({
: undefined
}
>
<StyledExpandedListContainer withBorder={withBorder}>
<StyledExpandedListContainer>
{children}
</StyledExpandedListContainer>
</DropdownMenu>

View File

@ -65,8 +65,3 @@ export const WithExpandedList: Story = {
expect(await rootCanvas.findByText('Option 7')).toBeDefined();
},
};
export const WithExpandedListBorder: Story = {
...WithExpandedList,
args: { ...WithExpandedList.args, withExpandedListBorder: true },
};