Merge pull request #2465 from teamleadercrm/fix/message-boxprops

Make `MessageProps` extend `BoxProps`

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Changed
 
+- `Message`: Make `MessageProps` extend the `BoxProps` and make `title` property optional ([@kristofcolpaert](https://github.com/kristofcolpaert)) in [#2465](https://github.com/teamleadercrm/ui/pull/2465))
 - `Dialog`: Added z-index to scroll shadow to make sure it appears above inner elements ([@BeirlaenAaron](https://github.com/BeirlaenAaron)) in ([#2463](https://github.com/teamleadercrm/ui/pull/2463))
 
 ### Deprecated

src/components/message/Message.tsx

@@ -5,7 +5,7 @@ import {
   IconCloseMediumOutline,
   IconWarningBadgedMediumFilled,
 } from '@teamleader/ui-icons';
-import Box from '../box';
+import Box, { BoxProps } from '../box';
 import Button from '../button';
 import ButtonGroup from '../buttonGroup';
 import Icon from '../icon';
@@ -52,7 +52,7 @@ const iconMap = {
   warning: IconWarningBadgedMediumFilled,
 };
 
-export interface MessageProps {
+export interface MessageProps extends Omit<BoxProps, 'children'> {
   /** The content to display inside the message. */
   children: React.ReactNode;
   /** If true, the message will be rendered inline instead of taking full width. */
@@ -68,7 +68,7 @@ export interface MessageProps {
   /** A status type to determine color and icon */
   status?: Status;
   /** The message title */
-  title: React.ReactNode;
+  title?: React.ReactNode;
 }
 
 const Message: GenericComponent<MessageProps> = ({

src/components/message/message.stories.tsx

@@ -85,3 +85,12 @@ export const WithStatus = () => (
     </TextBody>
   </Message>
 );
+
+export const WithoutTitle = () => (
+  <Message status="info">
+    <TextBody color="teal">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <Link inherit={false}>nonumy eirmod</Link>{' '}
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+    </TextBody>
+  </Message>
+);