feat(CDropdown): add centered dropdown and centered dropup

Author: mrholek

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -56,10 +56,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   dark?: boolean
   /**
    * Sets a specified  direction and location of the dropdown menu.
-   *
-   * @type 'dropup' | 'dropend' | 'dropstart'
    */
-  direction?: 'dropup' | 'dropend' | 'dropstart'
+  direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -146,7 +144,11 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       {
         show: _visible,
       },
-      direction,
+      direction === 'center'
+        ? 'dropdown-center'
+        : direction === 'dropup-center'
+        ? 'dropup dropup-center'
+        : direction,
       className,
     )
 
@@ -202,7 +204,7 @@ CDropdown.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   dark: PropTypes.bool,
-  direction: PropTypes.oneOf(['dropup', 'dropend', 'dropstart']),
+  direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: placementPropType,

packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx

@@ -86,10 +86,18 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
 
   let _placement: Placements = placement
 
+  if (direction === 'center') {
+    _placement = 'bottom'
+  }
+
   if (direction === 'dropup') {
     _placement = 'top-start'
   }
 
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
   if (direction === 'dropend') {
     _placement = 'right-start'
   }

packages/docs/content/4.3/api/CDropdown.api.mdx

@@ -12,7 +12,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | div |
 | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - |
-| **direction** | Sets a specified  direction and location of the dropdown menu. | `'dropup'` \| `'dropend'` \| `'dropstart'` | - |
+| **direction** | Sets a specified  direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - |
 | **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - |
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
 | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start |

packages/docs/content/4.3/components/dropdown.mdx

@@ -363,6 +363,36 @@ And putting it to use in a navbar:
   </p>
 </CCallout>
 
+### Centered
+
+Make the dropdown menu centered below the toggle by adding `direction="center"` to the `<CDropdown>` component.
+
+<Example>
+  <CDropdown variant="btn-group" direction="center">
+    <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+      <CDropdownDivider/>
+      <CDropdownItem href="#">Separated link</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</Example>
+
+```jsx
+<CDropdown variant="btn-group" direction="center">
+  <CDropdownToggle color="secondary">Centered dropdown</CDropdownToggle>
+  <CDropdownMenu>
+    <CDropdownItem href="#">Action</CDropdownItem>
+    <CDropdownItem href="#">Another action</CDropdownItem>
+    <CDropdownItem href="#">Something else here</CDropdownItem>
+    <CDropdownDivider/>
+    <CDropdownItem href="#">Separated link</CDropdownItem>
+  </CDropdownMenu>
+</CDropdown>
+```
+
 ### Dropup
 
 Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CDropdown>` component.
@@ -417,6 +447,36 @@ Trigger dropdown menus above elements by adding `direction="dropup"` to the `<CD
   </CDropdown>
 ```
 
+### Dropup centered
+
+Make the dropup menu centered above the toggle by adding `direction="dropup-center"` to the `<CDropdown>` component.
+
+<Example>
+  <CDropdown variant="btn-group" direction="dropup-center">
+    <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem href="#">Action</CDropdownItem>
+      <CDropdownItem href="#">Another action</CDropdownItem>
+      <CDropdownItem href="#">Something else here</CDropdownItem>
+      <CDropdownDivider/>
+      <CDropdownItem href="#">Separated link</CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</Example>
+
+```jsx
+<CDropdown variant="btn-group" direction="dropup-center">
+  <CDropdownToggle color="secondary">Centered dropup</CDropdownToggle>
+  <CDropdownMenu>
+    <CDropdownItem href="#">Action</CDropdownItem>
+    <CDropdownItem href="#">Another action</CDropdownItem>
+    <CDropdownItem href="#">Something else here</CDropdownItem>
+    <CDropdownDivider/>
+    <CDropdownItem href="#">Separated link</CDropdownItem>
+  </CDropdownMenu>
+</CDropdown>
+```
+
 ### Dropright
 
 Trigger dropdown menus at the right of the elements by adding `direction="dropend"` to the `<CDropdown>` component.