Repository: Sage/carbon (ts)

Issue:
Message Component: inline and width properties
### Description

Message component is show at 100% without any option to change width or make it with display inline.

### Suggested solution

Leave 100% width by default to not break previous usages.

Add next properties:
- width (value in px, %...), to set specific width

### Demo URL

_No response_

### Alternatives

_No response_

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
feat(message): add `width` prop
fix #6966

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
Add `width` prop to `Message` component. 

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
`Message` component does not have a `width` prop. 

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [x] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [ ] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->


Patch:
diff --git a/src/components/message/message.component.tsx b/src/components/message/message.component.tsx
index 03a36f22e..91bd2314f 100644
--- a/src/components/message/message.component.tsx
+++ b/src/components/message/message.component.tsx
@@ -19,28 +19,30 @@ 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;
 }
 
 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 730c0d9a7..7472d79ef 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}
 `;
 


Test patch:
diff --git a/src/components/message/message-test.stories.tsx b/src/components/message/message-test.stories.tsx
index 8547f62ea..67d4ca2bc 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.test.tsx b/src/components/message/message.test.tsx
index 728be1448..dfacdd8b5 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>);