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

Improve styles

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2026-03-15 08:32:41 +00:00
parent 2b1bb9ca3e
commit 9ee2931cc8
7 changed files with 480 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/preview.tsx
+1
View File
@@ -88,6 +88,7 @@ export default definePreview({
storySort: {
order: [
'Backstage UI',
'Recipes',
'Guidelines',
'Plugins',
'Layout',
packages/ui/src/components/ListBox/ListBox.module.css
+96 -13
View File
@@ -21,6 +21,14 @@
box-sizing: border-box;
overflow-y: auto;
outline: none;
display: flex;
flex-direction: column;
gap: var(--bui-space-3);
&:has([data-selection-mode]) {
gap: 0;
}
&:focus-visible {
outline: none;
@@ -31,29 +39,94 @@
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--bui-space-2);
padding-block: var(--bui-space-2);
padding-inline: var(--bui-space-3);
gap: var(--bui-space-3);
border-radius: var(--bui-radius-2);
font-size: var(--bui-font-size-3);
font-family: var(--bui-font-regular);
color: var(--bui-fg-primary);
cursor: pointer;
user-select: none;
outline: none;
&[data-hovered] {
background-color: var(--bui-bg-neutral-2);
}
&[data-focus-visible] {
background-color: var(--bui-bg-neutral-2);
}
&[data-disabled] {
cursor: not-allowed;
color: var(--bui-fg-disabled);
}
&[data-selection-mode] {
cursor: pointer;
padding-block: var(--bui-space-2);
padding-inline: var(--bui-space-2);
&[data-selected] {
&:has(+ [data-selected]) {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
+ [data-selected] {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
}
&[data-hovered],
&[data-focus-visible] {
background-color: var(--bui-bg-neutral-1-hover);
}
&[data-pressed],
&[data-selected],
&[data-selected][data-hovered],
&[data-selected][data-focus-visible],
&[data-selected][data-pressed] {
background-color: var(--bui-bg-neutral-1-pressed);
}
&[data-on-bg='neutral-1'] {
&[data-hovered],
&[data-focus-visible] {
background-color: var(--bui-bg-neutral-2-hover);
}
&[data-pressed],
&[data-selected],
&[data-selected][data-hovered],
&[data-selected][data-focus-visible],
&[data-selected][data-pressed] {
background-color: var(--bui-bg-neutral-2-pressed);
}
}
&[data-on-bg='neutral-2'] {
&[data-hovered],
&[data-focus-visible] {
background-color: var(--bui-bg-neutral-3-hover);
}
&[data-pressed],
&[data-selected],
&[data-selected][data-hovered],
&[data-selected][data-focus-visible],
&[data-selected][data-pressed] {
background-color: var(--bui-bg-neutral-3-pressed);
}
}
&[data-on-bg='neutral-3'],
&[data-on-bg='neutral-4'] {
&[data-hovered],
&[data-focus-visible] {
background-color: var(--bui-bg-neutral-4-hover);
}
&[data-pressed],
&[data-selected],
&[data-selected][data-hovered],
&[data-selected][data-focus-visible],
&[data-selected][data-pressed] {
background-color: var(--bui-bg-neutral-4-pressed);
}
}
}
}
.bui-ListBoxItemCheck {
@@ -92,11 +165,21 @@
flex-direction: column;
gap: var(--bui-space-1);
min-width: 0;
overflow: hidden;
& > * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.bui-ListBoxItemDescription {
font-size: var(--bui-font-size-2);
color: var(--bui-fg-secondary);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bui-ListBoxItemActions {
packages/ui/src/components/ListBox/ListBox.stories.tsx
+102 -19
View File
@@ -17,13 +17,11 @@
import preview from '../../../../../.storybook/preview';
import { useState } from 'react';
import { ListBox, ListBoxItem } from './ListBox';
import { ButtonIcon } from '../ButtonIcon';
import { MenuTrigger, Menu, MenuItem } from '../Menu';
import { MenuItem } from '../Menu';
import { TagGroup, Tag } from '../TagGroup';
import type { Selection } from 'react-aria-components';
import {
RiJavascriptLine,
RiMoreLine,
RiReactjsLine,
RiShipLine,
RiTerminalLine,
@@ -159,6 +157,27 @@ export const SelectionModeSingle = meta.story({
},
});
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>(
@@ -182,6 +201,29 @@ export const SelectionModeMultiple = meta.story({
},
});
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']}>
@@ -195,6 +237,9 @@ export const Disabled = meta.story({
});
export const WithActionsMenu = meta.story({
args: {
style: { width: 420 },
},
render: args => (
<ListBox {...args}>
{items.map(item => (
@@ -202,21 +247,14 @@ export const WithActionsMenu = meta.story({
key={item.id}
id={item.id}
icon={itemIcons[item.id]}
customActions={
<MenuTrigger>
<ButtonIcon
icon={<RiMoreLine />}
size="small"
aria-label="More actions"
/>
<Menu>
<MenuItem iconStart={<RiEdit2Line />}>Edit</MenuItem>
<MenuItem iconStart={<RiShareBoxLine />}>Share</MenuItem>
<MenuItem iconStart={<RiDeleteBinLine />} color="danger">
Delete
</MenuItem>
</Menu>
</MenuTrigger>
menuItems={
<>
<MenuItem iconStart={<RiEdit2Line />}>Edit</MenuItem>
<MenuItem iconStart={<RiShareBoxLine />}>Share</MenuItem>
<MenuItem iconStart={<RiDeleteBinLine />} color="danger">
Delete
</MenuItem>
</>
}
>
{item.label}
@@ -228,7 +266,7 @@ export const WithActionsMenu = meta.story({
export const WithActionsTags = meta.story({
args: {
style: { width: 380 },
style: { width: 420 },
},
render: args => {
const tagMap: Record<string, string[]> = {
@@ -261,3 +299,48 @@ export const WithActionsTags = meta.story({
);
},
});
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/components/ListBox/ListBox.tsx
+32 -4
View File
@@ -19,11 +19,13 @@ import {
ListBoxItem as RAListBoxItem,
Text,
} from 'react-aria-components';
import { RiCheckLine } from '@remixicon/react';
import { RiCheckLine, RiMoreLine } from '@remixicon/react';
import { useDefinition } from '../../hooks/useDefinition';
import { ListBoxDefinition, ListBoxItemDefinition } from './definition';
import type { ListBoxProps, ListBoxItemProps } 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.
@@ -31,7 +33,10 @@ import { Box } from '../Box/Box';
* @public
*/
export const ListBox = <T extends object>(props: ListBoxProps<T>) => {
const { ownProps, restProps } = useDefinition(ListBoxDefinition, props);
const { ownProps, restProps, dataAttributes } = useDefinition(
ListBoxDefinition,
props,
);
const { classes, items, children, renderEmptyState } = ownProps;
return (
@@ -39,6 +44,7 @@ export const ListBox = <T extends object>(props: ListBoxProps<T>) => {
className={classes.root}
items={items}
renderEmptyState={renderEmptyState}
{...dataAttributes}
{...restProps}
>
{children}
@@ -52,8 +58,12 @@ export const ListBox = <T extends object>(props: ListBoxProps<T>) => {
* @public
*/
export const ListBoxItem = (props: ListBoxItemProps) => {
const { ownProps, restProps } = useDefinition(ListBoxItemDefinition, props);
const { classes, children, description, icon, customActions } = ownProps;
const { ownProps, restProps, dataAttributes } = useDefinition(
ListBoxItemDefinition,
props,
);
const { classes, children, description, icon, menuItems, customActions } =
ownProps;
const textValue = typeof children === 'string' ? children : undefined;
@@ -61,6 +71,7 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
<RAListBoxItem
textValue={textValue}
className={classes.root}
{...dataAttributes}
{...restProps}
>
{({ isSelected }) => (
@@ -92,6 +103,23 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
{customActions}
</div>
)}
{menuItems && (
<div
className={classes.actions}
onClick={e => e.stopPropagation()}
onKeyDown={e => e.stopPropagation()}
>
<MenuTrigger>
<ButtonIcon
icon={<RiMoreLine />}
size="small"
aria-label="More actions"
variant="tertiary"
/>
<Menu placement="bottom end">{menuItems}</Menu>
</MenuTrigger>
</div>
)}
</>
)}
</RAListBoxItem>
packages/ui/src/components/ListBox/definition.ts
+2
View File
@@ -41,6 +41,7 @@ export const ListBoxDefinition = defineComponent<ListBoxOwnProps>()({
*/
export const ListBoxItemDefinition = defineComponent<ListBoxItemOwnProps>()({
styles,
bg: 'consumer',
classNames: {
root: 'bui-ListBoxItem',
check: 'bui-ListBoxItemCheck',
@@ -53,6 +54,7 @@ export const ListBoxItemDefinition = defineComponent<ListBoxItemOwnProps>()({
children: {},
description: {},
icon: {},
menuItems: {},
customActions: {},
className: {},
},
packages/ui/src/components/ListBox/types.ts
+7 -1
View File
@@ -58,9 +58,15 @@ export type ListBoxItemOwnProps = {
* Optional icon displayed before the label, rendered in a 32×32px box.
*/
icon?: React.ReactNode;
/**
* Optional menu items rendered inside an automatically managed dropdown menu.
* Pass `MenuItem` nodes here and the component will render the trigger button
* and menu wrapper for you.
*/
menuItems?: React.ReactNode;
/**
* Optional actions rendered in a flex row on the right side of the item,
* e.g. a ButtonIcon with a dropdown menu, or a set of tags.
* e.g. a set of tags. For a dropdown menu, prefer `menuItems`.
*/
customActions?: React.ReactNode;
className?: string;
packages/ui/src/recipes/CardsWithListBox.stories.tsx
+240
View File
@@ -0,0 +1,240 @@
/*
* 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 type { StoryFn } from '@storybook/react-vite';
import { MemoryRouter } from 'react-router-dom';
import {
Card,
CardHeader,
CardBody,
Container,
Grid,
Flex,
Text,
MenuItem,
TagGroup,
Tag,
ListBox,
ListBoxItem,
} from '..';
import {
RiAccountCircleLine,
RiCloudLine,
RiCodeLine,
RiDeleteBinLine,
RiEdit2Line,
RiGitBranchLine,
RiJavascriptLine,
RiReactjsLine,
RiServerLine,
RiShareBoxLine,
RiShieldLine,
RiTerminalLine,
} from '@remixicon/react';
// ---------------------------------------------------------------------------
// Data
// ---------------------------------------------------------------------------
interface ServiceItem {
id: string;
label: string;
description: string;
icon: React.ReactNode;
tags: string[];
}
const frontendServices: ServiceItem[] = [
{
id: 'portal',
label: 'developer-portal',
description: 'Internal developer portal built on Backstage',
icon: <RiAccountCircleLine />,
tags: ['website', 'production'],
},
{
id: 'design-system',
label: 'design-system',
description: 'Shared UI components and design tokens',
icon: <RiReactjsLine />,
tags: ['library', 'production'],
},
{
id: 'docs-site',
label: 'docs-site',
description: 'Engineering documentation and runbooks',
icon: <RiCodeLine />,
tags: ['website', 'production'],
},
{
id: 'admin-ui',
label: 'admin-ui',
description: 'Internal tooling for platform administrators',
icon: <RiJavascriptLine />,
tags: ['website', 'experimental'],
},
{
id: 'onboarding-flow',
label: 'onboarding-flow',
description: 'New hire onboarding wizard and checklist',
icon: <RiAccountCircleLine />,
tags: ['website', 'experimental'],
},
];
const backendServices: ServiceItem[] = [
{
id: 'auth',
label: 'authentication-service',
description: 'Handles user authentication, sessions and token refresh',
icon: <RiShieldLine />,
tags: ['service', 'production'],
},
{
id: 'api-gateway',
label: 'api-gateway',
description: 'Routes and validates all inbound API requests',
icon: <RiServerLine />,
tags: ['service', 'production'],
},
{
id: 'search',
label: 'search-indexer',
description: 'Indexes catalog entities for full-text search',
icon: <RiTerminalLine />,
tags: ['service', 'experimental'],
},
{
id: 'ci-runner',
label: 'ci-runner',
description: 'Orchestrates and executes CI pipeline jobs',
icon: <RiGitBranchLine />,
tags: ['service', 'production'],
},
{
id: 'infra-provisioner',
label: 'infra-provisioner',
description: 'Terraform-based cloud resource provisioner',
icon: <RiCloudLine />,
tags: ['service', 'experimental'],
},
];
// ---------------------------------------------------------------------------
// Service list card
// ---------------------------------------------------------------------------
interface ServiceListCardProps {
title: string;
items: ServiceItem[];
description?: boolean;
}
const ServiceListCard = ({
title,
items,
description = false,
}: ServiceListCardProps) => (
<Card>
<CardHeader>
<Flex direction="row" align="center" justify="between" gap="2">
<Flex direction="column" gap="1">
<Text variant="body-medium" weight="bold">
{title}
</Text>
</Flex>
</Flex>
</CardHeader>
<CardBody>
<ListBox aria-label={title}>
{items.map(item => (
<ListBoxItem
key={item.id}
id={item.id}
icon={item.icon}
description={description ? item.description : undefined}
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}`}>
{item.tags.map(tag => (
<Tag key={tag}>{tag}</Tag>
))}
</TagGroup>
}
>
{item.label}
</ListBoxItem>
))}
</ListBox>
</CardBody>
</Card>
);
const withRouter = (Story: StoryFn) => (
<MemoryRouter>
<Story />
</MemoryRouter>
);
const meta = preview.meta({
title: 'Recipes/Cards with ListBox',
parameters: {
layout: 'fullscreen',
},
});
export const Default = meta.story({
decorators: [withRouter],
render: () => (
<Container pt="6">
<Grid.Root columns="2" gap="4">
<ServiceListCard title="Frontend services" items={frontendServices} />
<ServiceListCard title="Backend services" items={backendServices} />
</Grid.Root>
</Container>
),
});
export const WithDescription = meta.story({
args: {
description: true,
},
render: () => (
<Container pt="4">
<Grid.Root columns="2" gap="4">
<ServiceListCard
title="Frontend services"
items={frontendServices}
description={true}
/>
<ServiceListCard
title="Backend services"
items={backendServices}
description={true}
/>
</Grid.Root>
</Container>
),
});