diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx index 77c56e9a5d4..8e2a9180a46 100644 --- 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; +}; + export type SharedMessageCollectionProps = Omit< HTMLAttributes, 'style' | 'children' | 'className' > & { action: ButtonTertiaryPropsType<'S'>; - additionalActions?: Omit; + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: Omit; description: string | ReactElement | string[] | ReactElement[]; title: string; -}; - -type SharedMessageWithActionsPropsType = { - additionalAction?: ButtonIconType<'XS'>; - additionalActions?: never; -}; - -type SharedMessageWithActionPropsType = { - additionalAction?: never; - additionalActions?: Omit; -}; +} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType); export type SharedMessageProps = Omit, 'style' | 'className'> & { action?: ButtonTertiaryPropsType<'S'>; - additionalAction?: ButtonIconType<'XS'>; - additionalActions?: Omit; + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: Omit; children?: ReactNode | ReactNode[]; description: string | ReactElement | string[] | ReactElement[]; link?: LinkProps; title?: string; + titleInfo?: string; } & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType); export type BaseMessageProps = Omit & @@ -62,12 +64,13 @@ export const MessagePrimitive = forwardRef( borderClassname, description, title, + titleInfo, link, icon, children, action, - additionalAction, - additionalActions, + additionalIconAction, + additionalDropdownActions, ...props }: BaseMessageProps, ref: Ref, @@ -83,14 +86,14 @@ export const MessagePrimitive = forwardRef( ref={ref} > - {title && ( + {(title || titleInfo) && (
- + {icon && ( )} {title} - {/* edfefefef */} +
{titleInfo}
)} @@ -99,9 +102,9 @@ export const MessagePrimitive = forwardRef( {children} {action && } - {additionalAction && } - {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 8dc3b26d47b..69f4694ae20 100644 --- 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 index c5a3a8e2af8..47e3e78bfa0 100644 --- 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 = () => ( 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' }, }, };