@patternfly/react-core 6.4.1-prerelease.8 → 6.4.1

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.1-prerelease.7","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.4.0","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.1-prerelease.7","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.4.0","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.1-prerelease.7","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.4.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.4.1-prerelease.8",
+  "version": "6.4.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "7d045b83d744f3b585b1a21216df2d1f5c63e16e"
+  "gitHead": "476782a298df81cb78de7f3cd804f3ff8f33993c"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
-import { getUniqueId } from '../../helpers/util';
 import { ASTERISK } from '../../helpers/htmlConstants';
 
 export interface CheckboxProps
@@ -40,8 +39,6 @@ export interface CheckboxProps
   description?: React.ReactNode;
   /** Body text of the checkbox */
   body?: React.ReactNode;
-  /** Custom aria-describedby value for the checkbox input. If not provided and description is set, a unique ID will be generated automatically. */
-  'aria-describedby'?: string;
   /** Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. */
   component?: React.ElementType;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -55,7 +52,6 @@ const defaultOnChange = () => {};
 
 interface CheckboxState {
   ouiaStateId: string;
-  descriptionId: string;
 }
 
 class Checkbox extends Component<CheckboxProps, CheckboxState> {
@@ -74,8 +70,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   constructor(props: any) {
     super(props);
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Checkbox.displayName),
-      descriptionId: getUniqueId('pf-checkbox-description')
+      ouiaStateId: getDefaultOUIAId(Checkbox.displayName)
     };
   }
 
@@ -86,7 +81,6 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   render() {
     const {
       'aria-label': ariaLabel,
-      'aria-describedby': ariaDescribedBy,
       className,
       inputClassName,
       onChange,
@@ -121,14 +115,6 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       checkedProps.defaultChecked = defaultChecked;
     }
 
-    // Handle aria-describedby logic
-    let ariaDescribedByValue: string | undefined;
-    if (ariaDescribedBy !== undefined) {
-      ariaDescribedByValue = ariaDescribedBy === '' ? undefined : ariaDescribedBy;
-    } else if (description) {
-      ariaDescribedByValue = this.state.descriptionId;
-    }
-
     const inputRendered = (
       <input
         {...props}
@@ -137,7 +123,6 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         onChange={this.handleChange}
         aria-invalid={!isValid}
         aria-label={ariaLabel}
-        aria-describedby={ariaDescribedByValue}
         disabled={isDisabled}
         required={isRequired}
         ref={(elem) => {
@@ -184,11 +169,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
             {labelRendered}
           </>
         )}
-        {description && (
-          <span id={this.state.descriptionId} className={css(styles.checkDescription)}>
-            {description}
-          </span>
-        )}
+        {description && <span className={css(styles.checkDescription)}>{description}</span>}
         {body && <span className={css(styles.checkBody)}>{body}</span>}
       </Component>
     );

package/src/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -287,37 +287,3 @@ test('Matches snapshot', () => {
 
   expect(asFragment()).toMatchSnapshot();
 });
-
-test('Sets aria-describedby when description is provided', () => {
-  render(<Checkbox id="test-id" description="test description" />);
-
-  const checkbox = screen.getByRole('checkbox');
-  const descriptionElement = screen.getByText('test description');
-
-  expect(checkbox).toHaveAttribute('aria-describedby', descriptionElement.id);
-  expect(descriptionElement).toHaveAttribute('id');
-});
-
-test('Sets custom aria-describedby when provided', () => {
-  render(<Checkbox id="test-id" description="test description" aria-describedby="custom-id" />);
-
-  const checkbox = screen.getByRole('checkbox');
-
-  expect(checkbox).toHaveAttribute('aria-describedby', 'custom-id');
-});
-
-test('Does not set aria-describedby when no description is provided', () => {
-  render(<Checkbox id="test-id" />);
-
-  const checkbox = screen.getByRole('checkbox');
-
-  expect(checkbox).not.toHaveAttribute('aria-describedby');
-});
-
-test('Does not set aria-describedby when description is provided but aria-describedby is empty string', () => {
-  render(<Checkbox id="test-id" description="test description" aria-describedby="" />);
-
-  const checkbox = screen.getByRole('checkbox');
-
-  expect(checkbox).not.toHaveAttribute('aria-describedby');
-});

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -77,7 +77,6 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   widths,
   colorVariant = DrawerColorVariant.default,
   focusTrap,
-  style,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = useRef<HTMLDivElement>(undefined);
@@ -382,10 +381,9 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               }
             }}
             hidden={hidden}
