Merge branch 'master' into currencyinput-percentinput-numeric-keyboar…

…d-mobile
nexxtway · Nov 5, 2022 · 58dd012 · 58dd012
2 parents 63feb9c + 347eb51
commit 58dd012
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/src/components/Chip/index.js b/src/components/Chip/index.js
@@ -10,10 +10,16 @@ import StyledButtonIcon from './styled/buttonIcon';
  * A Chip displays a label that can be removed from view.
  */
 export default function Chip(props) {
-    const { label, onDelete, variant, title, className, style } = props;
+    const { label, onDelete, variant, title, className, style, borderRadius } = props;
 
     return (
-        <StyledContainer className={className} style={style} variant={variant} title={title}>
+        <StyledContainer
+            className={className}
+            style={style}
+            variant={variant}
+            title={title}
+            borderRadius={borderRadius}
+        >
             <TruncatedText>{label}</TruncatedText>
             <RenderIf isTrue={onDelete}>
                 <StyledButtonIcon
@@ -51,6 +57,8 @@ Chip.propTypes = {
     className: PropTypes.string,
     /** An object with custom style applied to the outer element. */
     style: PropTypes.object,
+    /** The border radius of the Chip. Options include square, semi-rounded and rounded. */
+    borderRadius: PropTypes.oneOf(['square', 'semi-rounded', 'rounded']),
 };
 
 Chip.defaultProps = {
@@ -60,4 +68,5 @@ Chip.defaultProps = {
     onDelete: undefined,
     className: undefined,
     style: undefined,
+    borderRadius: 'rounded',
 };
diff --git a/src/components/Chip/readme.md b/src/components/Chip/readme.md
@@ -225,3 +225,19 @@ const Icon = styled.span.attrs(props => {
         />
     </div>
 ```
+
+
+##### Chip with different border radius
+
+```js
+import React from 'react';
+import { Chip } from 'react-rainbow-components';
+
+    <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
+        <Chip className="rainbow-m-around_medium" label="Border Radius square" variant="neutral" borderRadius="square"/>
+
+        <Chip className="rainbow-m-around_medium" label="Border Radius semi-rounded" variant="neutral" borderRadius="semi-rounded"/>
+
+        <Chip className="rainbow-m-around_medium" label="Border Radius semi-rounded" variant="neutral" borderRadius="rounded"/>
+    </div>
+```
diff --git a/src/components/Chip/styled/container.js b/src/components/Chip/styled/container.js
@@ -1,6 +1,10 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
-import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
+import {
+    BORDER_RADIUS_2,
+    BORDER_RADIUS_SQUARE,
+    BORDER_RADIUS_SEMI_ROUNDED,
+} from '../../../styles/borderRadius';
 import { PADDING_SMALL } from '../../../styles/paddings';
 import { FONT_SIZE_TEXT_MEDIUM } from '../../../styles/fontSizes';
 
@@ -43,6 +47,19 @@ const StyledContainer = attachThemeAttrs(styled.span)`
             border: 1px solid ${props.palette[props.variant].main};
             color: ${props.palette.getContrastText(props.palette[props.variant].main)};
         `};
+
+    ${props =>
+        props.borderRadius === 'square' &&
+        `
+            border-radius: ${BORDER_RADIUS_SQUARE};
+        `};
+    
+    ${props =>
+        props.borderRadius === 'semi-rounded' &&
+        `
+            border-radius: ${BORDER_RADIUS_SEMI_ROUNDED};
+        `};
+    
 `;
 
 export default StyledContainer;