add inline option to ButtonGroup

textkernel · May 1, 2019 · ac94f14 · ac94f14
1 parent 3e14e29
commit ac94f14
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/src/components/ButtonGroup/ButtonGroup.js b/src/components/ButtonGroup/ButtonGroup.js
@@ -7,11 +7,11 @@ import { SIZES } from '../../constants';
 const { block, elem } = bem({
     name: 'ButtonGroup',
     classnames: styles,
-    propsToMods: ['size', 'isBlock']
+    propsToMods: ['size', 'isBlock', 'isInline']
 });
 
 const ButtonGroup = props => {
-    const { children, size, isBlock, ...rest } = props;
+    const { children, size, isBlock, isInline, ...rest } = props;
 
     return (
         <div {...rest} {...block(props)}>
@@ -31,15 +31,18 @@ ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = {
     /** The buttons in this group */
     children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    /** Whether or not to show block-level button group (full width) */
+    isBlock: PropTypes.bool,
+    /** Whether or not to show button group as inline element */
+    isInline: PropTypes.bool,
     /** The size of the buttons in the button group */
-    size: PropTypes.oneOf(SIZES),
-    /** whether or not to show block-level button group (full width) */
-    isBlock: PropTypes.bool
+    size: PropTypes.oneOf(SIZES)
 };
 
 ButtonGroup.defaultProps = {
     size: 'normal',
-    isBlock: false
+    isBlock: false,
+    isInline: false
 };
 
 export default ButtonGroup;
diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss
@@ -22,6 +22,10 @@
         width: 100%;
     }
 
+    &--isInline {
+        display: inline-flex;
+    }
+
     &__button--isBlock {
         flex-grow: 1;
     }

diff --git a/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.spec.js.snap b/src/components/ButtonGroup/__tests__/__snapshots__/ButtonGroup.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`<ButtonGroup> that renders a button should add classes when props are changed 1`] = `
 <ButtonGroup
   isBlock={true}
+  isInline={false}
   size="large"
 >
   <div
@@ -53,6 +54,7 @@ exports[`<ButtonGroup> that renders a button should add classes when props are c
 exports[`<ButtonGroup> that renders a button should render default button correctly 1`] = `
 <ButtonGroup
   isBlock={false}
+  isInline={false}
   size="normal"
 >
   <div

diff --git a/stories/ButtonGroup.js b/stories/ButtonGroup.js
@@ -7,7 +7,11 @@ import { SIZES } from '@textkernel/oneui/constants';
 storiesOf('ButtonGroup', module)
     .addDecorator(withKnobs)
     .add('ButtonGroup', () => (
-        <ButtonGroup isBlock={boolean('isBlock', false)} size={select('Size', SIZES, SIZES[1])}>
+        <ButtonGroup
+            isBlock={boolean('isBlock', false)}
+            isInline={boolean('isInline', false)}
+            size={select('Size', SIZES, SIZES[1])}
+        >
             <Button context="neutral">Some</Button>
             <Button context="neutral">Button</Button>
             <Button context="neutral">Group</Button>