feat(icon-button): add styled-system

src/components/icon-button/icon-button.component.js

@@ -1,10 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import Events from "../../utils/helpers/events";
 import StyledIconButton from "./icon-button.style";
 import Icon from "../icon";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const IconButton = React.forwardRef(({ onAction, children, ...rest }, ref) => {
+  const marginProps = filterStyledSystemMarginProps(rest);
   const onKeyDown = (e) => {
     if (Events.isEnterKey(e) || Events.isSpaceKey(e)) {
       e.preventDefault();
@@ -24,13 +31,15 @@ const IconButton = React.forwardRef(({ onAction, children, ...rest }, ref) => {
       onKeyDown={onKeyDown}
       onClick={handleOnAction}
       ref={ref}
+      {...marginProps}
     >
       {children}
     </StyledIconButton>
   );
 });
 
 IconButton.propTypes = {
+  ...marginPropTypes,
   /** Children prop is restricted to one Icon Component */
   children: PropTypes.shape({
     type: PropTypes.oneOf([Icon, PropTypes.element]),

src/components/icon-button/icon-button.spec.js

@@ -2,7 +2,10 @@ import React from "react";
 import { mount } from "enzyme";
 import IconButton from ".";
 import Message from "../message/message.component";
-import { assertStyleMatch } from "../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../__spec_helper__/test-utils";
 import StyledIconButton from "./icon-button.style";
 
 describe("IconButton component", () => {
@@ -19,6 +22,12 @@ describe("IconButton component", () => {
       );
     });
 
+    describe("styled system", () => {
+      testStyledSystemMargin((props) => (
+        <IconButton {...props}>test content</IconButton>
+      ));
+    });
+
     describe("on baseTheme", () => {
       it("renders correct style for focused IconButton", () => {
         assertStyleMatch(

src/components/icon-button/icon-button.stories.mdx

@@ -27,4 +27,4 @@ import IconButton from "carbon-react/lib/components/icon-button";
 
 ### Icon Button 
 
-<Props of={IconButton} />
+<StyledSystemProps of={IconButton} noHeader margin />

src/components/icon-button/icon-button.style.js

@@ -1,9 +1,11 @@
 import styled, { css } from "styled-components";
+import { margin } from "styled-system";
 import StyledIcon from "../icon/icon.style";
 import { baseTheme } from "../../style/themes";
 
 const StyledIconButton = styled.button.attrs({ type: "button" })`
   ${({ theme, disabled }) => css`
+    ${margin}
     background: transparent;
     border: none;
     padding: 0;