From 2267449153a7b720c3f805deaa3e7b5f04c47034 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 2 May 2022 10:31:09 -0400 Subject: [PATCH 1/3] update paths --- packages/react-core/src/components/Divider/Divider.tsx | 2 -- .../react-core/src/components/Divider/examples/Divider.md | 6 ------ .../examples/DividerVerticalFlexInsetVariousBreakpoints.tsx | 2 +- 3 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx index e71bd83edd3..4773479d3d6 100644 --- a/packages/react-core/src/components/Divider/Divider.tsx +++ b/packages/react-core/src/components/Divider/Divider.tsx @@ -41,7 +41,6 @@ export const Divider: React.FunctionComponent = ({ component = DividerVariant.hr, isVertical = false, inset, - orientation, ...props }: DividerProps) => { const Component: any = component; @@ -52,7 +51,6 @@ export const Divider: React.FunctionComponent = ({ styles.divider, isVertical && styles.modifiers.vertical, formatBreakpointMods(inset, styles), - formatBreakpointMods(orientation, styles), className )} {...(component !== 'hr' && { role: 'separator' })} diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md index 6d9b86d78e4..93cf361ae2a 100644 --- a/packages/react-core/src/components/Divider/examples/Divider.md +++ b/packages/react-core/src/components/Divider/examples/Divider.md @@ -46,9 +46,3 @@ propComponents: ['Divider'] ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx' ``` - -### Switch orientation at various breakpoints - -```ts file='./DividerOrientationVariousBreakpoints.tsx' -``` - diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx index c47a605b781..b98a05e9591 100644 --- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx @@ -15,6 +15,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent xl: 'insetXs' }} /> - second item + first item ); From d5728872f6ff1fe898149ecbdb8d9e043c23c4c1 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 17 May 2022 13:58:47 -0400 Subject: [PATCH 2/3] expose prop info --- .../ApplicationLauncher/ApplicationLauncher.tsx | 12 +++++++++++- .../ContextSelector/ContextSelector.tsx | 10 +++++++++- .../src/components/Dropdown/Dropdown.tsx | 16 ++++++++++++++-- .../src/components/OptionsMenu/OptionsMenu.tsx | 13 ++++++++++++- .../react-core/src/components/Select/Select.tsx | 10 +++++++++- .../react-core/src/helpers/Popper/Popper.tsx | 1 + 6 files changed, 56 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx index 6b8566b7ed5..834b3fe5e54 100644 --- a/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx +++ b/packages/react-core/src/components/ApplicationLauncher/ApplicationLauncher.tsx @@ -12,7 +12,9 @@ import { ApplicationLauncherContext } from './ApplicationLauncherContext'; import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper'; import { createRenderableFavorites, extendItemsWithFavorite } from '../../helpers/favorites'; -export interface ApplicationLauncherProps extends ToggleMenuBaseProps, React.HTMLProps { +export interface ApplicationLauncherProps + extends Omit, + React.HTMLProps { /** Additional element css classes */ className?: string; /** Display menu above or below dropdown toggle */ @@ -35,6 +37,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 18ca643319e..607f70eddb7 100644 --- a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx +++ b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx @@ -18,7 +18,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; let currentId = 0; const newId = currentId++; -export interface ContextSelectorProps extends ToggleMenuBaseProps, OUIAProps { +export interface ContextSelectorProps extends Omit, OUIAProps { /** content rendered inside the Context Selector */ children?: React.ReactNode; /** Classes applied to root element of Context Selector */ @@ -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 47da93af9f3..ef12ff6431a 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -5,7 +5,10 @@ import { DropdownWithContext } from './DropdownWithContext'; import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper'; import { OUIAProps, useOUIAId } from '../../helpers'; -export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps, OUIAProps { +export interface DropdownProps + extends Omit, + React.HTMLProps, + OUIAProps { /** Anything which can be rendered in a dropdown */ children?: React.ReactNode; /** Classes applied to root element of dropdown */ @@ -32,6 +35,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 */ @@ -54,6 +65,7 @@ export const Dropdown: React.FunctionComponent = ({ ouiaSafe, alignments, contextProps, + menuAppendTo = 'inline', ...props }: DropdownProps) => ( = ({ ...contextProps }} > - + ); Dropdown.displayName = 'Dropdown'; diff --git a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx index 69ce2c4841c..7b24f054d09 100644 --- a/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx +++ b/packages/react-core/src/components/OptionsMenu/OptionsMenu.tsx @@ -15,7 +15,10 @@ export enum OptionsMenuDirection { down = 'down' } -export interface OptionsMenuProps extends ToggleMenuBaseProps, React.HTMLProps, OUIAProps { +export interface OptionsMenuProps + extends Omit, + React.HTMLProps, + OUIAProps { /** Classes applied to root element of the options menu */ className?: string; /** Id of the root element of the options menu */ @@ -36,6 +39,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 93ea4acf960..5c7b049e838 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -48,7 +48,7 @@ export interface SelectViewMoreObject { onClick: (event: React.MouseEvent | React.ChangeEvent) => void; } export interface SelectProps - extends ToggleMenuBaseProps, + extends Omit, Omit, 'onSelect' | 'ref' | 'checked' | 'selected'>, OUIAProps { /** Content rendered inside the Select. Must be React.ReactElement[] */ @@ -165,6 +165,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 { diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 453d52c0a7e..eac6e90d7a2 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -14,6 +14,7 @@ const getOppositePlacement = (placement: Placement): any => (matched: string) => hash[matched as 'left' | 'right' | 'bottom' | 'top'] as BasePlacement ); +/** @deprecated Please use the menuAppendTo prop directly from within the PF component which uses it. */ export interface ToggleMenuBaseProps { /** 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. From 404ea5294ee5da3840557dd355a8c5630ecea5b9 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 17 May 2022 14:18:50 -0400 Subject: [PATCH 3/3] align divider files with main --- packages/react-core/src/components/Divider/Divider.tsx | 2 ++ .../react-core/src/components/Divider/examples/Divider.md | 6 ++++++ .../examples/DividerVerticalFlexInsetVariousBreakpoints.tsx | 2 +- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx index 4773479d3d6..e71bd83edd3 100644 --- a/packages/react-core/src/components/Divider/Divider.tsx +++ b/packages/react-core/src/components/Divider/Divider.tsx @@ -41,6 +41,7 @@ export const Divider: React.FunctionComponent = ({ component = DividerVariant.hr, isVertical = false, inset, + orientation, ...props }: DividerProps) => { const Component: any = component; @@ -51,6 +52,7 @@ export const Divider: React.FunctionComponent = ({ styles.divider, isVertical && styles.modifiers.vertical, formatBreakpointMods(inset, styles), + formatBreakpointMods(orientation, styles), className )} {...(component !== 'hr' && { role: 'separator' })} diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md index 93cf361ae2a..6d9b86d78e4 100644 --- a/packages/react-core/src/components/Divider/examples/Divider.md +++ b/packages/react-core/src/components/Divider/examples/Divider.md @@ -46,3 +46,9 @@ propComponents: ['Divider'] ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx' ``` + +### Switch orientation at various breakpoints + +```ts file='./DividerOrientationVariousBreakpoints.tsx' +``` + diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx index b98a05e9591..c47a605b781 100644 --- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx @@ -15,6 +15,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent xl: 'insetXs' }} /> - first item + second item );