Add border radius to button group

src/components/ButtonGroup/index.d.ts

@@ -4,6 +4,7 @@ import { BaseProps } from '../types';
 export interface ButtonGroupProps extends BaseProps {
     children?: ReactNode;
     variant?: 'default' | 'shaded';
+    borderRadius?: 'square' | 'semi-rounded' | 'rounded';
 }
 
 export default function(props: ButtonGroupProps): JSX.Element | null;

src/components/ButtonGroup/index.js

@@ -6,10 +6,16 @@ import StyledContainer from './styled/container';
  * Button groups are used to bunch together buttons with similar actions
  */
 export default function ButtonGroup(props) {
-    const { className, style, children, variant } = props;
+    const { className, style, children, variant, borderRadius } = props;
 
     return (
-        <StyledContainer className={className} style={style} role="group" variant={variant}>
+        <StyledContainer
+            className={className}
+            style={style}
+            role="group"
+            variant={variant}
+            borderRadius={borderRadius}
+        >
             {children}
         </StyledContainer>
     );
@@ -26,11 +32,14 @@ ButtonGroup.propTypes = {
     /** The variant changes the appearance of the ButtonGroup. Accepted variants include default,
      * and shaded. This value defaults to default. */
     variant: PropTypes.oneOf(['default', 'shaded']),
+    /** The border radius of the button. Valid values are square, semi-rounded and rounded. This value defaults to rounded. */
+    borderRadius: PropTypes.oneOf(['square', 'semi-rounded', 'rounded']),
 };
 
 ButtonGroup.defaultProps = {
     children: null,
     className: undefined,
     style: undefined,
     variant: 'default',
+    borderRadius: 'rounded',
 };

src/components/ButtonGroup/readme.md

@@ -336,3 +336,68 @@ import { ButtonGroup, Button } from 'react-rainbow-components';
         </ButtonGroup>
     </div>
 ```
+
+##### button group with different border radius
+
+```js
+import React from 'react';
+import { ButtonGroup, Button } from 'react-rainbow-components';
+import styled from 'styled-components';
+
+const HeadingContent = styled.div`
+    @media (max-width: 991px) {
+        flex-direction: column;
+        :nth-child(1) { text-align: center; }
+    }
+    flex-direction: column;
+`;
+
+const SubTitle = styled.span.attrs(props => {
+   return props.theme.rainbow.palette;
+})`
+    color: ${props => props.text.header};
+`;
+
+const Container = styled.div`
+    max-width: 780px;
+    margin: auto;
+`;
+
+    const ButtonGroupExample = () => {
+        return (
+            <Container>
+                <HeadingContent className="rainbow-p-top_large rainbow-align-content_space-between rainbow-m-horizontal_medium rainbow-flex">
+                    <div className="rainbow-m-bottom_medium">
+                        <SubTitle>Button group with border radius square.</SubTitle>
+                    </div>
+                    <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="square">
+                        <Button label="New" variant="neutral" />
+                        <Button label="Edit" variant="neutral" />
+                        <Button label="Remove" variant="neutral" />
+                    </ButtonGroup>
+
+                    <div className="rainbow-m-bottom_medium">
+                        <SubTitle>Button group with border radius semi-rounded.</SubTitle>
+                    </div>
+
+                    <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="semi-rounded">
+                        <Button label="New" variant="neutral" />
+                        <Button label="Edit" variant="neutral" />
+                        <Button label="Remove" variant="neutral" />
+                    </ButtonGroup>
+                    <div className="rainbow-m-bottom_medium">
+                        <SubTitle>Button group with border radius rounded.</SubTitle>
+                    </div>
+
+                    <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="rounded">
+                        <Button label="New" variant="neutral" />
+                        <Button label="Edit" variant="neutral" />
+                        <Button label="Remove" variant="neutral" />
+                    </ButtonGroup>
+                </HeadingContent>
+            </Container>
+        );
+    };
+
+        <ButtonGroupExample />;
+```

src/components/ButtonGroup/styled/container.js

@@ -1,6 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
+import { BORDER_RADIUS_SQUARE, BORDER_RADIUS_SEMI_ROUNDED } from '../../../styles/borderRadius';
 
 const StyledContainer = attachThemeAttrs(styled.div)`
     display: inline-flex;
@@ -61,6 +62,31 @@ const StyledContainer = attachThemeAttrs(styled.div)`
             }
         }
     `}
+
+    ${props =>
+        props.borderRadius === 'square' &&
+        `
+            border-radius: ${BORDER_RADIUS_SQUARE};
+            > button:first-child {
+                border-radius: ${BORDER_RADIUS_SQUARE} 0 0 ${BORDER_RADIUS_SQUARE};
+            };
+            > button:last-child {
+                border-radius: 0 ${BORDER_RADIUS_SQUARE} ${BORDER_RADIUS_SQUARE} 0;
+            };
+        `};
+
+    ${props =>
+        props.borderRadius === 'semi-rounded' &&
+        `
+            border-radius: ${BORDER_RADIUS_SEMI_ROUNDED};
+            > button:first-child {
+                border-radius: ${BORDER_RADIUS_SEMI_ROUNDED} 0 0 ${BORDER_RADIUS_SEMI_ROUNDED};
+            };
+            > button:last-child {
+                border-radius: 0 ${BORDER_RADIUS_SEMI_ROUNDED} ${BORDER_RADIUS_SEMI_ROUNDED} 0;
+            };
+        `};
+
 `;
 
 export default StyledContainer;