Merge pull request #3951 from Sage/FE-3550-styled-system-icon

feat(icon): add support for styled-system margin interface FE-3550

src/components/accordion/accordion.spec.js

@@ -24,7 +24,6 @@ import {
 import AccordionGroup from "./accordion-group.component";
 import ValidationIcon from "../validations";
 import StyledValidationIcon from "../validations/validation-icon.style";
-import StyledIcon from "../icon/icon.style";
 
 const contentHeight = 200;
 
@@ -462,7 +461,9 @@ describe("Accordion", () => {
           {
             marginLeft: "8px",
           },
-          wrapper.find(StyledAccordionHeadingsContainer).find(StyledIcon)
+          wrapper
+            .find(StyledAccordionHeadingsContainer)
+            .find(StyledValidationIcon)
         );
       });
     });

src/components/help/help.component.js

@@ -1,30 +1,36 @@
 import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+
 import Icon from "../icon";
 import tagComponent from "../../utils/helpers/tags";
 import StyledHelp from "./help.style";
 import Events from "../../utils/helpers/events/events";
 import OptionsHelper from "../../utils/helpers/options-helper";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
-const Help = (props) => {
+const Help = ({
+  className,
+  href,
+  helpId,
+  children,
+  tabIndex,
+  as,
+  tooltipPosition,
+  isFocused,
+  type,
+  tooltipBgColor,
+  tooltipFontColor,
+  tooltipFlipOverrides,
+  ...rest
+}) => {
   const helpElement = useRef(null);
   const [isTooltipVisible, updateTooltipVisible] = useState(false);
 
-  const {
-    className,
-    href,
-    helpId,
-    children,
-    tabIndex,
-    as,
-    tooltipPosition,
-    isFocused,
-    type,
-    tooltipBgColor,
-    tooltipFontColor,
-    tooltipFlipOverrides,
-  } = props;
-
   useEffect(() => {
     document.addEventListener("keydown", handleKeyPress);
 
@@ -65,10 +71,11 @@ const Help = (props) => {
       onBlur={handleFocusBlur(false)}
       onMouseOver={handleFocusBlur(true)}
       onMouseLeave={handleFocusBlur(false)}
-      {...tagComponent("help", props)}
+      {...tagComponent("help", rest)}
       tabIndex={tabIndex}
       value={children}
       aria-label={children}
+      {...filterStyledSystemMarginProps(rest)}
     >
       <Icon
         type={type}
@@ -84,6 +91,7 @@ const Help = (props) => {
 };
 
 Help.propTypes = {
+  ...marginPropTypes,
   /** [Legacy] A custom class name for the component. */
   className: PropTypes.string,
   /** Message to display in tooltip */

src/components/help/help.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { IconTypes, Positions } from "../../utils/helpers/options-helper/options-helper";
+import { MarginSpacingProps } from "../../utils/helpers/options-helper";
 
-export interface HelpProps {
+export interface HelpProps extends MarginSpacingProps {
   className?: string;
   children?: string;
   helpId?: string;

src/components/help/help.spec.js

@@ -6,12 +6,15 @@ import Help from "./help.component";
 import { rootTagTest } from "../../utils/helpers/tags/tags-specs";
 import StyledHelp from "./help.style";
 import Tooltip from "../tooltip";
+import { testStyledSystemMargin } from "../../__spec_helper__/test-utils";
 
 jest.mock("@tippyjs/react/headless");
 
 describe("Help", () => {
   let wrapper;
 
+  testStyledSystemMargin((props) => <Help {...props} />);
+
   describe("when custom classes are passed", () => {
     it("adds the custom classes", () => {
       wrapper = renderHelp({ className: "fancy-pants" });

src/components/help/help.stories.mdx

@@ -1,4 +1,5 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import StyledSystemProps from '../../../.storybook/utils/styled-system-props';
 import Help from '.';
 
 <Meta title="Help" parameters={{ info: { disable: true }}} />
@@ -101,4 +102,4 @@ Using the `href` prop, a link can be specified.
 ## Props
 
 ### Help
-<Props of={Help} />
+<StyledSystemProps of={Help} noHeader margin/>

src/components/help/help.style.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { margin } from "styled-system";
 import baseTheme from "../../style/themes/base";
 import StyledIcon from "../icon/icon.style";
 
@@ -31,6 +32,8 @@ const StyledHelp = styled.div`
   &:focus ${StyledIcon} {
     outline: ${({ theme }) => `2px solid ${theme.colors.focus}`};
   }
+
+  ${margin}
 `;
 
 StyledHelp.defaultProps = {

src/components/icon/icon.component.js

@@ -1,8 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 import tagComponent from "../../utils/helpers/tags";
 import StyledIcon from "./icon.style";
 import Tooltip from "../tooltip";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const Icon = React.forwardRef(
   (
@@ -17,8 +23,6 @@ const Icon = React.forwardRef(
       fontSize,
       iconColor,
       type,
-      ml,
-      mr,
       tooltipMessage,
       tooltipPosition,
       tooltipVisible,
@@ -61,10 +65,9 @@ const Icon = React.forwardRef(
       disabled,
       fontSize,
       iconColor,
-      mr,
-      ml,
       tabIndex,
       type: iconType(),
+      ...filterStyledSystemMarginProps(rest),
     };
 
     const icon = (
@@ -105,6 +108,7 @@ const Icon = React.forwardRef(
 const placements = ["top", "bottom", "left", "right"];
 
 Icon.propTypes = {
+  ...marginPropTypes,
   /**
    * @private
    * @ignore
@@ -141,10 +145,6 @@ Icon.propTypes = {
   bg: PropTypes.string,
   /** Sets the icon in the disabled state */
   disabled: PropTypes.bool,
-  /** Margin right, given number will be multiplied by base spacing unit (8) */
-  mr: PropTypes.number,
-  /** Margin left, given number will be multiplied by base spacing unit (8) */
-  ml: PropTypes.number,
   /** Aria label for accessibility purposes */
   ariaLabel: PropTypes.string,
   /** The message string to be displayed in the tooltip */

src/components/icon/icon.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Positions } from "../../utils/helpers/options-helper";
-export interface IconProps {
+import { MarginSpacingProps } from "../../utils/helpers/options-helper";
+export interface IconProps extends MarginSpacingProps {
   /** Icon type */
   type: string;
   /** Background size */
@@ -19,10 +20,6 @@ export interface IconProps {
   bg?: string;
   /** Sets the icon in the disabled state */
   disabled?: boolean;
-  /** Margin right, given number will be multiplied by base spacing unit (8) */
-  mr?: number;
-  /** Margin left, given number will be multiplied by base spacing unit (8) */
-  ml?: number;
   /** Aria label for accessibility purposes */
   ariaLabel?: string;
   /** The message string to be displayed in the tooltip */

src/components/icon/icon.spec.js

@@ -4,7 +4,10 @@ import { mount, shallow } from "enzyme";
 import { shade } from "polished";
 
 import { rootTagTest } from "../../utils/helpers/tags/tags-specs/tags-specs";
-import { assertStyleMatch } from "../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../__spec_helper__/test-utils";
 import Icon from "./icon.component";
 import StyledIcon from "./icon.style";
 import OptionsHelper from "../../utils/helpers/options-helper";
@@ -28,6 +31,8 @@ function renderStyles(props) {
 }
 
 describe("Icon component", () => {
+  testStyledSystemMargin((props) => <Icon type="add" {...props} />);
+
   const mismatchedPairs = [
     { prop: "help", rendersAs: "question" },
     { prop: "maintenance", rendersAs: "settings" },
@@ -333,32 +338,6 @@ describe("Icon component", () => {
     });
   });
 
-  describe("spacing props", () => {
-    describe("when mr prop is passed", () => {
-      it("renders with proper margin-right style", () => {
-        const wrapper = renderStyles({ mr: 2 });
-        assertStyleMatch(
-          {
-            marginRight: "16px",
-          },
-          wrapper.toJSON()
-        );
-      });
-    });
-
-    describe("when ml prop is passed", () => {
-      it("renders with proper margin-left style", () => {
-        const wrapper = renderStyles({ ml: 2 });
-        assertStyleMatch(
-          {
-            marginLeft: "16px",
-          },
-          wrapper.toJSON()
-        );
-      });
-    });
-  });
-
   describe("background color", () => {
     describe("when disabled", () => {
       it("renders backgroundColor in a proper color", () => {

src/components/icon/icon.stories.mdx

@@ -1,5 +1,6 @@
-import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
 import LinkTo from "@storybook/addon-links/react";
+import StyledSystemProps from '../../../.storybook/utils/styled-system-props';
 
 import Icon from "./";
 import Box from "../box";
@@ -156,4 +157,4 @@ See <LinkTo kind='Documentation/Colors' name="page">Colors</LinkTo> for more inf
 ## Props
 
 ### Icon
-<Props of={Icon} />
+<StyledSystemProps of={Icon} noHeader margin />

src/components/icon/icon.style.js

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import { shade } from "polished";
+import { margin } from "styled-system";
 
 import iconUnicodes from "./icon-unicodes";
 import baseTheme from "../../style/themes/base";
@@ -100,8 +101,6 @@ const StyledIcon = styled.span`
     type,
     fontSize,
     disabled,
-    mr,
-    ml,
   }) => {
     let finalColor;
     let finalHoverColor;
@@ -185,14 +184,7 @@ const StyledIcon = styled.span`
         display: block;
       }
 
-      ${ml &&
-      css`
-        margin-left: ${ml * theme.spacing}px;
-      `};
-      ${mr &&
-      css`
-        margin-right: ${mr * theme.spacing}px;
-      `};
+      ${margin}
     `;
   }}
 `;

src/components/portal/__snapshots__/portal.spec.js.snap

@@ -30,4 +30,4 @@ exports[`Portal when using default node to match snapshot  1`] = `
 </span>
 `;
 
-exports[`Portal when using default node when an element with id 'root' does not exist will mount on body 1`] = `"<div id=\\"root\\"><div class=\\"carbon-portal\\" data-portal-exit=\\"guid-12345\\"><span class=\\"sc-bdVaJa hItwjy\\" data-element=\\"tick\\" data-component=\\"icon\\" font-size=\\"small\\" type=\\"tick\\"></span></div></div>"`;
+exports[`Portal when using default node when an element with id 'root' does not exist will mount on body 1`] = `"<div id=\\"root\\"><div class=\\"carbon-portal\\" data-portal-exit=\\"guid-12345\\"><span class=\\"sc-bdVaJa jyaunv\\" data-element=\\"tick\\" data-component=\\"icon\\" font-size=\\"small\\" type=\\"tick\\"></span></div></div>"`;

src/components/validations/validation-icon.component.js

@@ -1,5 +1,6 @@
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
 
 import Icon from "../icon";
 import ValidationIconStyle from "./validation-icon.style";
@@ -8,6 +9,11 @@ import {
   InputGroupContext,
 } from "../../__internal__/input-behaviour";
 import OptionsHelper from "../../utils/helpers/options-helper/options-helper";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const getValidationType = ({ error, warning, info }) => {
   if (error) return "error";
@@ -27,8 +33,7 @@ const ValidationIcon = ({
   onClick,
   tooltipPosition,
   tooltipFlipOverrides,
-  ml,
-  mr,
+  ...rest
 }) => {
   const { hasFocus, hasMouseOver } = useContext(InputContext);
   const {
@@ -56,6 +61,7 @@ const ValidationIcon = ({
       onMouseLeave={() => setTriggeredByIcon(false)}
       onFocus={() => setTriggeredByIcon(true)}
       onBlur={() => setTriggeredByIcon(false)}
+      {...filterStyledSystemMarginProps(rest)}
     >
       <Icon
         key={`${validationType}-icon`}
@@ -77,14 +83,13 @@ const ValidationIcon = ({
         }
         isPartOfInput={isPartOfInput}
         inputSize={size}
-        ml={ml}
-        mr={mr}
       />
     </ValidationIconStyle>
   );
 };
 
 ValidationIcon.propTypes = {
+  ...marginPropTypes,
   /** A small string to indicate the size of the icon */
   size: PropTypes.oneOf(OptionsHelper.sizesRestricted),
   /** The unique id of the component (used with aria-describedby for accessibility) */
@@ -119,10 +124,6 @@ ValidationIcon.propTypes = {
   warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Status of info */
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /** Margin right, given number will be multiplied by base spacing unit (8) */
-  mr: PropTypes.number,
-  /** Margin left, given number will be multiplied by base spacing unit (8) */
-  ml: PropTypes.number,
 };
 
 ValidationIcon.defaultProps = {