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

@@ -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) => {

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}

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}
 `;
 

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>);