1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Adding flat option to <Badge />

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-12-22 12:51:36 +03:00
parent 56b391ed10
commit 125957ac85
2 changed files with 10 additions and 6 deletions

View File

@ -1,14 +1,17 @@
.Badge {
display: inline-block;
background: $colorVague;
color: $textColorSecondary;
border-radius: $radius;
padding: .2em .4em;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
&:not(.flat) {
background: $colorVague;
color: $textColorSecondary;
border-radius: $radius;
padding: .2em .4em;
}
&.small {
font-size: $font-size-small;
}

View File

@ -6,16 +6,17 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip";
export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
small?: boolean;
flat?: boolean;
label?: React.ReactNode;
}
@withTooltip
export class Badge extends React.Component<BadgeProps> {
render() {
const { className, label, small, children, ...elemProps } = this.props;
const { className, label, small, flat, children, ...elemProps } = this.props;
return <>
<span className={cssNames("Badge", { small }, className)} {...elemProps}>
<span className={cssNames("Badge", { small, flat }, className)} {...elemProps}>
{label}
{children}
</span>