paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 42 Packages Projects Releases Wiki Activity

Move to GridList

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-03-16 12:05:48 +00:00
parent af4610d138
commit 985788ff6d
19 changed files with 664 additions and 757 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/add-listbox-component.md
+2 -2
View File
@@ -2,6 +2,6 @@
'@backstage/ui': patch
---
Added `ListBox` and `ListBoxItem` components. These provide a standalone, accessible list of selectable options built on top of React Aria's `ListBox` and `ListBoxItem` primitives. Items support icons, descriptions, and single or multiple selection modes.
Added `List` and `ListRow` components. These provide a standalone, accessible list of interactive rows built on top of React Aria's `GridList` and `GridListItem` primitives. Rows support icons, descriptions, actions, menus, and single or multiple selection modes.
**Affected components:** ListBox, ListBoxItem
**Affected components:** List, ListRow
docs-ui/src/app/components/list-box/components.tsx
-186
View File
@@ -1,186 +0,0 @@
'use client';
import {
ListBox,
ListBoxItem,
} from '../../../../../packages/ui/src/components/ListBox/ListBox';
import { MenuItem } from '../../../../../packages/ui/src/components/Menu/Menu';
import {
TagGroup,
Tag,
} from '../../../../../packages/ui/src/components/TagGroup/TagGroup';
import { useState } from 'react';
import type { Selection } from 'react-aria-components';
import {
RiJavascriptLine,
RiReactjsLine,
RiShipLine,
RiTerminalLine,
RiCodeLine,
RiDeleteBinLine,
RiEdit2Line,
RiShareBoxLine,
} from '@remixicon/react';
const itemTags: Record<string, string[]> = {
react: ['frontend', 'ui'],
typescript: ['typed', 'js'],
javascript: ['web'],
rust: ['systems', 'fast'],
go: ['backend'],
};
const items = [
{ id: 'react', label: 'React' },
{ id: 'typescript', label: 'TypeScript' },
{ id: 'javascript', label: 'JavaScript' },
{ id: 'rust', label: 'Rust' },
{ id: 'go', label: 'Go' },
];
const itemsWithDescription = [
{
id: 'react',
label: 'React',
description: 'A JavaScript library for building user interfaces',
},
{
id: 'typescript',
label: 'TypeScript',
description: 'Typed superset of JavaScript',
},
{
id: 'javascript',
label: 'JavaScript',
description: 'The language of the web',
},
{
id: 'rust',
label: 'Rust',
description: 'Systems programming with memory safety',
},
{
id: 'go',
label: 'Go',
description: 'Simple, fast, and reliable',
},
];
const itemIcons: Record<string, React.ReactNode> = {
react: <RiReactjsLine />,
typescript: <RiCodeLine />,
javascript: <RiJavascriptLine />,
rust: <RiShipLine />,
go: <RiTerminalLine />,
};
export const Default = () => (
<ListBox aria-label="Programming languages" style={{ width: 380 }}>
{items.map(item => (
<ListBoxItem
key={item.id}
id={item.id}
icon={itemIcons[item.id]}
menuItems={
<>
<MenuItem iconStart={<RiEdit2Line />}>Edit</MenuItem>
<MenuItem iconStart={<RiShareBoxLine />}>Share</MenuItem>
<MenuItem iconStart={<RiDeleteBinLine />} color="danger">
Delete
</MenuItem>
</>
}
customActions={
<TagGroup aria-label={`Tags for ${item.label}`}>
{itemTags[item.id].map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
export const WithIcons = () => (
<ListBox aria-label="Programming languages" style={{ width: 280 }}>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id} icon={itemIcons[item.id]}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
export const WithDescription = () => (
<ListBox aria-label="Programming languages" style={{ width: 340 }}>
{itemsWithDescription.map(item => (
<ListBoxItem
key={item.id}
id={item.id}
icon={itemIcons[item.id]}
description={item.description}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
export const SelectionModeSingle = () => {
const [selected, setSelected] = useState<Selection>(new Set(['react']));
return (
<ListBox
aria-label="Programming languages"
style={{ width: 280 }}
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
};
export const SelectionModeMultiple = () => {
const [selected, setSelected] = useState<Selection>(
new Set(['react', 'typescript']),
);
return (
<ListBox
aria-label="Programming languages"
style={{ width: 280 }}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
};
export const Disabled = () => (
<ListBox
aria-label="Programming languages"
style={{ width: 280 }}
disabledKeys={['typescript', 'rust']}
>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
docs-ui/src/app/components/list-box/snippets.ts
-75
View File
@@ -1,75 +0,0 @@
export const usage = `import { ListBox, ListBoxItem } from '@backstage/ui';
<ListBox aria-label="Programming languages">
<ListBoxItem id="react">React</ListBoxItem>
<ListBoxItem id="typescript">TypeScript</ListBoxItem>
<ListBoxItem id="javascript">JavaScript</ListBoxItem>
</ListBox>`;
export const preview = `<ListBox aria-label="Programming languages">
<ListBoxItem id="react">React</ListBoxItem>
<ListBoxItem id="typescript">TypeScript</ListBoxItem>
<ListBoxItem id="javascript">JavaScript</ListBoxItem>
<ListBoxItem id="rust">Rust</ListBoxItem>
<ListBoxItem id="go">Go</ListBoxItem>
</ListBox>`;
export const withIcons = `<ListBox aria-label="Programming languages">
<ListBoxItem id="react" icon={<RiReactjsLine />}>React</ListBoxItem>
<ListBoxItem id="typescript" icon={<RiCodeLine />}>TypeScript</ListBoxItem>
<ListBoxItem id="javascript" icon={<RiJavascriptLine />}>JavaScript</ListBoxItem>
</ListBox>`;
export const withDescription = `<ListBox aria-label="Programming languages">
<ListBoxItem
id="react"
icon={<RiReactjsLine />}
description="A JavaScript library for building user interfaces"
>
React
</ListBoxItem>
<ListBoxItem
id="typescript"
icon={<RiCodeLine />}
description="Typed superset of JavaScript"
>
TypeScript
</ListBoxItem>
</ListBox>`;
export const selectionModeSingle = `const [selected, setSelected] = useState(new Set(['react']));
<ListBox
aria-label="Programming languages"
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
<ListBoxItem id="react">React</ListBoxItem>
<ListBoxItem id="typescript">TypeScript</ListBoxItem>
<ListBoxItem id="javascript">JavaScript</ListBoxItem>
</ListBox>`;
export const selectionModeMultiple = `const [selected, setSelected] = useState(new Set(['react', 'typescript']));
<ListBox
aria-label="Programming languages"
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
<ListBoxItem id="react">React</ListBoxItem>
<ListBoxItem id="typescript">TypeScript</ListBoxItem>
<ListBoxItem id="javascript">JavaScript</ListBoxItem>
</ListBox>`;
export const disabled = `<ListBox
aria-label="Programming languages"
disabledKeys={['typescript', 'rust']}
>
<ListBoxItem id="react">React</ListBoxItem>
<ListBoxItem id="typescript">TypeScript</ListBoxItem>
<ListBoxItem id="javascript">JavaScript</ListBoxItem>
<ListBoxItem id="rust">Rust</ListBoxItem>
<ListBoxItem id="go">Go</ListBoxItem>
</ListBox>`;
docs-ui/src/app/components/list/components.tsx
+159
View File
@@ -0,0 +1,159 @@
'use client';
import {
List,
ListRow,
} from '../../../../../packages/ui/src/components/List/List';
import { MenuItem } from '../../../../../packages/ui/src/components/Menu/Menu';
import {
TagGroup,
Tag,
} from '../../../../../packages/ui/src/components/TagGroup/TagGroup';
import { useState } from 'react';
import type { Selection } from 'react-aria-components';
import {
RiJavascriptLine,
RiReactjsLine,
RiShipLine,
RiTerminalLine,
RiCodeLine,
RiDeleteBinLine,
RiEdit2Line,
RiShareBoxLine,
} from '@remixicon/react';
const items = [
{
id: 'react',
label: 'React',
description: 'A JavaScript library for building user interfaces',
icon: <RiReactjsLine />,
tags: ['frontend', 'ui'],
},
{
id: 'typescript',
label: 'TypeScript',
description: 'Typed superset of JavaScript',
icon: <RiCodeLine />,
tags: ['typed', 'js'],
},
{
id: 'javascript',
label: 'JavaScript',
description: 'The language of the web',
icon: <RiJavascriptLine />,
tags: ['web'],
},
{
id: 'rust',
label: 'Rust',
description: 'Systems programming with memory safety',
icon: <RiShipLine />,
tags: ['systems', 'fast'],
},
{
id: 'go',
label: 'Go',
description: 'Simple, fast, and reliable',
icon: <RiTerminalLine />,
tags: ['backend'],
},
];
const menuItems = (
<>
<MenuItem iconStart={<RiEdit2Line />}>Edit</MenuItem>
<MenuItem iconStart={<RiShareBoxLine />}>Share</MenuItem>
<MenuItem iconStart={<RiDeleteBinLine />} color="danger">
Delete
</MenuItem>
</>
);
export const Default = () => (
<List aria-label="Programming languages" style={{ width: 380 }} items={items}>
{item => (
<ListRow
id={item.id}
icon={item.icon}
menuItems={menuItems}
customActions={
<TagGroup aria-label={`Tags for ${item.label}`}>
{item.tags.map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListRow>
)}
</List>
);
export const WithIcons = () => (
<List aria-label="Programming languages" style={{ width: 280 }} items={items}>
{item => (
<ListRow id={item.id} icon={item.icon}>
{item.label}
</ListRow>
)}
</List>
);
export const WithDescription = () => (
<List aria-label="Programming languages" style={{ width: 340 }} items={items}>
{item => (
<ListRow id={item.id} icon={item.icon} description={item.description}>
{item.label}
</ListRow>
)}
</List>
);
export const SelectionModeSingle = () => {
const [selected, setSelected] = useState<Selection>(new Set(['react']));
return (
<List
aria-label="Programming languages"
style={{ width: 280 }}
items={items}
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>
);
};
export const SelectionModeMultiple = () => {
const [selected, setSelected] = useState<Selection>(
new Set(['react', 'typescript']),
);
return (
<List
aria-label="Programming languages"
style={{ width: 280 }}
items={items}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>
);
};
export const Disabled = () => (
<List
aria-label="Programming languages"
style={{ width: 280 }}
items={items}
disabledKeys={['typescript', 'rust']}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>
);
docs-ui/src/app/components/list-box/page.mdx → docs-ui/src/app/components/list/page.mdx
+16 -16
View File
@@ -10,7 +10,7 @@ import {
SelectionModeMultiple,
Disabled,
} from './components';
import { listBoxPropDefs, listBoxItemPropDefs } from './props-definition';
import { listPropDefs, listRowPropDefs } from './props-definition';
import {
usage,
preview,
@@ -23,18 +23,18 @@ import {
import { PageTitle } from '@/components/PageTitle';
import { Theming } from '@/components/Theming';
import {
ListBoxDefinition,
ListBoxItemDefinition,
ListDefinition,
ListRowDefinition,
} from '../../../utils/definitions';
import { ChangelogComponent } from '@/components/ChangelogComponent';
export const reactAriaUrls = {
listBox: 'https://react-aria.adobe.com/ListBox',
gridList: 'https://react-aria.adobe.com/GridList',
};
<PageTitle
title="ListBox"
description="A list of options that allows users to select one or more items."
title="List"
description="A list of interactive rows with support for keyboard navigation, single or multiple selection, and row actions."
/>
<Snippet align="center" py={4} preview={<Default />} code={preview} />
@@ -45,21 +45,21 @@ export const reactAriaUrls = {
## API reference
### ListBox
### List
Container for a list of selectable options.
Container for a list of interactive rows.
<PropsTable data={listBoxPropDefs} />
<PropsTable data={listPropDefs} />
<ReactAriaLink component="ListBox" href={reactAriaUrls.listBox} />
<ReactAriaLink component="GridList" href={reactAriaUrls.gridList} />
### ListBoxItem
### ListRow
Individual item within a ListBox.
Individual row within a List.
<PropsTable data={listBoxItemPropDefs} />
<PropsTable data={listRowPropDefs} />
<ReactAriaLink component="ListBoxItem" href={reactAriaUrls.listBox} />
<ReactAriaLink component="GridListItem" href={reactAriaUrls.gridList} />
## Examples
@@ -101,6 +101,6 @@ Individual item within a ListBox.
<Snippet align="center" py={4} open preview={<Disabled />} code={disabled} />
<Theming definition={ListBoxDefinition} />
<Theming definition={ListDefinition} />
<ChangelogComponent component="list-box" />
<ChangelogComponent component="list" />
docs-ui/src/app/components/list-box/props-definition.tsx → docs-ui/src/app/components/list/props-definition.tsx
+11 -9
View File
@@ -4,7 +4,7 @@ import {
type PropDef,
} from '@/utils/propDefs';
export const listBoxPropDefs: Record<string, PropDef> = {
export const listPropDefs: Record<string, PropDef> = {
items: {
type: 'enum',
values: ['Iterable<T>'],
@@ -12,7 +12,7 @@ export const listBoxPropDefs: Record<string, PropDef> = {
},
renderEmptyState: {
type: 'enum',
values: ['() => ReactNode'],
values: ['(props: GridListRenderProps) => ReactNode'],
description: 'Content to display when the collection is empty.',
},
selectionMode: {
@@ -44,10 +44,10 @@ export const listBoxPropDefs: Record<string, PropDef> = {
...classNamePropDefs,
};
export const listBoxItemPropDefs: Record<string, PropDef> = {
export const listRowPropDefs: Record<string, PropDef> = {
id: {
type: 'string',
description: 'Unique identifier for the item.',
description: 'Unique identifier for the row.',
},
textValue: {
type: 'string',
@@ -57,7 +57,7 @@ export const listBoxItemPropDefs: Record<string, PropDef> = {
icon: {
type: 'enum',
values: ['ReactNode'],
description: 'Icon displayed before the item label.',
description: 'Icon displayed before the row label.',
},
description: {
type: 'string',
@@ -65,17 +65,19 @@ export const listBoxItemPropDefs: Record<string, PropDef> = {
},
isDisabled: {
type: 'boolean',
description: 'Whether the item is disabled.',
description: 'Whether the row is disabled.',
},
menuItems: {
type: 'enum',
values: ['Iterable<MenuItemConfig>'],
description: 'Menu items displayed for this list box item.',
values: ['ReactNode'],
description:
'Menu items rendered inside an automatically managed dropdown. Pass MenuItem nodes.',
},
customActions: {
type: 'enum',
values: ['ReactNode'],
description: 'Custom action elements displayed alongside the item.',
description:
'Custom action elements displayed on the right side of the row, e.g. tags.',
},
...childrenPropDefs,
...classNamePropDefs,
docs-ui/src/app/components/list/snippets.ts
+72
View File
@@ -0,0 +1,72 @@
export const usage = `import { List, ListRow } from '@backstage/ui';
<List aria-label="Programming languages" items={items}>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>`;
export const preview = `<List aria-label="Programming languages" items={items}>
{item => (
<ListRow
id={item.id}
icon={item.icon}
menuItems={menuItems}
customActions={
<TagGroup aria-label={\`Tags for \${item.label}\`}>
{item.tags.map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListRow>
)}
</List>`;
export const withIcons = `<List aria-label="Programming languages" items={items}>
{item => (
<ListRow id={item.id} icon={item.icon}>
{item.label}
</ListRow>
)}
</List>`;
export const withDescription = `<List aria-label="Programming languages" items={items}>
{item => (
<ListRow id={item.id} icon={item.icon} description={item.description}>
{item.label}
</ListRow>
)}
</List>`;
export const selectionModeSingle = `const [selected, setSelected] = useState(new Set(['react']));
<List
aria-label="Programming languages"
items={items}
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>`;
export const selectionModeMultiple = `const [selected, setSelected] = useState(new Set(['react', 'typescript']));
<List
aria-label="Programming languages"
items={items}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>`;
export const disabled = `<List
aria-label="Programming languages"
items={items}
disabledKeys={['typescript', 'rust']}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>`;
docs-ui/src/utils/data.ts
+2 -2
View File
@@ -70,8 +70,8 @@ export const components: Page[] = [
slug: 'link',
},
{
title: 'ListBox',
slug: 'list-box',
title: 'List',
slug: 'list',
},
{
title: 'Menu',
packages/ui/report.api.md
+38 -38
View File
@@ -19,12 +19,14 @@ import type { DisclosurePanelProps } from 'react-aria-components';
import type { DisclosureProps } from 'react-aria-components';
import type { ElementType } from 'react';
import { ForwardRefExoticComponent } from 'react';
import type { GridListItemProps } from 'react-aria-components';
import type { GridListProps } from 'react-aria-components';
import type { HeadingProps } from 'react-aria-components';
import type { HTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import type { LinkProps as LinkProps_2 } from 'react-aria-components';
import type { ListBoxItemProps as ListBoxItemProps_2 } from 'react-aria-components';
import type { ListBoxProps as ListBoxProps_2 } from 'react-aria-components';
import type { ListBoxItemProps } from 'react-aria-components';
import type { ListBoxProps } from 'react-aria-components';
import type { MenuItemProps as MenuItemProps_2 } from 'react-aria-components';
import type { MenuProps as MenuProps_2 } from 'react-aria-components';
import type { MenuSectionProps as MenuSectionProps_2 } from 'react-aria-components';
@@ -1556,17 +1558,15 @@ export interface LinkProps
LinkOwnProps {}
// @public
export const ListBox: <T extends object>(
props: ListBoxProps<T>,
) => JSX_2.Element;
export const List: <T extends object>(props: ListProps<T>) => JSX_2.Element;
// @public
export const ListBoxDefinition: {
export const ListDefinition: {
readonly styles: {
readonly [key: string]: string;
};
readonly classNames: {
readonly root: 'bui-ListBox';
readonly root: 'bui-List';
};
readonly propDefs: {
readonly items: {};
@@ -1577,21 +1577,34 @@ export const ListBoxDefinition: {
};
// @public
export const ListBoxItem: (props: ListBoxItemProps) => JSX_2.Element;
export type ListOwnProps<T = object> = {
items?: GridListProps<T>['items'];
children?: GridListProps<T>['children'];
renderEmptyState?: GridListProps<T>['renderEmptyState'];
className?: string;
};
// @public
export const ListBoxItemDefinition: {
export interface ListProps<T>
extends ListOwnProps<T>,
Omit<GridListProps<T>, keyof ListOwnProps<T>> {}
// @public
export const ListRow: (props: ListRowProps) => JSX_2.Element;
// @public
export const ListRowDefinition: {
readonly styles: {
readonly [key: string]: string;
};
readonly bg: 'consumer';
readonly classNames: {
readonly root: 'bui-ListBoxItem';
readonly check: 'bui-ListBoxItemCheck';
readonly icon: 'bui-ListBoxItemIcon';
readonly label: 'bui-ListBoxItemLabel';
readonly description: 'bui-ListBoxItemDescription';
readonly actions: 'bui-ListBoxItemActions';
readonly root: 'bui-ListRow';
readonly check: 'bui-ListRowCheck';
readonly icon: 'bui-ListRowIcon';
readonly label: 'bui-ListRowLabel';
readonly description: 'bui-ListRowDescription';
readonly actions: 'bui-ListRowActions';
};
readonly propDefs: {
readonly children: {};
@@ -1604,32 +1617,19 @@ export const ListBoxItemDefinition: {
};
// @public
export type ListBoxItemOwnProps = {
export type ListRowOwnProps = {
children?: React.ReactNode;
description?: string;
icon?: React.ReactNode;
icon?: React.ReactElement;
menuItems?: React.ReactNode;
customActions?: React.ReactNode;
className?: string;
};
// @public
export interface ListBoxItemProps
extends ListBoxItemOwnProps,
Omit<ListBoxItemProps_2, keyof ListBoxItemOwnProps> {}
// @public
export type ListBoxOwnProps<T = object> = {
items?: ListBoxProps_2<T>['items'];
children?: ListBoxProps_2<T>['children'];
renderEmptyState?: ListBoxProps_2<T>['renderEmptyState'];
className?: string;
};
// @public
export interface ListBoxProps<T>
extends ListBoxOwnProps<T>,
Omit<ListBoxProps_2<T>, keyof ListBoxOwnProps<T>> {}
export interface ListRowProps
extends ListRowOwnProps,
Omit<GridListItemProps, keyof ListRowOwnProps> {}
// @public (undocumented)
export interface MarginProps {
@@ -1665,13 +1665,13 @@ export const MenuAutocompleteListbox: (
// @public (undocumented)
export type MenuAutocompleteListBoxOwnProps = MenuPopoverOwnProps & {
placeholder?: string;
selectionMode?: ListBoxProps_2<object>['selectionMode'];
selectionMode?: ListBoxProps<object>['selectionMode'];
};
// @public (undocumented)
export interface MenuAutocompleteListBoxProps<T>
extends MenuAutocompleteListBoxOwnProps,
Omit<ListBoxProps_2<T>, keyof MenuAutocompleteListBoxOwnProps> {}
Omit<ListBoxProps<T>, keyof MenuAutocompleteListBoxOwnProps> {}
// @public (undocumented)
export type MenuAutocompleteOwnProps = MenuPopoverOwnProps & {
@@ -1740,17 +1740,17 @@ export type MenuListBoxItemOwnProps = {
// @public (undocumented)
export interface MenuListBoxItemProps
extends MenuListBoxItemOwnProps,
Omit<ListBoxItemProps_2, keyof MenuListBoxItemOwnProps> {}
Omit<ListBoxItemProps, keyof MenuListBoxItemOwnProps> {}
// @public (undocumented)
export type MenuListBoxOwnProps = MenuPopoverOwnProps & {
selectionMode?: ListBoxProps_2<object>['selectionMode'];
selectionMode?: ListBoxProps<object>['selectionMode'];
};
// @public (undocumented)
export interface MenuListBoxProps<T>
extends MenuListBoxOwnProps,
Omit<ListBoxProps_2<T>, keyof MenuListBoxOwnProps> {}
Omit<ListBoxProps<T>, keyof MenuListBoxOwnProps> {}
// @public (undocumented)
export type MenuOwnProps = MenuPopoverOwnProps;
packages/ui/src/components/ListBox/ListBox.module.css → packages/ui/src/components/List/List.module.css
+7 -7
View File
@@ -17,7 +17,7 @@
@layer tokens, base, components, utilities;
@layer components {
.bui-ListBox {
.bui-List {
box-sizing: border-box;
overflow-y: auto;
outline: none;
@@ -35,7 +35,7 @@
}
}
.bui-ListBoxItem {
.bui-ListRow {
box-sizing: border-box;
display: flex;
align-items: center;
@@ -129,7 +129,7 @@
}
}
.bui-ListBoxItemCheck {
.bui-ListRowCheck {
display: flex;
align-items: center;
justify-content: center;
@@ -143,7 +143,7 @@
}
}
.bui-ListBoxItemIcon {
.bui-ListRowIcon {
display: flex;
align-items: center;
justify-content: center;
@@ -159,7 +159,7 @@
}
}
.bui-ListBoxItemLabel {
.bui-ListRowLabel {
flex: 1;
display: flex;
flex-direction: column;
@@ -174,7 +174,7 @@
}
}
.bui-ListBoxItemDescription {
.bui-ListRowDescription {
font-size: var(--bui-font-size-2);
color: var(--bui-fg-secondary);
overflow: hidden;
@@ -182,7 +182,7 @@
text-overflow: ellipsis;
}
.bui-ListBoxItemActions {
.bui-ListRowActions {
display: flex;
align-items: center;
gap: var(--bui-space-1);
packages/ui/src/components/List/List.stories.tsx
+290
View File
@@ -0,0 +1,290 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import preview from '../../../../../.storybook/preview';
import { useState } from 'react';
import { List, ListRow } from './List';
import { MenuItem } from '../Menu';
import { TagGroup, Tag } from '../TagGroup';
import type { Selection } from 'react-aria-components';
import {
RiJavascriptLine,
RiReactjsLine,
RiShipLine,
RiTerminalLine,
RiCodeLine,
RiDeleteBinLine,
RiEdit2Line,
RiShareBoxLine,
} from '@remixicon/react';
import { MemoryRouter } from 'react-router-dom';
const meta = preview.meta({
title: 'Backstage UI/List',
component: List,
args: {
style: { width: 320 },
'aria-label': 'List',
},
decorators: [
Story => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
],
});
const items = [
{
id: 'react',
label: 'React',
description: 'A JavaScript library for building user interfaces',
icon: <RiReactjsLine />,
tags: ['frontend', 'ui'],
},
{
id: 'typescript',
label: 'TypeScript',
description: 'Typed superset of JavaScript',
icon: <RiCodeLine />,
tags: ['typed', 'js'],
},
{
id: 'javascript',
label: 'JavaScript',
description: 'The language of the web',
icon: <RiJavascriptLine />,
tags: ['web'],
},
{
id: 'rust',
label: 'Rust',
description: 'Systems programming with memory safety',
icon: <RiShipLine />,
tags: ['systems', 'fast'],
},
{
id: 'go',
label: 'Go',
description: 'Simple, fast, and reliable',
icon: <RiTerminalLine />,
tags: ['backend'],
},
];
const menuItems = (
<>
<MenuItem iconStart={<RiEdit2Line />}>Edit</MenuItem>
<MenuItem iconStart={<RiShareBoxLine />}>Share</MenuItem>
<MenuItem iconStart={<RiDeleteBinLine />} color="danger">
Delete
</MenuItem>
</>
);
export const Default = meta.story({
render: args => (
<List {...args} items={items}>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>
),
});
export const WithIcons = meta.story({
render: args => (
<List {...args} items={items}>
{item => (
<ListRow id={item.id} icon={item.icon}>
{item.label}
</ListRow>
)}
</List>
),
});
export const WithDescription = meta.story({
args: {
style: { width: 340 },
},
render: args => (
<List {...args} items={items}>
{item => (
<ListRow id={item.id} icon={item.icon} description={item.description}>
{item.label}
</ListRow>
)}
</List>
),
});
export const SelectionModeSingle = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(new Set(['react']));
return (
<List
{...args}
items={items}
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>
);
},
});
export const SelectionModeSingleWithIcons = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(new Set(['react']));
return (
<List
{...args}
items={items}
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => (
<ListRow id={item.id} icon={item.icon}>
{item.label}
</ListRow>
)}
</List>
);
},
});
export const SelectionModeMultiple = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(
new Set(['react', 'typescript']),
);
return (
<List
{...args}
items={items}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>
);
},
});
export const SelectionModeMultipleWithIcons = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(
new Set(['react', 'typescript']),
);
return (
<List
{...args}
items={items}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{item => (
<ListRow id={item.id} icon={item.icon}>
{item.label}
</ListRow>
)}
</List>
);
},
});
export const Disabled = meta.story({
render: args => (
<List {...args} items={items} disabledKeys={['typescript', 'rust']}>
{item => <ListRow id={item.id}>{item.label}</ListRow>}
</List>
),
});
export const WithActionsMenu = meta.story({
args: {
style: { width: 420 },
},
render: args => (
<List {...args} items={items}>
{item => (
<ListRow id={item.id} icon={item.icon} menuItems={menuItems}>
{item.label}
</ListRow>
)}
</List>
),
});
export const WithActionsTags = meta.story({
args: {
style: { width: 420 },
},
render: args => (
<List {...args} items={items}>
{item => (
<ListRow
id={item.id}
icon={item.icon}
customActions={
<TagGroup aria-label={`Tags for ${item.label}`}>
{item.tags.map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListRow>
)}
</List>
),
});
export const WithActionsMenuAndTags = meta.story({
args: {
style: { width: 420 },
},
render: args => (
<List {...args} items={items}>
{item => (
<ListRow
id={item.id}
icon={item.icon}
menuItems={menuItems}
customActions={
<TagGroup aria-label={`Tags for ${item.label}`}>
{item.tags.map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListRow>
)}
</List>
),
});
packages/ui/src/components/ListBox/ListBox.tsx → packages/ui/src/components/List/List.tsx
+18 -27
View File
@@ -15,32 +15,33 @@
*/
import {
ListBox as RAListBox,
ListBoxItem as RAListBoxItem,
GridList as RAGridList,
GridListItem as RAGridListItem,
Text,
} from 'react-aria-components';
import { RiCheckLine, RiMoreLine } from '@remixicon/react';
import { useDefinition } from '../../hooks/useDefinition';
import { ListBoxDefinition, ListBoxItemDefinition } from './definition';
import type { ListBoxProps, ListBoxItemProps } from './types';
import { ListDefinition, ListRowDefinition } from './definition';
import type { ListProps, ListRowProps } from './types';
import { Box } from '../Box/Box';
import { ButtonIcon } from '../ButtonIcon';
import { MenuTrigger, Menu } from '../Menu';
/**
* A listbox displays a list of options and allows a user to select one or more of them.
* A list displays a list of interactive rows with support for keyboard
* navigation, single or multiple selection, and row actions.
*
* @public
*/
export const ListBox = <T extends object>(props: ListBoxProps<T>) => {
export const List = <T extends object>(props: ListProps<T>) => {
const { ownProps, restProps, dataAttributes } = useDefinition(
ListBoxDefinition,
ListDefinition,
props,
);
const { classes, items, children, renderEmptyState } = ownProps;
return (
<RAListBox
<RAGridList
className={classes.root}
items={items}
renderEmptyState={renderEmptyState}
@@ -48,18 +49,18 @@ export const ListBox = <T extends object>(props: ListBoxProps<T>) => {
{...restProps}
>
{children}
</RAListBox>
</RAGridList>
);
};
/**
* An item within a ListBox.
* A row within a List.
*
* @public
*/
export const ListBoxItem = (props: ListBoxItemProps) => {
export const ListRow = (props: ListRowProps) => {
const { ownProps, restProps, dataAttributes } = useDefinition(
ListBoxItemDefinition,
ListRowDefinition,
props,
);
const { classes, children, description, icon, menuItems, customActions } =
@@ -68,7 +69,7 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
const textValue = typeof children === 'string' ? children : undefined;
return (
<RAListBoxItem
<RAGridListItem
textValue={textValue}
className={classes.root}
{...dataAttributes}
@@ -87,7 +88,7 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
</Box>
)}
<div className={classes.label}>
<Text slot="label">{children}</Text>
<span>{children}</span>
{description && (
<Text slot="description" className={classes.description}>
{description}
@@ -95,20 +96,10 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
)}
</div>
{customActions && (
<div
className={classes.actions}
onClick={e => e.stopPropagation()}
onKeyDown={e => e.stopPropagation()}
>
{customActions}
</div>
<div className={classes.actions}>{customActions}</div>
)}
{menuItems && (
<div
className={classes.actions}
onClick={e => e.stopPropagation()}
onKeyDown={e => e.stopPropagation()}
>
<div className={classes.actions}>
<MenuTrigger>
<ButtonIcon
icon={<RiMoreLine />}
@@ -122,6 +113,6 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
)}
</>
)}
</RAListBoxItem>
</RAGridListItem>
);
};
packages/ui/src/components/ListBox/definition.ts → packages/ui/src/components/List/definition.ts
+13 -13
View File
@@ -15,17 +15,17 @@
*/
import { defineComponent } from '../../hooks/useDefinition';
import type { ListBoxOwnProps, ListBoxItemOwnProps } from './types';
import styles from './ListBox.module.css';
import type { ListOwnProps, ListRowOwnProps } from './types';
import styles from './List.module.css';
/**
* Component definition for ListBox
* Component definition for List
* @public
*/
export const ListBoxDefinition = defineComponent<ListBoxOwnProps>()({
export const ListDefinition = defineComponent<ListOwnProps>()({
styles,
classNames: {
root: 'bui-ListBox',
root: 'bui-List',
},
propDefs: {
items: {},
@@ -36,19 +36,19 @@ export const ListBoxDefinition = defineComponent<ListBoxOwnProps>()({
});
/**
* Component definition for ListBoxItem
* Component definition for ListRow
* @public
*/
export const ListBoxItemDefinition = defineComponent<ListBoxItemOwnProps>()({
export const ListRowDefinition = defineComponent<ListRowOwnProps>()({
styles,
bg: 'consumer',
classNames: {
root: 'bui-ListBoxItem',
check: 'bui-ListBoxItemCheck',
icon: 'bui-ListBoxItemIcon',
label: 'bui-ListBoxItemLabel',
description: 'bui-ListBoxItemDescription',
actions: 'bui-ListBoxItemActions',
root: 'bui-ListRow',
check: 'bui-ListRowCheck',
icon: 'bui-ListRowIcon',
label: 'bui-ListRowLabel',
description: 'bui-ListRowDescription',
actions: 'bui-ListRowActions',
},
propDefs: {
children: {},
packages/ui/src/components/ListBox/index.ts → packages/ui/src/components/List/index.ts
+6 -6
View File
@@ -14,11 +14,11 @@
* limitations under the License.
*/
export { ListBox, ListBoxItem } from './ListBox';
export { List, ListRow } from './List';
export type {
ListBoxProps,
ListBoxOwnProps,
ListBoxItemProps,
ListBoxItemOwnProps,
ListProps,
ListOwnProps,
ListRowProps,
ListRowOwnProps,
} from './types';
export { ListBoxDefinition, ListBoxItemDefinition } from './definition';
export { ListDefinition, ListRowDefinition } from './definition';
packages/ui/src/components/ListBox/types.ts → packages/ui/src/components/List/types.ts
+19 -19
View File
@@ -15,39 +15,39 @@
*/
import type {
ListBoxProps as ReactAriaListBoxProps,
ListBoxItemProps as ReactAriaListBoxItemProps,
GridListProps as ReactAriaGridListProps,
GridListItemProps as ReactAriaGridListItemProps,
} from 'react-aria-components';
/**
* Own props for the ListBox component.
* Own props for the List component.
*
* @public
*/
export type ListBoxOwnProps<T = object> = {
items?: ReactAriaListBoxProps<T>['items'];
children?: ReactAriaListBoxProps<T>['children'];
renderEmptyState?: ReactAriaListBoxProps<T>['renderEmptyState'];
export type ListOwnProps<T = object> = {
items?: ReactAriaGridListProps<T>['items'];
children?: ReactAriaGridListProps<T>['children'];
renderEmptyState?: ReactAriaGridListProps<T>['renderEmptyState'];
className?: string;
};
/**
* Props for the ListBox component.
* Props for the List component.
*
* @public
*/
export interface ListBoxProps<T>
extends ListBoxOwnProps<T>,
Omit<ReactAriaListBoxProps<T>, keyof ListBoxOwnProps<T>> {}
export interface ListProps<T>
extends ListOwnProps<T>,
Omit<ReactAriaGridListProps<T>, keyof ListOwnProps<T>> {}
/**
* Own props for the ListBoxItem component.
* Own props for the ListRow component.
*
* @public
*/
export type ListBoxItemOwnProps = {
export type ListRowOwnProps = {
/**
* The main label content of the item.
* The main label content of the row.
*/
children?: React.ReactNode;
/**
@@ -65,7 +65,7 @@ export type ListBoxItemOwnProps = {
*/
menuItems?: React.ReactNode;
/**
* Optional actions rendered in a flex row on the right side of the item,
* Optional actions rendered in a flex row on the right side of the row,
* e.g. a set of tags. For a dropdown menu, prefer `menuItems`.
*/
customActions?: React.ReactNode;
@@ -73,10 +73,10 @@ export type ListBoxItemOwnProps = {
};
/**
* Props for the ListBoxItem component.
* Props for the ListRow component.
*
* @public
*/
export interface ListBoxItemProps
extends ListBoxItemOwnProps,
Omit<ReactAriaListBoxItemProps, keyof ListBoxItemOwnProps> {}
export interface ListRowProps
extends ListRowOwnProps,
Omit<ReactAriaGridListItemProps, keyof ListRowOwnProps> {}
packages/ui/src/components/ListBox/ListBox.stories.tsx
-346
View File
@@ -1,346 +0,0 @@
/*
* Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import preview from '../../../../../.storybook/preview';
import { useState } from 'react';
import { ListBox, ListBoxItem } from './ListBox';
import { MenuItem } from '../Menu';
import { TagGroup, Tag } from '../TagGroup';
import type { Selection } from 'react-aria-components';
import {
RiJavascriptLine,
RiReactjsLine,
RiShipLine,
RiTerminalLine,
RiCodeLine,
RiDeleteBinLine,
RiEdit2Line,
RiShareBoxLine,
} from '@remixicon/react';
import { MemoryRouter } from 'react-router-dom';
const meta = preview.meta({
title: 'Backstage UI/ListBox',
component: ListBox,
args: {
style: { width: 320 },
'aria-label': 'List',
},
decorators: [
Story => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
],
});
const items = [
{ id: 'react', label: 'React' },
{ id: 'typescript', label: 'TypeScript' },
{ id: 'javascript', label: 'JavaScript' },
{ id: 'rust', label: 'Rust' },
{ id: 'go', label: 'Go' },
];
const itemsWithDescription = [
{
id: 'react',
label: 'React',
description: 'A JavaScript library for building user interfaces',
},
{
id: 'typescript',
label: 'TypeScript',
description: 'Typed superset of JavaScript',
},
{
id: 'javascript',
label: 'JavaScript',
description: 'The language of the web',
},
{
id: 'rust',
label: 'Rust',
description: 'Systems programming with memory safety',
},
{
id: 'go',
label: 'Go',
description: 'Simple, fast, and reliable',
},
];
const itemIcons: Record<string, React.ReactElement> = {
react: <RiReactjsLine />,
typescript: <RiCodeLine />,
javascript: <RiJavascriptLine />,
rust: <RiShipLine />,
go: <RiTerminalLine />,
};
export const Default = meta.story({
render: args => (
<ListBox {...args}>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>
{item.label}
</ListBoxItem>
))}
</ListBox>
),
});
export const WithIcons = meta.story({
render: args => (
<ListBox {...args}>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id} icon={itemIcons[item.id]}>
{item.label}
</ListBoxItem>
))}
</ListBox>
),
});
export const WithDescription = meta.story({
args: {
style: { width: 340 },
},
render: args => (
<ListBox {...args}>
{itemsWithDescription.map(item => (
<ListBoxItem
key={item.id}
id={item.id}
icon={itemIcons[item.id]}
description={item.description}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
),
});
export const SelectionModeSingle = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(new Set(['react']));
return (
<ListBox
{...args}
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
},
});
export const SelectionModeSingleWithIcons = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(new Set(['react']));
return (
<ListBox
{...args}
selectionMode="single"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id} icon={itemIcons[item.id]}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
},
});
export const SelectionModeMultiple = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(
new Set(['react', 'typescript']),
);
return (
<ListBox
{...args}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
},
});
export const SelectionModeMultipleWithIcons = meta.story({
render: args => {
const [selected, setSelected] = useState<Selection>(
new Set(['react', 'typescript']),
);
return (
<ListBox
{...args}
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id} icon={itemIcons[item.id]}>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
},
});
export const Disabled = meta.story({
render: args => (
<ListBox {...args} disabledKeys={['typescript', 'rust']}>
{items.map(item => (
<ListBoxItem key={item.id} id={item.id}>
{item.label}
</ListBoxItem>
))}
</ListBox>
),
});
export const WithActionsMenu = meta.story({
args: {
style: { width: 420 },
},
render: args => (
<ListBox {...args}>
{items.map(item => (
<ListBoxItem
key={item.id}
id={item.id}
icon={itemIcons[item.id]}
menuItems={
<>
<MenuItem iconStart={<RiEdit2Line />}>Edit</MenuItem>
<MenuItem iconStart={<RiShareBoxLine />}>Share</MenuItem>
<MenuItem iconStart={<RiDeleteBinLine />} color="danger">
Delete
</MenuItem>
</>
}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
),
});
export const WithActionsTags = meta.story({
args: {
style: { width: 420 },
},
render: args => {
const tagMap: Record<string, string[]> = {
react: ['frontend', 'ui'],
typescript: ['typed', 'js'],
javascript: ['web'],
rust: ['systems', 'fast'],
go: ['backend'],
};
return (
<ListBox {...args}>
{items.map(item => (
<ListBoxItem
key={item.id}
id={item.id}
icon={itemIcons[item.id]}
customActions={
<TagGroup aria-label={`Tags for ${item.label}`}>
{tagMap[item.id].map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
},
});
export const WithActionsMenuAndTags = meta.story({
args: {
style: { width: 420 },
},
render: args => {
const tagMap: Record<string, string[]> = {
react: ['frontend', 'ui'],
typescript: ['typed', 'js'],
javascript: ['web'],
rust: ['systems', 'fast'],
go: ['backend'],
};
return (
<ListBox {...args}>
{items.map(item => (
<ListBoxItem
key={item.id}
id={item.id}
icon={itemIcons[item.id]}
menuItems={
<>
<MenuItem iconStart={<RiEdit2Line />}>Edit</MenuItem>
<MenuItem iconStart={<RiShareBoxLine />}>Share</MenuItem>
<MenuItem iconStart={<RiDeleteBinLine />} color="danger">
Delete
</MenuItem>
</>
}
customActions={
<TagGroup aria-label={`Tags for ${item.label}`}>
{tagMap[item.id].map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
);
},
});
packages/ui/src/definitions.ts
+3 -3
View File
@@ -49,9 +49,9 @@ export {
} from './components/Header/definition';
export { LinkDefinition } from './components/Link/definition';
export {
ListBoxDefinition,
ListBoxItemDefinition,
} from './components/ListBox/definition';
ListDefinition,
ListRowDefinition,
} from './components/List/definition';
export { MenuDefinition } from './components/Menu/definition';
export { PasswordFieldDefinition } from './components/PasswordField/definition';
export { PopoverDefinition } from './components/Popover/definition';
packages/ui/src/index.ts
+1 -1
View File
@@ -53,7 +53,7 @@ export * from './components/Menu';
export * from './components/Popover';
export * from './components/SearchField';
export * from './components/Link';
export * from './components/ListBox';
export * from './components/List';
export * from './components/Select';
export * from './components/Skeleton';
export * from './components/Switch';
packages/ui/src/recipes/CardsWithListBox.stories.tsx → packages/ui/src/recipes/CardsWithList.stories.tsx
+7 -7
View File
@@ -28,8 +28,8 @@ import {
MenuItem,
TagGroup,
Tag,
ListBox,
ListBoxItem,
List,
ListRow,
} from '..';
import {
RiAccountCircleLine,
@@ -162,9 +162,9 @@ const ServiceListCard = ({
</Flex>
</CardHeader>
<CardBody>
<ListBox aria-label={title}>
<List aria-label={title}>
{items.map(item => (
<ListBoxItem
<ListRow
key={item.id}
id={item.id}
icon={icons ? item.icon : undefined}
@@ -187,9 +187,9 @@ const ServiceListCard = ({
}
>
{item.label}
</ListBoxItem>
</ListRow>
))}
</ListBox>
</List>
</CardBody>
</Card>
);
@@ -201,7 +201,7 @@ const withRouter = (Story: StoryFn) => (
);
const meta = preview.meta({
title: 'Recipes/Cards with ListBox',
title: 'Recipes/Cards with List',
parameters: {
layout: 'fullscreen',
},