paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 25 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
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',
},