@patternfly/react-core 6.6.0 → 6.6.1-prerelease.1

package/src/components/OverflowMenu/examples/OverflowMenu.md

@@ -19,6 +19,8 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
+`OverflowMenuContext` is also available to import and use to further customize and refine behaviors that should respect responsive breakpoints. This context provides the `isBelowBreakpoint` boolean that will update when the specified breakpoint is reached.
+
 ## Examples
 
 ### Simple (responsive)

package/src/components/Page/Page.tsx

@@ -97,6 +97,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   horizontalSubnav?: React.ReactNode;
   /** Accessible label, can be used to name main section */
   mainAriaLabel?: string;
+  /** Reference for the main section of the page */
+  mainRef?: React.RefObject<HTMLDivElement>;
   /** Flag indicating if the horizontal sub navigation should be in a group */
   isHorizontalSubnavGrouped?: boolean;
   /** Flag indicating if the breadcrumb should be in a group */
@@ -132,9 +134,10 @@ class Page extends Component<PageProps, PageState> {
     onNotificationDrawerExpand: () => null,
     mainComponent: 'main',
     getBreakpoint,
-    getVerticalBreakpoint
+    getVerticalBreakpoint,
+    mainRef: undefined
   };
-  mainRef = createRef<HTMLDivElement>();
+  mainRef = this.props?.mainRef ? this.props.mainRef : createRef<HTMLDivElement>();
   pageRef = createRef<HTMLDivElement>();
   observer: any = () => {};
 
@@ -272,6 +275,8 @@ class Page extends Component<PageProps, PageState> {
       groupProps,
       breadcrumbProps,
       isContentFilled,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      mainRef,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;

package/src/components/Pagination/PaginationNavigation.tsx

@@ -1,10 +1,10 @@
 import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 import { css } from '@patternfly/react-styles';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
 import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { OnSetPage } from './Pagination';
@@ -211,7 +211,7 @@ class PaginationNavigation extends Component<PaginationNavigationProps, Paginati
               this.setState({ userInputPage: newPage });
             }}
             aria-label={toPreviousPageAriaLabel}
-            icon={<AngleLeftIcon />}
+            icon={<RhMicronsCaretLeftIcon />}
           />
         </div>
         {!isCompact && (
@@ -247,7 +247,7 @@ class PaginationNavigation extends Component<PaginationNavigationProps, Paginati
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });
             }}
-            icon={<AngleRightIcon />}
+            icon={<RhMicronsCaretRightIcon />}
           />
         </div>
         {!isCompact && (
@@ -262,7 +262,7 @@ class PaginationNavigation extends Component<PaginationNavigationProps, Paginati
                 this.handleNewPage(event, lastPage);
                 this.setState({ userInputPage: lastPage });
               }}
-              icon={<AngleDoubleRightIcon />}
+              icon={<RhMicronsDoubleCaretRightIcon />}
             />
           </div>
         )}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap

@@ -64,24 +64,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 256 512"
-            >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M21 30a.997.997 0 0 1-.707-.293L7.647 17.061a1.501 1.501 0 0 1 0-2.121L20.293 2.293a.999.999 0 1 1 1.414 1.414L9.414 16l12.293 12.293A.999.999 0 0 1 21 30Z"
-              />
-            </svg>
+            <path
+              d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
+            />
           </svg>
         </span>
       </button>
@@ -126,24 +114,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 256 512"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
-              />
-            </svg>
+            <path
+              d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+            />
           </svg>
         </span>
       </button>
@@ -169,24 +145,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 448 512"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="M30.354 17.061 17.708 29.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L28.587 16 16.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121Zm-14-2.122L3.707 2.293a.999.999 0 1 0-1.414 1.414L14.586 16 2.293 28.293a.999.999 0 1 0 1.414 1.414l12.646-12.646a1.501 1.501 0 0 0 0-2.121Z"
-              />
-            </svg>
+            <path
+              d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
+            />
           </svg>
         </span>
       </button>