From ba4dfc206c7c1b5a2a356004b0144f815b7c38c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= Date: Tue, 24 Sep 2024 16:33:21 +0200 Subject: [PATCH] BREAKING CHANGE(web-react): Rename `inverted` variant of `Toast` to `neutral` #DS-1446 Refactor ToastBarLink and ToastCloseButton. --- .../web-react/src/components/Toast/README.md | 64 +++++++++---------- .../src/components/Toast/ToastBar.tsx | 1 - .../src/components/Toast/ToastBarLink.tsx | 34 ++++------ .../src/components/Toast/ToastCloseButton.tsx | 20 ++++-- .../src/components/Toast/ToastContext.tsx | 10 +-- .../Toast/__tests__/ToastBar.test.tsx | 2 +- .../Toast/__tests__/ToastBarLink.test.tsx | 1 - .../__tests__/UncontrolledToast.test.tsx | 10 ++- .../__tests__/useToastBarStyleProps.test.ts | 6 +- .../Toast/__tests__/useToastIcon.test.tsx | 2 +- .../src/components/Toast/constants.ts | 2 +- .../src/components/Toast/demo/ToastColors.tsx | 4 +- .../Toast/demo/ToastDynamicToastQueue.tsx | 10 +-- .../Toast/stories/ToastBar.stories.tsx | 6 +- .../Toast/stories/ToastBarLink.stories.tsx | 12 +--- .../stories/UncontrolledToast.stories.tsx | 10 +-- .../components/Toast/useToastBarStyleProps.ts | 8 ++- .../src/components/Toast/useToastIcon.ts | 2 +- packages/web-react/src/types/toast.ts | 10 ++- 19 files changed, 101 insertions(+), 113 deletions(-) diff --git a/packages/web-react/src/components/Toast/README.md b/packages/web-react/src/components/Toast/README.md index eda3fd157f..1e22a8e200 100644 --- a/packages/web-react/src/components/Toast/README.md +++ b/packages/web-react/src/components/Toast/README.md @@ -183,7 +183,7 @@ Alternatively, a custom icon can be used: | ------------- | ------------- | | `danger` | `danger` | | `informative` | `info` | -| `inverted` | `info` | +| `neutral` | `info` | | `success` | `check-plain` | | `warning` | `warning` | @@ -227,15 +227,12 @@ Usage example: #### API -| Name | Type | Default | Required | Description | -| -------------- | ------------------------------------------------ | ---------- | -------- | ------------------------------ | -| `children` | `ReactNode` | — | ✓ | Content of the ToastBarLink | -| `color` | [Action Link Color dictionary][dictionary-color] | `inverted` | ✕ | Color of the link | -| `elementType` | `ElementType` | `a` | ✕ | Type of element used as | -| `href` | `string` | — | ✕ | ToastBarLink's href attribute | -| `isDisabled` | `bool` | `false` | ✕ | Whether is the link disabled | -| `isUnderlined` | `bool` | `true` | ✕ | Whether is the link underlined | -| `ref` | `ForwardedRef` | — | ✕ | Link element reference | +| Name | Type | Default | Required | Description | +| ------------- | --------------------------------- | ------- | -------- | ----------------------------- | +| `children` | `ReactNode` | — | ✓ | Content of the ToastBarLink | +| `elementType` | `ElementType` | `a` | ✕ | Type of element used as | +| `href` | `string` | — | ✕ | ToastBarLink's href attribute | +| `ref` | `ForwardedRef` | — | ✕ | Link element reference | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] @@ -247,7 +244,7 @@ said action), as it is very hard (if not impossible) to reach for users with ass ### Colors -The ToastBar component is available in all [emotion colors][dictionary-color], plus the `inverted` variant (default). +The ToastBar component is available in all [emotion colors][dictionary-color], plus the `neutral` variant (default). Use the `color` option to change the color of the ToastBar component. For example: @@ -284,16 +281,16 @@ To make the ToastBar dismissible, add the `isDismissible` prop along with a `onC ### API -| Name | Type | Default | Required | Description | -| --------------- | ------------------------------------------------------------ | ---------- | -------- | --------------------------------------------------- | -| `closeLabel` | `string` | `Close` | ✕ | Close label | -| `color` | [[Emotion Color dictionary][dictionary-color] \| `inverted`] | `inverted` | ✕ | Color variant | -| `hasIcon` | `bool` | `false` \* | ✕ | If true, an icon is shown along the message | -| `iconName` | `string` | `info` \* | ✕ | Name of a custom icon to be shown along the message | -| `id` | `string` | — | ✓ | ToastBar ID | -| `isDismissible` | `bool` | `false` | ✕ | If true, ToastBar can be dismissed by user | -| `isOpen` | `bool` | `true` | ✕ | If true, ToastBar is visible | -| `onClose` | `function` | — | ✕ | Close button callback | +| Name | Type | Default | Required | Description | +| --------------- | ----------------------------------------------------------- | ---------- | -------- | --------------------------------------------------- | +| `closeLabel` | `string` | `Close` | ✕ | Close label | +| `color` | [[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral` | ✕ | Color variant | +| `hasIcon` | `bool` | `false` \* | ✕ | If true, an icon is shown along the message | +| `iconName` | `string` | `info` \* | ✕ | Name of a custom icon to be shown along the message | +| `id` | `string` | — | ✓ | ToastBar ID | +| `isDismissible` | `bool` | `false` | ✕ | If true, ToastBar can be dismissed by user | +| `isOpen` | `bool` | `true` | ✕ | If true, ToastBar is visible | +| `onClose` | `function` | — | ✕ | Close button callback | (\*) For each emotion color, a default icon is defined. The icons come from the [Icon package][icon-package], or from your custom source of icons. @@ -371,16 +368,16 @@ What is uncontrolled component you can find [here][react-uncontrolled] This hook returns: -| Name | Type | Default | Description | -| ---------- | ------------------------------------------------------------ | ---------- | --------------------------------------------------- | -| `clear` | `() => void` | () => {} | Function that will clear toast queue | -| `color` | [[Emotion Color dictionary][dictionary-color] \| `inverted`] | `inverted` | Color variant | -| `hide` | `(toastId) => void` | () => {} | Function that will hide UncontrolledToast | -| `iconName` | `string` | — | Name of a custom icon to be shown along the message | -| `id` | `string` | `''` | ToastBar ID | -| `isOpen` | `bool` | `false` | Open state of UncontrolledToast | -| `message` | [`string` \| `ReactNode`] | null | Message inside UncontrolledToast | -| `show` | `(message, toastId, options?) => void` | () => {} | Function that will show UncontrolledToast | +| Name | Type | Default | Description | +| ---------- | ----------------------------------------------------------- | --------- | --------------------------------------------------- | +| `clear` | `() => void` | () => {} | Function that will clear toast queue | +| `color` | [[Emotion Color dictionary][dictionary-color] \| `neutral`] | `neutral` | Color variant | +| `hide` | `(toastId) => void` | () => {} | Function that will hide UncontrolledToast | +| `iconName` | `string` | — | Name of a custom icon to be shown along the message | +| `id` | `string` | `''` | ToastBar ID | +| `isOpen` | `bool` | `false` | Open state of UncontrolledToast | +| `message` | [`string` \| `ReactNode`] | null | Message inside UncontrolledToast | +| `show` | `(message, toastId, options?) => void` | () => {} | Function that will show UncontrolledToast | #### How to use `show` function: @@ -396,7 +393,7 @@ const { show } = useToast(); │ │ │ show({content: { message: 'Toast message', link: 'Link action' }}, 'toast-id', { autoCloseInterval: 3000, // Set interval in ms after ToastBar will be closed, default: 3000 - color: 'danger', // Color variant, default: 'inverted' + color: 'danger', // Color variant, default: 'neutral' enableAutoClose: true, // If true, ToastBar will close after `autoCloseInterval`, default: true hasIcon: true, // If true, an icon is shown along the message, default: false \* iconName: 'download', // Name of a custom icon to be shown along the message, default: undefined @@ -404,10 +401,7 @@ show({content: { message: 'Toast message', link: 'Link action' }}, 'toast-id', { linkProps: { // Props for the link href: 'https://example.com', // Link URL target: '_blank', // Optional link target attribute - isUnderlined: false, // Optional link underlining, default: true - isDisabled: false, // Optional link disabling, default: false elementType: 'a', // Optional link element type, default: 'a' - color: 'inverted', // Optional link color variant, default: 'inverted' }, }); ``` diff --git a/packages/web-react/src/components/Toast/ToastBar.tsx b/packages/web-react/src/components/Toast/ToastBar.tsx index c711876e2b..17695cd491 100644 --- a/packages/web-react/src/components/Toast/ToastBar.tsx +++ b/packages/web-react/src/components/Toast/ToastBar.tsx @@ -56,7 +56,6 @@ const ToastBar = (props: SpiritToastBarProps) => { = { - color: ActionLinkColors.INVERTED, - isUnderlined: true, +const defaultProps: Partial = { + elementType: 'a', }; /* We need an exception for components exported with forwardRef */ /* eslint no-underscore-dangle: ['error', { allow: ['_ToastBarLink'] }] */ -const _ToastBarLink = ( - props: SpiritLinkProps, - ref: ForwardedRef, -) => { +const _ToastBarLink = (props: ToastLinkProps, ref: ForwardedRef) => { const propsWithDefaults = { ...defaultProps, ...props }; - const { children, ...restProps } = propsWithDefaults; + const { + elementType: ElementTag = defaultProps.elementType as ElementType, + children, + ...restProps + } = propsWithDefaults; const { classProps, props: modifiedProps } = useToastBarStyleProps({ ...restProps }); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); return ( - - {children} - + + {children as React.ReactNode} + ); }; -export const ToastBarLink = forwardRef>(_ToastBarLink); +export const ToastBarLink = forwardRef(_ToastBarLink); export default ToastBarLink; diff --git a/packages/web-react/src/components/Toast/ToastCloseButton.tsx b/packages/web-react/src/components/Toast/ToastCloseButton.tsx index f8c840642a..d38b034598 100644 --- a/packages/web-react/src/components/Toast/ToastCloseButton.tsx +++ b/packages/web-react/src/components/Toast/ToastCloseButton.tsx @@ -1,26 +1,32 @@ 'use client'; +import classNames from 'classnames'; import React from 'react'; +import { useStyleProps } from '../../hooks'; import { ToastCloseButtonProps } from '../../types'; -import { Button } from '../Button'; import { Icon } from '../Icon'; import { VisuallyHidden } from '../VisuallyHidden'; +import { useToastBarStyleProps } from './useToastBarStyleProps'; + +const ToastCloseButton = (props: ToastCloseButtonProps) => { + const { onClose, isOpen, id, closeLabel, isDismissible, ...restProps } = props; + const { classProps, props: modifiedProps } = useToastBarStyleProps({ ...restProps }); + const { styleProps, props: otherProps } = useStyleProps(modifiedProps); -const ToastCloseButton = ({ color, onClose, isOpen, id, closeLabel, isDismissible }: ToastCloseButtonProps) => { if (isDismissible && onClose) { return ( - + ); } diff --git a/packages/web-react/src/components/Toast/ToastContext.tsx b/packages/web-react/src/components/Toast/ToastContext.tsx index fc9d716dcf..7b00990889 100644 --- a/packages/web-react/src/components/Toast/ToastContext.tsx +++ b/packages/web-react/src/components/Toast/ToastContext.tsx @@ -1,7 +1,7 @@ 'use client'; import React, { FC, ReactNode, createContext, useCallback, useMemo, useReducer } from 'react'; -import { LinkProps, ToastColorType } from '../../types'; +import { ToastColorType, ToastLinkProps } from '../../types'; import { delayedCallback } from '../../utils'; import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from './constants'; @@ -18,7 +18,7 @@ export interface ToastItem { id: string; isDismissible: boolean; isOpen: boolean; - linkProps: LinkProps; + linkProps: ToastLinkProps; content: { message: JSX.Element | string; link?: JSX.Element | string; @@ -42,7 +42,7 @@ export interface ToastContextType extends ToastState { hasIcon?: boolean; iconName?: string; isDismissible?: boolean; - linkProps: LinkProps; + linkProps: ToastLinkProps; }, ) => void; } @@ -73,7 +73,7 @@ type ActionType = hasIcon?: boolean; iconName?: string; isDismissible?: boolean; - linkProps: LinkProps; + linkProps: ToastLinkProps; }; }; } @@ -155,7 +155,7 @@ export const ToastProvider: FC = ({ children }) => { hasIcon?: boolean; iconName?: string; isDismissible?: boolean; - linkProps: LinkProps; + linkProps: ToastLinkProps; }, ) => { dispatch({ type: 'show', payload: { content, toastId, options } }); diff --git a/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx b/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx index f3ecee9c03..6ccb6e3cb3 100644 --- a/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx +++ b/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx @@ -28,7 +28,7 @@ describe('ToastBar', () => { expect(element).toBeInTheDocument(); expect(element).toHaveClass('ToastBar'); - expect(element).toHaveClass('ToastBar--inverted'); + expect(element).toHaveClass('ToastBar--neutral'); }); it('should render text children', () => { diff --git a/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx b/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx index c873b4ad6b..e199e8a2aa 100644 --- a/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx +++ b/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx @@ -28,7 +28,6 @@ describe('ToastBarLink', () => { it('should render with correct classnames', () => { const element = screen.getByRole('link'); - expect(element).toHaveClass('link-inverted'); expect(element).toHaveClass('link-underlined'); expect(element).toHaveClass('ToastBar__link'); }); diff --git a/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx b/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx index 05eb751573..6ad39d7959 100644 --- a/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx +++ b/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx @@ -1,7 +1,7 @@ import '@testing-library/jest-dom'; import { render } from '@testing-library/react'; import React from 'react'; -import { LinkProps } from '../../../types'; +import { ToastLinkProps } from '../../../types'; import { ToastContext } from '../ToastContext'; import UncontrolledToast from '../UncontrolledToast'; @@ -18,9 +18,7 @@ const defaultToast = { color: undefined, linkProps: { href: '#', - color: 'inverted', - isUnderlined: true, - } as LinkProps, + } as ToastLinkProps, }; const defaultContextValue = { @@ -61,7 +59,7 @@ describe('UncontrolledToast', () => { expect(elementToast).toBeInTheDocument(); expect(elementToastBar).toBeInTheDocument(); - expect(elementToastBar).toHaveClass('is-open ToastBar--inverted'); + expect(elementToastBar).toHaveClass('is-open ToastBar--neutral'); expect(elementToastBar.querySelector('.ToastBar .ToastBar__container svg')).not.toBeInTheDocument(); }); @@ -83,7 +81,7 @@ describe('UncontrolledToast', () => { expect(elementToast).toBeInTheDocument(); expect(elementToastBar).toBeInTheDocument(); expect(elementToast).toHaveClass('Toast--right Toast--top'); - expect(elementToastBar).toHaveClass('ToastBar ToastBar--inverted ToastBar--dismissible is-open'); + expect(elementToastBar).toHaveClass('ToastBar ToastBar--neutral ToastBar--dismissible is-open'); expect(elementToastBar.querySelector('.ToastBar__container svg')).toBeInTheDocument(); expect(elementToastBar.querySelector('button')).toHaveTextContent('Close test'); }); diff --git a/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts b/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts index 6c19b1a2b1..09411158c1 100644 --- a/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts +++ b/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts @@ -7,7 +7,9 @@ describe('useToastBarStyleProps', () => { const props = { isOpen: true } as SpiritToastBarProps; const { result } = renderHook(() => useToastBarStyleProps(props)); - expect(result.current.classProps.root).toBe('ToastBar ToastBar--inverted'); + expect(result.current.classProps.root).toBe('ToastBar ToastBar--neutral'); + expect(result.current.classProps.close).toBe('ToastBar__close'); + expect(result.current.classProps.link).toBe('ToastBar__link link-underlined'); expect(result.current.classProps.content).toBe('ToastBar__content'); expect(result.current.classProps.container).toBe('ToastBar__container'); }); @@ -19,7 +21,7 @@ describe('useToastBarStyleProps', () => { expect(result.current.classProps.root).toContain('ToastBar--dismissible'); }); - it.each([['inverted'], ['informative'], ['success'], ['warning'], ['danger']])( + it.each([['neutral'], ['informative'], ['success'], ['warning'], ['danger']])( 'should return color class %s', (color) => { const props = { color } as SpiritToastBarProps; diff --git a/packages/web-react/src/components/Toast/__tests__/useToastIcon.test.tsx b/packages/web-react/src/components/Toast/__tests__/useToastIcon.test.tsx index 5dccd7b0a8..cdcad132b0 100644 --- a/packages/web-react/src/components/Toast/__tests__/useToastIcon.test.tsx +++ b/packages/web-react/src/components/Toast/__tests__/useToastIcon.test.tsx @@ -14,7 +14,7 @@ describe('useToastIcon', () => { // color, expected icon name ['danger', 'danger'], ['informative', 'info'], - ['inverted', 'info'], + ['neutral', 'info'], ['success', 'check-plain'], ['warning', 'warning'], ])('danger alert should return warning icon', (color, iconName) => { diff --git a/packages/web-react/src/components/Toast/constants.ts b/packages/web-react/src/components/Toast/constants.ts index 6710e091cc..58896c894a 100644 --- a/packages/web-react/src/components/Toast/constants.ts +++ b/packages/web-react/src/components/Toast/constants.ts @@ -11,6 +11,6 @@ export const ICON_BOX_SIZE = 20; export const TOAST_BAR_CLOSE_BUTTON_LABEL_DEFAULT = 'Close'; -export const DEFAULT_TOAST_COLOR = 'inverted'; +export const DEFAULT_TOAST_COLOR = 'neutral'; export const DEFAULT_TOAST_AUTO_CLOSE_INTERVAL = 3000; // milliseconds diff --git a/packages/web-react/src/components/Toast/demo/ToastColors.tsx b/packages/web-react/src/components/Toast/demo/ToastColors.tsx index ee0dc733a3..4f8482bab8 100644 --- a/packages/web-react/src/components/Toast/demo/ToastColors.tsx +++ b/packages/web-react/src/components/Toast/demo/ToastColors.tsx @@ -6,8 +6,8 @@ import ToastBarMessage from '../ToastBarMessage'; const ToastColors = () => { return ( <> - {}} color="inverted" hasIcon isDismissible> - Inverted + {}} color="neutral" hasIcon isDismissible> + Neutral Action {}} color="informative" hasIcon isDismissible> diff --git a/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx b/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx index 77f14fe4f2..0a401362c0 100644 --- a/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx +++ b/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx @@ -18,7 +18,7 @@ const ToastDynamicToastQueue = () => { const [isCollapsible, setIsCollapsible] = useState(true); const [alignmentY, setAlignmentY] = useState('bottom'); const [alignmentX, setAlignmentX] = useState('center'); - const [colorValue, setColorValue] = useState('inverted'); + const [colorValue, setColorValue] = useState('neutral'); const [hasIconValue, setHasIconValue] = useState(true); const [isDismissibleValue, setIsDismissibleValue] = useState(true); const [enableAutoCloseValue, setEnableAutoCloseValue] = useState(true); @@ -44,8 +44,6 @@ const ToastDynamicToastQueue = () => { enableAutoClose: false, linkProps: { href: '#', - color: 'inverted', - isUnderlined: true, }, }, { @@ -62,8 +60,6 @@ const ToastDynamicToastQueue = () => { enableAutoClose: false, linkProps: { href: '#', - color: 'inverted', - isUnderlined: true, }, }, ]; @@ -163,7 +159,7 @@ const ToastDynamicToastQueue = () => { id="toast-color" onChange={(e) => setColorValue(e.currentTarget.value as ToastColorType)} > - + @@ -240,8 +236,6 @@ const ToastDynamicToastQueue = () => { enableAutoClose: enableAutoCloseValue, linkProps: { href: '#', - color: 'inverted', - isUnderlined: true, }, }, ); diff --git a/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx b/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx index 5e93d9a390..d808e02205 100644 --- a/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx +++ b/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx @@ -27,9 +27,9 @@ const meta: Meta = { }, color: { control: 'select', - options: ['inverted', 'informative', 'success', 'warning', 'danger'], + options: ['neutral', 'informative', 'success', 'warning', 'danger'], table: { - defaultValue: { summary: 'inverted' }, + defaultValue: { summary: 'neutral' }, }, }, hasIcon: { @@ -66,7 +66,7 @@ const meta: Meta = { ), closeLabel: 'Close', - color: 'inverted', + color: 'neutral', hasIcon: false, iconName: '', isDismissible: false, diff --git a/packages/web-react/src/components/Toast/stories/ToastBarLink.stories.tsx b/packages/web-react/src/components/Toast/stories/ToastBarLink.stories.tsx index d037f3119a..0cec1d87dc 100644 --- a/packages/web-react/src/components/Toast/stories/ToastBarLink.stories.tsx +++ b/packages/web-react/src/components/Toast/stories/ToastBarLink.stories.tsx @@ -1,7 +1,7 @@ import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import { LinkProps } from '../../../types'; +import { ToastLinkProps } from '../../../types'; import ReadMe from '../README.md'; import { Toast, ToastBar, ToastBarMessage, ToastBarLink } from '..'; @@ -17,21 +17,13 @@ const meta: Meta = { children: { control: 'text', }, - color: { - control: 'text', - }, href: { control: 'text', }, - isUnderlined: { - control: 'boolean', - }, }, args: { children: 'This is a toast link', href: '#', - color: 'inverted', - isUnderlined: true, }, }; @@ -39,7 +31,7 @@ export default meta; type Story = StoryObj; -const ToastBarComponent = (args: LinkProps) => { +const ToastBarComponent = (args: ToastLinkProps) => { const { children, ...restProps } = args; return ( diff --git a/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx b/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx index 1cbd40a033..d129f9a5df 100644 --- a/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx +++ b/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx @@ -2,7 +2,7 @@ import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { AlignmentX, EmotionColors } from '../../../constants'; -import { LinkProps, ToastColorType, UncontrolledToastProps } from '../../../types'; +import { ToastColorType, ToastLinkProps, UncontrolledToastProps } from '../../../types'; import { Button } from '../../Button'; import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from '../constants'; import ReadMe from '../README.md'; @@ -54,9 +54,9 @@ const meta: Meta = { }, color: { control: 'select', - options: ['inverted', ...Object.values(EmotionColors)], + options: ['neutral', ...Object.values(EmotionColors)], table: { - defaultValue: { summary: 'inverted' }, + defaultValue: { summary: 'neutral' }, }, }, iconName: { @@ -91,7 +91,7 @@ const meta: Meta = { closeLabel: 'Close', hasIcon: false, isDismissible: true, - color: 'inverted', + color: 'neutral', iconName: '', isCollapsible: true, enableAutoClose: true, @@ -112,7 +112,7 @@ const ShowButton = (props: { hasIcon: boolean; iconName?: string; isDismissible: boolean; - linkProps: LinkProps; + linkProps: ToastLinkProps; content: { message: string | JSX.Element; link?: string | JSX.Element }; }) => { const { content, color, hasIcon, isDismissible, iconName, enableAutoClose, autoCloseInterval, linkProps } = props; diff --git a/packages/web-react/src/components/Toast/useToastBarStyleProps.ts b/packages/web-react/src/components/Toast/useToastBarStyleProps.ts index ef6abf8f96..45a9a02b2d 100644 --- a/packages/web-react/src/components/Toast/useToastBarStyleProps.ts +++ b/packages/web-react/src/components/Toast/useToastBarStyleProps.ts @@ -7,20 +7,24 @@ export const useToastBarStyleProps = (props: ToastBarProps) => { const toastBarClass = useClassNamePrefix('ToastBar'); const toastBarBoxClass = `${toastBarClass}__box`; + const toastBarCloseClass = `${toastBarClass}__close`; const toastBarContainerClass = `${toastBarClass}__container`; const toastBarContentClass = `${toastBarClass}__content`; const toastBarLinkClass = `${toastBarClass}__link`; - const colorClass = `${toastBarClass}--${color || 'inverted'}`; + const toastBarLinkUnderlinedClass = useClassNamePrefix('link-underlined'); + const colorClass = `${toastBarClass}--${color || 'neutral'}`; const dismissibleClass = `${toastBarClass}--dismissible`; const rootClass = classNames(toastBarClass, colorClass, isDismissible && dismissibleClass); + const linkClass = classNames(toastBarLinkClass, toastBarLinkUnderlinedClass); return { classProps: { root: rootClass, box: toastBarBoxClass, + close: toastBarCloseClass, container: toastBarContainerClass, content: toastBarContentClass, - link: toastBarLinkClass, + link: linkClass, }, props: restProps, }; diff --git a/packages/web-react/src/components/Toast/useToastIcon.ts b/packages/web-react/src/components/Toast/useToastIcon.ts index 161b9166d4..ce6dfdf329 100644 --- a/packages/web-react/src/components/Toast/useToastIcon.ts +++ b/packages/web-react/src/components/Toast/useToastIcon.ts @@ -8,7 +8,7 @@ export function useToastIcon({ color, iconName }: Partial) { danger: 'danger', informative: 'info', - inverted: 'info', + neutral: 'info', success: 'check-plain', warning: 'warning', }, diff --git a/packages/web-react/src/types/toast.ts b/packages/web-react/src/types/toast.ts index 96c9f88414..c3df58a704 100644 --- a/packages/web-react/src/types/toast.ts +++ b/packages/web-react/src/types/toast.ts @@ -1,3 +1,5 @@ +import { ElementType } from 'react'; +import { LinkTarget } from './link'; import { AlignmentXDictionaryType, AlignmentYDictionaryType, @@ -6,7 +8,7 @@ import { StyleProps, } from './shared'; -export type ToastColorType = 'inverted' | EmotionColorsDictionaryType; +export type ToastColorType = 'neutral' | EmotionColorsDictionaryType; export interface BaseToastProps extends ChildrenProps, StyleProps {} @@ -39,6 +41,12 @@ export interface SpiritToastBarProps extends ToastBarProps, TransitionToastBarPr id: string; } +export interface ToastLinkProps extends ToastBarHandlingProps, ToastBarProps { + elementType?: E; + href?: string; + target?: LinkTarget; +} + export interface ToastCloseButtonProps extends ToastBarHandlingProps, SpiritToastBarProps { label?: string; }