From 0e6c82e25412cb67c3410a4e90bc30fdb510bbab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Romain?= Date: Tue, 28 Nov 2023 10:15:27 +0100 Subject: [PATCH] feat: message upgrade (#5011) --- .changeset/famous-adults-cough.md | 11 ++++ .../Message/Primitive/MessagePrimitive.tsx | 58 +++++++++++++------ .../Primitive/MessageStyles.module.scss | 11 +++- .../__snapshots__/Message.test.tsx.snap | 8 +-- .../src/stories/messaging/Message.stories.tsx | 30 ++++++---- 5 files changed, 81 insertions(+), 37 deletions(-) create mode 100644 .changeset/famous-adults-cough.md diff --git a/.changeset/famous-adults-cough.md b/.changeset/famous-adults-cough.md new file mode 100644 index 00000000000..7883fd5fc67 --- /dev/null +++ b/.changeset/famous-adults-cough.md @@ -0,0 +1,11 @@ +--- +'@talend/design-system': minor +--- + +feat: rework some part of Message component + +- The size of a message fit the container width while before, it has a max width of `28rem` +- add a new prop `titleInfo` that allow to display an information message aside the title +- add new prop `additionalIconAction` to allow to display an additional button icon instead (there was only the dropdown action available before) +- rename prop `additionalActions` to `additionalDropdownActions` to make the API more explicit +- remove the shadow on the message to make it more consistent with the rest of the design and integrate better in the page diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx index 68802033632..6e782e9e336 100644 --- a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx +++ b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx @@ -1,40 +1,56 @@ import { forwardRef, HTMLAttributes, ReactNode, Ref } from 'react'; +import type { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; +import classnames from 'classnames'; + +import tokens from '@talend/design-tokens'; // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; -import tokens from '@talend/design-tokens'; -import classnames from 'classnames'; -import { SizedIcon } from '../../Icon'; -import Link, { LinkProps } from '../../Link/Link'; -import { StackHorizontal, StackVertical } from '../../Stack'; -import { ButtonTertiaryPropsType } from '../../Button/variations/ButtonTertiary'; import { ButtonTertiary } from '../../Button'; -import { Dropdown, DropdownPropsType } from '../../Dropdown'; +import { ButtonTertiaryPropsType } from '../../Button/variations/ButtonTertiary'; import { ButtonIcon } from '../../ButtonIcon'; +import type { ButtonIconType } from '../../ButtonIcon/variations/ButtonIcon'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; +import { Dropdown, DropdownPropsType } from '../../Dropdown'; +import { SizedIcon } from '../../Icon'; +import Link, { LinkProps } from '../../Link/Link'; +import { StackHorizontal, StackVertical } from '../../Stack'; import styles from './MessageStyles.module.scss'; +type SharedMessageWithActionsPropsType = { + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: never; +}; + +type SharedMessageWithActionPropsType = { + additionalIconAction?: never; + additionalDropdownActions?: Omit; +}; + export type SharedMessageCollectionProps = Omit< HTMLAttributes, 'style' | 'children' | 'className' > & { action: ButtonTertiaryPropsType<'S'>; - additionalActions?: Omit; - description: string; + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: Omit; + description: string | ReactElement | string[] | ReactElement[]; title: string; -}; +} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType); export type SharedMessageProps = Omit, 'style' | 'className'> & { action?: ButtonTertiaryPropsType<'S'>; - additionalActions?: Omit; + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: Omit; children?: ReactNode | ReactNode[]; - description: string; + description: string | ReactElement | string[] | ReactElement[]; link?: LinkProps; title?: string; -}; + titleInfo?: string; +} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType); export type BaseMessageProps = Omit & SharedMessageProps & { @@ -48,11 +64,13 @@ export const MessagePrimitive = forwardRef( borderClassname, description, title, + titleInfo, link, icon, children, action, - additionalActions, + additionalIconAction, + additionalDropdownActions, ...props }: BaseMessageProps, ref: Ref, @@ -68,23 +86,25 @@ export const MessagePrimitive = forwardRef( ref={ref} > - {title && ( + {title || titleInfo ? (
- + {icon && ( )} {title} + {titleInfo ?
{titleInfo}
: null}
- )} + ) : null}

{description}

