From f24a44feccd7e993c1b95ee7c91298b6c3e6fec3 Mon Sep 17 00:00:00 2001
From: nuria1110 <nuria.torresramon@sage.com>
Date: Mon, 10 Feb 2025 14:44:59 +0000
Subject: [PATCH 1/2] feat(message): add `width` prop

Adds `width` prop to `Message` component, accepts any valid css string.

fix #6966
---
 src/components/message/message-test.stories.tsx |  5 ++++-
 src/components/message/message.component.tsx    |  4 ++++
 src/components/message/message.style.ts         |  3 +++
 src/components/message/message.test.tsx         | 12 ++++++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/message/message-test.stories.tsx b/src/components/message/message-test.stories.tsx
index 8547f62ea4..67d4ca2bc3 100644
--- a/src/components/message/message-test.stories.tsx
+++ b/src/components/message/message-test.stories.tsx
@@ -38,7 +38,9 @@ export const Default = ({ title, children, ...args }: MessageProps) => {
   };
   return (
     <>
-      <Button onClick={handleOpen}>Open Message</Button>
+      <Button mb={2} onClick={handleOpen}>
+        Open Message
+      </Button>
       <Message open={isOpen} onDismiss={onDismiss} title={title} {...args}>
         {children}
       </Message>
@@ -54,6 +56,7 @@ Default.args = {
   transparent: false,
   children: "This is some information from the Message Component.",
   showCloseIcon: true,
+  width: "",
 };
 
 export const Transparent = (args: MessageProps) => {
diff --git a/src/components/message/message.component.tsx b/src/components/message/message.component.tsx
index 03a36f22e8..c2789e2453 100644
--- a/src/components/message/message.component.tsx
+++ b/src/components/message/message.component.tsx
@@ -41,6 +41,8 @@ export interface MessageProps extends MarginProps {
   transparent?: boolean;
   /** set type of message based on new DLS standard */
   variant?: MessageVariant;
+  /** Set the component's width, accepts any valid css string */
+  width?: string;
 }
 
 export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
@@ -55,6 +57,7 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
       id,
       closeButtonAriaLabel,
       showCloseIcon = true,
+      width,
       ...props
     }: MessageProps,
     ref,
@@ -85,6 +88,7 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
         transparent={transparent}
         variant={variant}
         id={id}
+        width={width}
         ref={refToPass}
         {...marginProps}
         tabIndex={-1}
diff --git a/src/components/message/message.style.ts b/src/components/message/message.style.ts
index 730c0d9a72..7472d79ef7 100644
--- a/src/components/message/message.style.ts
+++ b/src/components/message/message.style.ts
@@ -16,6 +16,7 @@ const messageVariants = {
 type MessageStyleProps = {
   variant?: MessageVariant;
   transparent?: boolean;
+  width?: string;
 };
 
 const MessageStyle = styled.div<MessageStyleProps & MarginProps>`
@@ -47,6 +48,8 @@ const MessageStyle = styled.div<MessageStyleProps & MarginProps>`
     transform: translateY(-50%);
   }
 
+  ${({ width }) => width && `width: ${width};`}
+
   ${margin}
 `;
 
diff --git a/src/components/message/message.test.tsx b/src/components/message/message.test.tsx
index 728be1448b..dfacdd8b54 100644
--- a/src/components/message/message.test.tsx
+++ b/src/components/message/message.test.tsx
@@ -133,6 +133,18 @@ test("renders with expected styles when `transparent` is true", () => {
   });
 });
 
+test("renders with provided width when `width` is provided", () => {
+  render(
+    <Message data-role="my-message" width="100px">
+      Message
+    </Message>,
+  );
+
+  expect(screen.getByTestId("my-message")).toHaveStyle({
+    width: "100px",
+  });
+});
+
 test("renders with `ref` when provided as an object", () => {
   const ref = { current: null };
   render(<Message ref={ref}>Message</Message>);

From 592783ab4a5a63e7d8a67818e3e28cfcf80fe5bb Mon Sep 17 00:00:00 2001
From: nuria1110 <nuria.torresramon@sage.com>
Date: Mon, 10 Feb 2025 14:46:48 +0000
Subject: [PATCH 2/2] docs(message): clean up prop descriptions

---
 src/components/message/message.component.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/message/message.component.tsx b/src/components/message/message.component.tsx
index c2789e2453..91bd2314fc 100644
--- a/src/components/message/message.component.tsx
+++ b/src/components/message/message.component.tsx
@@ -19,27 +19,27 @@ export type MessageVariant =
   | "neutral";
 
 export interface MessageProps extends MarginProps {
-  /** set content to component */
+  /** Set the component's content */
   children?: React.ReactNode;
-  /** set custom aria label for message close button */
+  /** Set custom aria-label for component's close button */
   closeButtonAriaLabel?: string;
-  /** set custom id to component root */
+  /** Set custom id to component root */
   id?: string;
-  /** function runs when user click dismiss button */
+  /** Callback triggered on dismiss */
   onDismiss?: (
     e:
       | React.KeyboardEvent<HTMLButtonElement>
       | React.MouseEvent<HTMLButtonElement>,
   ) => void;
-  /** show message component */
+  /** Flag to determine if the message is rendered */
   open?: boolean;
-  /** determines if the close icon is shown */
+  /** Flag to determine if the close button is rendered */
   showCloseIcon?: boolean;
-  /** set message title */
+  /** Set message title */
   title?: React.ReactNode;
-  /** set background to be invisible */
+  /** Set transparent styling */
   transparent?: boolean;
-  /** set type of message based on new DLS standard */
+  /** Set the component's variant */
   variant?: MessageVariant;
   /** Set the component's width, accepts any valid css string */
   width?: string;