Add new features to Listbox component

This commit introduces new functionalities to the Listbox component. Properties like 'size', 'theme', and 'bordered' have been added providing more customization options. Additionally, a 'toPx' function has been implemented to simplify CSS value conversions. This function is used for more precise size values for the Listbox items. Storybook stories have also been updated to accommodate these changes.

packages/kit/src/components/Listbox/Listbox.css.ts

@@ -1,7 +1,9 @@
 import { createTheme, style } from "@vanilla-extract/css";
 import { tokens } from "../../foundation/contract.css";
-import { themeTokens } from "../../foundation";
+import { themeTokens, themeVars } from "../../foundation";
 import { componentStateStyles } from "@kobalte/vanilla-extract";
+import { LISTBOX_ITEM_SIZE } from "./sizes";
+import { toPx } from "../../utils/css";
 
 export const [listTheme, listThemeVars] = createTheme({
 	contentBackground: tokens.dropdownBackground,
@@ -20,14 +22,6 @@ export const [listTheme, listThemeVars] = createTheme({
 	indicatorSize: "20px",
 });
 
-const sizesCss = {
-	xs: "30px",
-	sm: "36px",
-	md: "40px",
-	lg: "48px",
-	xl: "56px",
-};
-
 const ButtonSizes = {
 	xs: "xs",
 	sm: "sm",
@@ -36,7 +30,32 @@ const ButtonSizes = {
 	xl: "xl",
 } as const;
 
-export const list = style([listTheme]);
+export const list = style([
+	listTheme,
+	{
+		borderRadius: themeTokens.radii.sm,
+		selectors: {
+			"&[data-bordered]": {
+				padding: themeTokens.spacing["2"],
+				border: `1px solid ${themeVars.separator}`,
+			},
+			"&[data-theme=primary]": {
+				vars: {
+					[listThemeVars.itemTextColor]: tokens.dropdownItemTextColor,
+					[listThemeVars.itemHoverBackground]: tokens.brandAccentHover,
+					[listThemeVars.itemHoverTextColor]: tokens.dropdownItemHoverTextColor,
+				},
+			},
+			"&[data-theme=neutral]": {
+				vars: {
+					[listThemeVars.itemTextColor]: tokens.dropdownItemTextColor,
+					[listThemeVars.itemHoverBackground]: tokens.dropdownItemHoverBackground,
+					[listThemeVars.itemHoverTextColor]: tokens.dropdownItemHoverTextColor,
+				},
+			},
+		},
+	},
+]);
 
 /**
  * TODO: same as select!
@@ -68,17 +87,18 @@ export const item = style([
 	{
 		selectors: {
 			[`&[data-size=${ButtonSizes.xs}]`]: {
-				height: "30px",
+				height: toPx(LISTBOX_ITEM_SIZE.xs),
 				fontSize: themeTokens.fontSize.sm,
-				minHeight: "1.25rem",
+				borderRadius: themeTokens.radii.xs,
+				minHeight: 0,
 			},
 			[`&[data-size=${ButtonSizes.sm}]`]: {
-				height: "36px",
+				height: toPx(LISTBOX_ITEM_SIZE.sm),
 				fontSize: themeTokens.fontSize.md,
-				minHeight: "1.25rem",
+				minHeight: 0,
 			},
 			[`&[data-size=${ButtonSizes.md}]`]: {
-				height: "42px",
+				height: toPx(LISTBOX_ITEM_SIZE.md),
 				fontSize: themeTokens.fontSize.md,
 			},
 		},

packages/kit/src/components/Listbox/Listbox.tsx

@@ -9,15 +9,28 @@ export type ListboxProps<Option, OptGroup> = Omit<
 	"renderItem"
 > & {
 	size?: "xs" | "sm" | "md";
+	theme?: "primary" | "neutral";
+	itemLabel?: (item: Option) => JSXElement;
+	bordered?: boolean;
 };
 
 export function Listbox<Option, OptGroup = never>(props: ListboxProps<Option, OptGroup>) {
-	const [local, others] = splitProps(props, ["class"]);
+	const [local, others] = splitProps(props, [
+		"class",
+		"size",
+		"itemLabel",
+		"bordered",
+		"theme",
+	]);
 
 	return (
 		<KListbox.Root
+			data-bordered={local.bordered ? "" : undefined}
+			data-theme={local.theme ?? "neutral"}
 			class={mergeClasses(styles.list)}
-			renderItem={node => <ListboxItem size={props.size} item={node} />}
+			renderItem={node => (
+				<ListboxItem itemLabel={local.itemLabel} size={local.size} item={node} />
+			)}
 			{...others}
 		/>
 	);

packages/kit/src/components/Listbox/VirtualizedListbox.tsx

@@ -1,6 +1,7 @@
 import { createVirtualizer } from "@tanstack/solid-virtual";
 import { Listbox, ListboxItem, ListboxProps } from "./Listbox";
 import { For } from "solid-js";
+import { LISTBOX_ITEM_SIZE } from "./sizes";
 
 type VirtualizedListboxProps<Option, OptGroup> = Omit<
 	ListboxProps<Option, OptGroup>,
@@ -38,7 +39,8 @@ export function VirtualizedListbox<Option, OptGroup = never>(
 		getScrollElement: () => listboxRef,
 		estimateSize: (index: number) =>
 			// TODO: fix that size
-			props.virtualizerOptions?.estimateSize?.(index) ?? 42,
+			props.virtualizerOptions?.estimateSize?.(index) ??
+			LISTBOX_ITEM_SIZE[props.size ?? "md"],
 		// TODO: why error?
 		// @ts-ignore
 		getItemKey: (index: number) => {

packages/kit/src/components/Listbox/sizes.ts

@@ -0,0 +1,7 @@
+export const LISTBOX_ITEM_SIZE: Record<ListboxItemSizeKey, number> = {
+	xs: 30,
+	sm: 36,
+	md: 40,
+};
+
+export type ListboxItemSizeKey = "xs" | "sm" | "md";

packages/kit/src/utils/css.ts

@@ -1,3 +1,7 @@
 export function mergeClasses(...classNames: Array<string | null | undefined>) {
 	return classNames.filter(Boolean).join(" ");
 }
+
+export function toPx(value: number) {
+	return `${value}px`;
+}

packages/storybook/src/stories/Listbox.stories.tsx

@@ -11,6 +11,17 @@ const meta = {
 			control: { type: "radio" },
 			options: ["multiple", "none", "single"],
 		},
+		size: {
+			control: { type: "radio" },
+			options: ["xs", "sm", "md"],
+		},
+		bordered: {
+			type: "boolean",
+		},
+		theme: {
+			control: { type: "radio" },
+			options: ["primary", "neutral"],
+		},
 	},
 
 	tags: ["autodocs"],
@@ -70,6 +81,17 @@ export const ListboxMedium: Story = {
 	},
 };
 
+export const ListboxOptionWithCustomItemLabel: Story = {
+	name: "Listbox - Custom Item Label",
+	args: {
+		size: "md",
+		defaultValue: ["Item1"],
+		options: ["Item1", "Item2", "Item3"],
+		selectionMode: "multiple",
+		itemLabel: (item: string) => <span style={{ color: "yellow" }}>Custom {item}</span>,
+	},
+};
+
 export const ListboxVirtualized: Story = {
 	name: "Listbox Virtualized",
 	render: args => {