@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.6

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.0.0-alpha.4","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.0.0-alpha.5","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.0.0-alpha.4","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.0.0-alpha.5","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.0.0-alpha.4","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.0.0-alpha.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.6",
   "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",
@@ -46,9 +46,9 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.4",
-    "@patternfly/react-styles": "^6.0.0-alpha.4",
-    "@patternfly/react-tokens": "^6.0.0-alpha.4",
+    "@patternfly/react-icons": "^6.0.0-alpha.5",
+    "@patternfly/react-styles": "^6.0.0-alpha.5",
+    "@patternfly/react-tokens": "^6.0.0-alpha.5",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0213323de9e62364f8cd3f401bec86f1f34ee4fe"
+  "gitHead": "cddbcdf996451d6157f6c191f67b736ddeb073b0"
 }

package/src/components/Banner/Banner.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
+export type BannerColor = 'red' | 'orangered' | 'orange' | 'gold' | 'green' | 'cyan' | 'blue' | 'purple';
+
+export type BannerStatus = 'success' | 'warning' | 'danger' | 'info' | 'custom';
+
 export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the banner. */
   children?: React.ReactNode;
@@ -13,29 +17,48 @@ export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
    * be passed in when the banner conveys status/severity.
    */
   screenReaderText?: string;
-  /** Variant styles for the banner. */
-  variant?: 'default' | 'blue' | 'red' | 'green' | 'gold';
+  /** Color options for the banner, will be overwritten by any applied using the status prop. */
+  color?: BannerColor;
+  /** Status style options for the banner, will overwrite any color applied using the color prop. */
+  status?: BannerStatus;
+}
+interface StatusBanner extends BannerProps {
+  color?: never;
+  status?: BannerStatus;
 }
 