-            style={{
-              ...((defaultSize || minSize || maxSize) && boundaryCssVars),
-              ...style
-            }}
+            {...((defaultSize || minSize || maxSize) && {
+              style: boundaryCssVars as React.CSSProperties
+            })}
             {...props}
             ref={panel}
           >

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -121,40 +121,3 @@ test('Renders with role="dialog" when focusTrap.enabled is true', () => {
 
   expect(screen.getByRole('dialog')).toBeInTheDocument();
 });
-
-test('Applies style prop as expected', () => {
-  render(
-    <Drawer isExpanded>
-      <DrawerPanelContent style={{ backgroundColor: 'red', padding: '20px' }}>Drawer panel content</DrawerPanelContent>
-    </Drawer>
-  );
-
-  const panelContent = screen.getByText('Drawer panel content');
-  expect(panelContent).toHaveStyle({ backgroundColor: 'red', padding: '20px' });
-});
-
-test('Style prop overrides boundaryCssVars', () => {
-  render(
-    <Drawer isExpanded>
-      <DrawerPanelContent
-        defaultSize="200px"
-        minSize="100px"
-        maxSize="400px"
-        style={{
-          '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
-          '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
-          '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
-        }}
-      >
-        Drawer panel content
-      </DrawerPanelContent>
-    </Drawer>
-  );
-
-  const panelContent = screen.getByText('Drawer panel content');
-  expect(panelContent).toHaveStyle({
-    '--pf-v6-c-drawer__panel--md--FlexBasis': '300px',
-    '--pf-v6-c-drawer__panel--md--FlexBasis--min': '150px',
-    '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
-  });
-});

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -56,10 +56,6 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * both are specified; used for uncontrolled expandable with dynamic toggle text).
    */
   toggleTextExpanded?: string;
-  /** Accessible name via human readable string for the expandable section toggle. */
-  toggleAriaLabel?: string;
-  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
-  toggleAriaLabelledBy?: string;
   /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
@@ -113,8 +109,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     toggleText: '',
     toggleTextExpanded: '',
     toggleTextCollapsed: '',
-    toggleAriaLabel: undefined,
-    toggleAriaLabelledBy: undefined,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onToggle: (event, isExpanded): void => undefined,
     isDetached: false,
@@ -202,8 +196,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleTextExpanded,
       toggleTextCollapsed,
       toggleContent,
-      toggleAriaLabel,
-      toggleAriaLabelledBy,
       children,
       isExpanded,
       isDetached,
@@ -262,8 +254,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
               </span>
             )
           })}
-          aria-label={toggleAriaLabel}
-          aria-labelledby={toggleAriaLabelledBy}
         >
           {toggleContent || computedToggleText}
         </Button>

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -30,10 +30,6 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   onToggle?: (isExpanded: boolean) => void;
   /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
   isDetached?: boolean;
-  /** Accessible name via human readable string for the expandable section toggle. */
-  toggleAriaLabel?: string;
-  /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
-  toggleAriaLabelledBy?: string;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -46,8 +42,6 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   direction = 'down',
   hasTruncatedContent = false,
   isDetached,
-  toggleAriaLabel,
-  toggleAriaLabelledBy,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
@@ -80,8 +74,6 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
             </span>
           )
         })}
-        aria-label={toggleAriaLabel}
-        aria-labelledby={toggleAriaLabelledBy}
       >
         {children}
       </Button>

package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -191,20 +191,3 @@ test('Renders with class pf-m-detached when isDetached is true and direction is
 
   expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
 });
