diff --git a/pkg/ui/workspaces/cluster-ui/src/badge/badge.module.scss b/pkg/ui/workspaces/cluster-ui/src/badge/badge.module.scss
index c0e86a9ffbb4..ad1ff51d23a0 100644
--- a/pkg/ui/workspaces/cluster-ui/src/badge/badge.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/badge/badge.module.scss
@@ -5,12 +5,15 @@
display: flex;
flex-direction: row;
border-radius: 3px;
- text-transform: uppercase;
width: max-content;
padding: $spacing-xx-small $spacing-x-small;
cursor: default;
}
+.badge--uppercase {
+ text-transform: uppercase;
+}
+
.badge--size-small,
.badge--size-large,
.badge--size-medium {
diff --git a/pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx b/pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx
index 33ccbf45185e..7deda34a400b 100644
--- a/pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/badge/badge.tsx
@@ -21,13 +21,18 @@ export interface BadgeProps {
status?: BadgeStatus;
icon?: React.ReactNode;
iconPosition?: "left" | "right";
+ allowLowerCase?: boolean;
}
const cx = classNames.bind(styles);
export function Badge(props: BadgeProps) {
- const { size, status, icon, iconPosition, text } = props;
- const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`);
+ const { size, status, icon, iconPosition, text, allowLowerCase } = props;
+ const styles = ["badge", `badge--size-${size}`, `badge--status-${status}`];
+ if (!allowLowerCase) {
+ styles.push("badge--uppercase");
+ }
+ const classes = cx(...styles);
const iconClasses = cx(
"badge__icon",
`badge__icon--position-${iconPosition || "left"}`,
diff --git a/pkg/ui/workspaces/db-console/src/components/badge/badge.module.styl b/pkg/ui/workspaces/db-console/src/components/badge/badge.module.styl
deleted file mode 100644
index c3149f1cbf04..000000000000
--- a/pkg/ui/workspaces/db-console/src/components/badge/badge.module.styl
+++ /dev/null
@@ -1,75 +0,0 @@
-// Copyright 2019 The Cockroach Authors.
-//
-// Use of this software is governed by the Business Source License
-// included in the file licenses/BSL.txt.
-//
-// As of the Change Date specified in that file, in accordance with
-// the Business Source License, use of this software will be governed
-// by the Apache License, Version 2.0, included in the file
-// licenses/APL.txt.
-
-@require '~src/components/core/index.styl'
-@require "~@cockroachlabs/design-tokens/dist/web/tokens";
-
-.badge
- display flex
- flex-direction row
- border-radius 3px
- text-transform uppercase
- width max-content
- padding $spacing-xx-small $spacing-x-small
- cursor default
-
-.badge--size-small
-
-.badge--size-large
-
-.badge--size-medium
- height $line-height--medium
- font-size $font-size--small
- font-weight $font-weight--medium
- line-height $line-height--xx-small
- font-family $font-family--semi-bold
- letter-spacing 1.5px
-
-.badge--status-success
- color $color-intent-success-4
- background-color $color-intent-success-1
- border-radius 3px
-
-.badge--status-danger
- color $colors--functional-red-4
- background-color $colors--functional-red-1
- background $colors--functional-red-1
-
-.badge--status-default
- background-color $colors--neutral-2
- color $colors--neutral-6
-
-.badge--status-info
- color $colors--primary-blue-4
- background-color $colors--primary-blue-1
-
-.badge--status-warning
- color $colors--functional-orange-4
- background-color $colors--functional-orange-1
-
-.badge__icon
- margin 0 $spacing-base
-
-.badge__icon--position-left
- order 0
- margin-right $spacing-x-small
-
-.badge__icon--position-right
- order 2
- margin-left $spacing-x-small
-
-.badge__text
- order 1
- margin auto
-
-.badge__text--no-wrap
- text-overflow ellipsis
- white-space nowrap
- overflow hidden
diff --git a/pkg/ui/workspaces/db-console/src/components/badge/badge.stories.tsx b/pkg/ui/workspaces/db-console/src/components/badge/badge.stories.tsx
deleted file mode 100644
index 84c6a5d7490e..000000000000
--- a/pkg/ui/workspaces/db-console/src/components/badge/badge.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2020 The Cockroach Authors.
-//
-// Use of this software is governed by the Business Source License
-// included in the file licenses/BSL.txt.
-//
-// As of the Change Date specified in that file, in accordance with
-// the Business Source License, use of this software will be governed
-// by the Apache License, Version 2.0, included in the file
-// licenses/APL.txt.
-
-import React from "react";
-import { storiesOf } from "@storybook/react";
-
-import { Badge } from "./index";
-import { styledWrapper } from "src/util/decorators";
-
-storiesOf("Badge", module)
- .addDecorator(styledWrapper({ padding: "24px" }))
- .add("with small size", () => )
- .add("with medium (default) size", () => (
-
- ))
- .add("with large size", () => );
diff --git a/pkg/ui/workspaces/db-console/src/components/badge/badge.tsx b/pkg/ui/workspaces/db-console/src/components/badge/badge.tsx
deleted file mode 100644
index 87e0037af47c..000000000000
--- a/pkg/ui/workspaces/db-console/src/components/badge/badge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright 2019 The Cockroach Authors.
-//
-// Use of this software is governed by the Business Source License
-// included in the file licenses/BSL.txt.
-//
-// As of the Change Date specified in that file, in accordance with
-// the Business Source License, use of this software will be governed
-// by the Apache License, Version 2.0, included in the file
-// licenses/APL.txt.
-
-import * as React from "react";
-import classNames from "classnames/bind";
-
-import styles from "./badge.module.styl";
-
-export type BadgeStatus = "success" | "danger" | "default" | "info" | "warning";
-
-export interface BadgeProps {
- text: React.ReactNode;
- size?: "small" | "medium" | "large";
- status?: BadgeStatus;
- icon?: React.ReactNode;
- iconPosition?: "left" | "right";
-}
-
-Badge.defaultProps = {
- size: "medium",
- status: "default",
-};
-
-const cx = classNames.bind(styles);
-
-export function Badge(props: BadgeProps) {
- const { size, status, icon, iconPosition, text } = props;
- const classes = cx("badge", `badge--size-${size}`, `badge--status-${status}`);
- const iconClasses = cx(
- "badge__icon",
- `badge__icon--position-${iconPosition || "left"}`,
- );
- return (
-
- {icon &&
{icon}
}
-
{text}
-