feat: message upgrade (#5011)

Talend · Nov 28, 2023 · 0e6c82e · 0e6c82e
1 parent 61603e6
commit 0e6c82e
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 37 deletions.
diff --git a/.changeset/famous-adults-cough.md 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
@@ -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<DropdownPropsType, 'children'>;
+};
+
 export type SharedMessageCollectionProps = Omit<
 	HTMLAttributes<HTMLDivElement>,
 	'style' | 'children' | 'className'
 > & {
 	action: ButtonTertiaryPropsType<'S'>;
-	additionalActions?: Omit<DropdownPropsType, 'children'>;
-	description: string;
+	additionalIconAction?: ButtonIconType<'XS'>;
+	additionalDropdownActions?: Omit<DropdownPropsType, 'children'>;
+	description: string | ReactElement | string[] | ReactElement[];
 	title: string;
-};
+} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType);
 
 export type SharedMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> & {
 	action?: ButtonTertiaryPropsType<'S'>;
-	additionalActions?: Omit<DropdownPropsType, 'children'>;
+	additionalIconAction?: ButtonIconType<'XS'>;
+	additionalDropdownActions?: Omit<DropdownPropsType, 'children'>;
 	children?: ReactNode | ReactNode[];
-	description: string;
+	description: string | ReactElement | string[] | ReactElement[];
 	link?: LinkProps;
 	title?: string;
-};
+	titleInfo?: string;
+} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType);
 
 export type BaseMessageProps = Omit<SharedMessageCollectionProps, 'action' | 'title'> &
 	SharedMessageProps & {
@@ -48,11 +64,13 @@ export const MessagePrimitive = forwardRef(
 			borderClassname,
 			description,
 			title,
+			titleInfo,
 			link,
 			icon,
 			children,
 			action,
-			additionalActions,
+			additionalIconAction,
+			additionalDropdownActions,
 			...props
 		}: BaseMessageProps,
 		ref: Ref<HTMLDivElement>,
@@ -68,23 +86,25 @@ export const MessagePrimitive = forwardRef(
 				ref={ref}
 			>
 				<StackVertical gap="XS" padding={{ top: 'S', bottom: 'S', left: 'M', right: 'M' }}>
-					{title && (
+					{title || titleInfo ? (
 						<header className={styles.message__title}>
-							<StackHorizontal gap="XS" align="center">
+							<StackHorizontal gap="XS" align="center" isFullWidth>
 								{icon && (
 									<SizedIcon name={icon} size="S" color={tokens.coralColorNeutralIconWeak} />
 								)}
 								{title}
+								{titleInfo ? <div className={styles.message__title__info}>{titleInfo}</div> : null}
 							</StackHorizontal>
 						</header>
-					)}
+					) : null}
 					<p className={styles.message__description}>{description}</p>
 					{link && <Link {...link} />}
 					{children}
 					<StackHorizontal gap={0} isFullWidth align="center" justify="spaceBetween">
 						{action && <ButtonTertiary {...action} />}
-						{additionalActions && (
-							<Dropdown {...additionalActions}>
+						{additionalIconAction && <ButtonIcon {...additionalIconAction} size="XS" />}
+						{additionalDropdownActions && (
+							<Dropdown {...additionalDropdownActions}>
 								<ButtonIcon size="XS" icon="dots-vertical" onClick={() => {}}>
 									{t('ADDITIONAL_ACTIONS', 'Additional actions')}
 								</ButtonIcon>

diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss
@@ -3,17 +3,24 @@
 .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;
 	border-left: 0.6rem solid tokens.$coral-color-neutral-border-hover;
 
 	&__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
@@ -14,7 +14,7 @@ exports[`Message should render a11y html 1`] = `
         class="theme-message__title"
       >
         <div
-          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-XS theme-gap-y-XS"
         >
           All good
         </div>
@@ -80,7 +80,7 @@ exports[`Message should render a11y html 1`] = `
         class="theme-message__title"
       >
         <div
-          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-XS theme-gap-y-XS"
         >
           Something went wrong
         </div>
@@ -146,7 +146,7 @@ exports[`Message should render a11y html 1`] = `
         class="theme-message__title"
       >
         <div
-          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-XS theme-gap-y-XS"
         >
           Type incompatibilities
         </div>
@@ -212,7 +212,7 @@ exports[`Message should render a11y html 1`] = `
         class="theme-message__title"
       >
         <div
-          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-gap-x-XS theme-gap-y-XS"
+          class="theme-stack theme-justify-start theme-align-center theme-nowrap theme-row theme-block theme-fullWidth theme-gap-x-XS theme-gap-y-XS"
         >
           Auto mapping
         </div>

diff --git a/packages/design-system/src/stories/messaging/Message.stories.tsx b/packages/design-system/src/stories/messaging/Message.stories.tsx
@@ -17,24 +17,30 @@ import {
 	TagSuccess,
 	TagWarning,
 } from '../../';
-
 import { MessagePrimitive } from '../../components/Message/Primitive/MessagePrimitive';
 
 export default { component: MessagePrimitive, title: 'Messaging/Message' };
 export const DefaultMessageDemo = () => (
 	<StackHorizontal gap="M">
 		<MessageSuccess
 			title="All good"
+			titleInfo="system"
 			description="This component is well configured"
 			link={{ href: 'https://talend.com', children: 'Learn more' }}
 			action={{ children: 'See', onClick: action('action clicked') }}
+			additionalIconAction={{
+				children: 'Dismiss',
+				onClick: action('dismiss clicked'),
+				icon: 'trash',
+			}}
 		>
 			<StackHorizontal gap="S">
 				<TagSuccess>Good</TagSuccess> <TagDefault>Default</TagDefault>
 			</StackHorizontal>
 		</MessageSuccess>
 		<MessageDestructive
-			title="Something went wrong"
+			title="Very very long title with reflow because it’s too long please don’t do that it’s way too long."
+			titleInfo="1 minute ago"
 			description="There is an issue with the component configuration"
 			link={{ href: 'https://talend.com', children: 'Learn more' }}
 			action={{ children: 'See', onClick: action('action clicked') }}
@@ -77,7 +83,7 @@ export const WithPropVariation = () => (
 		<MessageDestructive
 			description="There is an issue with the component configuration"
 			action={{ children: 'See', onClick: action('action clicked') }}
-			additionalActions={{
+			additionalDropdownActions={{
 				'aria-label': 'Additional actions',
 				items: [
 					{ label: 'Select all', type: 'button', onClick: action('select all clicked') },
@@ -101,7 +107,7 @@ MessageInformationTemplateStory.argTypes = {
 	action: {
 		control: { type: 'object' },
 	},
-	additionalActions: {
+	additionalDropdownActions: {
 		control: { type: 'object' },
 	},
 	title: {
@@ -120,7 +126,7 @@ MessageInformationTemplateStory.argTypes = {
 };
 MessageInformationTemplateStory.args = {
 	action: { children: 'See', onClick: () => {} },
-	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' },
 	},
 };