From a322c07c27de34867a7044bd6d8560596262a099 Mon Sep 17 00:00:00 2001 From: Yuri Haruta Date: Mon, 28 Oct 2024 16:49:19 +0100 Subject: [PATCH 1/4] Update toast design --- .storybook/preview.tsx | 6 +- app/lib.ts | 2 +- .../containers/Alert/Alert.module.scss | 12 +- src/components/overlays/Toast/Toast.css | 75 ------ .../overlays/Toast/Toast.module.scss | 123 ++++++++++ .../overlays/Toast/Toast.stories.tsx | 213 +++++++++-------- src/components/overlays/Toast/Toast.tsx | 221 +++++++++++------- .../overlays/Toast/ToastyOverride.scss | 27 +++ src/styling/variables.scss | 54 ++--- 9 files changed, 439 insertions(+), 294 deletions(-) delete mode 100644 src/components/overlays/Toast/Toast.css create mode 100644 src/components/overlays/Toast/Toast.module.scss create mode 100644 src/components/overlays/Toast/ToastyOverride.scss diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 71d95c0..dd811bb 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -13,7 +13,6 @@ import { addons } from '@storybook/preview-api'; import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; import { DocsContainer, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks'; -import { ToastContainer } from '../src/components/overlays/Toast/Toast.tsx'; const channel = addons.getChannel(); @@ -139,10 +138,7 @@ const preview = { const theme = React.useMemo(() => isDark ? themes.dark : themes.light, [isDark]); return ( - <> - - - + ); }, // page: () => ( diff --git a/app/lib.ts b/app/lib.ts index 689ac80..a50abf5 100644 --- a/app/lib.ts +++ b/app/lib.ts @@ -33,7 +33,7 @@ export { Tabs } from '../src/components/navigations/Tabs/Tabs.tsx'; export { DropdownMenu } from '../src/components/overlays/DropdownMenu/DropdownMenu.tsx'; export { Modal } from '../src/components/overlays/Modal/Modal.tsx'; -export { type ToastContent, ToastContainer, ToastMessage } from '../src/components/overlays/Toast/Toast.tsx'; +export { type ToastContent, ToastProvider, ToastMessage } from '../src/components/overlays/Toast/Toast.tsx'; export { Tooltip } from '../src/components/overlays/Tooltip/Tooltip.tsx'; // Layouts diff --git a/src/components/containers/Alert/Alert.module.scss b/src/components/containers/Alert/Alert.module.scss index ba9cf7f..783751d 100644 --- a/src/components/containers/Alert/Alert.module.scss +++ b/src/components/containers/Alert/Alert.module.scss @@ -11,8 +11,8 @@ @include bk.theme('only light'); /* TEMP: no dark mode styling yet in Figma */ &.bk-alert--info { - --bk-panel-background-color: #{bk.$theme-notifcation-informational-background-default}; - --bk-panel-border-color: #{bk.$theme-notifcation-informational-border-default}; + --bk-panel-background-color: #{bk.$theme-notification-informational-background-default}; + --bk-panel-border-color: #{bk.$theme-notification-informational-border-default}; } &.bk-alert--warning { /* FIXME */ @@ -20,12 +20,12 @@ --bk-panel-border-color: light-dark(#FEC84B, #FEC84B); } &.bk-alert--error { - --bk-panel-background-color: #{bk.$theme-notifcation-informational-background-default}; - --bk-panel-border-color: #{bk.$theme-notifcation-informational-background-default}; + --bk-panel-background-color: #{bk.$theme-notification-informational-background-default}; + --bk-panel-border-color: #{bk.$theme-notification-informational-background-default}; } &.bk-alert--success { - --bk-panel-background-color: #{bk.$theme-notifcation-informational-background-default}; - --bk-panel-border-color: #{bk.$theme-notifcation-informational-background-default}; + --bk-panel-background-color: #{bk.$theme-notification-informational-background-default}; + --bk-panel-border-color: #{bk.$theme-notification-informational-background-default}; } display: grid; diff --git a/src/components/overlays/Toast/Toast.css b/src/components/overlays/Toast/Toast.css deleted file mode 100644 index cfd298b..0000000 --- a/src/components/overlays/Toast/Toast.css +++ /dev/null @@ -1,75 +0,0 @@ -/* Copyright (c) Fortanix, Inc. -|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of -|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -.bk-toast { - width: auto; - max-width: 50vw; - - .bk-toast--success { - border: 0.0.6rem green solid; - background-color: rgb(248, 253, 244); - } - - .bk-toast--info { - border: 0.0.6rem lightblue solid; - background-color: rgb(246, 254, 252); - } - - .bk-toast--error { - border: 0.0.6rem pink solid; - background-color: rgb(254, 247, 248); - } - - .bk-toast__body { - padding: 0.6rem; - color: black; - /*@include mixins.font($family: bkl.$font-family-body);*/ - font-size: 12px; - } - - .bk-toast__progress-bar--success { - background: green; - } - - .bk-toast__progress-bar--info { - background: lightblue; - } - - .bk-toast__progress-bar--error { - background: pink; - } - - .bk-toast__message { - display: flex; - align-items: center; - } - - .bk-toast__actions-inline { - display: flex; - align-items: center; - margin-left: 0.6rem; - } - - .bk-toast__actions { - display: flex; - align-items: center; - } - - .bk-toast__buttons { - display: flex; - - > a, button { - margin-right: 0.6rem; - } - } - - .bk-toast__copy-icon { - margin-left: auto; - width: 1.2rem; - } - - .bk-toast__tooltip.bkl-tooltip { - z-index: 9999 + 1 !important; - } -} diff --git a/src/components/overlays/Toast/Toast.module.scss b/src/components/overlays/Toast/Toast.module.scss new file mode 100644 index 0000000..d863362 --- /dev/null +++ b/src/components/overlays/Toast/Toast.module.scss @@ -0,0 +1,123 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@use '../../../styling/defs.scss' as bk; + +@layer baklava.components { + .bk-toast { + width: auto !important; // Override style for .Toastify__toast-container + padding: 0 !important; // Override style for .Toastify__toast-container + width: 400px !important; // Override style for .Toastify__toast-container + + &:has(.bk-close--dark) { + .bk-toast__body { + margin-right: bk.$spacing-4 !important; // Override style for .Toastify__toast-body + } + } + + .bk-toast--success, + .bk-toast--info, + .bk-toast--error { + min-height: 54px !important; // Override style for .Toastify__toast + padding: bk.$spacing-4 !important; // Override style for .Toastify__toast + border: 1px solid transparent; + border-left: 4px solid transparent; + } + + .bk-toast--success { + border-color: #{bk.$theme-notification-success-border-default}; + // Override style for .Toastify__toast-theme--light + background-color: #{bk.$theme-notification-success-background-default} !important; + } + + .bk-toast--info { + border-color: #{bk.$theme-notification-informational-border-default}; + // Override style for .Toastify__toast-theme--light + background-color: #{bk.$theme-notification-informational-background-default} !important; + } + + .bk-toast--error { + border-color: #{bk.$theme-notification-alert-border-default}; + // Override style for .Toastify__toast-theme--light + background-color: #{bk.$theme-notification-alert-background-default} !important; + } + + .bk-toast__icon--success, + .bk-toast__icon--info, + .bk-toast__icon--error { + font-size: 18px; + } + + .bk-toast__icon--success { + color: #{bk.$theme-notification-success-border-default}; + } + + .bk-toast__icon--info { + color: #{bk.$theme-notification-informational-border-default}; + } + + .bk-toast__icon--error { + color: #{bk.$theme-notification-alert-border-default}; + } + + .bk-close--dark { + position: absolute; + top: bk.$spacing-4; + right: bk.$spacing-4; + color: #{bk.$theme-notification-icon-default}; + cursor: pointer; + } + + .bk-toast__body { + margin: 0 !important; // Override style for .Toastify__toast-body + padding: 0 !important; // Override style for .Toastify__toast-body + align-items: flex-start !important; // Override style for .Toastify__toast-body + color: bk.$theme-notification-text-default; + @include bk.font(bk.$font-family-body); + font-size: 14px; + } + + .bk-toast__message { + display: flex; + flex-direction: column; + gap: bk.$spacing-1; + } + + .bk-toast__message__title { + font-weight: bk.$font-weight-semibold; + } + + .bk-toast__actions { + display: flex; + align-items: center; + gap: bk.$spacing-3; + margin-top: bk.$spacing-3; + } + + .bk-toast__copy-icon { + padding: 0; + color: bk.$theme-notification-text-link; + } + + .bk-toast__progress-bar--success, + .bk-toast__progress-bar--info, + .bk-toast__progress-bar--error { + margin-top: bk.$spacing-3; + opacity: 1 !important; // Override style for .Toastify__progress-bar + background-color: #{bk.$theme-progress-bar-fill} !important; // Override style for .Toastify__progress-bar + } + + .bk-toast__button, + .bk-toast__copy-button { + padding: 0; + color: bk.$theme-notification-text-link; + font-size: 12px; + font-weight: bk.$font-weight-semibold; + } + + .bk-toast__link { + font-weight: bk.$font-weight-semibold; + } + } +} diff --git a/src/components/overlays/Toast/Toast.stories.tsx b/src/components/overlays/Toast/Toast.stories.tsx index 4bc70ec..bab4a57 100644 --- a/src/components/overlays/Toast/Toast.stories.tsx +++ b/src/components/overlays/Toast/Toast.stories.tsx @@ -5,14 +5,18 @@ import * as React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { Icon } from '../../graphics/Icon/Icon.tsx'; -import { Tooltip } from '../Tooltip/Tooltip.tsx'; import { Button } from '../../actions/Button/Button.tsx'; - -import { notify, CopyActionButton, ToastMessage, ToastContainer } from './Toast.tsx'; - - -type ToastArg = React.ComponentProps; +import { + notify, + ToastButton, + CopyActionButton, + ToastLink, + ToastMessage, + ToastProvider, + type NotifyProps, +} from './Toast.tsx'; + +type ToastArg = NotifyProps; type Story = StoryObj; export default { @@ -21,160 +25,183 @@ export default { layout: 'centered', }, tags: ['autodocs'], + argTypes: {}, + args: { + title: 'Title', + }, + decorators: [ + Story => ( + + + + ), + ], } satisfies Meta; -const notificationText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, -sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris -nisi ut aliquip ex ea commodo consequat.`; +const notificationText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, magna aliqua.`; const Actions = () => { - const onClick = (e: React.MouseEvent) => { - e.stopPropagation(); - }; return ( <> -
- {/* TODO: replace a element with Link component later */} - - Go to settings - - - Learn more - -
+ Share ); }; -const ActionsInline = () => { - return ( - - window.open('mailto:test@fortanix.com')} /> - - ); -}; - export const Success: Story = { - render: (args) => ( - <> - - - + args: { + options: {}, + }, + render: (args) => ( + ), }; export const Info: Story = { - render: (args) => ( - <> - - - + args: { + options: {}, + }, + render: (args) => ( + ), }; export const Error: Story = { + args: { + options: {}, + }, render: (args) => ( - <> - - - + ), }; -export const WithActions: Story = { +export const SuccessWithMessageAndLink: Story = { + args: { + message: ( + <> + {`${notificationText} `} + Link + + ), + options: { + autoClose: false, + }, + }, render: (args) => ( - <> - - - + ), }; -export const WithActionsInline: Story = { +export const SuccessWithCloseButton: Story = { + args: { + message: notificationText, + options: { + closeButton: true, + autoClose: false, + }, + }, render: (args) => ( - <> - - - + ), }; -export const WithActionsAndActionsInline: Story = { +export const SuccessWithActions: Story = { + args: { + message: notificationText, + options: { + closeButton: true, + autoClose: false, + actions: , + }, + }, render: (args) => ( - <> - - - + ), }; export const PreventDuplicate: Story = { + args: { + options: { + toastId: 'uniqueId', + }, + }, render: (args) => ( - <> - - - + ), }; export const AddProgressBarToAllToasts: Story = { + args: { + message: notificationText, + options: { + closeButton: true, + actions: , + hideProgressBar: false, + } + }, render: (args) => ( <>
-
-
-
- ), }; -export const AddProgressBarToSelectedToasts: Story = { +export const AddProgressBarToAllToastsWithAutoDelay: Story = { + args: { + message: notificationText, + options: { + delay: 3000, + closeButton: true, + actions: , + hideProgressBar: false, + } + }, render: (args) => ( <>
-
-
-
- ), }; diff --git a/src/components/overlays/Toast/Toast.tsx b/src/components/overlays/Toast/Toast.tsx index 6f289d3..5e16d82 100644 --- a/src/components/overlays/Toast/Toast.tsx +++ b/src/components/overlays/Toast/Toast.tsx @@ -3,9 +3,9 @@ |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import { classNames as cx, type ClassNameArgument } from '../../../util/componentUtil.ts'; - import { toast, ToastContainer as ToastifyContainer, @@ -16,29 +16,39 @@ import { import 'react-toastify/dist/ReactToastify.css'; import { Icon } from '../../graphics/Icon/Icon.tsx'; -//import CloseButton from '../../internal/CloseButton'; import { TooltipProvider } from '../Tooltip/TooltipProvider.tsx'; +import { Button, type ButtonProps } from '../../actions/Button/Button.tsx'; +import { Link, type LinkProps } from '../../actions/Link/Link.tsx'; -import './Toast.css'; +import './ToastyOverride.scss'; +import cl from './Toast.module.scss'; +export { cl as ToastClassNames }; export { type ToastContent }; -export type ToastOptions = Omit & { - className?: ClassNameArgument, - bodyClassName?: ClassNameArgument, - actions?: React.ReactElement, - actionsInline?: React.ReactElement, + +export const ToastLink = ({ className, ...propsRest }: LinkProps) => { + return ( + + ); +}; + +export const ToastButton = ({ className, ...propsRest }: ButtonProps) => { + return ( + } ); }; -type ToastMessageProps = { - message: ToastContent, - actions?: React.ReactElement, - actionsInline?: React.ReactElement, -}; -export const ToastMessage = (props: ToastMessageProps): React.ReactElement => { - const { - message, - actions, - actionsInline, - } = props; - - if (!actions && !actionsInline) { - return <>{message}; - } +export const ToastMessage = (props: NotifyProps): React.ReactElement => { + const { title, message, options = {} } = props; return ( <> -
-

{typeof message === 'function' ? null : message}

- {actionsInline && -
- {actionsInline} -
- } +
+
+ {title} +
+ {(message && typeof message !== 'function') &&

{message}

}
- {actions && -
- {actions} + {options.actions && +
+ {options.actions}
} ); }; -const success = (message: ToastContent, options: ToastOptions = {}) => { - const { className, bodyClassName, ...restOptions } = options; - return toast.success(message, { +type ToastOptions = Omit & { + className?: ClassNameArgument, + bodyClassName?: ClassNameArgument, + actions?: React.ReactElement, +}; +export type NotifyProps = { + /** A title of this component. */ + title: string | React.ReactNode, + + /** A message of this component. */ + message?: ToastContent, + + /** Options of this component. */ + options?: ToastOptions, +} +const success = ({ title, message, options = {} }: NotifyProps) => { + const { className, bodyClassName, actions, closeButton = false, ...restOptions } = options; + const content = ; + const updatedOptions: ToastifyOptions = { autoClose: 5000, - className: cx('bk-toast--success', className), - bodyClassName: cx('bk-toast__body', bodyClassName), - progressClassName: 'bk-toast__progress-bar--success', + className: cx(cl['bk-toast--success'], className), + bodyClassName: cx(cl['bk-toast__body'], bodyClassName), + progressClassName: cx(cl['bk-toast__progress-bar--success']), + icon: , + closeButton: closeButton === true ? : closeButton, ...restOptions, - }); + }; + return toast.success(content, updatedOptions); }; -const info = (message: ToastContent, options: ToastOptions = {}) => { - const { className, bodyClassName, actions, actionsInline, ...restOptions } = options; - return toast.info(, { +const info = ({ title, message, options = {} }: NotifyProps) => { + const { className, bodyClassName, actions, closeButton = false, ...restOptions } = options; + const content = ; + const updatedOptions: ToastifyOptions = { autoClose: 5000, - className: cx('bk-toast--info', className), - bodyClassName: cx('bk-toast__body', bodyClassName), - progressClassName: 'bk-toast__progress-bar--info', + className: cx(cl['bk-toast--info'], className), + bodyClassName: cx(cl['bk-toast__body'], bodyClassName), + progressClassName: cx(cl['bk-toast__progress-bar--info']), + icon: , + closeButton: closeButton === true ? : closeButton, ...restOptions, - }); + }; + return toast.info(content, updatedOptions); }; -const error = (message: ToastContent, options: ToastOptions = {}) => { - const { className, bodyClassName, actions, actionsInline, ...restOptions } = options; - return toast.error( +const error = ({ title, message, options = {} }: NotifyProps) => { + const { className, bodyClassName, actions, closeButton = false, ...restOptions } = options; + const content = ( } - actionsInline={actionsInline} - />, { - autoClose: 5000, - className: cx('bk-toast--error', className), - bodyClassName: cx('bk-toast__body', bodyClassName), - progressClassName: 'bk-toast__progress-bar--error', - ...restOptions, - }); + options={{ + ...options, + ...(actions || message) && { actions: actions || }, + }} + /> + ); + const updatedOptions: ToastifyOptions = { + autoClose: 5000, + className: cx(cl['bk-toast--error'], className), + bodyClassName: cx(cl['bk-toast__body'], bodyClassName), + progressClassName: cx(cl['bk-toast__progress-bar--error']), + icon: , + closeButton: closeButton === true ? : closeButton, + ...restOptions, + }; + return toast.error(content, updatedOptions); }; const dismiss = (id?: string | number): boolean | void => toast.dismiss(id); -export const notify = { - success, - info, - error, - dismiss, -}; +export const notify = { success, info, error, dismiss }; type CloseToastButtonProps = { closeToast?: () => void, }; const CloseToastButton = ({ closeToast }: CloseToastButtonProps) => ( - + ); -export type ToastContainerProps = Omit & { +type ToastProviderProps = Omit & { + /** Whether this component should be unstyled. */ + unstyled?: undefined | boolean, + + /** A classname of this component. */ className?: ClassNameArgument, + + /** Whether this component should have a close button. */ + hasCloseButton?: boolean, + + /** Whether this component should display progress bar. */ showProgressBar?: boolean, + + /** Components or elements to be rendered within the Provider. */ + children: React.ReactNode, }; -export const ToastContainer = (props: ToastContainerProps) => { +export const ToastProvider = (props: ToastProviderProps) => { const { + unstyled = false, + hasCloseButton = false, className = '', showProgressBar = false, + children, ...propsRest } = props; return ( - } - {...propsRest} - /> + <> + {children} + {ReactDOM.createPortal( + } + {...propsRest} + />, + window.document.body, + )} + ); }; diff --git a/src/components/overlays/Toast/ToastyOverride.scss b/src/components/overlays/Toast/ToastyOverride.scss new file mode 100644 index 0000000..d73c3b9 --- /dev/null +++ b/src/components/overlays/Toast/ToastyOverride.scss @@ -0,0 +1,27 @@ +/* Copyright (c) Fortanix, Inc. +|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of +|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@use '../../../styling/defs.scss' as bk; + +// Define styling to override react-toastify's styles, as overriding directly from .Toast.module.scss is not possible. +.Toastify { + .Toastify__toast { + &:has(.Toastify__progress-bar--wrp) { + padding-bottom: calc(bk.$spacing-4 + 4px); + overflow: visible; // to display progress bar over the border + } + } + + .Toastify__progress-bar--wrp { + height: 4px; + left: -2px; + width: calc(100% + 2px); + border-bottom-right-radius: var(--toastify-toast-bd-radius); + } + + .Toastify__progress-bar--bg { + background: transparent; + } +} + diff --git a/src/styling/variables.scss b/src/styling/variables.scss index b2e25a7..c03f9a9 100644 --- a/src/styling/variables.scss +++ b/src/styling/variables.scss @@ -288,20 +288,20 @@ $light-dropdown-menu-header-border-default: $color-blackberry-300 !default; $light-dropdown-menu-header-tab-default: $color-blueberry-500 !default; $light-dropdown-menu-header-text-default: $color-neutral-10 !default; $light-dropdown-menu-header-background-focused: $color-blackberry-800 !default; -$light-notifcation-success-background-default: $color-apple-50 !default; -$light-notifcation-success-border-default: $color-apple-100 !default; -$light-notifcation-text-default: $color-neutral-900 !default; -$light-notifcation-informational-background-default: $color-blueberry-50 !default; -$light-notifcation-informational-border-default: $color-blueberry-900 !default; -$light-notifcation-alert-background-default: $color-cherry-50 !default; -$light-notifcation-alert-border-default: $color-cherry-600 !default; +$light-notification-success-background-default: $color-apple-50 !default; +$light-notification-success-border-default: $color-apple-500 !default; +$light-notification-text-default: $color-neutral-900 !default; +$light-notification-informational-background-default: $color-blueberry-50 !default; +$light-notification-informational-border-default: $color-blueberry-500 !default; +$light-notification-alert-background-default: $color-cherry-50 !default; +$light-notification-alert-border-default: $color-cherry-600 !default; $light-breadcrumb-text-link: $color-blueberry-600 !default; $light-header-background-default: $color-blackberry-400 !default; $light-header-icon-default: $color-neutral-10 !default; $light-header-text-default: $color-neutral-10 !default; $light-dropdown-menu-header-icon-default: $color-neutral-10 !default; $light-header-icon-background-default: $color-blackberry-300 !default; -$light-notifcation-icon-default: $color-neutral-900 !default; +$light-notification-icon-default: $color-neutral-900 !default; $light-side-nav-menu-background-default: $color-blackberry-400 !default; $light-side-nav-menu-tab-default: $color-blueberry-500 !default; $light-side-nav-menu-text-default: $color-neutral-10 !default; @@ -419,7 +419,7 @@ $light-tooltip-action-menu-background-hover: $color-neutral-20 !default; $light-tooltip-action-menu-background-default: $color-neutral-0 !default; $light-tooltip-action-menu-background-selected: $color-neutral-20 !default; $light-tooltip-action-text-default: $color-neutral-900 !default; -$light-notifcation-text-link: $color-blueberry-600 !default; +$light-notification-text-link: $color-blueberry-700 !default; $light-panel-background-secondary: $color-neutral-20 !default; $light-accordion-border-default: $color-blackberry-20 !default; $light-accordion-text-default: $color-neutral-900 !default; @@ -523,20 +523,20 @@ $dark-dropdown-menu-header-border-default: $color-blackberry-300 !default; $dark-dropdown-menu-header-tab-default: $color-blueberry-400 !default; $dark-dropdown-menu-header-text-default: $color-neutral-10 !default; $dark-dropdown-menu-header-background-focused: $color-blackberry-800 !default; -$dark-notifcation-success-background-default: $color-apple-50 !default; -$dark-notifcation-success-border-default: $color-apple-100 !default; -$dark-notifcation-text-default: $color-neutral-900 !default; -$dark-notifcation-informational-background-default: $color-blueberry-50 !default; -$dark-notifcation-informational-border-default: $color-blueberry-900 !default; -$dark-notifcation-alert-background-default: $color-cherry-50 !default; -$dark-notifcation-alert-border-default: $color-cherry-600 !default; +$dark-notification-success-background-default: $color-apple-50 !default; +$dark-notification-success-border-default: $color-apple-500 !default; +$dark-notification-text-default: $color-neutral-900 !default; +$dark-notification-informational-background-default: $color-blueberry-50 !default; +$dark-notification-informational-border-default: $color-blueberry-500 !default; +$dark-notification-alert-background-default: $color-cherry-50 !default; +$dark-notification-alert-border-default: $color-cherry-600 !default; $dark-breadcrumb-text-link: $color-blueberry-500 !default; $dark-header-background-default: $color-blackberry-400 !default; $dark-header-icon-default: $color-neutral-10 !default; $dark-header-text-default: $color-neutral-10 !default; $dark-dropdown-menu-header-icon-default: $color-neutral-10 !default; $dark-header-icon-background-default: $color-blackberry-300 !default; -$dark-notifcation-icon-default: $color-neutral-900 !default; +$dark-notification-icon-default: $color-neutral-900 !default; $dark-side-nav-menu-background-default: $color-blackberry-400 !default; $dark-side-nav-menu-tab-default: $color-blueberry-400 !default; $dark-side-nav-menu-text-default: $color-neutral-10 !default; @@ -654,7 +654,7 @@ $dark-tooltip-action-menu-background-hover: $color-blackberry-800 !default; $dark-tooltip-action-menu-background-default: $color-grape-800 !default; $dark-tooltip-action-menu-background-selected: $color-blackberry-800 !default; $dark-tooltip-action-text-default: $color-neutral-10 !default; -$dark-notifcation-text-link: $color-blueberry-600 !default; +$dark-notification-text-link: $color-blueberry-700 !default; $dark-panel-background-secondary: $color-blackberry-800 !default; $dark-accordion-border-default: $color-blackberry-300 !default; $dark-accordion-text-default: $color-neutral-10 !default; @@ -758,20 +758,20 @@ $theme-dropdown-menu-header-border-default: #{ld($light-dropdown-menu-header-bor $theme-dropdown-menu-header-tab-default: #{ld($light-dropdown-menu-header-tab-default, $dark-dropdown-menu-header-tab-default)} !default; $theme-dropdown-menu-header-text-default: #{ld($light-dropdown-menu-header-text-default, $dark-dropdown-menu-header-text-default)} !default; $theme-dropdown-menu-header-background-focused: #{ld($light-dropdown-menu-header-background-focused, $dark-dropdown-menu-header-background-focused)} !default; -$theme-notifcation-success-background-default: #{ld($light-notifcation-success-background-default, $dark-notifcation-success-background-default)} !default; -$theme-notifcation-success-border-default: #{ld($light-notifcation-success-border-default, $dark-notifcation-success-border-default)} !default; -$theme-notifcation-text-default: #{ld($light-notifcation-text-default, $dark-notifcation-text-default)} !default; -$theme-notifcation-informational-background-default: #{ld($light-notifcation-informational-background-default, $dark-notifcation-informational-background-default)} !default; -$theme-notifcation-informational-border-default: #{ld($light-notifcation-informational-border-default, $dark-notifcation-informational-border-default)} !default; -$theme-notifcation-alert-background-default: #{ld($light-notifcation-alert-background-default, $dark-notifcation-alert-background-default)} !default; -$theme-notifcation-alert-border-default: #{ld($light-notifcation-alert-border-default, $dark-notifcation-alert-border-default)} !default; +$theme-notification-success-background-default: #{ld($light-notification-success-background-default, $dark-notification-success-background-default)} !default; +$theme-notification-success-border-default: #{ld($light-notification-success-border-default, $dark-notification-success-border-default)} !default; +$theme-notification-text-default: #{ld($light-notification-text-default, $dark-notification-text-default)} !default; +$theme-notification-informational-background-default: #{ld($light-notification-informational-background-default, $dark-notification-informational-background-default)} !default; +$theme-notification-informational-border-default: #{ld($light-notification-informational-border-default, $dark-notification-informational-border-default)} !default; +$theme-notification-alert-background-default: #{ld($light-notification-alert-background-default, $dark-notification-alert-background-default)} !default; +$theme-notification-alert-border-default: #{ld($light-notification-alert-border-default, $dark-notification-alert-border-default)} !default; $theme-breadcrumb-text-link: #{ld($light-breadcrumb-text-link, $dark-breadcrumb-text-link)} !default; $theme-header-background-default: #{ld($light-header-background-default, $dark-header-background-default)} !default; $theme-header-icon-default: #{ld($light-header-icon-default, $dark-header-icon-default)} !default; $theme-header-text-default: #{ld($light-header-text-default, $dark-header-text-default)} !default; $theme-dropdown-menu-header-icon-default: #{ld($light-dropdown-menu-header-icon-default, $dark-dropdown-menu-header-icon-default)} !default; $theme-header-icon-background-default: #{ld($light-header-icon-background-default, $dark-header-icon-background-default)} !default; -$theme-notifcation-icon-default: #{ld($light-notifcation-icon-default, $dark-notifcation-icon-default)} !default; +$theme-notification-icon-default: #{ld($light-notification-icon-default, $dark-notification-icon-default)} !default; $theme-side-nav-menu-background-default: #{ld($light-side-nav-menu-background-default, $dark-side-nav-menu-background-default)} !default; $theme-side-nav-menu-tab-default: #{ld($light-side-nav-menu-tab-default, $dark-side-nav-menu-tab-default)} !default; $theme-side-nav-menu-text-default: #{ld($light-side-nav-menu-text-default, $dark-side-nav-menu-text-default)} !default; @@ -889,7 +889,7 @@ $theme-tooltip-action-menu-background-hover: #{ld($light-tooltip-action-menu-bac $theme-tooltip-action-menu-background-default: #{ld($light-tooltip-action-menu-background-default, $dark-tooltip-action-menu-background-default)} !default; $theme-tooltip-action-menu-background-selected: #{ld($light-tooltip-action-menu-background-selected, $dark-tooltip-action-menu-background-selected)} !default; $theme-tooltip-action-text-default: #{ld($light-tooltip-action-text-default, $dark-tooltip-action-text-default)} !default; -$theme-notifcation-text-link: #{ld($light-notifcation-text-link, $dark-notifcation-text-link)} !default; +$theme-notification-text-link: #{ld($light-notification-text-link, $dark-notification-text-link)} !default; $theme-panel-background-secondary: #{ld($light-panel-background-secondary, $dark-panel-background-secondary)} !default; $theme-accordion-border-default: #{ld($light-accordion-border-default, $dark-accordion-border-default)} !default; $theme-accordion-text-default: #{ld($light-accordion-text-default, $dark-accordion-text-default)} !default; From a6e37dc9526b6ce5326f8c3dd30aa5022f05954d Mon Sep 17 00:00:00 2001 From: Arlindo Pereira Date: Tue, 29 Oct 2024 11:39:08 +0100 Subject: [PATCH 2/4] fix small typo on ToastyOverride.scss --- src/components/overlays/Toast/ToastyOverride.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/overlays/Toast/ToastyOverride.scss b/src/components/overlays/Toast/ToastyOverride.scss index d73c3b9..ecb3ac0 100644 --- a/src/components/overlays/Toast/ToastyOverride.scss +++ b/src/components/overlays/Toast/ToastyOverride.scss @@ -4,7 +4,7 @@ @use '../../../styling/defs.scss' as bk; -// Define styling to override react-toastify's styles, as overriding directly from .Toast.module.scss is not possible. +// Define styling to override react-toastify's styles, as overriding directly from Toast.module.scss is not possible. .Toastify { .Toastify__toast { &:has(.Toastify__progress-bar--wrp) { From 2e603c9381ea1ce50706f0ebbfd7089a19507862 Mon Sep 17 00:00:00 2001 From: Yuri Haruta Date: Tue, 29 Oct 2024 15:31:45 +0100 Subject: [PATCH 3/4] Adjust tooltip for copy action button of toast --- src/components/overlays/Toast/Toast.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/overlays/Toast/Toast.tsx b/src/components/overlays/Toast/Toast.tsx index 5e16d82..57ec8f4 100644 --- a/src/components/overlays/Toast/Toast.tsx +++ b/src/components/overlays/Toast/Toast.tsx @@ -48,7 +48,8 @@ export type CopyActionButton = { className?: ClassNameArgument, }; export const CopyActionButton = ({ message = null, className }: CopyActionButton): React.ReactElement | null => { - const [tooltipMessage, setTooltipMessage] = React.useState(''); + const defaultTooltipMessage = 'Copy message'; + const [tooltipMessage, setTooltipMessage] = React.useState(defaultTooltipMessage); const isStringMessage = typeof message === 'string'; const handleCopy = async (event: React.MouseEvent) => { @@ -61,7 +62,7 @@ export const CopyActionButton = ({ message = null, className }: CopyActionButton setTooltipMessage('Failed to copy'); } finally { setTimeout(() => { - setTooltipMessage(''); + setTooltipMessage(defaultTooltipMessage); }, 2000); } } @@ -70,7 +71,7 @@ export const CopyActionButton = ({ message = null, className }: CopyActionButton return ( <> {isStringMessage && - + + ), +}; + export const SuccessWithMessageAndLink: Story = { args: { message: (