feat: add borderRadius prop to ButtonMenu component (#2570)

Co-authored-by: Jose Leandro Torres <jtorressicilia@gmail.com>
nexxtway · Jan 9, 2023 · 1447e64 · 1447e64
1 parent 17b5541
commit 1447e64
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 2 deletions.
diff --git a/src/components/ButtonMenu/index.d.ts b/src/components/ButtonMenu/index.d.ts
@@ -20,6 +20,7 @@ export interface ButtonMenuProps extends BaseProps {
     onBlur?: (event: FocusEvent<HTMLElement>) => void;
     id?: string;
     label?: ReactNode;
+    borderRadius?: 'square' | 'semi-square' | 'semi-rounded' | 'rounded';
 }
 
 export default function(props: ButtonMenuProps): JSX.Element | null;
diff --git a/src/components/ButtonMenu/index.js b/src/components/ButtonMenu/index.js
@@ -121,6 +121,8 @@ ButtonMenu.propTypes = {
     style: PropTypes.object,
     /** The id of the outer element. */
     id: PropTypes.string,
+    /** The border radius of the button and dropdown. Valid values are square, 'semi-square', semi-rounded and rounded. This value defaults to rounded. */
+    borderRadius: PropTypes.oneOf(['square', 'semi-square', 'semi-rounded', 'rounded']),
 };
 
 ButtonMenu.defaultProps = {
@@ -144,4 +146,5 @@ ButtonMenu.defaultProps = {
     className: undefined,
     style: undefined,
     id: undefined,
+    borderRadius: 'rounded',
 };
diff --git a/src/components/ButtonMenu/readme.md b/src/components/ButtonMenu/readme.md
@@ -725,3 +725,69 @@ import { faCog } from '@fortawesome/free-solid-svg-icons';
         </GlobalHeader>
     </div>
 ```
+
+##### button menu with border radius
+
+```js
+import React from 'react';
+import { ButtonMenu, MenuItem } from 'react-rainbow-components';
+
+    <div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
+        <GlobalHeader className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large">
+            <ButtonMenu
+                menuAlignment="right"
+                menuSize="x-small"
+                className="rainbow-m-left_small"
+                buttonVariant="border"
+                label="Square"
+                borderRadius="square"
+
+            >
+                <MenuItem label="Menu Item One" />
+                <MenuItem label="Menu Item Two" />
+                <MenuItem label="Menu Item Three" />
+                <MenuItem label="Menu Item Four" />
+            </ButtonMenu>
+            <ButtonMenu
+                menuAlignment="right"
+                menuSize="x-small"
+                className="rainbow-m-left_small"
+                buttonVariant="border"
+                label="Semi Square"
+                borderRadius="semi-square"
+            >
+                <MenuItem label="Menu Item One" />
+                <MenuItem label="Menu Item Two" />
+                <MenuItem label="Menu Item Three" />
+                <MenuItem label="Menu Item Four" />
+            </ButtonMenu>
+            <ButtonMenu
+                menuAlignment="right"
+                menuSize="x-small"
+                className="rainbow-m-left_small"
+                buttonVariant="border"
+                label="Semi Rounded"
+                borderRadius="semi-rounded"
+            >
+                <MenuItem label="Menu Item One" />
+                <MenuItem label="Menu Item Two" />
+                <MenuItem label="Menu Item Three" />
+                <MenuItem label="Menu Item Four" />
+            </ButtonMenu>
+            <ButtonMenu
+                menuAlignment="right"
+                menuSize="x-small"
+                className="rainbow-m-left_small"
+                buttonVariant="border"
+                label="Rounded"
+                borderRadius="rounded"
+            >
+                <MenuItem label="Menu Item One" />
+                <MenuItem label="Menu Item Two" />
+                <MenuItem label="Menu Item Three" />
+                <MenuItem label="Menu Item Four" />
+            </ButtonMenu>
+
+        </GlobalHeader>
+    </div>
+```
diff --git a/src/components/PrimitiveMenu/index.js b/src/components/PrimitiveMenu/index.js
@@ -25,6 +25,7 @@ const PrimitiveMenu = React.forwardRef((props, ref) => {
         title,
         assistiveText,
         trigger: Trigger,
+        borderRadius,
         ...rest
     } = props;
     const listboxId = useUniqueIdentifier('listbox');
@@ -94,6 +95,7 @@ const PrimitiveMenu = React.forwardRef((props, ref) => {
                 assistiveText={assistiveText}
                 onClick={toggleMenu}
                 ref={triggerRef}
+                borderRadius={borderRadius}
             />
             <InternalOverlay
                 isVisible={isOpen}
@@ -107,6 +109,7 @@ const PrimitiveMenu = React.forwardRef((props, ref) => {
                     menuSize={menuSize}
                     menuAlignment={menuAlignment}
                     isLoading={isLoading}
+                    borderRadius={borderRadius}
                 >
                     <MenuContent
                         ariaLabel={ariaLabel}
@@ -153,6 +156,8 @@ PrimitiveMenu.propTypes = {
     id: PropTypes.string,
     /** The element. */
     trigger: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
+    /** The border radius of the button and dropdown. Valid values are square, 'semi-square', semi-rounded and rounded. This value defaults to rounded. */
+    borderRadius: PropTypes.oneOf(['square', 'semi-square', 'semi-rounded', 'rounded']),
 };
 
 PrimitiveMenu.defaultProps = {
@@ -165,6 +170,7 @@ PrimitiveMenu.defaultProps = {
     className: undefined,
     style: undefined,
     id: undefined,
+    borderRadius: 'rounded',
 };
 
 export default PrimitiveMenu;
diff --git a/src/components/PrimitiveMenu/styled/index.js b/src/components/PrimitiveMenu/styled/index.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
+import BorderRadiusElement from '../../Structural/borderRadiusElement';
 
 export const StyledContainer = styled.div`
     position: relative;
@@ -18,13 +19,12 @@ export const StyledContent = styled.ul`
     box-sizing: border-box;
 `;
 
-export const StyledDropdown = attachThemeAttrs(styled.div)`
+export const StyledDropdown = attachThemeAttrs(styled(BorderRadiusElement))`
     min-width: 6rem;
     max-width: 20rem;
     max-height: 372px;
     margin-top: 0.125rem;
     margin-bottom: 0.125rem;
-    border-radius: 0.875rem;
     padding: 0.5rem 0;
     font-size: 0.75rem;
     background: ${props => props.palette.background.main};