@patternfly/react-core 6.0.0-alpha.4 → 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.3","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.3","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.3","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.4",
+  "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,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.3",
-    "@patternfly/react-styles": "^6.0.0-alpha.3",
-    "@patternfly/react-tokens": "^6.0.0-alpha.3",
+    "@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"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.28",
+    "@patternfly/patternfly": "6.0.0-alpha.38",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "a566e687735aab45907215a3ee70850908d12c70"
+  "gitHead": "cddbcdf996451d6157f6c191f67b736ddeb073b0"
 }

package/src/components/Avatar/Avatar.tsx

@@ -10,8 +10,6 @@ export interface AvatarProps
   src?: string;
   /** Attribute that specifies the alternate text of the image for the Avatar. */
   alt: string;
-  /** Border to add */
-  border?: 'light' | 'dark';
   /** Size variant of avatar. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
 }
@@ -20,21 +18,9 @@ export const Avatar: React.FunctionComponent<AvatarProps> = ({
   className = '',
   src = '',
   alt,
-  border,
   size,
   ...props
 }: AvatarProps) => (
-  <img
-    src={src}
-    alt={alt}
-    className={css(
-      styles.avatar,
-      styles.modifiers[size],
-      border === 'light' && styles.modifiers.light,
-      border === 'dark' && styles.modifiers.dark,
-      className
-    )}
-    {...props}
-  />
+  <img src={src} alt={alt} className={css(styles.avatar, styles.modifiers[size], className)} {...props} />
 );
 Avatar.displayName = 'Avatar';

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

@@ -12,18 +12,21 @@ test('Renders simple avatar', () => {
   expect(screen.getByTestId('avatar').firstChild).toBeVisible();
 });
 
+// TODO: Need to be updated as part of issue #9880
 test('Renders without any modifier class when border and size props are not passed', () => {
   render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass(styles.avatar, { exact: true });
 });
 
-test('Renders with class name pf-m-light when "light" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="light" />);
+// TODO: Need to be updated/removed as part of issue #9880
+xtest('Renders with class name pf-m-light when "light" is passed as border prop', () => {
+  render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass('pf-m-light');
 });
 
-test('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
-  render(<Avatar alt="avatar" border="dark" />);
+// TODO: Need to be updated/removed as part of issue #9880
+xtest('Renders with class name pf-m-dark when "dark" is passed as border prop', () => {
+  render(<Avatar alt="avatar" />);
   expect(screen.getByRole('img')).toHaveClass('pf-m-dark');
 });
 

package/src/components/Avatar/examples/Avatar.md

@@ -54,7 +54,8 @@ import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from '../../assets/avatarImg.svg';
 
-<Avatar src={avatarImg} alt="avatar" border="light" />;
+// TODO: Need to be updated/removed as part of issue #9880
+<Avatar src={avatarImg} alt="avatar" />;
 ```
 
 ### Bordered - dark
@@ -64,5 +65,6 @@ import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImgDark from '../../assets/avatarImgDark.svg';
 
-<Avatar src={avatarImgDark} alt="avatar" border="dark" />;
+// TODO: Need to be updated/removed as part of issue #9880
+<Avatar src={avatarImgDark} alt="avatar" />;
 ```

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/ExpandableSection/ExpandableSection.tsx

@@ -31,8 +31,6 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
-  /** Forces active state. */
-  isActive?: boolean;
   /** Indicates the expandable section has a detached toggle. */
   isDetached?: boolean;
   /** Flag to indicate if the content is expanded. */
@@ -103,7 +101,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     toggleTextCollapsed: '',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onToggle: (event, isExpanded): void => undefined,
-    isActive: false,
     isDetached: false,
     displaySize: 'default',
     isWidthLimited: false,
@@ -182,8 +179,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
   render() {
     const {
       onToggle: onToggleProp,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      isActive,
       className,
       toggleText,
       toggleTextExpanded,
@@ -253,7 +248,6 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
         className={css(
           styles.expandableSection,
           propOrStateIsExpanded && styles.modifiers.expanded,
-          isActive && styles.modifiers.active,
           displaySize === 'lg' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,

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/Pagination/Pagination.tsx

@@ -119,10 +119,10 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
     xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
     '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
   };
-  /** Flag indicating if pagination is compact. */
-  isCompact?: boolean;
   /** Flag indicating if pagination is disabled. */
   isDisabled?: boolean;
+  /** Flag indicating if pagination is compact. */
+  isCompact?: boolean;
   /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
   /** Flag indicating if pagination should stick to its position (based on variant). */
@@ -285,7 +285,6 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         variant === PaginationVariant.bottom && styles.modifiers.bottom,
         usePageInsets && styles.modifiers.pageInsets,
         formatBreakpointMods(inset, styles),
-        isCompact && styles.modifiers.compact,
         isStatic && styles.modifiers.static,
         isSticky && styles.modifiers.sticky,
         className

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

@@ -19,7 +19,7 @@ describe('Pagination', () => {
     });
 
     test('should render correctly compact', () => {
-      const { asFragment } = render(<Pagination itemCount={20} isCompact />);
+      const { asFragment } = render(<Pagination itemCount={20} />);
       expect(asFragment()).toMatchSnapshot();
     });