Fix stories again
This commit is contained in:
@ -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',
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 },
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user