Skip to content

Commit

Permalink
Fixed states chromatic tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicky-comeau
vicky-comeau committed Jul 4, 2024
1 parent 92403fa commit fd6a140
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 81 deletions.
8 changes: 5 additions & 3 deletions packages/components/src/ListBox/src/ListBoxItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CheckmarkIcon, IconContext, type IconProps } from "@hopper-ui/icons";
import { type StyledComponentProps, useStyledSystem, type ResponsiveProp, useResponsiveValue } from "@hopper-ui/styled-system";
import { forwardRef, type ReactNode, useContext, type ForwardedRef, useState, type TransitionEventHandler } from "react";
import { forwardRef, type ReactNode, useContext, type ForwardedRef, useState, type TransitionEventHandler, type NamedExoticComponent } from "react";
import {
useContextProps,
ListBoxItem as RACListBoxItem,
Expand Down Expand Up @@ -307,7 +307,9 @@ function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, ref: Forwarde
*
* [View Documentation](TODO)
*/
const _ListBoxItem = forwardRef<HTMLDivElement, ListBoxItemProps<object>>(ListBoxItem);
_ListBoxItem.displayName = "ListBoxItem";
const _ListBoxItem = forwardRef(ListBoxItem) as <T>(
props: ListBoxItemProps<T> & { ref?: ForwardedRef<HTMLDivElement> }
) => ReturnType<typeof ListBoxItem>;
(_ListBoxItem as NamedExoticComponent).displayName = "ListBoxItem";

export { _ListBoxItem as ListBoxItem };
162 changes: 84 additions & 78 deletions packages/components/src/ListBox/tests/chromatic/ListBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,106 +599,112 @@ export const InputMultiSelect = {
}
} satisfies Story;

const StateTemplate = (args: Partial<ListBoxProps<unknown>>) => (
<Inline alignY="flex-end">
<ListBox {...args} size="xs">
<ListBoxItem id="1" textValue="Earth">
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
<ListBox {...args} size="sm">
<ListBoxItem id="1" textValue="Earth">
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
<ListBox {...args} size="md">
<ListBoxItem id="1" textValue="Earth">
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
<ListBox {...args} size="lg">
<ListBoxItem id="1" textValue="Earth">
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
</Inline>
);
interface StateTemplateProps extends Partial<ListBoxProps<unknown>> {
"data-chromatic-force"?: string[];
}

const StateTemplate = (args: StateTemplateProps) => {
const { "data-chromatic-force": dataChromaticForce, ...rest } = args;

return (
<Inline alignY="flex-end">
<ListBox {...rest} size="xs">
<ListBoxItem id="1" textValue="Earth" data-testid="first-item" data-chromatic-force={dataChromaticForce}>
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
<ListBox {...rest} size="sm">
<ListBoxItem id="1" textValue="Earth" data-testid="first-item" data-chromatic-force={dataChromaticForce}>
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
<ListBox {...rest} size="md">
<ListBoxItem id="1" textValue="Earth" data-testid="first-item" data-chromatic-force={dataChromaticForce}>
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
<ListBox {...rest} size="lg">
<ListBoxItem id="1" textValue="Earth" data-testid="first-item" data-chromatic-force={dataChromaticForce}>
<SparklesIcon />
<Text slot="label">Earth</Text>
<Text slot="description">The third planet from the sun.</Text>
<Badge>50</Badge>
</ListBoxItem>
<ListBoxItem id="2" textValue="Mars">
<SparklesIcon />
<Text slot="label">Mars</Text>
<Text slot="description">The fourth planet from the sun.</Text>
<Badge variant="secondary">99+</Badge>
</ListBoxItem>
</ListBox>
</Inline>
);
};

export const SingleSelectStates = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const listboxes = canvas.getAllByRole("listbox");
const listboxes = await canvas.findAllByRole("listbox");
listboxes.forEach(async listbox => {
const firstItem = (await within(listbox).findAllByRole("option"))[0];
if (!firstItem.hasAttribute("data-disabled")) { // don't try and force states on a disabled input
if (listbox.getAttribute("data-chromatic-force-press")) {
firstItem.setAttribute("data-pressed", "true");
const listboxItem = await within(listbox).findByTestId("first-item");
if (!listboxItem.hasAttribute("data-disabled") && listboxItem.hasAttribute("data-chromatic-force")) { // don't try and force states on a disabled input
if (listboxItem.getAttribute("data-chromatic-force")?.includes("press")) {
listboxItem.setAttribute("data-pressed", "true");
}

if (listbox.getAttribute("data-chromatic-force-focus")) {
firstItem.setAttribute("data-focus-visible", "true");
if (listboxItem.getAttribute("data-chromatic-force")?.includes("focus")) {
listboxItem.setAttribute("data-focus-visible", "true");
}

if (listbox.getAttribute("data-chromatic-force-hover")) {
firstItem.setAttribute("data-hovered", "true");
if (listboxItem.getAttribute("data-chromatic-force")?.includes("hover")) {
listboxItem.setAttribute("data-hovered", "true");
}

listboxItem.removeAttribute("data-chromatic-force");
}

listbox.removeAttribute("data-chromatic-force-press");
listbox.removeAttribute("data-chromatic-force-focus");
listbox.removeAttribute("data-chromatic-force-hover");
});
},
render: props => (
<Stack>
<h1>Default</h1>
<StateTemplate {...props} />
<h1>Focus Visible</h1>
<StateTemplate {...props} data-chromatic-force-focus />
<StateTemplate {...props} data-chromatic-force={["focus"]} />
<h1>Hovered</h1>
<StateTemplate {...props} data-chromatic-force-hover />
<StateTemplate {...props} data-chromatic-force={["hover"]} />
<h1>Focus Visible & Hovered</h1>
<StateTemplate {...props} data-chromatic-force-focus data-chromatic-force-hover />
<StateTemplate {...props} data-chromatic-force={["focus", "hover"]} />
<h1>Pressed</h1>
<StateTemplate {...props} data-chromatic-force-press />
<StateTemplate {...props} data-chromatic-force={["press"]} />
<h1>All States & Disabled</h1>
<StateTemplate {...props} disabledKeys={["1", "2"]} data-chromatic-force-focus data-chromatic-force-hover force-hover data-chromatic-force-press />
<StateTemplate {...props} disabledKeys={["1", "2"]} data-chromatic-force={["focus", "hover", "press"]} />
</Stack>
),
args: {
Expand Down

0 comments on commit fd6a140

Please sign in to comment.