in src/stories/ActionList2/fixtures.stories.tsx [407:485]
export function ComplexListFullVariantStory(): JSX.Element {
return (
<>
<h1>Complex List</h1>
<h2>Full Variant</h2>
<ErsatzOverlay>
<ActionList variant="full">
<ActionList.Item>
<ActionList.LeadingVisual>
<TypographyIcon />
</ActionList.LeadingVisual>
Rename
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<VersionsIcon />
</ActionList.LeadingVisual>
Duplicate
<ActionList.Description>Create a copy</ActionList.Description>
</ActionList.Item>
<ActionList.Group title="Live query" variant="filled">
<ActionList.Item style={{color: 'rebeccapurple'}}>
<ActionList.LeadingVisual>
<SearchIcon />
</ActionList.LeadingVisual>
repo:github/memex,github/github
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group title="Layout" variant="subtle">
<ActionList.Item>
<ActionList.LeadingVisual>
<NoteIcon />
</ActionList.LeadingVisual>
Table
<ActionList.Description variant="block">
Information-dense table optimized for operations across teams
</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<ProjectIcon />
</ActionList.LeadingVisual>
Board
<ActionList.Description variant="block">
Kanban-style board focused on visual states
</ActionList.Description>
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group>
<ActionList.Item style={{fontWeight: 'bold'}}>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to current view
</ActionList.Item>
<ActionList.Item style={{fontWeight: 'bold'}}>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to new view
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group sx={{backgroundColor: 'accent.emphasis'}}>
<ActionList.Item sx={{color: 'white'}}>
<ActionList.LeadingVisual sx={{color: 'white'}}>
<GearIcon />
</ActionList.LeadingVisual>
View settings
</ActionList.Item>
</ActionList.Group>
</ActionList>
</ErsatzOverlay>
</>
)
}