-
-test('Renders with aria-label when toggleAriaLabel is passed', () => {
-  render(<ExpandableSection toggleAriaLabel="Test label"></ExpandableSection>);
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});
-
-test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
-  render(
-    <>
-      <div id="test-id">Test label</div>
-      <ExpandableSection toggleAriaLabelledBy="test-id"></ExpandableSection>
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});

package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -30,20 +30,3 @@ test('Renders with class pf-m-detached when isDetached is true', () => {
 
   expect(screen.getByTestId('test-id')).toHaveClass('pf-m-detached');
 });
-
-test('Renders with aria-label when toggleAriaLabel is passed', () => {
-  render(<ExpandableSectionToggle toggleAriaLabel="Test label"></ExpandableSectionToggle>);
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});
-
-test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
-  render(
-    <>
-      <div id="test-id">Test label</div>
-      <ExpandableSectionToggle toggleAriaLabelledBy="test-id"></ExpandableSectionToggle>
-    </>
-  );
-
-  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -19,21 +19,29 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 A toggle is collapsed until it is selected by a user.
 
-```ts file="MenuToggleCollapsed.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<MenuToggle>Collapsed</MenuToggle>
+
 ```
 
 ### Expanded toggle
 
 When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
-```ts file ="MenuToggleExpanded.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<MenuToggle isExpanded>Expanded</MenuToggle>;
+
 ```
 
 ### Small toggle
 
 You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as within a [breadcrumb](/components/breadcrumb).
 
-```ts file="MenuToggleSmall.tsx"
+```ts file="./MenuToggleSmall.tsx"
 
 ```
 
@@ -41,21 +49,32 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as
 
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
-```ts file="MenuToggleDisabled.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<MenuToggle isDisabled>Disabled</MenuToggle>
+
 ```
 
 ### With a badge
 
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
-```ts file="MenuToggleBadge.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle, Badge } from '@patternfly/react-core';
+
+<Fragment>
+  <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>
+  <MenuToggle variant="plainText" badge={<Badge screenReaderText="additional items">4</Badge>} />
+</Fragment>
 ```
 
 ### Settings toggle
 
 To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
 
-```ts file="MenuToggleSettings.tsx"
+```ts file="./MenuToggleSettings.tsx"
 
 ```
 
@@ -65,7 +84,7 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts file="MenuToggleCustomIcon.tsx"
+```ts file="./MenuToggleCustomIcon.tsx"
 
 ```
 
@@ -75,14 +94,37 @@ You can also pass images into the `icon` property. The following example passes
 
 This can be used alongside a text label that provides more context for the image.
 
-```ts file="MenuToggleAvatarText.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+
+<Fragment>
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
+</Fragment>
 ```
 
 ### Variant styles
 
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
-```ts file="MenuToggleVariantStyles.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+
+<Fragment>
+  <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
+  <MenuToggle variant="primary" isExpanded>
+    Expanded
+  </MenuToggle>{' '}
+  <MenuToggle variant="primary" isDisabled>
+    Disabled
+  </MenuToggle>
+</Fragment>
+
 ```
 
 ### Plain toggle with icon
@@ -91,14 +133,39 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
-```ts file="MenuTogglePlainIcon.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+<Fragment>
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" aria-label="plain kebab"/>
+  {' '}
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain expanded kebab"/>
+  {' '}
+  <MenuToggle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain kebab"/>
+</Fragment>
 ```
 
 ### Plain toggle with text label
 
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
-```ts file="MenuTogglePlainTextLabel.tsx"
+```ts
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+
+<Fragment>
+  <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
+    Disabled
+  </MenuToggle>{' '}
+  <MenuToggle variant="plainText" aria-label="Plain menu toggle">
+    Custom text
+  </MenuToggle>{' '}
+  <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
+    Custom text (expanded)
+  </MenuToggle>
+</Fragment>
 ```
 
 ### Split toggle with checkbox
@@ -149,7 +216,14 @@ A full height toggle fills the height of its parent. To flag a full height toggl
 
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
-```ts file="MenuToggleFullHeight.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+<div style={{ height: "80px" }}>
+  <MenuToggle isFullHeight aria-label="Full height menu toggle">
+    Full height
+  </MenuToggle>
+</div>
 ```
 
 ### Full width toggle
@@ -158,7 +232,16 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
 
 In the following example, the toggle fills the width of its parent as the window size changes.
 
-```ts file="MenuToggleFullWidth.tsx"
+```ts
+import { MenuToggle } from '@patternfly/react-core';
+
+const fullWidth: React.FunctionComponent = () => {
+  return (
+    <MenuToggle isFullWidth aria-label="Full width menu toggle" >
+      Full width
+    </MenuToggle>
+  );
+}
 ```
 
 ### Typeahead toggle

