Merge branch 'master' into FE-4025-dialog-text-wrap

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [73.2.0](https://github.com/Sage/carbon/compare/v73.1.0...v73.2.0) (2021-05-12)
+
+
+### Features
+
+* **button-toggle-group:** add styled-system props ([510a643](https://github.com/Sage/carbon/commit/510a64392403d0e4fa6706465478bcd3bbde21ac))
+
 ## [73.1.0](https://github.com/Sage/carbon/compare/v73.0.0...v73.1.0) (2021-05-12)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "73.1.0",
+  "version": "73.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {

src/components/accordion/accordion-group.component.js

@@ -6,7 +6,9 @@ import Events from "../../utils/helpers/events";
 import Accordion from "./accordion.component.js";
 import { StyledAccordionGroup } from "./accordion.style.js";
 
-const marginProps = filterStyledSystemMarginProps(styledSystemPropTypes);
+const marginProptypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const AccordionGroup = ({ children, ...rest }) => {
   const refs = useRef(
@@ -59,7 +61,7 @@ const AccordionGroup = ({ children, ...rest }) => {
 };
 
 AccordionGroup.propTypes = {
-  ...marginProps,
+  ...marginProptypes,
   children: (props, propName, componentName) => {
     let error;
     const prop = props[propName];

src/components/button-toggle-group/button-toggle-group.component.js

@@ -1,10 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+
 import FormField from "../../__experimental__/components/form-field";
 import ButtonToggleGroupStyle from "./button-toggle-group.style";
 import RadioButtonMapper from "../../__experimental__/components/radio-button/radio-button-mapper.component";
 import ValidationIcon from "../validations/validation-icon.component";
 import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+
+const marginPropTypes = filterStyledSystemMarginProps(
+  styledSystemPropTypes.space
+);
 
 const BaseButtonToggleGroup = (props) => {
   const {
@@ -57,6 +64,7 @@ const BaseButtonToggleGroup = (props) => {
 };
 
 BaseButtonToggleGroup.propTypes = {
+  ...marginPropTypes,
   /** Specifies the name prop to be applied to each button in the group */
   name: PropTypes.string.isRequired,
   /** Children to be rendered (ButtonToggle). */
@@ -99,8 +107,6 @@ BaseButtonToggleGroup.propTypes = {
   onBlur: PropTypes.func,
   /** The value of the Button Toggle Group */
   value: PropTypes.string,
-  /** Margin bottom, given number will be multiplied by base spacing unit (8) */
-  mb: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 7]),
 };
 
 BaseButtonToggleGroup.defaultProps = {

src/components/button-toggle-group/button-toggle-group.spec.js

@@ -5,7 +5,10 @@ import "jest-styled-components";
 import { ThemeProvider } from "styled-components";
 import guid from "../../utils/helpers/guid";
 import { baseTheme, mintTheme } from "../../style/themes";
-import { assertStyleMatch } from "../../__spec_helper__/test-utils";
+import {
+  assertStyleMatch,
+  testStyledSystemMargin,
+} from "../../__spec_helper__/test-utils";
 import { StyledButtonToggleLabel } from "../button-toggle/button-toggle.style";
 import StyledValidationIcon from "../validations/validation-icon.style";
 import ValidationIcon from "../validations";
@@ -14,6 +17,7 @@ import Label from "../../__experimental__/components/label";
 import ButtonToggleGroup from "./button-toggle-group.component";
 import ButtonToggle from "../button-toggle/button-toggle.component";
 import ButtonToggleGroupStyle from "./button-toggle-group.style";
+import FormFieldStyle from "../../__experimental__/components/form-field/form-field.style";
 import FormField from "../../__experimental__/components/form-field";
 
 jest.mock("../../utils/helpers/guid");
@@ -95,6 +99,26 @@ describe("ButtonToggleGroup", () => {
     });
   });
 
+  testStyledSystemMargin(
+    (props) => (
+      <ButtonToggleGroup
+        id="button-toggle-group-id"
+        name="button-toggle-group"
+        {...props}
+      >
+        <ButtonToggle id="foo" value="foo">
+          Foo
+        </ButtonToggle>
+        <ButtonToggle id="bar" value="bar">
+          Bar
+        </ButtonToggle>
+      </ButtonToggleGroup>
+    ),
+    undefined,
+    (component) => component.find(FormFieldStyle),
+    { modifier: "&&&" }
+  );
+
   describe("validations", () => {
     const validationTypes = ["error", "warning", "info"];
     describe.each(validationTypes)(