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

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -32,10 +32,8 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
   };
 
   const onFocus = () => {
-    if (typeof document !== 'undefined') {
-      const element = document.getElementById('modal-dropdown-toggle');
-      (element as HTMLElement)?.focus();
-    }
+    const element = document.getElementById('modal-dropdown-toggle');
+    (element as HTMLElement).focus();
   };
 
   const onEscapePress = (event: KeyboardEvent) => {
@@ -47,16 +45,6 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     }
   };
 
-  const getAppendLocation = () => {
-    // document doesn't exist when PatternFly website docs framework gets pre-rendered
-    // this is just to avoid that issue - works fine at runtime without it
-    if (typeof document !== 'undefined' && document.getElementById) {
-      return document.getElementById('modal-with-dropdown-focus-trap');
-    } else {
-      return 'inline';
-    }
-  };
-
   return (
     <Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
@@ -69,21 +57,14 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         onEscapePress={onEscapePress}
         aria-labelledby="modal-with-dropdown"
         aria-describedby="modal-box-body-with-dropdown"
-        focusTrapId="modal-with-dropdown-focus-trap"
       >
         <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
         <ModalBody id="modal-box-body-with-dropdown">
           <div>
-            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
-            <em>onEscapePress</em> callback on the Modal component. This allows the "escape" key to collapse the
-            dropdown without closing the entire modal.
+            Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
+            break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
+            the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
+            it's open without closing the entire modal.
           </div>
           <br />
           <div>
@@ -92,18 +73,10 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
               onSelect={onSelect}
               onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                <MenuToggle
-                  id="modal-dropdown-toggle"
-                  ref={toggleRef}
-                  onClick={handleDropdownToggle}
-                  isExpanded={isDropdownOpen}
-                >
+                <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
                   Dropdown
                 </MenuToggle>
               )}
-              popperProps={{
-                appendTo: getAppendLocation()
-              }}
             >
               <DropdownList>
                 <DropdownItem value={0} key="action">

package/src/components/Panel/examples/Panel.md

@@ -9,50 +9,199 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
 
 ### Basic
 
-```ts file="PanelBasic.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const BasicPanel = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Header
 
-```ts file="PanelHeaderExample.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
+
+const HeaderPanel = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Footer
 
-```ts file="PanelFooterExample.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
+
+const FooterPanel = () => (
+  <Panel>
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
 ```
 
 ### Header and footer
 
-```ts file="PanelHeaderFooter.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+const HeaderFooterPanel = () => (
+  <Panel>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
 ```
 
 ### No body
 
-```ts file="PanelNoBody.tsx"
+```js
+import { Panel, PanelMain } from '@patternfly/react-core';
+
+const NoBodyPanel = () => (
+  <Panel>
+    <PanelMain>Main content</PanelMain>
+  </Panel>
+);
 ```
 
 ### Raised
 
-```ts file="PanelRaised.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const RaisedPanel = () => (
+  <Panel variant="raised">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Bordered
 
-```ts file="PanelBordered.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const BorderedPanel = () => (
+  <Panel variant="bordered">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Secondary variant
 
-```ts file="PanelSecondaryVariant.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const PanelSecondaryVariant = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Scrollable
 
-```ts file="PanelScrollable.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const ScrollablePanel = () => (
+  <Panel isScrollable>
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
 ```
 
 ### Scrollable with header and footer
 
-```ts file="PanelScrollableHeaderFooter.tsx"
+```js
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+const ScrollableHeaderFooterPanel = () => (
+  <Panel isScrollable>
+    <PanelHeader>Header content</PanelHeader>
+    <Divider />
+    <PanelMain tabIndex={0}>
+      <PanelMainBody>
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+        <br />
+        <br />
+        Main content
+      </PanelMainBody>
+    </PanelMain>
+    <PanelFooter>Footer content</PanelFooter>
+  </Panel>
+);
 ```

package/src/components/Progress/ProgressContainer.tsx

@@ -3,7 +3,7 @@ import progressStyle from '@patternfly/react-styles/css/components/Progress/prog
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { AriaProps, ProgressBar } from './ProgressBar';
 import { ProgressHelperText } from './ProgressHelperText';
@@ -61,7 +61,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
 }
 
 const variantToIcon = {
-  danger: ExclamationCircleIcon,
+  danger: TimesCircleIcon,
   success: CheckCircleIcon,
   warning: ExclamationTriangleIcon
 };

package/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = `
         width="1em"
       >
         <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
         />
       </svg>
     </span>

