Update MessageStyles.module.scss and

MessagePrimitive.tsx
Talend · Nov 28, 2023 · 2c9019c · 2c9019c
1 parent 26569aa
commit 2c9019c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx
@@ -16,38 +16,40 @@ import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants';
 import { Dropdown, DropdownPropsType } from '../../Dropdown';
 import { SizedIcon } from '../../Icon';
 import Link, { LinkProps } from '../../Link/Link';
-import { StackHorizontal, StackItem, StackVertical } from '../../Stack';
+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'>;
+	additionalIconAction?: ButtonIconType<'XS'>;
+	additionalDropdownActions?: Omit<DropdownPropsType, 'children'>;
 	description: string | ReactElement | string[] | ReactElement[];
 	title: string;
-};
-
-type SharedMessageWithActionsPropsType = {
-	additionalAction?: ButtonIconType<'XS'>;
-	additionalActions?: never;
-};
-
-type SharedMessageWithActionPropsType = {
-	additionalAction?: never;
-	additionalActions?: Omit<DropdownPropsType, 'children'>;
-};
+} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType);
 
 export type SharedMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> & {
 	action?: ButtonTertiaryPropsType<'S'>;
-	additionalAction?: ButtonIconType<'XS'>;
-	additionalActions?: Omit<DropdownPropsType, 'children'>;
+	additionalIconAction?: ButtonIconType<'XS'>;
+	additionalDropdownActions?: Omit<DropdownPropsType, 'children'>;
 	children?: ReactNode | ReactNode[];
 	description: string | ReactElement | string[] | ReactElement[];
 	link?: LinkProps;
 	title?: string;
+	titleInfo?: string;
 } & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType);
 
 export type BaseMessageProps = Omit<SharedMessageCollectionProps, 'action' | 'title'> &
@@ -62,12 +64,13 @@ export const MessagePrimitive = forwardRef(
 			borderClassname,
 			description,
 			title,
+			titleInfo,
 			link,
 			icon,
 			children,
 			action,
-			additionalAction,
-			additionalActions,
+			additionalIconAction,
+			additionalDropdownActions,
 			...props
 		}: BaseMessageProps,
 		ref: Ref<HTMLDivElement>,
@@ -83,14 +86,14 @@ 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}
-								{/* <StackItem align="end">edfefefef</StackItem> */}
+								<div className={styles.message__title__info}>{titleInfo}</div>
 							</StackHorizontal>
 						</header>
 					)}
@@ -99,9 +102,9 @@ export const MessagePrimitive = forwardRef(
 					{children}
 					<StackHorizontal gap={0} isFullWidth align="center" justify="spaceBetween">
 						{action && <ButtonTertiary {...action} />}
-						{additionalAction && <ButtonIcon {...additionalAction} size="XS" />}
-						{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
@@ -13,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/stories/messaging/Message.stories.tsx b/packages/design-system/src/stories/messaging/Message.stories.tsx
@@ -24,17 +24,23 @@ 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') }}
-			additionalAction={{ children: 'Dismiss', onClick: action('dismiss clicked'), icon: 'trash' }}
+			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' },
 	},
 };