diff --git a/src/components/accordion/accordion-group.component.js b/src/components/accordion/accordion-group.component.js
index 27dfb73e11..3bc6c1bb33 100644
--- a/src/components/accordion/accordion-group.component.js
+++ b/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];
diff --git a/src/components/button-toggle-group/button-toggle-group.component.js b/src/components/button-toggle-group/button-toggle-group.component.js
index 4ccd5ad722..aff6894794 100644
--- a/src/components/button-toggle-group/button-toggle-group.component.js
+++ b/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 = {
diff --git a/src/components/button-toggle-group/button-toggle-group.spec.js b/src/components/button-toggle-group/button-toggle-group.spec.js
index e2d24f0546..b4fbd3b5e0 100644
--- a/src/components/button-toggle-group/button-toggle-group.spec.js
+++ b/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) => (
+
+
+ Foo
+
+
+ Bar
+
+
+ ),
+ undefined,
+ (component) => component.find(FormFieldStyle),
+ { modifier: "&&&" }
+ );
+
describe("validations", () => {
const validationTypes = ["error", "warning", "info"];
describe.each(validationTypes)(
diff --git a/src/components/button-toggle-group/button-toggle-group.stories.mdx b/src/components/button-toggle-group/button-toggle-group.stories.mdx
index 4ce6409a93..454f71d8e3 100644
--- a/src/components/button-toggle-group/button-toggle-group.stories.mdx
+++ b/src/components/button-toggle-group/button-toggle-group.stories.mdx
@@ -1,8 +1,10 @@
-import { useState } from 'react';
-import { Meta, Story, Preview, Props} from '@storybook/addon-docs/blocks';
-import { action } from '@storybook/addon-actions';
-import ButtonToggle from '../button-toggle';
-import ButtonToggleGroup from './button-toggle-group.component';
+import { useState } from "react";
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { action } from "@storybook/addon-actions";
+
+import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
+import ButtonToggle from "../button-toggle";
+import ButtonToggleGroup from "./button-toggle-group.component";
@@ -11,49 +13,49 @@ import ButtonToggleGroup from './button-toggle-group.component';
Press one of the buttons to make selection. ButtonToggleGroup component should be used when user has to make a choice between a small number of options.
## Contents
+
- [Quick Start](#quick-start)
- [Designer Notes](#designer-notes)
- [Examples](#examples)
- [Props](#props)
-## Quick Start
+## Quick Start
To use the `ButtonToggleGroup` component you have to import two components: `` and ``:
```javascript
-import ButtonToggle from 'carbon-react/lib/components/button-toggle';
-import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
+import ButtonToggle from "carbon-react/lib/components/button-toggle";
+import ButtonToggleGroup from "carbon-react/lib/components/button-toggle-group";
```
## Designer Notes
+
- Always insert `ButtonToggle` Components inside the `ButtonToggleGroup`.
- An icon could be added to make the meaning of an option clearer.
## Examples
+
### Default
-
+
- Foo
- Bar
- Baz
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
@@ -61,35 +63,32 @@ import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
### Controlled
-
+
{() => {
- const [value, setValue] = useState('bar');
+ const [value, setValue] = useState("bar");
function onChangeHandler(event) {
setValue(event.target.value);
- action('value set');
- };
+ action("value set");
+ }
return (
- Foo
- Bar
- Baz
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
);
}}
@@ -99,30 +98,24 @@ import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
### Grouped
-
+
{} }
+ id="button-toggle-group-grouped-id"
+ name="button-toggle-group-grouped"
+ label="Grouped example"
+ labelHelp="help message"
+ fieldHelp="field help mesage"
+ onChange={() => {}}
>
- Foo
- Bar
- Baz
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
@@ -130,28 +123,25 @@ import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
### With field help inline
-
+
{} }
+ onChange={() => {}}
>
- Foo
- Bar
- Baz
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
@@ -159,28 +149,25 @@ import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
### With label inline
-
+
{} }
+ onChange={() => {}}
>
- Foo
- Bar
- Baz
+
+ Foo
+
+
+ Bar
+
+
+ Baz
+
@@ -189,7 +176,7 @@ import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
### Props of the ButtonToggleGroup
-
+
### Props of the ButtonToggle
diff --git a/src/components/duelling-picklist/duelling-picklist.component.js b/src/components/duelling-picklist/duelling-picklist.component.js
index b7ed5468fa..5d56468ceb 100644
--- a/src/components/duelling-picklist/duelling-picklist.component.js
+++ b/src/components/duelling-picklist/duelling-picklist.component.js
@@ -12,7 +12,9 @@ import {
StyledControl,
} from "./duelling-picklist.style";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes);
+const marginPropTypes = filterStyledSystemMarginProps(
+ styledSystemPropTypes.space
+);
const DuellingPicklist = ({
children,