From c770f03c33d5813622d07958b683b6117506c721 Mon Sep 17 00:00:00 2001 From: logonoff Date: Wed, 23 Jul 2025 15:57:59 -0400 Subject: [PATCH 1/3] feat: extend `PopperProps` in derivative types --- .../src/components/Dropdown/Dropdown.tsx | 21 +------- .../components/Dropdown/examples/Dropdown.md | 4 +- .../src/components/Menu/MenuContainer.tsx | 18 +------ .../src/components/Menu/examples/Menu.md | 6 +-- .../src/components/Select/Select.tsx | 27 +--------- .../src/components/Select/examples/Select.md | 2 +- .../src/components/Tabs/OverflowTab.tsx | 30 ++--------- .../src/components/Tabs/examples/Tabs.md | 54 +++++++++---------- 8 files changed, 44 insertions(+), 118 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 9ad39d49477..d108b751067 100644 --- a/packages/react-core/src/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx @@ -1,27 +1,10 @@ import { forwardRef, useEffect, useRef } from 'react'; import { css } from '@patternfly/react-styles'; import { Menu, MenuContent, MenuProps } from '../Menu'; -import { Popper } from '../../helpers/Popper/Popper'; +import { Popper, PopperProps } from '../../helpers/Popper/Popper'; import { useOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../helpers'; -export interface DropdownPopperProps { - /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */ - direction?: 'up' | 'down'; - /** Horizontal position of the popper */ - position?: 'right' | 'left' | 'center' | 'start' | 'end'; - /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */ - width?: string | 'trigger'; - /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */ - minWidth?: string | 'trigger'; - /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */ - maxWidth?: string | 'trigger'; - /** Enable to flip the popper when it reaches the boundary */ - enableFlip?: boolean; - /** The container to append the popper to. Defaults to document.body. */ - appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; - /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ - preventOverflow?: boolean; -} +export type DropdownPopperProps = Omit; export interface DropdownToggleProps { /** Dropdown toggle node. */ diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 7db5e2ad906..831bd97a5cf 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -11,8 +11,8 @@ propComponents: 'DropdownList', 'MenuToggle', 'DropdownToggleProps', - 'DropdownPopperProps', - 'TooltipProps' + 'TooltipProps', + 'PopperOptions' ] --- diff --git a/packages/react-core/src/components/Menu/MenuContainer.tsx b/packages/react-core/src/components/Menu/MenuContainer.tsx index 547f9e5bc23..024f82291f5 100644 --- a/packages/react-core/src/components/Menu/MenuContainer.tsx +++ b/packages/react-core/src/components/Menu/MenuContainer.tsx @@ -1,22 +1,8 @@ import { useEffect, useRef } from 'react'; import { onToggleArrowKeydownDefault, Popper } from '../../helpers'; +import type { PopperProps } from '../../helpers/Popper/Popper'; -export interface MenuPopperProps { - /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */ - direction?: 'up' | 'down'; - /** Horizontal position of the popper */ - position?: 'right' | 'left' | 'center' | 'start' | 'end'; - /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */ - width?: string | 'trigger'; - /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */ - minWidth?: string | 'trigger'; - /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */ - maxWidth?: string | 'trigger'; - /** Enable to flip the popper when it reaches the boundary */ - enableFlip?: boolean; - /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ - preventOverflow?: boolean; -} +export type MenuPopperProps = Omit; export interface MenuContainerProps { /** Menu to be rendered */ diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index cc7453a89c4..442a62243a2 100644 --- a/packages/react-core/src/components/Menu/examples/Menu.md +++ b/packages/react-core/src/components/Menu/examples/Menu.md @@ -14,8 +14,8 @@ propComponents: 'MenuSearchInput', 'MenuGroup', 'MenuContainer', - 'MenuPopperProps', - 'TooltipProps' + 'TooltipProps', + 'PopperOptions' ] ouia: true --- @@ -241,4 +241,4 @@ Router links can be used for in-app linking in React environments to prevent pag > {...Link Content} -``` \ No newline at end of file +``` diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index d42ec485eca..e0f530e2617 100644 --- a/packages/react-core/src/components/Select/Select.tsx +++ b/packages/react-core/src/components/Select/Select.tsx @@ -1,33 +1,10 @@ import { forwardRef, useEffect, useRef } from 'react'; import { css } from '@patternfly/react-styles'; import { Menu, MenuContent, MenuProps } from '../Menu'; -import { Popper } from '../../helpers/Popper/Popper'; +import { Popper, PopperProps } from '../../helpers/Popper/Popper'; import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers'; -export interface SelectPopperProps { - /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */ - direction?: 'up' | 'down'; - /** Horizontal position of the popper */ - position?: 'right' | 'left' | 'center' | 'start' | 'end'; - /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */ - width?: string | 'trigger'; - /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */ - minWidth?: string | 'trigger'; - /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */ - maxWidth?: string | 'trigger'; - /** Enable to flip the popper when it reaches the boundary */ - enableFlip?: boolean; - /** The container to append the select to. Defaults to document.body. - * If your select is being cut off you can append it to an element higher up the DOM tree. - * Some examples: - * appendTo="inline" - * appendTo={() => document.body} - * appendTo={document.getElementById('target')} - */ - appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; - /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ - preventOverflow?: boolean; -} +export type SelectPopperProps = Omit; export interface SelectToggleProps { /** Select toggle node. */ diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md index 62e0ad89bd9..71a059df260 100644 --- a/packages/react-core/src/components/Select/examples/Select.md +++ b/packages/react-core/src/components/Select/examples/Select.md @@ -4,7 +4,7 @@ section: components subsection: menus cssPrefix: pf-v6-c-select propComponents: - ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps'] + ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'PopperOptions'] ouia: true --- diff --git a/packages/react-core/src/components/Tabs/OverflowTab.tsx b/packages/react-core/src/components/Tabs/OverflowTab.tsx index f70f7bec99c..a3f83107077 100644 --- a/packages/react-core/src/components/Tabs/OverflowTab.tsx +++ b/packages/react-core/src/components/Tabs/OverflowTab.tsx @@ -2,36 +2,16 @@ import { Fragment, useContext, useEffect, useRef, useState } from 'react'; import styles from '@patternfly/react-styles/css/components/Tabs/tabs'; import { css } from '@patternfly/react-styles'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; -import { Popper } from '../../helpers'; +import { Popper, PopperProps } from '../../helpers'; import { Menu, MenuContent, MenuList, MenuItem } from '../Menu'; import { TabsContext } from './TabsContext'; import { TabProps } from './Tab'; import { TabTitleText } from './TabTitleText'; -export interface HorizontalOverflowPopperProps { - /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */ - direction?: 'up' | 'down'; - /** Horizontal position of the popper */ - position?: 'right' | 'left' | 'center' | 'start' | 'end'; - /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */ - width?: string | 'trigger'; - /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */ - minWidth?: string | 'trigger'; - /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */ - maxWidth?: string | 'trigger'; - /** Enable to flip the popper when it reaches the boundary */ - enableFlip?: boolean; - /** The container to append the select to. Defaults to document.body. - * If your select is being cut off you can append it to an element higher up the DOM tree. - * Some examples: - * appendTo="inline" - * appendTo={() => document.body} - * appendTo={document.getElementById('target')} - */ - appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; - /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */ - preventOverflow?: boolean; -} +export type HorizontalOverflowPopperProps = Omit< + PopperProps, + 'trigger' | 'triggerRef' | 'popper' | 'popperRef' | 'isVisible' +>; export interface OverflowTabProps extends React.HTMLProps { /** Additional classes added to the overflow tab */ diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 6dabd0b0a27..a32da22e59a 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -2,7 +2,7 @@ id: Tabs section: components cssPrefix: pf-v6-c-tabs -propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'HorizontalOverflowPopperProps', 'TabAction'] +propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'TabAction', 'PopperOptions'] ouia: true --- @@ -22,16 +22,16 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; A `` component contains multiple `` components that may be used to navigate between sets of content within a page. -You can adjust a tab in the following ways: +You can adjust a tab in the following ways: - To label a tab with text, pass a `` component into the `title` property of a ``. -- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies. +- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies. - To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`. -- To add a tooltip to an aria-disabled tab, use the `tooltip` property. +- To add a tooltip to an aria-disabled tab, use the `tooltip` property. -Tabs can be styled as 'default' or 'boxed': +Tabs can be styled as 'default' or 'boxed': -- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. +- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true. ```ts file="./TabsDefault.tsx" @@ -39,7 +39,7 @@ Tabs can be styled as 'default' or 'boxed': ### Boxed secondary tabs -To change the background color of boxed tabs or the tab content, use the `variant` property. +To change the background color of boxed tabs or the tab content, use the `variant` property. Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example. @@ -50,14 +50,14 @@ Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the f Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations. -To style tabs vertically, use the `isVertical` property. +To style tabs vertically, use the `isVertical` property. ```ts file="./TabsVertical.tsx" ``` ### Vertical expandable tabs -Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs. +Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs. Expandable tabs can be enabled at different breakpoints. The following example passes `expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}` into the `` component. @@ -75,14 +75,14 @@ To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpa ### Default overflow tabs -By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows. +By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows. ```ts file="./TabsDefaultOverflow.tsx" ``` ### Horizontal overflow tabs -Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content. +Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content. To enable horizontal overflow, use the `isOverflowHorizontal` property. @@ -102,7 +102,7 @@ The tooltip should also have the `id` property passed in. The value of `id` shou ### Uncontrolled tabs -To allow the `` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example. +To allow the `` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example. ```ts file="./TabsUncontrolled.tsx" @@ -124,7 +124,7 @@ To adjust the left padding of tabs, use the `usePageInsets` property. This prope ### With icons and text -You can render different content in the `title` property of a tab to add icons and text. +You can render different content in the `title` property of a tab to add icons and text. To add an icon to a tab, pass a `` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `` component. @@ -133,53 +133,53 @@ To add an icon to a tab, pass a `` component that contains the ico ### Subtabs -Use subtabs within other components, like modals. Subtabs have less visually prominent styling. +Use subtabs within other components, like modals. Subtabs have less visually prominent styling. -To apply subtab styling to tabs, use the `isSubtab` property. +To apply subtab styling to tabs, use the `isSubtab` property. ```ts file="./TabsSubtabs.tsx" ``` ### Filled tabs with icons -To allow tabs to fill the available width of the page section, use the `isFilled` property. +To allow tabs to fill the available width of the page section, use the `isFilled` property. ```ts file="./TabsFilledWithIcons.tsx" ``` ### Tabs linked to nav elements -To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property. +To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property. -Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `` instead of a `