As the application launcher component is now deprecated, an application launcher may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new dropdown component that is built off of menu.
Props
MenuToggle
| Name | Type | Default | Description |
|---|---|---|---|
| badge | BadgeProps | React.ReactNode | Optional badge rendered inside the toggle, after the children content | |
| children | React.ReactNode | Content rendered inside the toggle | |
| className | string | Additional classes added to the toggle | |
| icon | React.ReactNode | Optional icon or image rendered inside the toggle, before the children content. It is recommended to wrap most basic icons in our icon component. | |
| isDisabled | boolean | Flag indicating the toggle is disabled | |
| isExpanded | boolean | Flag indicating the toggle has expanded styling | |
| isFullHeight | boolean | Flag indicating the toggle is full height | |
| isFullWidth | boolean | Flag indicating the toggle takes up the full width of its parent | |
| isPlaceholder | boolean | Flag indicating the toggle contains placeholder text | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| size | 'default' | 'sm' | Adds styling which affects the size of the menu toggle | |
| splitButtonItems | React.ReactNode[] | Elements to display before the toggle button. When included, renders the menu toggle as a split button. | |
| status | 'success' | 'warning' | 'danger' | Status styles of the menu toggle | |
| statusIcon | React.ReactNode | Overrides the status icon | |
| variant | 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead' | Variant styles of the menu toggle |
MenuSearch
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Items within search |
MenuSearchInput
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Items within input |
Tooltip
| Name | Type | Default | Description |
|---|---|---|---|
| contentrequired | React.ReactNode | Tooltip content | |
| animationDuration | number | 300 | CSS fade transition animation duration |
| appendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | () => document.body | The element to append the tooltip to, defaults to body |
| aria | 'describedby' | 'labelledby' | 'none' | 'describedby' | aria-labelledby or aria-describedby for tooltip. The trigger will be cloned to add the aria attribute, and the corresponding id in the form of 'pf-tooltip-#' is added to the content container. If you don't want that or prefer to add the aria attribute yourself on the trigger, set aria to 'none'. |
| aria-live | 'off' | 'polite' | triggerRef ? 'polite' : 'off' | Determines whether the tooltip is an aria-live region. If the triggerRef prop is passed in the default behavior is 'polite' in order to ensure the tooltip contents is announced to assistive technologies. Otherwise the default behavior is 'off'. |
| children | ReactElement<any> | The trigger reference element to which the Tooltip is relatively placed to. If you cannot wrap the element with the Tooltip, you can use the triggerRef prop instead. Usage: <Tooltip><Button>Reference</Button></Tooltip> | |
| className | string | '' | Tooltip additional class |
| distance | number | 15 | Distance of the tooltip to its target, defaults to 15 |
| enableFlip | boolean | true | If true, tries to keep the tooltip in view by flipping it if necessary |
| entryDelay | number | 300 | Delay in ms before the tooltip appears |
| exitDelay | number | 300 | Delay in ms before the tooltip disappears, Avoid passing in a value of "0", as users should be given ample time to move their mouse from the trigger to the tooltip content without the content being hidden. |
| flipBehavior | | 'flip' | ( | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' )[] | ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'] | The desired position to flip the tooltip to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the tooltip to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with tooltip is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the tooltip on the left. |
| id | string | `pf-tooltip-${pfTooltipIdCounter++}` | id of the tooltip |
| isContentLeftAligned | boolean | false | Flag to indicate that the text content is left aligned |
| isVisible | boolean | false | value for visibility when trigger is 'manual' |
| maxWidth | string | tooltipMaxWidth.value | Maximum width of the tooltip (default 18.75rem) |
| minWidth | string | 'trigger' | Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width. | |
| onTooltipHidden | () => void | () => {} | Callback when tooltip's hide transition has finished executing |
| position | | TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top' | Tooltip position. Note: With 'enableFlip' set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior prop. The 'auto' position chooses the side with the most space. The 'auto' position requires the 'enableFlip' prop to be true. |
| trigger | string | 'mouseenter focus' | Tooltip trigger: click, mouseenter, focus, manual Set to manual to trigger tooltip programmatically (through the isVisible prop) |
| triggerRef | HTMLElement | (() => HTMLElement) | React.RefObject<any> | The trigger reference element to which the Tooltip is relatively placed to. If you can wrap the element with the Tooltip, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Tooltip triggerRef={() => document.getElementById('reference-element')} /> | |
| zIndex | number | 9999 | z-index of the tooltip |
Divider
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the divider | |
| component | 'hr' | 'li' | 'div' | DividerVariant.hr | The component type to use |
| inset | { default?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; sm?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; md?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; lg?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; } | Insets at various breakpoints. | |
| orientation | { default?: 'vertical' | 'horizontal'; sm?: 'vertical' | 'horizontal'; md?: 'vertical' | 'horizontal'; lg?: 'vertical' | 'horizontal'; xl?: 'vertical' | 'horizontal'; '2xl'?: 'vertical' | 'horizontal'; } | Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout. |
SearchInput
| Name | Type | Default | Description |
|---|---|---|---|
| advancedSearchDelimiter | string | Delimiter in the query string for pairing attributes with search values. Required whenever attributes are passed as props. | |
| attributes | string[] | SearchInputSearchAttribute[] | [] | Array of attribute values used for dynamically generated advanced search. |
| className | string | Additional classes added to the advanced search menu. | |
| formAdditionalItems | React.ReactNode | ||
| getAttrValueMap | () => { [key: string]: string } | Function which builds an attribute-value map by parsing the value in the search input. | |
| hasWordsAttrLabel | React.ReactNode | 'Has words' | Attribute label for strings unassociated with one of the provided listed attributes. |
| isSearchMenuOpen | boolean | Flag for toggling the open/close state of the advanced search menu. | |
| onChange | (event: React.FormEvent<HTMLInputElement>, value: string) => void | A callback for when the input value changes. | |
| onClear | (event: React.SyntheticEvent<HTMLButtonElement>) => void | A callback for when the user clicks the clear button. | |
| onSearch | ( event: React.SyntheticEvent<HTMLButtonElement>, value: string, attrValueMap: { [key: string]: string } ) => void | A callback for when the search button is clicked. | |
| onToggleAdvancedMenu | (e: React.SyntheticEvent<HTMLButtonElement>) => void | A callback for when the open advanced search button is clicked. | |
| parentInputRef | React.RefObject<any> | Ref of the input element within the search input. | |
| parentRef | React.RefObject<any> | Ref of the div wrapping the whole search input. | |
| resetButtonLabel | string | 'Reset' | Label for the button which resets the advanced search form and clears the search input. |
| submitSearchButtonLabel | string | 'Search' | Label for the button which calls the onSearch event handler. |
| value | string | '' | Value of the search input. |
Dropdown
| Name | Type | Default | Description |
|---|---|---|---|
| togglerequired | DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode) | Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property. | |
| children | React.ReactNode | Anything which can be rendered in a dropdown. | |
| className | string | Classes applied to root element of dropdown. | |
| focusTimeoutDelay | number | Time in ms to wait before firing the toggles' focus event. Defaults to 0 | |
| isOpen | boolean | Flag to indicate if menu is opened. | |
| isPlain | boolean | Indicates if the menu should be without the outer box-shadow. | |
| isScrollable | boolean | Indicates if the menu should be scrollable. | |
| maxMenuHeight | string | Maximum height of dropdown menu | |
| menuHeight | string | Height of the dropdown menu | |
| onOpenChange | (isOpen: boolean) => void | Callback to allow the dropdown component to change the open state of the menu. Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. | |
| onOpenChangeKeys | string[] | Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. | |
| onSelect | (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void | Function callback called when user selects item. | |
| onToggleKeydown | (event: KeyboardEvent) => void | Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| popperProps | DropdownPopperProps | Additional properties to pass to the Popper | |
| shouldFocusFirstItemOnOpen Beta | boolean | Flag indicating the first menu item should be focused after opening the dropdown. | |
| shouldFocusToggleOnSelect | boolean | Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. | |
| shouldPreventScrollOnItemFocus | boolean | Flag indicating if scroll on focus of the first menu item should occur. | |
| zIndex | number | z-index of the dropdown menu |
DropdownGroup
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything which can be rendered in a dropdown group. | |
| className | string | Classes applied to root element of dropdown group | |
| label | string | Label of the dropdown group | |
| labelHeadingLevel | No type info | 'h1' |
DropdownList
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Anything which can be rendered in a dropdown list | |
| className | string | Classes applied to root element of dropdown list |
DropdownItem
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Anything which can be rendered in a dropdown item | |
| className | string | Classes applied to root element of dropdown item | |
| description | React.ReactNode | Description of the dropdown item | |
| isAriaDisabled | boolean | Render item as aria-disabled option | |
| isDisabled | boolean | Render item as disabled option | |
| onClick | (event?: any) => void | Callback for item click | |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
| tooltipProps | TooltipProps | Props for adding a tooltip to a menu item | |
| value | any | Identifies the component in the dropdown onSelect callback |
