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 (
<>
-
+
{children}
@@ -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..91bd2314fc 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
| React.MouseEvent,
) => 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(
@@ -55,6 +57,7 @@ export const Message = React.forwardRef(
id,
closeButtonAriaLabel,
showCloseIcon = true,
+ width,
...props
}: MessageProps,
ref,
@@ -85,6 +88,7 @@ export const Message = React.forwardRef(
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`
@@ -47,6 +48,8 @@ const MessageStyle = styled.div`
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
+ ,
+ );
+
+ expect(screen.getByTestId("my-message")).toHaveStyle({
+ width: "100px",
+ });
+});
+
test("renders with `ref` when provided as an object", () => {
const ref = { current: null };
render(Message);