package/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap

@@ -298,7 +298,7 @@ exports[`Progress variant danger 1`] = `
           width="1em"
         >
           <path
-            d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
           />
         </svg>
       </span>

package/src/components/Radio/Radio.tsx

@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/Radio/radio';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
-import { getUniqueId } from '../../helpers/util';
 
 export interface RadioProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
@@ -40,8 +39,6 @@ export interface RadioProps
   description?: React.ReactNode;
   /** Body of the radio. */
   body?: React.ReactNode;
-  /** Custom aria-describedby value for the radio input. If not provided and description is set, a unique ID will be generated automatically. */
-  'aria-describedby'?: string;
   /** Sets the radio 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.*/
@@ -50,7 +47,7 @@ export interface RadioProps
   ouiaSafe?: boolean;
 }
 
-class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId: string }> {
+class Radio extends Component<RadioProps, { ouiaStateId: string }> {
   static displayName = 'Radio';
   static defaultProps: PickOptional<RadioProps> = {
     className: '',
@@ -66,8 +63,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       console.error('Radio:', 'Radio requires an aria-label to be specified');
     }
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Radio.displayName),
-      descriptionId: getUniqueId('pf-radio-description')
+      ouiaStateId: getDefaultOUIAId(Radio.displayName)
     };
   }
 
@@ -78,7 +74,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
   render() {
     const {
       'aria-label': ariaLabel,
-      'aria-describedby': ariaDescribedBy,
       checked,
       className,
       inputClassName,
@@ -103,14 +98,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
       console.error('Radio:', 'id is required to make input accessible');
     }
 
-    // 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}
@@ -118,7 +105,6 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
         type="radio"
         onChange={this.handleChange}
         aria-invalid={!isValid}
-        aria-describedby={ariaDescribedByValue}
         disabled={isDisabled}
         checked={checked || isChecked}
         {...(checked === undefined && { defaultChecked })}
@@ -157,11 +143,7 @@ class Radio extends Component<RadioProps, { ouiaStateId: string; descriptionId:
             {labelRendered}
           </>
         )}
-        {description && (
-          <span id={this.state.descriptionId} className={css(styles.radioDescription)}>
-            {description}
-          </span>
-        )}
+        {description && <span className={css(styles.radioDescription)}>{description}</span>}
         {body && <span className={css(styles.radioBody)}>{body}</span>}
       </Component>
     );

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

@@ -139,48 +139,4 @@ describe('Radio', () => {
     expect(wrapper.children[0].tagName).toBe('LABEL');
     expect(wrapper.children[1].tagName).toBe('INPUT');
   });
-
-  test('Sets aria-describedby when description is provided', () => {
-    render(<Radio id="test-id" name="check" aria-label="test radio" description="test description" />);
-
-    const radio = screen.getByRole('radio');
-    const descriptionElement = screen.getByText('test description');
-
-    expect(radio).toHaveAttribute('aria-describedby', descriptionElement.id);
-    expect(descriptionElement).toHaveAttribute('id');
-  });
-
-  test('Sets custom aria-describedby when provided', () => {
-    render(
-      <Radio
-        id="test-id"
-        name="check"
-        aria-label="test radio"
-        description="test description"
-        aria-describedby="custom-id"
-      />
-    );
-
-    const radio = screen.getByRole('radio');
-
-    expect(radio).toHaveAttribute('aria-describedby', 'custom-id');
-  });
-
-  test('Does not set aria-describedby when no description is provided', () => {
-    render(<Radio id="test-id" name="check" aria-label="test radio" />);
-
-    const radio = screen.getByRole('radio');
-
-    expect(radio).not.toHaveAttribute('aria-describedby');
-  });
-
-  test('Does not set aria-describedby when description is provided but aria-describedby is empty string', () => {
-    render(
-      <Radio id="test-id" name="check" aria-label="test radio" description="test description" aria-describedby="" />
-    );
-
-    const radio = screen.getByRole('radio');
-
-    expect(radio).not.toHaveAttribute('aria-describedby');
-  });
 });

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

@@ -1,83 +1,15 @@
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Tabs, TabsProps } from '../Tabs';
+import { Tabs } from '../Tabs';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
 import { TabTitleIcon } from '../TabTitleIcon';
 import { TabContent } from '../TabContent';
 import { TabContentBody } from '../TabContentBody';
-import { createRef } from 'react';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
-const renderSeparateTabs = (props?: Pick<TabsProps, 'activeKey' | 'defaultActiveKey'>) => {
-  const contentRef1 = createRef<HTMLElement>();
-  const contentRef2 = createRef<HTMLElement>();
-  const contentRef3 = createRef<HTMLElement>();
-
-  let calculatedActiveKey;
-  if (props?.defaultActiveKey) {
-    calculatedActiveKey = props?.defaultActiveKey;
-  } else {
-    calculatedActiveKey = props?.activeKey;
-  }
-
-  return (
-    <>
-      <Tabs id="separateTabs" {...props}>
-        <Tab
-          eventKey={0}
-          title={<TabTitleText>Tab item 1</TabTitleText>}
-          tabContentId="refTab1Section"
-          tabContentRef={contentRef1}
-        />
-        <Tab
-          eventKey={1}
-          title={<TabTitleText>Tab item 2</TabTitleText>}
-          tabContentId="refTab2Section"
-          tabContentRef={contentRef2}
-        />
-        <Tab
-          eventKey={2}
-          title={<TabTitleText>Tab item 3</TabTitleText>}
-          tabContentId="refTab3Section"
-          tabContentRef={contentRef3}
-        />
-      </Tabs>
-      <div>
-        <TabContent
-          eventKey={0}
-          id="refTab1Section"
-          ref={contentRef1}
-          aria-label="Tab item 1"
-          hidden={calculatedActiveKey !== 0}
-        >
-          Tab 1 section
-        </TabContent>
-        <TabContent
-          eventKey={1}
-          id="refTab2Section"
-          ref={contentRef2}
-          aria-label="Tab item 2"
-          hidden={calculatedActiveKey !== 1}
-        >
-          <TabContentBody>Tab 2 section</TabContentBody>
-        </TabContent>
-        <TabContent
-          eventKey={2}
-          id="refTab3Section"
-          ref={contentRef3}
-          aria-label="Tab item 3"
-          hidden={calculatedActiveKey !== 2}
-        >
-          <TabContentBody hasPadding>Tab 3 section with padding </TabContentBody>
-        </TabContent>
-      </div>
-    </>
-  );
-};
-
 test(`Renders with classes ${styles.tabs} and ${styles.modifiers.animateCurrent} by default`, () => {
   render(
     <Tabs role="region">
@@ -497,46 +429,6 @@ test('should render tabs with separate content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('should render correct tab content for uncontrolled tabs with separate content', () => {
-  render(renderSeparateTabs({ defaultActiveKey: 1 }));
-
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-});
-
-test('should correctly advance tab content for uncontrolled tabs with separate content', async () => {
-  render(renderSeparateTabs({ defaultActiveKey: 1 }));
-
-  userEvent.setup();
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-  await userEvent.click(screen.getByRole('tab', { name: /Tab item 1/i }));
-  expect(screen.getByText(/Tab 1 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).not.toBeVisible();
-});
-
-test('should render correct tab content for controlled tabs with separate content', () => {
-  render(renderSeparateTabs({ activeKey: 1 }));
-
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-});
-
-test('should correctly advance tab content for controlled tabs with separate content', async () => {
-  render(renderSeparateTabs({ activeKey: 1 }));
-
-  userEvent.setup();
-  expect(screen.getByText(/Tab 1 section/i)).not.toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 3 section with padding/i)).not.toBeVisible();
-  await userEvent.click(screen.getByRole('tab', { name: /Tab item 1/i }));
-  expect(screen.getByText(/Tab 1 section/i)).toBeVisible();
-  expect(screen.getByText(/Tab 2 section/i)).not.toBeVisible();
-});
-
 test('should render box tabs of secondary variant', () => {
   const { asFragment } = render(
     <Tabs id="boxSecondaryVariantTabs" isBox variant="secondary">

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-24"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-25"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"