+
);
},
{
info: {
text: `
- When an action required by the user has more than one option, always use a a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
+ When an action required by the user has more than one option, always use a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
`,
},
}
diff --git a/packages/react/src/components/ButtonSet/ButtonSet-test.js b/packages/react/src/components/ButtonSet/ButtonSet-test.js
new file mode 100644
index 000000000000..80f75bbebce0
--- /dev/null
+++ b/packages/react/src/components/ButtonSet/ButtonSet-test.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ButtonSet from '../ButtonSet';
+import { shallow } from 'enzyme';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
+
+describe('ButtonSet', () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow();
+ });
+
+ it('should render empty set as expected', () => {
+ expect(wrapper.find('.child').length).toBe(0);
+ });
+
+ it('should render nonempty set as expected', () => {
+ wrapper = shallow(
+
+
+
+
+ );
+ expect(wrapper.find('.test-child').length).toBe(2);
+ });
+
+ it('should render wrapper as expected', () => {
+ expect(wrapper.length).toBe(1);
+ });
+
+ it('should have the expected classes in a horizontal set', () => {
+ expect(wrapper.hasClass(`${prefix}--btn-set`)).toEqual(true);
+ });
+
+ it('should have the expected classes in a vertical set', () => {
+ wrapper.setProps({ stacked: true });
+ expect(wrapper.hasClass(`${prefix}--btn-set`)).toEqual(true);
+ expect(wrapper.hasClass(`${prefix}--btn-set--stacked`)).toEqual(true);
+ });
+});
diff --git a/packages/react/src/components/ButtonSet/ButtonSet.js b/packages/react/src/components/ButtonSet/ButtonSet.js
new file mode 100644
index 000000000000..38b671dfc8e3
--- /dev/null
+++ b/packages/react/src/components/ButtonSet/ButtonSet.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { settings } from 'carbon-components';
+
+const { prefix } = settings;
+const ButtonSet = React.forwardRef(function ButtonSet(
+ { children, className, stacked, ...rest },
+ ref
+) {
+ const buttonSetClasses = classNames(className, `${prefix}--btn-set`, {
+ [`${prefix}--btn-set--stacked`]: stacked,
+ });
+ return (
+
+ {children}
+
+ );
+});
+
+ButtonSet.displayName = 'ButtonSet';
+ButtonSet.propTypes = {
+ /**
+ * Specify the content of your ButtonSet
+ */
+ children: PropTypes.node,
+
+ /**
+ * Specify an optional className to be added to your ButtonSet
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify the button arrangement of the set (vertically stacked or
+ * horizontal)
+ */
+ stacked: PropTypes.bool,
+};
+
+export default ButtonSet;
diff --git a/packages/react/src/components/ButtonSet/index.js b/packages/react/src/components/ButtonSet/index.js
new file mode 100644
index 000000000000..c25ef0671462
--- /dev/null
+++ b/packages/react/src/components/ButtonSet/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export default from './ButtonSet';
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
index d8015bed3c69..cc4bd48aac52 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -8,6 +8,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Button from '../Button';
+import ButtonSet from '../ButtonSet';
import classNames from 'classnames';
import { settings } from 'carbon-components';
import { Close20 } from '@carbon/icons-react';
@@ -575,7 +576,7 @@ export class ModalFooter extends Component {
});
return (
-
+
{secondaryButtonText && (
);
}
}
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
index 8c8768f00194..2fff9277ae19 100644
--- a/packages/react/src/components/Modal/Modal.js
+++ b/packages/react/src/components/Modal/Modal.js
@@ -12,6 +12,7 @@ import { settings } from 'carbon-components';
import { Close20 } from '@carbon/icons-react';
import toggleClass from '../../tools/toggleClass';
import Button from '../Button';
+import ButtonSet from '../ButtonSet';
import deprecate from '../../prop-types/deprecate';
import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
import wrapFocus, {
@@ -419,7 +420,7 @@ export default class Modal extends Component {
)}
{!passiveModal && (
-