From 35f9ad3af972bca78e8c9823ed97942e9953d081 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 11 Apr 2022 11:22:58 -0400 Subject: [PATCH] pr feedback from Eric --- .../ApplicationLauncher/ApplicationLauncher.tsx | 8 ++++++++ .../src/components/ContextSelector/ContextSelector.tsx | 8 ++++++++ packages/react-core/src/components/Dropdown/Dropdown.tsx | 8 ++++++++ .../react-core/src/components/OptionsMenu/OptionsMenu.tsx | 8 ++++++++ packages/react-core/src/components/Select/Select.tsx | 8 ++++++++ 5 files changed, 40 insertions(+) diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 6b8566b7ed5..5cb0f29d7f9 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -35,6 +35,14 @@ export interface ApplicationLauncherProps extends ToggleMenuBaseProps, React.HTM isGrouped?: boolean; /** Toggle Icon, optional to override the icon used for the toggle */ toggleIcon?: React.ReactNode; + /** The container to append the menu to. Defaults to 'inline'. + * If your menu is being cut off you can append it to an element higher up the DOM tree. + * Some examples: + * menuAppendTo="parent" + * menuAppendTo={() => document.body} + * menuAppendTo={document.getElementById('target')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; /** ID list of favorited ApplicationLauncherItems */ favorites?: string[]; /** Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked */ diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx index 1a7c356dc7e..8cd22aa6751 100644 --- a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx +++ b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx @@ -29,6 +29,14 @@ export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps { onToggle?: (event: any, value: boolean) => void; /** Function callback called when user selects item */ onSelect?: (event: any, value: React.ReactNode) => void; + /** The container to append the menu to. Defaults to 'inline'. + * If your menu is being cut off you can append it to an element higher up the DOM tree. + * Some examples: + * menuAppendTo="parent" + * menuAppendTo={() => document.body} + * menuAppendTo={document.getElementById('target')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; /** Flag indicating that the context selector should expand to full height */ isFullHeight?: boolean; /** Labels the Context Selector for Screen Readers */ diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 5952d2e6bee..c82e0f7e892 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -32,6 +32,14 @@ export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps document.body} + * menuAppendTo={document.getElementById('target')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; /** Flag to indicate if dropdown has groups */ isGrouped?: boolean; /** Toggle for the dropdown, examples: or */ diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx index 69ce2c4841c..986fc75d060 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx @@ -36,6 +36,14 @@ export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps document.body} + * menuAppendTo={document.getElementById('target')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; } export const OptionsMenu: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index 633dae124f4..173e04598ca 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -163,6 +163,14 @@ export interface SelectProps shouldResetOnSelect?: boolean; /** Content rendered in the footer of the select menu */ footer?: React.ReactNode; + /** The container to append the menu to. Defaults to 'inline'. + * If your menu is being cut off you can append it to an element higher up the DOM tree. + * Some examples: + * menuAppendTo="parent" + * menuAppendTo={() => document.body} + * menuAppendTo={document.getElementById('target')} + */ + menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent'; } export interface SelectState {