{link && } {children} {action && } - {additionalActions && ( - + {additionalIconAction && } + {additionalDropdownActions && ( + {}}> {t('ADDITIONAL_ACTIONS', 'Additional actions')} diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss index b8cc9808f56..69f4694ae20 100644 --- a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss +++ b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss @@ -3,10 +3,9 @@ .message { display: flex; border-radius: tokens.$coral-radius-s; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; + border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; background-color: tokens.$coral-color-neutral-background; height: 100%; - width: 28rem; border-top-left-radius: tokens.$coral-radius-s; border-bottom-left-radius: tokens.$coral-radius-s; @@ -14,6 +13,14 @@ &__title { font: tokens.$coral-heading-m; + width: 100%; + + &__info { + font: tokens.$coral-paragraph-s; + color: tokens.$coral-color-neutral-text-weak; + white-space: nowrap; + margin-left: auto; + } } &__description { diff --git a/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap b/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap index 37779e46381..9628b326ead 100644 --- a/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap +++ b/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap @@ -14,7 +14,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
All good
@@ -80,7 +80,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
Something went wrong
@@ -146,7 +146,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
Type incompatibilities
@@ -212,7 +212,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
Auto mapping
diff --git a/packages/design-system/src/stories/messaging/Message.stories.tsx b/packages/design-system/src/stories/messaging/Message.stories.tsx index 5946eee3c49..47e3e78bfa0 100644 --- a/packages/design-system/src/stories/messaging/Message.stories.tsx +++ b/packages/design-system/src/stories/messaging/Message.stories.tsx @@ -17,7 +17,6 @@ import { TagSuccess, TagWarning, } from '../../'; - import { MessagePrimitive } from '../../components/Message/Primitive/MessagePrimitive'; export default { component: MessagePrimitive, title: 'Messaging/Message' }; @@ -25,16 +24,23 @@ export const DefaultMessageDemo = () => ( Good Default ( {} }, - additionalActions: { + additionalDropdownActions: { 'aria-label': 'Additional actions', items: [ { label: 'Select all', type: 'button', onClick: action('select all clicked') }, @@ -141,7 +147,7 @@ export const DefaultMessageCollectionDemo = () => ( description="Try resolving it this way or consult the documentation for more info." title="Success" action={{ children: 'See all (3)', onClick: action('action clicked') }} - additionalActions={{ + additionalDropdownActions={{ 'aria-label': 'Additional actions', items: [ { label: 'Select all', type: 'button', onClick: action('select all clicked') }, @@ -154,7 +160,7 @@ export const DefaultMessageCollectionDemo = () => ( title="Error" description="(n) input fields have been automatically mapped to an output." action={{ children: 'See all (3)', onClick: action('action clicked') }} - additionalActions={{ + additionalDropdownActions={{ 'aria-label': 'Additional actions', items: [ { label: 'Select all', type: 'button', onClick: action('select all clicked') }, @@ -167,7 +173,7 @@ export const DefaultMessageCollectionDemo = () => ( title="Warning" description="Try resolving it this way or consult the documentation for more info." action={{ children: 'See all (3)', onClick: action('action clicked') }} - additionalActions={{ + additionalDropdownActions={{ 'aria-label': 'Additional actions', items: [ { label: 'Select all', type: 'button', onClick: action('select all clicked') }, @@ -180,7 +186,7 @@ export const DefaultMessageCollectionDemo = () => ( description="(n) input fields have been automatically mapped to an output." title="Information" action={{ children: 'See all (3)', onClick: action('action clicked') }} - additionalActions={{ + additionalDropdownActions={{ 'aria-label': 'Additional actions', items: [ { label: 'Select all', type: 'button', onClick: action('select all clicked') }, @@ -203,7 +209,7 @@ export const MessageCollectionWithPropVariation = () => ( title="Warning" description="Try resolving it this way or consult the documentation for more info." action={{ children: 'See all (3)', onClick: action('action clicked') }} - additionalActions={{ + additionalDropdownActions={{ 'aria-label': 'Additional actions', items: [ { label: 'Select all', type: 'button', onClick: action('select all clicked') }, @@ -226,7 +232,7 @@ MessageCollectionInformationTemplateStory.args = { action: { children: 'See', onClick: () => {} }, title: 'Information Title', description: 'Maybe resolve this issue before doing anything else', - additionalActions: { + additionalDropdownActions: { 'aria-label': 'Additional actions', items: [ { label: 'Select all', type: 'button', onClick: action('select all clicked') }, @@ -246,7 +252,7 @@ MessageCollectionInformationTemplateStory.argTypes = { description: { control: { type: 'text' }, }, - additionalActions: { + additionalDropdownActions: { control: { type: 'object' }, }, };