lab components / Tables and lists

Action list

List-content of the ActionMenu, that can be used independently.

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { ActionList } from "@siteimprove/fancylab";

#Examples

The inner list content of the ActionMenu component.

#Basic usage

CodeHTML output

<ActionList
	items={[
		{ text: "Actionbutton", onClick: () => console.log("clicked") },
		{ text: "ActionLink", href: "https://www.google.com", openNew: true },
		ActionList.divider,
		{
			text: "Disabled actionbutton",
			onClick: () => console.log("clicked"),
			disabled: true,
		},
		ActionList.sectionHeader("New section"),
		{
			text: "Actionbutton",
			onClick: () => console.log("clicked"),
		},
	]}
/>

#Selected usage

ActionLink

CodeHTML output

<ActionList
	items={[
		{ text: "Actionbutton", onClick: () => console.log("clicked") },
		{ text: "Actionbutton", onClick: () => console.log("clicked"), selected: true },
		{ text: "ActionLink", href: "https://www.google.com", openNew: true },
	]}
/>

CodeHTML output

const items = [
	{
		text: "First link",
		href: "#first",
		count: 1,
	},
	{
		text: "Second link",
		href: "#second",
		count: 2,
	},
];

return (
	<ActionList
		items={items}
		itemRenderer={(props) => {
			const item = props.item as LinkItem & { count: number };
			return (
				<LinkContainer
					tabIndex={-1}
					href={item.href}
					style={{
						width: "100%",
						padding: "10px",
						display: "flex",
						justifyContent: "space-between",
					}}
				>
					<LinkContainer.LinkText>{item.text}</LinkContainer.LinkText>
					<Badge>{item.count}</Badge>
				</LinkContainer>
			);
		}}
	/>
);

#Pagination Usage

Title of list

CodeHTML output

const id = useUniqueId("interactive-list");
const items = [];
for (let i = 0; i < 100; i++) {
	items.push({ text: `Item ${i + 1}`, onClick: () => console.log(`clicked item ${i + 1}`) });
}

return (
	<>
		<H2 id={id}>Title of list</H2>
		<ActionList
			items={items}
			pageChanger={{
				pageSize: 5,
				confirmLabel: "Confirm",
				cancelLabel: "Cancel",
				firstLabel: "First",
				prevLabel: "Previous",
				nextLabel: "Next",
				lastLabel: "Last",
				pageLabel: "Page",
				pageXofYLabel: (current, total) => `Page ${current} of ${total}`,
				defaultError: "Default error",
				wholeNumberError: "Whole number error",
				outOfBoundsError: (total) => `Out of bounds error. Total is ${total}`,
			}}
		/>
	</>
);

Action list

This is a Lab component!

#Examples

#Basic usage

#Selected usage

#Custom renderer usage

Title of list

#Guidelines

#Best practices

#Do not use when

#Accessibility

#Writing