package/src/components/Modal/Modal.tsx

@@ -27,8 +27,6 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
-  /** Id of the focus trap in the ModalContent component */
-  focusTrapId?: string;
   /** An id to use for the modal box container. */
   id?: string;
   /** Flag to show the modal. */

package/src/components/Modal/ModalContent.tsx

@@ -29,8 +29,6 @@ export interface ModalContentProps extends OUIAProps {
    * focusable element will receive focus.
    */
   elementToFocus?: HTMLElement | SVGElement | string;
-  /** Id of the focus trap */
-  focusTrapId?: string;
   /** Flag to show the modal. */
   isOpen?: boolean;
   /** A callback for when the close button is clicked. */
@@ -71,7 +69,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   ouiaId,
   ouiaSafe = true,
   elementToFocus,
-  focusTrapId,
   ...props
 }: ModalContentProps) => {
   if (!isOpen) {
@@ -125,7 +122,6 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
           initialFocus: elementToFocus || undefined
         }}
         className={css(bullsEyeStyles.bullseye)}
-        id={focusTrapId}
       >
         {modalBox}
       </FocusTrap>

package/src/components/Modal/__tests__/Modal.test.tsx

@@ -172,13 +172,4 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
-
-  test('Modal can add id to focus trap correctly for use with dropdowns', () => {
-    render(<Modal focusTrapId="focus-trap" isOpen onClose={jest.fn()} children="modal content" />);
-    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute('id', 'focus-trap');
-    expect(screen.getByRole('dialog', { name: /modal content/i }).parentElement).toHaveAttribute(
-      'class',
-      'pf-v6-l-bullseye'
-    );
-  });
 });

package/src/components/Modal/__tests__/ModalContent.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import { ModalContent } from '../ModalContent';
 
@@ -43,19 +43,3 @@ test('Modal Content Test with onclose', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
-
-test('Modal content can add id to focus trap correctly for use with dropdowns', () => {
-  render(
-    <ModalContent focusTrapId="focus-trap" isOpen {...modalContentProps}>
-      This is a ModalBox header
-    </ModalContent>
-  );
-  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
-    'id',
-    'focus-trap'
-  );
-  expect(screen.getByRole('dialog', { name: /This is a ModalBox header/i }).parentElement).toHaveAttribute(
-    'class',
-    'pf-v6-l-bullseye'
-  );
-});

package/src/components/Modal/examples/Modal.md

@@ -17,7 +17,7 @@ import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ### Basic modals
 
-Basic modals give users the option to either confirm or cancel an action.
+Basic modals give users the option to either confirm or cancel an action. 
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
@@ -71,7 +71,7 @@ To choose a specific width for a modal, use the `width` property. The following
 
 ### Custom header
 
-To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header.
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
 
 ```ts file="./ModalCustomHeader.tsx"
 
@@ -113,18 +113,9 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal.
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
 
-Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
-built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
-`popperProps appendTo` property to id of the focus trap for the modal. This can be done by adding prop
-`focusTrapId` to the modal, and then setting the append location to that as per this example. Otherwise you
-can use `inline` to allow it to scroll within the modal itself. Appending to the focus trap should allow the
-menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
-focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
-listening to the
-`onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the
-dropdown without closing the entire modal.
+To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -150,7 +141,7 @@ To enable form submission from a button in the modal's footer (outside of the `<
 
 ### Custom focus
 
-To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`.
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
 
 ```ts file="./ModalCustomFocus.tsx"