Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui-menu): add renderLabelInfo to Menu #1650

Merged
merged 1 commit into from
Sep 17, 2024
Merged

feat(ui-menu): add renderLabelInfo to Menu #1650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/ui-menu/src/Menu/MenuItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -209,7 +210,7 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
}

renderContent() {
const { children, type } = this.props
const { children, type, renderLabelInfo } = this.props

return (
<span>
Expand All @@ -226,6 +227,11 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
<IconArrowOpenEndSolid />
</span>
)}
{renderLabelInfo && (
<span css={this.props.styles?.labelInfo}>
{callRenderProp(renderLabelInfo)}
</span>
)}
</span>
)
}
Expand Down
12 changes: 9 additions & 3 deletions packages/ui-menu/src/Menu/MenuItem/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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 = [
Expand All @@ -138,7 +143,8 @@ const allowedProps: AllowedPropKeys = [
'type',
'value',
'href',
'target'
'target',
'renderLabelInfo'
]
type MenuItemState = {
selected: boolean
Expand Down
7 changes: 7 additions & 0 deletions packages/ui-menu/src/Menu/MenuItem/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/ui-menu/src/Menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 8 additions & 2 deletions packages/ui-menu/src/Menu/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = [
Expand Down Expand Up @@ -248,7 +253,8 @@ const allowedProps: AllowedPropKeys = [
'withArrow',
'offsetX',
'offsetY',
'maxHeight'
'maxHeight',
'renderLabelInfo'
]

export type { MenuProps, MenuStyle }
Expand Down
Loading