feat(Menu): allow to pass content to MenuDivider

CHANGELOG.md

@@ -42,6 +42,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `reactionGroup` and `reactionGroupPosition` props to the `ChatMessage` component @mnajdova ([#959](https://github.com/stardust-ui/react/pull/959))
 - Set `aria-modal` attribute for both Dialog and Popup with focus trap @sophieH29 ([#995](https://github.com/stardust-ui/react/pull/995))
 - Allow arrays as shorthand for the Components containing prop of type `CollectionShorthand` @mnajdova ([#996](https://github.com/stardust-ui/react/pull/996))
+- Allow to pass `children` and `content` to `MenuDivider` @layershifter ([#1009](https://github.com/stardust-ui/react/pull/1009))
 
 ### Documentation
 - Add `MenuButton` prototype (only available in development mode) @layershifter ([#947](https://github.com/stardust-ui/react/pull/947))

docs/src/examples/components/Menu/Slots/MenuExampleDivider.shorthand.tsx

@@ -3,8 +3,9 @@ import { Menu, MenuShorthandKinds } from '@stardust-ui/react'
 
 const items = [
   { key: 'editorials', content: 'Editorials' },
+  { key: 'divider-1', kind: 'divider' as MenuShorthandKinds },
   { key: 'review', content: 'Reviews' },
-  { key: 'divider', kind: 'divider' as MenuShorthandKinds },
+  { key: 'divider-2', kind: 'divider' as MenuShorthandKinds, content: '...' },
   { key: 'events', content: 'Upcoming Events' },
 ]
 

docs/src/examples/components/Menu/Slots/MenuExampleDividerHorizontal.shorthand.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { Icon, Menu, MenuShorthandKinds } from '@stardust-ui/react'
+
+const items = [
+  { key: 'editorials', content: 'Editorials' },
+  {
+    key: 'divider-1',
+    kind: 'divider' as MenuShorthandKinds,
+    content: '▸',
+  },
+  { key: 'review', content: 'Reviews' },
+  {
+    key: 'divider-2',
+    kind: 'divider' as MenuShorthandKinds,
+    content: <Icon name="triangle-right" />,
+  },
+  { key: 'events', content: 'Upcoming Events' },
+]
+
+const MenuExampleKind = () => <Menu defaultActiveIndex={0} items={items} underlined />
+
+export default MenuExampleKind

docs/src/examples/components/Menu/Slots/index.tsx

@@ -24,6 +24,7 @@ const Slots = () => (
       description="A menu can have divider between some items."
       examplePath="components/Menu/Slots/MenuExampleDivider"
     />
+    <ComponentExample examplePath="components/Menu/Slots/MenuExampleDividerHorizontal" />
   </ExampleSection>
 )
 

docs/src/examples/components/Menu/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
+
 import Types from './Types'
 import Slots from './Slots'
 import States from './States'
 import Variations from './Variations'
-
 import Usages from './Usages'
 
 const MenuExamples = () => (

packages/react/src/components/Menu/MenuDivider.tsx

@@ -9,10 +9,18 @@ import {
   UIComponentProps,
   ColorComponentProps,
   commonPropTypes,
+  childrenExist,
+  ChildrenComponentProps,
+  ContentComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps } from '../../types'
 
-export interface MenuDividerProps extends UIComponentProps, ColorComponentProps {
+export interface MenuDividerProps
+  extends UIComponentProps,
+    ChildrenComponentProps,
+    ContentComponentProps,
+    ColorComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
    * @default menuDividerBehavior
@@ -27,7 +35,7 @@ export interface MenuDividerProps extends UIComponentProps, ColorComponentProps
 /**
  * A menu divider visually segments menu items inside menu.
  */
-class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>, any> {
+class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>> {
   static displayName = 'MenuDivider'
 
   static create: Function
@@ -40,19 +48,24 @@ class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>, any> {
   }
 
   static propTypes = {
-    ...commonPropTypes.createCommon({ content: false, children: false, color: true }),
+    ...commonPropTypes.createCommon({ color: true }),
     primary: PropTypes.bool,
     secondary: PropTypes.bool,
     vertical: PropTypes.bool,
   }
 
   renderComponent({ ElementType, classes, unhandledProps, accessibility }) {
+    const { children, content } = this.props
+
     return (
       <ElementType
         {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
         {...unhandledProps}
         className={classes.root}
-      />
+      >
+        {childrenExist(children) ? children : content}
+      </ElementType>
     )
   }
 }

packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts

@@ -7,12 +7,19 @@ const menuDividerStyles: ComponentSlotStylesInput<MenuDividerProps, MenuVariable
     const borderColor = p.primary ? v.primaryBorderColor : v.borderColor
     const borderType = p.vertical ? 'borderTop' : 'borderLeft'
 
-    return {
-      [borderType]: `1px solid ${borderColor}`,
-      ...(!p.vertical && {
-        alignSelf: 'stretch',
-      }),
-    }
+    return p.content
+      ? {
+          display: 'flex',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          textAlign: 'center',
+        }
+      : {
+          [borderType]: `1px solid ${borderColor}`,
+          ...(!p.vertical && {
+            alignSelf: 'stretch',
+          }),
+        }
   },
 }