-export const Banner: React.FunctionComponent<BannerProps> = ({
+interface NonStatusBanner extends BannerProps {
+  color?: BannerColor;
+  status?: never;
+}
+
+export const Banner: React.FunctionComponent<StatusBanner | NonStatusBanner> = ({
   children,
   className,
-  variant = 'default',
   screenReaderText,
   isSticky = false,
+  color,
+  status,
   ...props
-}: BannerProps) => (
-  <div
-    className={css(
-      styles.banner,
-      styles.modifiers[variant as 'green' | 'red' | 'gold' | 'blue'],
-      isSticky && styles.modifiers.sticky,
-      className
-    )}
-    {...props}
-  >
-    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
-    {children}
-  </div>
-);
+}: BannerProps) => {
+  const getStatusOrColorModifier = () => {
+    if (status) {
+      return styles.modifiers[status];
+    }
+
+    if (color) {
+      return styles.modifiers[color];
+    }
+  };
+
+  return (
+    <div
+      className={css(styles.banner, getStatusOrColorModifier(), isSticky && styles.modifiers.sticky, className)}
+      {...props}
+    >
+      {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
+      {children}
+    </div>
+  );
+};
 Banner.displayName = 'Banner';

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

@@ -27,31 +27,76 @@ test('Renders with custom class name when className prop is provided', () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
-test('Renders without any modifier class when variant prop is not passed', () => {
+test('Renders without any modifier class when color and status props are not passed', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass(styles.banner, { exact: true });
 });
 
-test('Renders with class name pf-m-green when "green" is passed to variant prop', () => {
-  render(<Banner variant="green">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
+test('Renders with class name pf-m-red when "red" is passed to color prop', () => {
+  render(<Banner color="red">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
 });
 
-test('Renders with class name pf-m-red when "red" is passed to variant prop', () => {
-  render(<Banner variant="red">Test</Banner>);
-  expect(screen.getByText('Test')).toHaveClass('pf-m-red');
+test('Renders with class name pf-m-orangered when "orangered" is passed to color prop', () => {
+  render(<Banner color="orangered">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-orangered');
 });
 
-test('Renders with class name pf-m-gold when "gold" is passed to variant prop', () => {
-  render(<Banner variant="gold">Test</Banner>);
+test('Renders with class name pf-m-orange when "orange" is passed to color prop', () => {
+  render(<Banner color="orange">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-orange');
+});
+
+test('Renders with class name pf-m-gold when "gold" is passed to color prop', () => {
+  render(<Banner color="gold">Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-m-gold');
 });
 
-test('Renders with class name pf-m-blue when "blue" is passed to variant prop', () => {
-  render(<Banner variant="blue">Test</Banner>);
+test('Renders with class name pf-m-green when "green" is passed to color prop', () => {
+  render(<Banner color="green">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-green');
+});
+
+test('Renders with class name pf-m-cyan when "cyan" is passed to color prop', () => {
+  render(<Banner color="cyan">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-cyan');
+});
+
+test('Renders with class name pf-m-blue when "blue" is passed to color prop', () => {
+  render(<Banner color="blue">Test</Banner>);
   expect(screen.getByText('Test')).toHaveClass('pf-m-blue');
 });
 
+test('Renders with class name pf-m-purple when "purple" is passed to color prop', () => {
+  render(<Banner color="purple">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-purple');
+});
+
+test('Renders with class name pf-m-success when "success" is passed to status prop', () => {
+  render(<Banner status="success">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-success');
+});
+
+test('Renders with class name pf-m-warning when "warning" is passed to status prop', () => {
+  render(<Banner status="warning">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-warning');
+});
+
+test('Renders with class name pf-m-danger when "danger" is passed to status prop', () => {
+  render(<Banner status="danger">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-danger');
+});
+
+test('Renders with class name pf-m-info when "info" is passed to status prop', () => {
+  render(<Banner status="info">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-info');
+});
+
+test('Renders with class name pf-m-custom when "custom" is passed to status prop', () => {
+  render(<Banner status="custom">Test</Banner>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-custom');
+});
+
 test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
   expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');

package/src/components/Banner/examples/Banner.md

@@ -15,7 +15,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ### Basic
 
-Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
+Banners can be styled with one of 9 different colors using the `color` prop. A basic banner should only be used when the banner color does not represent status or severity.
 
 ```ts file="./BannerBasic.tsx"
 
@@ -23,7 +23,9 @@ Banners can be styled with one of 5 different colors. A basic banner should only
 
 ### Status
 
-When a banner is used to convey status, it is advised to pass in an icon inside the banner to convey the status in a way besides just color. The `screenReaderText` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
+When a banner is used to convey status it should be styled using the `status` prop. Additionally, it is advised to pass an icon inside the banner to convey the status in a way besides just color.
+
+The `screenReaderText` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
 
 In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.
 

package/src/components/Banner/examples/BannerBasic.tsx

@@ -5,12 +5,20 @@ export const BannerBasic: React.FunctionComponent = () => (
   <>
     <Banner>Default banner</Banner>
     <br />
-    <Banner variant="blue">Blue banner</Banner>
+    <Banner color="red">Red banner</Banner>
     <br />
-    <Banner variant="red">Red banner</Banner>
+    <Banner color="orangered">Orangered banner</Banner>
     <br />
-    <Banner variant="green">Green banner</Banner>
+    <Banner color="orange">Orange banner</Banner>
     <br />
-    <Banner variant="gold">Gold banner</Banner>
+    <Banner color="gold">Gold banner</Banner>
+    <br />
+    <Banner color="green">Green banner</Banner>
+    <br />
+    <Banner color="cyan">Cyan banner</Banner>
+    <br />
+    <Banner color="blue">Blue banner</Banner>
+    <br />
+    <Banner color="purple">Purple banner</Banner>
   </>
 );

package/src/components/Banner/examples/BannerStatus.tsx

@@ -8,25 +8,25 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const BannerStatus: React.FunctionComponent = () => (
   <>
-    <Banner screenReaderText="Default banner">
+    <Banner screenReaderText="Success banner" status="success">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <BellIcon />
+          <CheckCircleIcon />
         </FlexItem>
-        <FlexItem>Default banner</FlexItem>
+        <FlexItem>Success banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Info banner" variant="blue">
+    <Banner screenReaderText="Warning banner" status="warning">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <InfoCircleIcon />
+          <ExclamationTriangleIcon />
         </FlexItem>
-        <FlexItem>Info banner</FlexItem>
+        <FlexItem>Warning banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Danger banner" variant="red">
+    <Banner screenReaderText="Danger banner" status="danger">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
           <ExclamationCircleIcon />
@@ -35,21 +35,21 @@ export const BannerStatus: React.FunctionComponent = () => (
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Success banner" variant="green">
+    <Banner screenReaderText="Info banner" status="info">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <CheckCircleIcon />
+          <InfoCircleIcon />
         </FlexItem>
-        <FlexItem>Success banner</FlexItem>
+        <FlexItem>Info banner</FlexItem>
       </Flex>
     </Banner>
     <br />
-    <Banner screenReaderText="Warning banner" variant="gold">
+    <Banner screenReaderText="Custom banner" status="custom">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <ExclamationTriangleIcon />
+          <BellIcon />
         </FlexItem>
-        <FlexItem>Warning banner</FlexItem>
+        <FlexItem>Custom banner</FlexItem>
       </Flex>
     </Banner>
   </>

package/src/components/Menu/MenuItem.tsx

@@ -29,6 +29,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   target?: string;
   /** Navigation link relationship. Only set when the to property is present. */
   rel?: string;
+  /** Navigation link download. Only set when the to property is present. */
+  download?: string;
   /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
@@ -119,6 +121,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   tooltipProps,
   rel,
   target,
+  download,
   ...props
 }: MenuItemProps) => {
   const {
@@ -271,7 +274,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       // prevent invalid 'disabled' attribute on <a> tags
       disabled: null,
       target: isExternalLink ? '_blank' : target,
-      rel
+      rel,
+      download
     };
   } else if (Component === 'button') {
     additionalProps = {

package/src/components/Popover/Popover.tsx

@@ -415,7 +415,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       ref={popoverRef}
       active={focusTrapActive}
       focusTrapOptions={{
-        returnFocusOnDeactivate: true,
+        returnFocusOnDeactivate: propWithFocusTrap !== false,
         clickOutsideDeactivates: true,
         // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
         // We want to prevent this in case false is ever passed in.

package/src/components/Select/examples/Select.md

@@ -13,72 +13,112 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
 
-`Select` builds off of the Menu component suite to wrap commonly used properties and functions for a select menu. See the [Menu documentation](/components/menus/menu) for a full list of properties that may be passed through `Select` to further customize the select menu, or the [custom menu examples](/components/menus/custom-menus) for additional examples of fully functional menus.
+Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the [menu documentation](/components/menus/menu) for a full list of properties that may be used to further customize a select menu. View the [custom menu examples](/components/menus/custom-menus) to see examples of fully functional select menus.
 
-### Single
+### Single select
+To let users select a single item from a list, use a single select menu.
+
+You can add multiple `<SelectOption>` components to build out a list of menu items. For each select option, pass a relevant option label to the `value` property.
+
+To disable the select menu toggle, use the `isDisabled` property. In the following example, select the checkbox to observe this behavior.
 
 ```ts file="./SelectBasic.tsx"
 
 ```
 
-### Option variations
+### Select option variants
+
+The following example showcases different option variants and customizations that are commonly used in a select menu. 
+
+To create these variants, you can pass different properties into a `<SelectOption>` component. 
 
-Showcases different option variants and customizations that are commonly used in a select menu. For a more complete list, see the [Menu documentation](/components/menus/menu).
+This example provides examples of: 
+
+- An option with a description, which is created by using the `description` property.
+- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon. 
+- An option with an icon, which is created by using the `icon` property. 
+- An option that is disabled by using the `isDisabled` property. 
 
 ```ts file="./SelectOptionVariations.tsx"
 
 ```
 
-### Grouped single
+### With grouped items
+To group related select options together, use 1 or more `<SelectGroup>` components and title each group using the `label` property.
 
 ```ts file="./SelectGrouped.tsx"
 
 ```
 
-### Checkbox
+### Checkbox select
+To let users select multiple list options via checkbox input, use a checkbox select. 
+
+To create a checkbox select, pass `role="menu"` to the `<Select>`, and `hasCheckbox` into each `<SelectOption>` component. To indicate that an option is selected, use the `isSelected` property.
+
+By default, the menu toggle will display a badge to indicate the number of items that a user has selected.
 
 ```ts file="./SelectCheckbox.tsx"
 
 ```
 
 ### Typeahead
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
+To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
 ```ts file="./SelectTypeahead.tsx"
 
 ```
 
 ### Typeahead with create option
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
+
+To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
+
+The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
 
 ```ts file="./SelectTypeaheadCreatable.tsx"
 
 ```
 
 ### Multiple typeahead with chips
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+
+When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
 
 ```ts file="./SelectMultiTypeahead.tsx"
 
 ```
 
 ### Multiple typeahead with create option
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
 
 ```
 
 ### Multiple typeahead with checkboxes
+By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
 ```ts file="./SelectMultiTypeaheadCheckbox.tsx"
 
 ```
 
-### View more
+### With view more 
+
+To reduce the processing load for long select lists, you can add a "View more" action to load additional items.
+
+The following example shows 3 items before the "View more" link, but you can adjust the number of visible items for your use case.
 
 ```ts file="./SelectViewMore.tsx"
 
 ```
 
-### Footer
+### With a footer
+
+You can add a `<MenuFooter>` component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.
+
 
 ```ts file="./SelectFooter.tsx"
 
-```
+```