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

Merge pull request #33744 from backstage/bui-badge

Browse Source
This commit is contained in:
Charles de Dreuille
2026-04-03 20:40:08 +01:00
committed by GitHub
parent 205c8c8dc1 4032ad7fc4
commit d10fbd3e29
15 changed files with 413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/report.api.md
+39
View File
@@ -318,6 +318,45 @@ export interface AvatarProps
extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'className'>,
AvatarOwnProps {}
// @public
export const Badge: ForwardRefExoticComponent<
BadgeProps & RefAttributes<HTMLSpanElement>
>;
// @public
export const BadgeDefinition: {
readonly styles: {
readonly [key: string]: string;
};
readonly classNames: {
readonly root: 'bui-Badge';
readonly icon: 'bui-BadgeIcon';
};
readonly bg: 'consumer';
readonly propDefs: {
readonly icon: {};
readonly size: {
readonly dataAttribute: true;
readonly default: 'small';
};
readonly children: {};
readonly className: {};
};
};
// @public
export type BadgeOwnProps = {
icon?: React.ReactNode;
size?: 'small' | 'medium';
children?: React.ReactNode;
className?: string;
};
// @public
export interface BadgeProps
extends BadgeOwnProps,
Omit<React.HTMLAttributes<HTMLSpanElement>, keyof BadgeOwnProps> {}
// @public (undocumented)
export interface BgContextValue {
// (undocumented)
packages/ui/src/components/Badge/Badge.module.css
+65
View File
@@ -0,0 +1,65 @@
/*
* 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.
*/
@layer tokens, base, components, utilities;
@layer components {
.bui-Badge {
color: var(--bui-fg-primary);
background-color: var(--bui-bg-neutral-1);
border-radius: var(--bui-radius-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: var(--bui-font-weight-regular);
gap: var(--bui-space-1);
&[data-on-bg='neutral-1'] {
background-color: var(--bui-bg-neutral-2);
}
&[data-on-bg='neutral-2'] {
background-color: var(--bui-bg-neutral-3);
}
&[data-on-bg='neutral-3'] {
background-color: var(--bui-bg-neutral-4);
}
}
.bui-Badge[data-size='small'] {
height: 26px;
padding: 0 var(--bui-space-2);
font-size: var(--bui-font-size-1);
}
.bui-Badge[data-size='medium'] {
height: 32px;
padding: 0 var(--bui-space-2);
font-size: var(--bui-font-size-2);
}
.bui-BadgeIcon {
display: flex;
align-items: center;
justify-content: center;
svg {
width: 1rem;
height: 1rem;
}
}
}
packages/ui/src/components/Badge/Badge.stories.tsx
+61
View File
@@ -0,0 +1,61 @@
/*
* 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 { Badge } from '.';
import { Flex } from '../../';
import { BUIProvider } from '../../provider';
import { RiBugLine } from '@remixicon/react';
const meta = preview.meta({
title: 'Backstage UI/Badge',
component: Badge,
decorators: [
Story => (
<BUIProvider>
<Story />
</BUIProvider>
),
],
});
export const Default = meta.story({
args: {
children: 'Banana',
},
});
export const Sizes = meta.story({
render: () => (
<Flex direction="row" gap="2">
<Badge size="small">Banana</Badge>
<Badge size="medium">Banana</Badge>
</Flex>
),
});
export const WithIcon = meta.story({
render: () => (
<Flex direction="row" gap="2">
<Badge size="small" icon={<RiBugLine />}>
Banana
</Badge>
<Badge size="medium" icon={<RiBugLine />}>
Banana
</Badge>
</Flex>
),
});
packages/ui/src/components/Badge/Badge.tsx
+40
View File
@@ -0,0 +1,40 @@
/*
* 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 type { BadgeProps } from './types';
import { forwardRef } from 'react';
import { useDefinition } from '../../hooks/useDefinition';
import { BadgeDefinition } from './definition';
/**
* A non-interactive badge for labeling or categorizing content.
*
* @public
*/
export const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
const { ownProps, restProps, dataAttributes } = useDefinition(
BadgeDefinition,
props,
);
const { classes, children, icon } = ownProps;
return (
<span ref={ref} className={classes.root} {...dataAttributes} {...restProps}>
{icon && <span className={classes.icon}>{icon}</span>}
{children}
</span>
);
});
packages/ui/src/components/Badge/definition.ts
+38
View File
@@ -0,0 +1,38 @@
/*
* 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 { defineComponent } from '../../hooks/useDefinition';
import type { BadgeOwnProps } from './types';
import styles from './Badge.module.css';
/**
* Component definition for Badge
* @public
*/
export const BadgeDefinition = defineComponent<BadgeOwnProps>()({
styles,
classNames: {
root: 'bui-Badge',
icon: 'bui-BadgeIcon',
},
bg: 'consumer',
propDefs: {
icon: {},
size: { dataAttribute: true, default: 'small' },
children: {},
className: {},
},
});
packages/ui/src/components/Badge/index.ts
+19
View File
@@ -0,0 +1,19 @@
/*
* 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.
*/
export { Badge } from './Badge';
export type { BadgeProps, BadgeOwnProps } from './types';
export { BadgeDefinition } from './definition';
packages/ui/src/components/Badge/types.ts
+42
View File
@@ -0,0 +1,42 @@
/*
* 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.
*/
/**
* Own props for the Badge component.
*
* @public
*/
export type BadgeOwnProps = {
/**
* The icon to display before the badge text.
*/
icon?: React.ReactNode;
/**
* The size of the badge.
*/
size?: 'small' | 'medium';
children?: React.ReactNode;
className?: string;
};
/**
* Props for the Badge component.
*
* @public
*/
export interface BadgeProps
extends BadgeOwnProps,
Omit<React.HTMLAttributes<HTMLSpanElement>, keyof BadgeOwnProps> {}
packages/ui/src/definitions.ts
+1
View File
@@ -27,6 +27,7 @@ export {
} from './components/Accordion/definition';
export { AlertDefinition } from './components/Alert/definition';
export { AvatarDefinition } from './components/Avatar/definition';
export { BadgeDefinition } from './components/Badge/definition';
export { BoxDefinition } from './components/Box/definition';
export { ButtonDefinition } from './components/Button/definition';
export { ButtonIconDefinition } from './components/ButtonIcon/definition';
packages/ui/src/index.ts
+1
View File
@@ -31,6 +31,7 @@ export * from './components/FullPage';
export * from './components/Accordion';
export * from './components/Alert';
export * from './components/Avatar';
export * from './components/Badge';
export * from './components/Button';
export * from './components/Card';
export * from './components/Dialog';