From 510a64392403d0e4fa6706465478bcd3bbde21ac Mon Sep 17 00:00:00 2001 From: mkrds Date: Fri, 30 Apr 2021 14:57:57 +0200 Subject: [PATCH 1/2] feat(button-toggle-group): add styled-system props --- .../accordion/accordion-group.component.js | 6 +- .../button-toggle-group.component.js | 10 +- .../button-toggle-group.spec.js | 26 ++- .../button-toggle-group.stories.mdx | 209 ++++++++---------- .../duelling-picklist.component.js | 4 +- 5 files changed, 138 insertions(+), 117 deletions(-) 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, From 19a0d0abd7132d30b8ab44581a489ff19d6ac02b Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Wed, 12 May 2021 19:34:53 +0000 Subject: [PATCH 2/2] chore(release): 73.2.0 ## [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)) --- CHANGELOG.md | 7 +++++++ package-lock.json | 2 +- package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f314195e6..5f7aad559c 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package-lock.json b/package-lock.json index 466bfdc1fa..df3a599948 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "carbon-react", - "version": "73.1.0", + "version": "73.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1a9e47a659..c104c21e6b 100644 --- a/package.json +++ b/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": {