feat: add border radius radius prop to button icon (#2496)

* feat: add borderRadius prop to ButtonIcon component * feat: add borderRadius prop to ButtonIcon component * add type to index.d.ts Co-authored-by: Adrian Estevez <[email protected]> Co-authored-by: Jose Leandro Torres <[email protected]>
nexxtway · Oct 25, 2022 · d72f26a · d72f26a
1 parent 15cca49
commit d72f26a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 4 deletions.
diff --git a/src/components/Button/readme.md b/src/components/Button/readme.md
@@ -174,8 +174,8 @@ import React from 'react';
 import { Button } from 'react-rainbow-components';
 
     <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
-        <Button label="Button Square" variant="brand" className="rainbow-m-around_medium" borderRadius='square'/>
-        <Button label="Button Semi Rounded" variant="brand" className="rainbow-m-around_medium" borderRadius='semi-rounded'/>
-        <Button label="Button Rounded" variant="brand" className="rainbow-m-around_medium" borderRadius='rounded'/>
+        <Button label="Button Square" variant="brand" className="rainbow-m-around_medium" borderRadius="square"/>
+        <Button label="Button Semi Rounded" variant="brand" className="rainbow-m-around_medium" borderRadius="semi-rounded"/>
+        <Button label="Button Rounded" variant="brand" className="rainbow-m-around_medium" borderRadius="rounded"/>
     </div>
 ```
diff --git a/src/components/ButtonIcon/index.d.ts b/src/components/ButtonIcon/index.d.ts
@@ -25,6 +25,7 @@ export interface ButtonIconProps extends BaseProps {
     ariaPressed?: boolean;
     form?: string;
     id?: string;
+    borderRadius?: 'square' | 'semi-rounded' | 'rounded';
 }
 
 declare const ButtonIcon: ComponentType<ButtonIconProps>;

diff --git a/src/components/ButtonIcon/index.js b/src/components/ButtonIcon/index.js
@@ -61,6 +61,7 @@ const ButtonIcon = React.forwardRef((props, ref) => {
         variant,
         size,
         tooltip,
+        borderRadius,
     } = props;
     const {
         onMouseEnter,
@@ -119,6 +120,7 @@ const ButtonIcon = React.forwardRef((props, ref) => {
             onMouseLeave={handleMouseLeave}
             form={form}
             ref={buttonRef}
+            borderRadius={borderRadius}
         >
             {icon}
             <AssistiveText text={assistiveText} />
@@ -209,6 +211,8 @@ ButtonIcon.propTypes = {
     style: PropTypes.object,
     /** The id of the outer element. */
     id: PropTypes.string,
+    /** 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']),
 };
 
 ButtonIcon.defaultProps = {
@@ -237,6 +241,7 @@ ButtonIcon.defaultProps = {
     ariaControls: undefined,
     ariaExpanded: undefined,
     form: undefined,
+    borderRadius: 'rounded',
 };
 
 export default ButtonIcon;
diff --git a/src/components/ButtonIcon/readme.md b/src/components/ButtonIcon/readme.md
@@ -33,6 +33,28 @@ import { faStar } from '@fortawesome/free-regular-svg-icons';
     </div>
 ```
 
+# ButtonIcons with Border Radius
+##### ButtonIcons with different border radius.
+
+```js
+import React from 'react';
+import { ButtonIcon } from 'react-rainbow-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStar } from '@fortawesome/free-regular-svg-icons';
+
+    <div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
+        <div className="rainbow-p-right_large">
+            <ButtonIcon variant="neutral" borderRadius="square" icon={<FontAwesomeIcon icon={faStar} />} />
+        </div>
+        <div className="rainbow-p-right_large">
+            <ButtonIcon variant="neutral" borderRadius="semi-rounded" icon={<FontAwesomeIcon icon={faStar} />} />
+        </div>
+        <div className="rainbow-p-right_large">
+            <ButtonIcon variant="neutral" borderRadius="rounded" icon={<FontAwesomeIcon icon={faStar} />} />
+        </div>
+    </div>
+```
+
 # ButtonIcons with shaded variant
 ##### The appearance of a ButtonIcon can be changed by implementing the shaded variant, so the whole section will appear with a shadow around it.
 

diff --git a/src/components/ButtonIcon/styled/button.js b/src/components/ButtonIcon/styled/button.js
@@ -1,5 +1,9 @@
 import styled from 'styled-components';
-import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
+import {
+    BORDER_RADIUS_2,
+    BORDER_RADIUS_SQUARE,
+    BORDER_RADIUS_SEMI_ROUNDED,
+} from '../../../styles/borderRadius';
 import { COLOR_WHITE, COLOR_GRAY_3, COLOR_DARK_1 } from '../../../styles/colors';
 import { lighten, colorToRgba, replaceAlpha } from '../../../styles/helpers/color';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
@@ -397,6 +401,18 @@ const StyledButton = attachThemeAttrs(styled.button).attrs(props => {
                 font-size: 1rem !important;
             }
         `};
+
+    ${props =>
+        props.borderRadius === 'square' &&
+        `
+            border-radius: ${BORDER_RADIUS_SQUARE};
+        `};
+    
+    ${props =>
+        props.borderRadius === 'semi-rounded' &&
+        `
+            border-radius: ${BORDER_RADIUS_SEMI_ROUNDED};
+        `};
 `;
 
 export default StyledButton;