feat(ui-menu): add renderLabelInfo to Menu

Closes: INSTUI-4192
instructure · Sep 17, 2024 · 2bc8554 · 2bc8554
1 parent 48e78bb
commit 2bc8554
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 7 deletions.
diff --git a/packages/ui-menu/src/Menu/MenuItem/index.tsx b/packages/ui-menu/src/Menu/MenuItem/index.tsx
@@ -29,7 +29,8 @@ import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons'
 import {
   omitProps,
   getElementType,
-  withDeterministicId
+  withDeterministicId,
+  callRenderProp
 } from '@instructure/ui-react-utils'
 import { createChainedFunction } from '@instructure/ui-utils'
 import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils'
@@ -209,7 +210,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
   }
 
   renderContent() {
-    const { children, type } = this.props
+    const { children, type, renderLabelInfo } = this.props
 
     return (
       <span>
@@ -226,6 +227,11 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
             <IconArrowOpenEndSolid />
           </span>
         )}
+        {renderLabelInfo && (
+          <span css={this.props.styles?.labelInfo}>
+            {callRenderProp(renderLabelInfo)}
+          </span>
+        )}
       </span>
     )
   }

diff --git a/packages/ui-menu/src/Menu/MenuItem/props.ts b/packages/ui-menu/src/Menu/MenuItem/props.ts
@@ -92,6 +92,10 @@ type MenuItemOwnProps = {
    * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
    */
   target?: string
+  /**
+   * Content to render in the label's info region
+   */
+  renderLabelInfo?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof MenuItemOwnProps
@@ -103,7 +107,7 @@ type MenuItemProps = MenuItemOwnProps &
   OtherHTMLAttributes<MenuItemOwnProps> &
   WithDeterministicIdProps
 
-type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'label'>
+type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'labelInfo' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node.isRequired,
@@ -120,7 +124,8 @@ const propTypes: PropValidators<PropKeys> = {
   type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   href: PropTypes.string,
-  target: PropTypes.string
+  target: PropTypes.string,
+  renderLabelInfo: PropTypes.node
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -138,7 +143,8 @@ const allowedProps: AllowedPropKeys = [
   'type',
   'value',
   'href',
-  'target'
+  'target',
+  'renderLabelInfo'
 ]
 type MenuItemState = {
   selected: boolean

diff --git a/packages/ui-menu/src/Menu/MenuItem/styles.ts b/packages/ui-menu/src/Menu/MenuItem/styles.ts
@@ -138,6 +138,13 @@ const generateStyle = (
       ...roleIconStyles,
       ...flyoutIconStyles
     },
+    labelInfo: {
+      label: 'menuItem__labelInfo',
+      height: '100%',
+      float: 'right',
+      clear: 'right',
+      paddingRight: '1.75rem'
+    },
     label: {
       label: 'menuItem__label',
       color: componentTheme.labelColor

diff --git a/packages/ui-menu/src/Menu/index.tsx b/packages/ui-menu/src/Menu/index.tsx
@@ -407,6 +407,7 @@ class Menu extends Component<MenuProps> {
                     tabIndex={isTabbable ? 0 : -1}
                     type="flyout"
                     disabled={submenuDisabled}
+                    renderLabelInfo={child.props.renderLabelInfo}
                   >
                     {child.props.title || child.props.label}
                   </MenuItem>

diff --git a/packages/ui-menu/src/Menu/props.ts b/packages/ui-menu/src/Menu/props.ts
@@ -171,6 +171,10 @@ type MenuOwnProps = {
    * scroll and will be as tall as the content requires
    */
   maxHeight?: string | number
+  /**
+   * Content to render in the label's info region. It is only visible on nested Menus.
+   */
+  renderLabelInfo?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof MenuOwnProps
@@ -218,7 +222,8 @@ const propTypes: PropValidators<PropKeys> = {
   withArrow: PropTypes.bool,
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  maxHeight: PropTypes.string
+  maxHeight: PropTypes.string,
+  renderLabelInfo: PropTypes.node
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -248,7 +253,8 @@ const allowedProps: AllowedPropKeys = [
   'withArrow',
   'offsetX',
   'offsetY',
-  'maxHeight'
+  'maxHeight',
+  'renderLabelInfo'
 ]
 
 export type { MenuProps, MenuStyle }