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:
parent
56b391ed10
commit
125957ac85
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user