From 45c201c4659b8b33bd533c288c76ba9ca74e5524 Mon Sep 17 00:00:00 2001 From: Tatiana Fokina <123386439+tfokina@users.noreply.github.com> Date: Thu, 27 Jul 2023 20:34:39 +0600 Subject: [PATCH] Cb 3587 migrate snackbars to css modules (#1842) * CB-3587 add css modules, remove reshadow styles from snackbars * CB-3587 fix notification cross button style --------- Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com> --- .../SnackbarMarkups/SnackbarBody.m.css | 30 ++++++++++ .../SnackbarMarkups/SnackbarBody.tsx | 56 +++++-------------- .../SnackbarMarkups/SnackbarContent.m.css | 6 ++ .../SnackbarMarkups/SnackbarContent.tsx | 20 +++---- .../SnackbarMarkups/SnackbarFooter.m.css | 18 ++++++ .../SnackbarMarkups/SnackbarFooter.tsx | 37 +++++------- .../SnackbarMarkups/SnackbarStatus.m.css | 11 ++++ .../SnackbarMarkups/SnackbarStatus.tsx | 33 ++++------- .../SnackbarMarkups/SnackbarWrapper.m.css | 40 +++++++++++++ .../SnackbarMarkups/SnackbarWrapper.tsx | 52 ++++------------- 10 files changed, 159 insertions(+), 144 deletions(-) create mode 100644 webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.m.css create mode 100644 webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.m.css create mode 100644 webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.m.css create mode 100644 webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.m.css create mode 100644 webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.m.css diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.m.css b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.m.css new file mode 100644 index 0000000000..f667455c31 --- /dev/null +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.m.css @@ -0,0 +1,30 @@ +.notificationBody { + display: flex; + flex-direction: column; + flex: 1; + & .bodyTextBlock { + margin-top: 8px; + padding-right: 24px; + & .message { + font-size: 16px; + opacity: 0.8; + overflow: auto; + max-height: 200px; + margin-bottom: 8px; + word-break: break-word; + white-space: pre-line; + } + } +} + +.textBlockTitle { + composes: theme-typography--headline6 from global; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + line-height: 1.55rem; + font-weight: 700; + margin: 0; + padding: 0; + margin-bottom: 8px; +} diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.tsx b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.tsx index 36c4c1d359..f1e3b6e82d 100644 --- a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.tsx +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarBody.tsx @@ -5,40 +5,9 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -import styled, { css } from 'reshadow'; - -const SNACKBAR_BODY_STYLES = css` - notification-body { - display: flex; - flex-direction: column; - flex: 1; - & body-text-block { - margin-top: 8px; - padding-right: 24px; - & message { - font-size: 16px; - opacity: 0.8; - overflow: auto; - max-height: 200px; - margin-bottom: 8px; - word-break: break-word; - white-space: pre-line; - } - } - } - - text-block-title { - composes: theme-typography--headline6 from global; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - line-height: 1.55rem; - font-weight: 700; - margin: 0; - padding: 0; - margin-bottom: 8px; - } -`; +import { s } from '../../s'; +import { useS } from '../../useS'; +import style from './SnackbarBody.m.css'; interface Props { title: string; @@ -46,14 +15,17 @@ interface Props { } export const SnackbarBody: React.FC> = function SnackbarBody({ title, className, children }) { - return styled(SNACKBAR_BODY_STYLES)( - - - + const styles = useS(style); + return ( +
+
+

{title} - - {children} - - , +

+
+ {children} +
+
+
); }; diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.m.css b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.m.css new file mode 100644 index 0000000000..0fad234a1c --- /dev/null +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.m.css @@ -0,0 +1,6 @@ +.notificationContent { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; +} diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.tsx b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.tsx index b9761f0be8..2fcfa97835 100644 --- a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.tsx +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarContent.tsx @@ -5,25 +5,19 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -import styled, { css } from 'reshadow'; - -const SNACKBAR_CONTENT_STYLES = css` - notification-content { - display: flex; - flex-direction: column; - flex: 1; - overflow: hidden; - } -`; +import { s } from '../../s'; +import { useS } from '../../useS'; +import style from './SnackbarContent.m.css'; interface Props { className?: string; } export const SnackbarContent: React.FC> = function SnackbarContent({ children, className }) { - return styled(SNACKBAR_CONTENT_STYLES)( - + const styles = useS(style); + return ( +
{children} - , +
); }; diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.m.css b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.m.css new file mode 100644 index 0000000000..ea037a60c5 --- /dev/null +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.m.css @@ -0,0 +1,18 @@ +.notificationFooter { + display: flex; + align-items: flex-end; + justify-content: space-between; +} + +.footerTime { + composes: theme-typography--caption from global; + opacity: 0.7; +} + +.actions:empty { + display: none; +} + +.actions > *:not(:first-child) { + margin-left: 16px; +} diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.tsx b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.tsx index f308b7509b..b21d7b9258 100644 --- a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.tsx +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarFooter.tsx @@ -5,25 +5,9 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -import styled, { css } from 'reshadow'; - -const SNACKBAR_FOOTER_STYLES = css` - notification-footer { - display: flex; - align-items: flex-end; - justify-content: space-between; - } - footer-time { - composes: theme-typography--caption from global; - opacity: 0.7; - } - actions:empty { - display: none; - } - actions > *:not(:first-child) { - margin-left: 16px; - } -`; +import { s } from '../../s'; +import { useS } from '../../useS'; +import style from './SnackbarFooter.m.css'; interface Props { timestamp: number; @@ -31,12 +15,17 @@ interface Props { } export const SnackbarFooter: React.FC> = function SnackbarFooter({ timestamp, className, children }) { + const styles = useS(style); const timeStringFromTimestamp = new Date(timestamp).toLocaleTimeString(); - return styled(SNACKBAR_FOOTER_STYLES)( - - {timeStringFromTimestamp} - {children} - , + return ( +
+ + {timeStringFromTimestamp} + +
+ {children} +
+
); }; diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.m.css b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.m.css new file mode 100644 index 0000000000..ff84a50bcd --- /dev/null +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.m.css @@ -0,0 +1,11 @@ +.notificationMark { + padding-right: 12px; +} + +.loaderContainer { + padding-right: 12px; + & .loader { + width: 40px; + height: 40px; + } +} diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.tsx b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.tsx index fdfb64d88a..a6893b2768 100644 --- a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.tsx +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarStatus.tsx @@ -5,25 +5,13 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -import styled, { css } from 'reshadow'; - import { ENotificationType } from '@cloudbeaver/core-events'; import { Loader } from '../../Loader/Loader'; +import { s } from '../../s'; +import { useS } from '../../useS'; import { NotificationMark } from '../NotificationMark'; - -const SNACKBAR_STATUS_STYLES = css` - NotificationMark { - padding-right: 12px; - } - loader-container { - padding-right: 12px; - & Loader { - width: 40px; - height: 40px; - } - } -`; +import style from './SnackbarStatus.m.css'; interface SnackbarStatusProps { status: ENotificationType; @@ -31,13 +19,12 @@ interface SnackbarStatusProps { } export const SnackbarStatus: React.FC = function SnackbarStatus({ status, className }) { - return styled(SNACKBAR_STATUS_STYLES)( - status === ENotificationType.Loading ? ( - - - - ) : ( - - ), + const styles = useS(style); + return status === ENotificationType.Loading ? ( +
+ +
+ ) : ( + ); }; diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.m.css b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.m.css new file mode 100644 index 0000000000..a7abe85132 --- /dev/null +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.m.css @@ -0,0 +1,40 @@ +.notification { + composes: theme-background-surface theme-text-on-surface theme-elevation-z5 from global; + position: relative; + display: flex; + box-sizing: border-box; + overflow: hidden; + width: 500px; + margin-bottom: 16px; + margin-left: 16px; + padding: 16px 16px; + line-height: 1.5; + opacity: 0; + border-radius: var(--theme-group-element-radius); + transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out; + transform: translateX(-100%); + + &.mounted { + transform: translateX(0); + opacity: 1; + } + + &.closing { + opacity: 0; + } +} + +.iconButton { + position: absolute; + + &.large { + top: 8px; + right: 8px; + height: 22px; + width: 22px; + } + + &:hover { + opacity: 0.7; + } +} diff --git a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.tsx b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.tsx index d747d0965b..9ec5395fd7 100644 --- a/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.tsx +++ b/webapp/packages/core-blocks/src/Snackbars/SnackbarMarkups/SnackbarWrapper.tsx @@ -6,46 +6,11 @@ * you may not use this file except in compliance with the License. */ import { useEffect, useState } from 'react'; -import styled, { css, use } from 'reshadow'; import { IconButton } from '../../IconButton'; - -const SNACKBAR_WRAPPER_STYLES = css` - notification { - composes: theme-background-surface theme-text-on-surface theme-elevation-z5 from global; - position: relative; - display: flex; - box-sizing: border-box; - overflow: hidden; - width: 500px; - margin-bottom: 16px; - margin-left: 16px; - padding: 16px 16px; - line-height: 1.5; - opacity: 0; - border-radius: var(--theme-group-element-radius); - transition: opacity 0.3s ease-in-out, transform 0.5s ease-in-out; - transform: translateX(-100%); - - &[use|mounted] { - transform: translateX(0); - opacity: 1; - } - &[use|closing] { - opacity: 0; - } - } - IconButton { - position: absolute; - top: 8px; - right: 8px; - height: 22px; - width: 22px; - &:hover { - opacity: 0.7; - } - } -`; +import { s } from '../../s'; +import { useS } from '../../useS'; +import style from './SnackbarWrapper.m.css'; interface Props { closing?: boolean; @@ -61,16 +26,19 @@ export const SnackbarWrapper: React.FC> = functio children, className, }) { + const styles = useS(style); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); - return styled(SNACKBAR_WRAPPER_STYLES)( - + return ( +
{children} - {!persistent && onClose && } - , + {!persistent && onClose && ( + + )} +
); };