From e1450829dc215421af2a664a990a6aea1ca97b9f Mon Sep 17 00:00:00 2001 From: Ben Bardin Date: Wed, 6 Jul 2022 13:07:36 -0400 Subject: [PATCH] pkg/ui: Don't force tracez tags to uppercase. Also, deprecate uses of db-console/.../Badge in favor of the identical version in cluster-ui. Release note: None --- .../cluster-ui/src/badge/badge.module.scss | 5 +- .../workspaces/cluster-ui/src/badge/badge.tsx | 9 ++- .../src/components/badge/badge.module.styl | 75 ------------------- .../src/components/badge/badge.stories.tsx | 23 ------ .../db-console/src/components/badge/badge.tsx | 46 ------------ .../db-console/src/components/badge/index.ts | 11 --- .../db-console/src/components/index.ts | 1 - .../src/views/app/containers/layout/index.tsx | 2 +- .../containers/nodesOverview/index.tsx | 4 +- .../db-console/src/views/tracez/tracez.tsx | 1 + 10 files changed, 16 insertions(+), 161 deletions(-) delete mode 100644 pkg/ui/workspaces/db-console/src/components/badge/badge.module.styl delete mode 100644 pkg/ui/workspaces/db-console/src/components/badge/badge.stories.tsx delete mode 100644 pkg/ui/workspaces/db-console/src/components/badge/badge.tsx delete mode 100644 pkg/ui/workspaces/db-console/src/components/badge/index.ts 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}
-
- ); -} diff --git a/pkg/ui/workspaces/db-console/src/components/badge/index.ts b/pkg/ui/workspaces/db-console/src/components/badge/index.ts deleted file mode 100644 index daa0a6776ce1..000000000000 --- a/pkg/ui/workspaces/db-console/src/components/badge/index.ts +++ /dev/null @@ -1,11 +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. - -export * from "./badge"; diff --git a/pkg/ui/workspaces/db-console/src/components/index.ts b/pkg/ui/workspaces/db-console/src/components/index.ts index 204ca72fe30d..d4e5b7c65c68 100644 --- a/pkg/ui/workspaces/db-console/src/components/index.ts +++ b/pkg/ui/workspaces/db-console/src/components/index.ts @@ -8,7 +8,6 @@ // by the Apache License, Version 2.0, included in the file // licenses/APL.txt. -export * from "./badge"; export * from "./button"; export * from "./icon"; export * from "./inlineAlert/inlineAlert"; diff --git a/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx b/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx index 388798a85386..d3345eff1e74 100644 --- a/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx +++ b/pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx @@ -34,8 +34,8 @@ import { PageHeader, Text, TextTypes, - Badge, } from "src/components"; +import { Badge } from "@cockroachlabs/cluster-ui"; import "./layout.styl"; import "./layoutPanel.styl"; diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx index d40f40b43d64..c2d620e0e3f1 100644 --- a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx +++ b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx @@ -26,8 +26,10 @@ import { AdminUIState } from "src/redux/state"; import { refreshNodes, refreshLiveness } from "src/redux/apiReducers"; import { LocalSetting } from "src/redux/localsettings"; import { INodeStatus, MetricConstants } from "src/util/proto"; -import { Text, TextTypes, Tooltip, Badge, BadgeProps } from "src/components"; +import { Text, TextTypes, Tooltip } from "src/components"; import { + Badge, + BadgeProps, ColumnsConfig, Table, SortSetting, diff --git a/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx b/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx index d47bdf3937cd..25d40dbc4133 100644 --- a/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx +++ b/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx @@ -188,6 +188,7 @@ const TagBadge = ({ size="small" status={badgeStatus} icon={icon} + allowLowerCase={true} /> );