Merge pull request #3973 from Sage/FE-3533-button-toggle-group-styled…

…-system feat(button-toggle-group): add styled-system props - FE-3533
Sage · May 12, 2021 · 1d5a235 · 1d5a235
2 parents 6e0b1d3 + 0da4e4f
commit 1d5a235
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 117 deletions.
diff --git 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
@@ -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
@@ -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)(

diff --git 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";
 
 <Meta title="Button Toggle Group" />
 
@@ -11,85 +13,82 @@ 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: `<ButtonToggleGroup />` and `<ButtonToggle />`:
 
 ```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
 
 <Preview>
-  <Story name='default' parameters={{ info: { disable: true }}} >
+  <Story name="default" parameters={{ info: { disable: true } }}>
     <ButtonToggleGroup
-      id='button-toggle-group-default-id'
-      name='button-toggle-group-default'
-      label='Default example'
-      labelHelp='help message'
-      fieldHelp='field help message'
-      onChange={ action('onChange') }
+      id="button-toggle-group-default-id"
+      name="button-toggle-group-default"
+      label="Default example"
+      labelHelp="help message"
+      fieldHelp="field help message"
+      onChange={action("onChange")}
     >
-      <ButtonToggle
-        key='foo'
-        value='foo'
-      >Foo</ButtonToggle>
-      <ButtonToggle
-        key='bar'
-        value='bar'
-      >Bar</ButtonToggle>
-      <ButtonToggle
-        key='baz'
-        value='baz'
-      >Baz</ButtonToggle>
+      <ButtonToggle key="foo" value="foo">
+        Foo
+      </ButtonToggle>
+      <ButtonToggle key="bar" value="bar">
+        Bar
+      </ButtonToggle>
+      <ButtonToggle key="baz" value="baz">
+        Baz
+      </ButtonToggle>
     </ButtonToggleGroup>
   </Story>
 </Preview>
 
 ### Controlled
 
 <Preview>
-  <Story name="controlled" parameters={{ info: { disable: true }}} >
+  <Story name="controlled" parameters={{ info: { disable: true } }}>
     {() => {
-      const [value, setValue] = useState('bar');
+      const [value, setValue] = useState("bar");
       function onChangeHandler(event) {
         setValue(event.target.value);
-        action('value set');
-      };
+        action("value set");
+      }
       return (
         <ButtonToggleGroup
-          id='button-toggle-group-controlled-id'
-          name='button-toggle-group-controlled'
-          label='Controlled example'
-          labelHelp='help message'
-          fieldHelp='field help mesage'
-          onChange={ onChangeHandler }
-          value={ value }
+          id="button-toggle-group-controlled-id"
+          name="button-toggle-group-controlled"
+          label="Controlled example"
+          labelHelp="help message"
+          fieldHelp="field help mesage"
+          onChange={onChangeHandler}
+          value={value}
         >
-          <ButtonToggle
-            key='foo'
-            value='foo'
-          >Foo</ButtonToggle>
-          <ButtonToggle
-            key='bar'
-            value='bar'
-          >Bar</ButtonToggle>
-          <ButtonToggle
-            key='baz'
-            value='baz'
-          >Baz</ButtonToggle>
+          <ButtonToggle key="foo" value="foo">
+            Foo
+          </ButtonToggle>
+          <ButtonToggle key="bar" value="bar">
+            Bar
+          </ButtonToggle>
+          <ButtonToggle key="baz" value="baz">
+            Baz
+          </ButtonToggle>
         </ButtonToggleGroup>
       );
     }}
@@ -99,88 +98,76 @@ import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
 ### Grouped
 
 <Preview>
-  <Story name='grouped' parameters={{ info: { disable: true }}} >
+  <Story name="grouped" parameters={{ info: { disable: true } }}>
     <ButtonToggleGroup
-      id='button-toggle-group-grouped-id'
-      name='button-toggle-group-grouped'
-      label='Grouped example'
-      labelHelp='help message'
-      fieldHelp='field help mesage'
-      onChange={ () => {} }
+      id="button-toggle-group-grouped-id"
+      name="button-toggle-group-grouped"
+      label="Grouped example"
+      labelHelp="help message"
+      fieldHelp="field help mesage"
+      onChange={() => {}}
     >
-      <ButtonToggle
-        key='foo'
-        value='foo'
-        grouped
-      >Foo</ButtonToggle>
-      <ButtonToggle
-        key='bar'
-        value='bar'
-        grouped
-      >Bar</ButtonToggle>
-      <ButtonToggle
-        key='baz'
-        value='baz'
-        grouped
-      >Baz</ButtonToggle>
+      <ButtonToggle key="foo" value="foo" grouped>
+        Foo
+      </ButtonToggle>
+      <ButtonToggle key="bar" value="bar" grouped>
+        Bar
+      </ButtonToggle>
+      <ButtonToggle key="baz" value="baz" grouped>
+        Baz
+      </ButtonToggle>
     </ButtonToggleGroup>
   </Story>
 </Preview>
 
 ### With field help inline
 
 <Preview>
-  <Story name='fieldhelp inline' parameters={{ info: { disable: true }}} >
+  <Story name="fieldhelp inline" parameters={{ info: { disable: true } }}>
     <ButtonToggleGroup
-      id='button-toggle-group-help-inline-id'
-      name='button-toggle-group-help-inline'
-      label='FieldHelp inline example'
-      labelHelp='help message'
-      fieldHelp='field help mesage'
+      id="button-toggle-group-help-inline-id"
+      name="button-toggle-group-help-inline"
+      label="FieldHelp inline example"
+      labelHelp="help message"
+      fieldHelp="field help mesage"
       fieldHelpInline
-      onChange={ () => {} }
+      onChange={() => {}}
     >
-      <ButtonToggle
-        key='foo'
-        value='foo'
-      >Foo</ButtonToggle>
-      <ButtonToggle
-        key='bar'
-        value='bar'
-      >Bar</ButtonToggle>
-      <ButtonToggle
-        key='baz'
-        value='baz'
-      >Baz</ButtonToggle>
+      <ButtonToggle key="foo" value="foo">
+        Foo
+      </ButtonToggle>
+      <ButtonToggle key="bar" value="bar">
+        Bar
+      </ButtonToggle>
+      <ButtonToggle key="baz" value="baz">
+        Baz
+      </ButtonToggle>
     </ButtonToggleGroup>
   </Story>
 </Preview>
 
 ### With label inline
 
 <Preview>
-  <Story name='label inline' parameters={{ info: { disable: true }}} >
+  <Story name="label inline" parameters={{ info: { disable: true } }}>
     <ButtonToggleGroup
-      id='button-toggle-group-label-inline-id'
-      name='button-toggle-group-label-inline'
-      label='Label inline example'
-      labelHelp='help message'
-      fieldHelp='field help mesage'
+      id="button-toggle-group-label-inline-id"
+      name="button-toggle-group-label-inline"
+      label="Label inline example"
+      labelHelp="help message"
+      fieldHelp="field help mesage"
       labelInline
-      onChange={ () => {} }
+      onChange={() => {}}
     >
-      <ButtonToggle
-        key='foo'
-        value='foo'
-      >Foo</ButtonToggle>
-      <ButtonToggle
-        key='bar'
-        value='bar'
-      >Bar</ButtonToggle>
-      <ButtonToggle
-        key='baz'
-        value='baz'
-      >Baz</ButtonToggle>
+      <ButtonToggle key="foo" value="foo">
+        Foo
+      </ButtonToggle>
+      <ButtonToggle key="bar" value="bar">
+        Bar
+      </ButtonToggle>
+      <ButtonToggle key="baz" value="baz">
+        Baz
+      </ButtonToggle>
     </ButtonToggleGroup>
   </Story>
 </Preview>
@@ -189,7 +176,7 @@ import ButtonToggleGroup from 'carbon-react/lib/components/button-toggle-group';
 
 ### Props of the ButtonToggleGroup
 
-<Props of={ButtonToggleGroup} />
+<StyledSystemProps of={ButtonToggleGroup} margin noHeader />
 
 ### Props of the ButtonToggle