feat(message): add styled-system margin props

src/components/message/message-content/message-content.style.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { margin } from "styled-system";
 
 const MessageContentStyle = styled.div`
   padding: 15px 50px 15px 20px;
@@ -11,6 +12,8 @@ const MessageContentStyle = styled.div`
   .carbon-content__body {
     margin-top: 0px;
   }
+
+  ${margin}
 `;
 
 export default MessageContentStyle;

src/components/message/message.component.js

@@ -1,13 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
 import I18n from "i18n-js";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import MessageStyle from "./message.style";
 import TypeIcon from "./type-icon/type-icon.component";
 import MessageContent from "./message-content/message-content.component";
 import OptionsHelper from "../../utils/helpers/options-helper";
 import tagComponent from "../../utils/helpers/tags";
 import Icon from "../icon";
 import IconButton from "../icon-button";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const Message = ({
   open = true,
@@ -22,6 +28,8 @@ const Message = ({
   showCloseIcon = true,
   ...props
 }) => {
+  const marginProps = filterStyledSystemMarginProps(props);
+
   const renderCloseIcon = () => {
     if (!showCloseIcon || !onDismiss) return null;
 
@@ -51,6 +59,7 @@ const Message = ({
         variant={variant}
         role="status"
         id={id}
+        {...marginProps}
       >
         <TypeIcon variant={variant} transparent={transparent} />
         <MessageContent
@@ -67,6 +76,7 @@ const Message = ({
 };
 
 Message.propTypes = {
+  ...marginPropTypes,
   /** set type of message based on new DLS standard */
   variant: PropTypes.oneOf(OptionsHelper.colors),
   /** set content to component */

src/components/message/message.spec.js

@@ -9,6 +9,7 @@ import Message from "./message.component";
 import {
   assertStyleMatch,
   carbonThemesJestTable,
+  testStyledSystemMargin,
 } from "../../__spec_helper__/test-utils";
 import { baseTheme } from "../../style/themes";
 import IconButton from "../icon-button";
@@ -210,4 +211,8 @@ describe("Message", () => {
       });
     });
   });
+
+  describe("styled-system", () => {
+    testStyledSystemMargin((props) => <Message {...props} />);
+  });
 });

src/components/message/message.stories.mdx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
 import Message from '.';
 import Button from '../button';
@@ -167,4 +168,4 @@ It is also possible to use the `List`, `ListItem` and `Typography` components to
 
 ### Message
 
-<Props of={Message} />
+<StyledSystemProps of={Message} noHeader margin />

src/components/message/message.style.js

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
+import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import StyledIconButton from "../icon-button/icon-button.style";
 
@@ -25,6 +26,8 @@ const MessageStyle = styled.div`
     top: 50%;
     transform: translateY(-50%);
   }
+
+  ${margin}
 `;
 
 MessageStyle.defaultProps = {