@patternfly/react-core 4.267.12 → 4.267.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.267.12",
+  "version": "4.267.14",
   "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",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "a8d0266963a7cb1b09500077cb5131401e4abca5"
+  "gitHead": "2ebc9fdc95102eaf3acb7a25e58571c3cf1d499b"
 }

package/src/components/Menu/MenuGroup.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 
-export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
+export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Items within group */
   children?: React.ReactNode;
   /** Additional classes added to the MenuGroup */
   className?: string;
   /** Group label */
-  label?: string;
+  label?: React.ReactNode | React.FC;
   /** ID for title label */
   titleId?: string;
   /** Forwarded ref */
@@ -25,16 +25,23 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   innerRef,
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
-}: MenuGroupProps) => (
-  <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
-    {label && (
-      <HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
-        {label}
-      </HeadingLevel>
-    )}
-    {children}
-  </section>
-);
+}: MenuGroupProps) => {
+  const Wrapper = typeof label === 'function' ? label : HeadingLevel;
+  return (
+    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+      <>
+        {['function', 'string'].includes(typeof label) ? (
+          <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
+            {label as React.ReactNode}
+          </Wrapper>
+        ) : (
+          label
+        )}
+        {children}
+      </>
+    </section>
+  );
+};
 
 export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
   <MenuGroupBase {...props} innerRef={ref} />

package/src/components/Page/examples/Page.md

@@ -23,49 +23,99 @@ import './page.css';
 
 ## Examples
 
-### Vertical nav
+### Basic page components
+
+A page will typically contain the following components: 
+
+- A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
+  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`. 
+- A `<PageSidebar>` for vertical navigation 
+- 1 or more `<PageSection>` components
+
+### Vertical navigation
+
+To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, use the `nav` property of the `<PageSidebar>`. 
+
+The `isNavOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the navigation sidebar is visible. 
 
 ```ts file="./PageVerticalNav.tsx"
 ```
 
-### Horizontal nav
+### Legacy page header
+
+This example shows the legacy implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
+
+```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
+```
+
+### Horizontal navigation
+
+To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
 
 ```ts file="./PageHorizontalNav.tsx"
 ```
 
-### Tertiary nav
+### Legacy tertiary navigation
+
+[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation. 
+
+Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
 
 ```ts file="./PageTertiaryNav.tsx"
 ```
 
-### With or without fill
+### Uncontrolled navigation
+
+When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageHeader>`.
+
+```ts file="./PageUncontrolledNav.tsx"
+```
+
+### Filled page sections
+
+By default, the last page section is "filled", meaning it fills the available vertical space of a page.
+
+To change the default behavior, use the `isFilled` property. To make other page sections "filled", set `isFilled` equal to "true". To disable the last page section from being "filled", set `isFilled` equal to "false".
 
 ```ts file="./PageWithOrWithoutFill.tsx"
 ```
 
 ### Main section padding
 
-```ts file="./PageMainSectionPadding.tsx"
-```
+To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’. 
 
-### Uncontrolled nav
+As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'. 
 
-```ts file="./PageUncontrolledNav.tsx"
+To remove padding entirely, pass 'noPadding' to the `default` breakpoint. For example, the second section in this example passes in `padding={{ default: 'noPadding' }}`. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.
+
+To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg',  'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
+
+To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg'  'xl', and '2xl' breakpoints will have `noPadding`.
+
+```ts file="./PageMainSectionPadding.tsx"
 ```
 
 ### Group section
 
-```ts file="./PageGroupSection.tsx"
-```
+To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`. 
 
-### Vertical nav using PageHeader component
+The following example adds a group containing `<PageNavigation>`, `<PageBreadcrumb>`, and `<PageSection>` components.
 
-This example is provided because PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
+To add additional components and information to a group, you may use the following properties: 
 
-```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
+- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`. 
+- To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
+- To specify additional group content, use `additionalGroupedContent`. 
+
+
+```ts file="./PageGroupSection.tsx"
 ```
 
 ### Centered section
 
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property.  When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+
+The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
+
 ```ts file="./PageCenteredSection.tsx"
 ```

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

@@ -591,4 +591,4 @@ test('prepends create option to list of options if isCreateOptionOnTop flag is s
 
   const createOption = screen.getAllByRole('option')[0];
   expect(createOption).toHaveTextContent('Create "m"');
-});
+});