From d16956792759fa25d11d21e613e16cf7afafff2b Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Mon, 27 Apr 2020 15:42:52 +0300 Subject: [PATCH 1/5] ui: CSS modules for SummaryCard component Release note: None --- pkg/ui/src/views/jobs/jobDetails.tsx | 1 + .../shared/components/summaryCard/index.tsx | 4 +- .../summaryCard/summaryCard.module.styl | 67 +++++++++++++++++++ 3 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 pkg/ui/src/views/shared/components/summaryCard/summaryCard.module.styl diff --git a/pkg/ui/src/views/jobs/jobDetails.tsx b/pkg/ui/src/views/jobs/jobDetails.tsx index c768764602bf..efd015555a19 100644 --- a/pkg/ui/src/views/jobs/jobDetails.tsx +++ b/pkg/ui/src/views/jobs/jobDetails.tsx @@ -30,6 +30,7 @@ import JobsResponse = cockroach.server.serverpb.JobsResponse; import { Button, BackIcon } from "src/components/button"; import { DATE_FORMAT } from "src/util/format"; import { JobStatusCell } from "./jobStatusCell"; +import "src/views/shared/components/summaryCard/styles.styl"; interface JobsTableProps extends RouteComponentProps { status: string; diff --git a/pkg/ui/src/views/shared/components/summaryCard/index.tsx b/pkg/ui/src/views/shared/components/summaryCard/index.tsx index 2684e1accfd3..02b8886456d8 100644 --- a/pkg/ui/src/views/shared/components/summaryCard/index.tsx +++ b/pkg/ui/src/views/shared/components/summaryCard/index.tsx @@ -9,7 +9,7 @@ // licenses/APL.txt. import React from "react"; -import "./styles.styl"; +import styles from "./summaryCard.module.styl"; interface ISummaryCardProps { children: React.ReactNode; @@ -18,7 +18,7 @@ interface ISummaryCardProps { // tslint:disable-next-line: variable-name export const SummaryCard: React.FC = ({ children, className }) => ( -
+
{children}
); diff --git a/pkg/ui/src/views/shared/components/summaryCard/summaryCard.module.styl b/pkg/ui/src/views/shared/components/summaryCard/summaryCard.module.styl new file mode 100644 index 000000000000..41124282521e --- /dev/null +++ b/pkg/ui/src/views/shared/components/summaryCard/summaryCard.module.styl @@ -0,0 +1,67 @@ +// Copyright 2018 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 "~styl/base/palette.styl" + +.summary--card + border-radius 3px + box-shadow 0 0 1px 0 rgba(67, 90, 111, 0.41) + background-color $adminui-white + padding 25px + margin-bottom 15px + &__divider + width 100% + height 1px + margin 22px 0 + background $table-border + &__title + font-family SourceSansPro-Regular + font-size 20px + line-height 1.6 + letter-spacing -0.2px + color $popover-color + margin-bottom 25px + &__counting + &--value + font-family SourceSansPro-Regular + font-size 20pt + line-height 1.6 + letter-spacing -0.2px + color $text-color + margin-bottom 15px + &--label + font-family SourceSansPro-Regular + font-size 14pt + line-height 1.67 + letter-spacing 0.3px + color $secondary-text-color + margin-bottom 0 + &__item + display flex; + justify-content space-between + margin-bottom 10px + &--label + font-family SourceSansPro-Regular + font-size 14px + line-height 1.57 + letter-spacing 0.1px + color $secondary-text-color + margin-right 5px + margin-bottom 0 + &--value + font-family SourceSansPro-Regular + font-size 14px + font-weight 600 + line-height 1.71 + letter-spacing 0.1px + color $popover-color + margin-bottom 0 + &-red + color $alert-color From 08daedd0b21279621aad3cc4b704cd89ae611b1e Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Mon, 27 Apr 2020 16:17:11 +0300 Subject: [PATCH 2/5] ui: CSS modules for Tooltip shared component Release note: None --- .../src/views/shared/components/toolTip/index.tsx | 14 +++++++++++--- .../toolTip/{tooltip.styl => tooltip.module.styl} | 12 ++++++------ 2 files changed, 17 insertions(+), 9 deletions(-) rename pkg/ui/src/views/shared/components/toolTip/{tooltip.styl => tooltip.module.styl} (88%) diff --git a/pkg/ui/src/views/shared/components/toolTip/index.tsx b/pkg/ui/src/views/shared/components/toolTip/index.tsx index b948fe40f165..c0949e3ffd83 100644 --- a/pkg/ui/src/views/shared/components/toolTip/index.tsx +++ b/pkg/ui/src/views/shared/components/toolTip/index.tsx @@ -13,7 +13,7 @@ import React from "react"; import { AbstractTooltipProps } from "antd/es/tooltip"; import classNames from "classnames"; -import "./tooltip.styl"; +import styles from "./tooltip.module.styl"; interface ToolTipWrapperProps extends AbstractTooltipProps { text: React.ReactNode; @@ -33,9 +33,17 @@ interface ToolTipWrapperProps extends AbstractTooltipProps { // tslint:disable-next-line: variable-name export const ToolTipWrapper = (props: ToolTipWrapperProps) => { const { text, children, placement } = props; - const overlayClassName = classNames("tooltip__preset--white", `tooltip__preset--placement-${placement}`); + const overlayClassName = classNames( + styles[`tooltip__preset--white`], + styles[`tooltip__preset--placement-${placement}`], + ); return ( - + {children} ); diff --git a/pkg/ui/src/views/shared/components/toolTip/tooltip.styl b/pkg/ui/src/views/shared/components/toolTip/tooltip.module.styl similarity index 88% rename from pkg/ui/src/views/shared/components/toolTip/tooltip.styl rename to pkg/ui/src/views/shared/components/toolTip/tooltip.module.styl index ae9bd467d599..c658d5fd58a4 100644 --- a/pkg/ui/src/views/shared/components/toolTip/tooltip.styl +++ b/pkg/ui/src/views/shared/components/toolTip/tooltip.module.styl @@ -10,9 +10,9 @@ @require '~src/components/core/index.styl' -.ant-tooltip.tooltip__preset--white +:global(.ant-tooltip).tooltip__preset--white max-width 500px - .ant-tooltip-content + :global(.ant-tooltip-content) position relative &:after, &:before content '' @@ -25,10 +25,10 @@ border-width 10px &:before border-width 10px - .ant-tooltip-arrow + :global(.ant-tooltip-arrow) &:before background-color transparent - .ant-tooltip-inner + :global(.ant-tooltip-inner) padding 10px border-radius 3px border solid 1px $colors--neutral-2 @@ -39,7 +39,7 @@ color $colors--neutral-6 .tooltip__preset--placement-bottom - .ant-tooltip-content + :global(.ant-tooltip-content) &:after, &:before transform translate(-50%, 0) left 50% @@ -51,7 +51,7 @@ border-color transparent transparent $colors--neutral-2 transparent .tooltip__preset--placement-left - .ant-tooltip-content + :global(.ant-tooltip-content) &:after, &:before top 50% transform translate(0, -50%) From 24b91a858b78e57c1fa6abaf3ae58280c7a5ce29 Mon Sep 17 00:00:00 2001 From: Andrii Vorobiov Date: Mon, 27 Apr 2020 18:39:17 +0300 Subject: [PATCH 3/5] ui: CSS modules for Statement Details page Following components are refactored to use CSS modules instead of global styles: - Statement Details page - Statements Diagnostics components - Anchor - Text - Empty Before, `Empty` component had styles which override Text, and Anchor components. Now, these styles are passed via `className` component props and custom styles defined by outer component. Release note: None --- .../{anchor.styl => anchor.module.styl} | 0 pkg/ui/src/components/anchor/anchor.tsx | 9 +- .../empty/{empty.styl => empty.module.styl} | 10 +- pkg/ui/src/components/empty/empty.tsx | 27 +- ...sView.styl => diagnosticsView.module.styl} | 5 +- .../diagnostics/diagnosticsView.tsx | 14 +- .../statements/statementDetails.module.styl | 135 +++++++++ .../src/views/statements/statementDetails.tsx | 267 +++++++++++++----- 8 files changed, 370 insertions(+), 97 deletions(-) rename pkg/ui/src/components/anchor/{anchor.styl => anchor.module.styl} (100%) rename pkg/ui/src/components/empty/{empty.styl => empty.module.styl} (93%) rename pkg/ui/src/views/statements/diagnostics/{diagnosticsView.styl => diagnosticsView.module.styl} (93%) create mode 100644 pkg/ui/src/views/statements/statementDetails.module.styl diff --git a/pkg/ui/src/components/anchor/anchor.styl b/pkg/ui/src/components/anchor/anchor.module.styl similarity index 100% rename from pkg/ui/src/components/anchor/anchor.styl rename to pkg/ui/src/components/anchor/anchor.module.styl diff --git a/pkg/ui/src/components/anchor/anchor.tsx b/pkg/ui/src/components/anchor/anchor.tsx index 0af93210a412..ca10a5da6186 100644 --- a/pkg/ui/src/components/anchor/anchor.tsx +++ b/pkg/ui/src/components/anchor/anchor.tsx @@ -9,18 +9,20 @@ // licenses/APL.txt. import React from "react"; -import "./anchor.styl"; +import cn from "classnames"; +import styles from "./anchor.module.styl"; interface AnchorProps { onClick?: () => void; href?: string; target?: "_blank" | "_parent" | "_self"; + className?: string; } export function Anchor(props: React.PropsWithChildren) { - const { href, target, children, onClick } = props; + const { href, target, children, onClick, className } = props; return ( ) { Anchor.defaultProps = { target: "_blank", + className: "", }; diff --git a/pkg/ui/src/components/empty/empty.styl b/pkg/ui/src/components/empty/empty.module.styl similarity index 93% rename from pkg/ui/src/components/empty/empty.styl rename to pkg/ui/src/components/empty/empty.module.styl index 8e14dfc9f040..7c52868dde36 100644 --- a/pkg/ui/src/components/empty/empty.styl +++ b/pkg/ui/src/components/empty/empty.module.styl @@ -10,12 +10,6 @@ @require '~src/components/core/index.styl' -.summary--card.summary--card__empty-state - padding 0 - .cl-empty-view - &__content - max-width 650px - .cl-empty-view display flex flex-direction column @@ -42,11 +36,11 @@ max-width 600px &__main - .text + &--text color $colors--neutral-6 font-size $font-size--medium line-height $line-height--medium-small - .crl-anchor + &--anchor margin-left 6px &__actions-column diff --git a/pkg/ui/src/components/empty/empty.tsx b/pkg/ui/src/components/empty/empty.tsx index b216d90a7037..d3263e5f23e7 100644 --- a/pkg/ui/src/components/empty/empty.tsx +++ b/pkg/ui/src/components/empty/empty.tsx @@ -11,7 +11,7 @@ import heroBannerLp from "assets/heroBannerLp.png"; import React from "react"; import { Anchor, Button, Text, TextTypes } from "src/components"; -import "./empty.styl"; +import styles from "./empty.module.styl"; export interface IEmptyProps { title?: string; @@ -33,23 +33,36 @@ export const Empty = ({ link, backgroundImage, }: IEmptyProps) => ( -
+
{title} -
-
+
+
{description} - {link && {anchor}} + {link && ( + + {anchor} + + )}
-