@patternfly/react-core 5.1.1-prerelease.8 → 6.0.0-alpha.1

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":"5.1.1-prerelease.7","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.0","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":"5.1.1-prerelease.7","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.0","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":"5.1.1-prerelease.7","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.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.8",
+  "version": "6.0.0-alpha.1",
   "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",
@@ -21,7 +21,8 @@
     "*.scss"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "alpha"
   },
   "repository": {
     "type": "git",
@@ -45,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.1.1-prerelease.5",
-    "@patternfly/react-styles": "^5.1.1-prerelease.5",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.5",
+    "@patternfly/react-icons": "^6.0.0-alpha.1",
+    "@patternfly/react-styles": "^6.0.0-alpha.1",
+    "@patternfly/react-tokens": "^6.0.0-alpha.1",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.24",
+    "@patternfly/patternfly": "5.1.0-prerelease.28",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -70,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "f9163545ec6135eb4ef93ff40e92e670b226c842"
+  "gitHead": "abccf530a0a642a4d7b4eda6ada09c5822c855b0"
 }

package/src/components/BackToTop/BackToTop.tsx

@@ -82,7 +82,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="right">
+      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="end">
         {title}
       </Button>
     </div>

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

@@ -135,7 +135,7 @@ test('Passes correct variant to button child component', () => {
 test('Passes correct iconPosition to button child component', () => {
   render(<BackToTop />);
 
-  expect(screen.getByText('iconPosition: right')).toBeVisible();
+  expect(screen.getByText('iconPosition: end')).toBeVisible();
 });
 
 test('Passes correct icon to button child component', () => {

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

@@ -20,7 +20,7 @@ exports[`Matches the snapshot 1`] = `
       isInline: undefined
     </p>
     <p>
-      iconPosition: right
+      iconPosition: end
     </p>
     <div
       data-testid="icon"

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

@@ -1,20 +1,34 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { BackgroundImage } from '../BackgroundImage';
+import styles from '@patternfly/react-styles/css/components/BackgroundImage/background-image';
 
-test('has default className and src URL applied to style', () => {
+test(`renders with default className ${styles.backgroundImage}`, () => {
   render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveClass(styles.backgroundImage, { exact: true });
+});
+
+test('spreads additional props', () => {
+  render(<BackgroundImage src="/image/url.png" data-testid="test-id" lang="en-US" />);
+  expect(screen.getByTestId('test-id')).toHaveProperty('lang');
+});
 
-  const backgroundImage = screen.getByTestId('test-id');
-  const backgroundImageStyle = backgroundImage.getAttribute('style');
+test('has src URL applied to style', () => {
+  render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
 
-  expect(backgroundImage).toHaveClass('pf-v5-c-background-image');
-  expect(backgroundImageStyle).toContain('--pf-v5-c-background-image--BackgroundImage');
-  expect(backgroundImageStyle).toContain('/image/url.png');
+  expect(screen.getByTestId('test-id')).toHaveAttribute(
+    'style',
+    '--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);'
+  );
 });
 
-test('has additional className when one is provided', () => {
+test('renders with custom className when one is provided', () => {
   render(<BackgroundImage src="/image/url.png" className="another-class" data-testid="test-id" />);
 
   expect(screen.getByTestId('test-id')).toHaveClass('another-class');
 });
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<BackgroundImage src="/image/url.png" data-testid="test-id" />);
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-background-image"
+    data-testid="test-id"
+    style="--pf-v5-c-background-image--BackgroundImage: url(/image/url.png);"
+  />
+</DocumentFragment>
+`;

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

@@ -3,34 +3,109 @@ import { render, screen } from '@testing-library/react';
 import { Brand } from '../Brand';
 import '@testing-library/jest-dom';
 
-describe('Brand', () => {
-  test('simple brand', () => {
-    const { asFragment } = render(<Brand alt="brand" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('passing children creates picture brand', () => {
-    render(
-      <Brand alt="brand">
-        <div>test</div>
-      </Brand>
-    );
-    expect(screen.getByText('test')).toBeInTheDocument();
-  });
-
-  test('styles get spread when there are children', () => {
-    render(
-      <Brand alt="brand" data-testid="brand" style={{color: "blue"}}>
-        <div>test width</div>
-      </Brand>
-    );
-    expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`);
-  });
-
-  test('styles get spread when there are no children', () => {
-    render(
-      <Brand alt="brand no children" style={{width: "30px"}} />
-    );
-    expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`);
-  });
+test('simple brand', () => {
+  render(<Brand alt="brand" />);
+  expect(screen.getByAltText('brand')).toBeInTheDocument();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Brand alt="brand" className="custom-class" />);
+  expect(screen.getByAltText('brand')).toHaveClass('custom-class');
+});
+
+test('Renders with custom class name when className prop and children are provided', () => {
+  render(
+    <Brand alt="brand" className="custom-class">
+      <div>test</div>
+    </Brand>
+  );
+  expect(screen.getByText('test')?.parentElement).toHaveClass('custom-class');
+});
+
+test('Renders passed children', () => {
+  render(
+    <Brand alt="brand">
+      <div>test</div>
+    </Brand>
+  );
+  expect(screen.getByText('test')).toBeInTheDocument();
+});
+
+test('Renders as picture when children are present', () => {
+  render(
+    <Brand alt="brand">
+      <div>test</div>
+    </Brand>
+  );
+  expect(screen.getByText('test')?.parentElement?.tagName).toBe('PICTURE');
+});
+
+test('Renders as img when no children are present', () => {
+  render(<Brand alt="brand" />);
+  expect(screen.getByAltText('brand')?.tagName).toBe('IMG');
+});
+
+test('Has correct src with passed src prop', () => {
+  render(<Brand alt="brand" src="test.png" />);
+  const image = screen.getByRole('img') as HTMLImageElement;
+  expect(image.src).toMatch('test.png');
+});
+
+test('Has correct alt text with passed alt prop', () => {
+  render(<Brand alt="brand" src="test.png" />);
+
+  expect(screen.getByAltText('brand')).toBeTruthy();
+});
+
+test('Has correct src with passed children', () => {
+  render(
+    <Brand alt="brand" src="test.png">
+      <div>test width</div>
+    </Brand>
+  );
+  const image = screen.getByRole('img') as HTMLImageElement;
+  expect(image.src).toMatch('test.png');
+});
+
+test('Has correct alt text with passed children', () => {
+  render(
+    <Brand alt="brand" src="test.png">
+      <div>test width</div>
+    </Brand>
+  );
+  expect(screen.getByAltText('brand')).toBeTruthy();
+});
+
+test('styles get spread when there are children', () => {
+  render(
+    <Brand alt="brand" data-testid="brand" style={{ color: 'blue' }}>
+      <div>test width</div>
+    </Brand>
+  );
+  expect(screen.getByTestId('brand')).toHaveStyle(`color: blue`);
+});
+
+test('styles get spread when there are no children', () => {
+  render(<Brand alt="brand no children" style={{ width: '30px' }} />);
+  expect(screen.getByAltText('brand no children')).toHaveStyle(`width: 30px`);
+});
+
+test('width styles are present when passed', () => {
+  render(
+    <Brand
+      alt="brand with widths"
+      widths={{
+        default: '100px',
+        sm: '25px',
+        md: '50px',
+        lg: '100px',
+        xl: '125px',
+        '2xl': '150px'
+      }}
+    />
+  );
+  expect(screen.getByAltText('brand with widths')).toHaveAttribute(
+    'style',
+    '--pf-v5-c-brand--Width: 100px; --pf-v5-c-brand--Width-on-sm: 25px; --pf-v5-c-brand--Width-on-md: 50px; --pf-v5-c-brand--Width-on-lg: 100px; --pf-v5-c-brand--Width-on-xl: 125px; --pf-v5-c-brand--Width-on-2xl: 150px;'
+  );
 });

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -7,6 +7,7 @@ import {
   Dropdown,
   DropdownList,
   DropdownItem,
+  Icon,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
@@ -14,13 +15,34 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 const dropdownItems = [
-  <DropdownItem icon={<AngleLeftIcon />} key="edit">
+  <DropdownItem
+    icon={
+      <Icon shouldMirrorRTL>
+        <AngleLeftIcon />
+      </Icon>
+    }
+    key="edit"
+  >
     Edit
   </DropdownItem>,
-  <DropdownItem icon={<AngleLeftIcon />} key="action">
+  <DropdownItem
+    icon={
+      <Icon shouldMirrorRTL>
+        <AngleLeftIcon />
+      </Icon>
+    }
+    key="action"
+  >
     Deployment
   </DropdownItem>,
-  <DropdownItem icon={<AngleLeftIcon />} key="apps">
+  <DropdownItem
+    icon={
+      <Icon shouldMirrorRTL>
+        <AngleLeftIcon />
+      </Icon>
+    }
+    key="apps"
+  >
     Applications
   </DropdownItem>
 ];

package/src/components/Button/Button.tsx

@@ -70,8 +70,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   type?: 'button' | 'submit' | 'reset';
   /** Adds button variant styles */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
-  /** Sets position of the link icon */
-  iconPosition?: 'left' | 'right';
+  /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */
+  iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
   'aria-label'?: string;
   /** Icon for the button. Usable by all variants except for plain. */
@@ -108,7 +108,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isInline = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
-  iconPosition = 'left',
+  iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
   ouiaId,
@@ -183,11 +183,11 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         </span>
       )}
       {variant === ButtonVariant.plain && children === null && icon ? icon : null}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && (
         <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
       )}
       {children}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && (
         <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
       )}
       {countOptions && (

package/src/components/Button/examples/ButtonVariations.tsx

@@ -30,7 +30,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
     <Button variant="link" icon={<PlusCircleIcon />}>
       Link
     </Button>{' '}
-    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
       Link
     </Button>{' '}
     <Button variant="link" isInline>

package/src/components/Checkbox/examples/Checkbox.md

@@ -6,46 +6,52 @@ cssPrefix: pf-v5-c-check
 propComponents: ['Checkbox']
 ---
 
-import './checkbox.css';
-
 ## Examples
 
 ### Controlled
 
 ```ts file='./CheckboxControlled.tsx'
+
 ```
 
 ### Uncontrolled
 
 ```ts file='./CheckboxUncontrolled.tsx'
+
 ```
 
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'
+
 ```
 
 ### Checkbox with description
 
 ```ts file='./CheckboxWithDescription.tsx'
+
 ```
 
 ### Checkbox with body
 
 ```ts file='./CheckboxWithBody.tsx'
+
 ```
 
 ### Checkbox with description and body
 
 ```ts file='./CheckboxWithDescriptionBody.tsx'
+
 ```
 
 ### Standalone input
 
 ```ts file='./CheckboxStandaloneInput.tsx'
+
 ```
 
 ### Required input
 
 ```ts file='./CheckboxRequired.tsx'
+
 ```

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -49,22 +49,24 @@ export const CheckboxControlled: React.FunctionComponent = () => {
         onChange={handleChange}
         id="controlled-check-1"
         name="check1"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 1"
-        isChecked={isChecked2}
-        onChange={handleChange}
-        id="controlled-check-2"
-        name="check2"
-      />
-      <Checkbox
-        className="nested"
-        label="Child CheckBox 2"
-        isChecked={isChecked3}
-        onChange={handleChange}
-        id="controlled-check-3"
-        name="check3"
+        body={
+          <>
+            <Checkbox
+              label="Child CheckBox 1"
+              isChecked={isChecked2}
+              onChange={handleChange}
+              id="controlled-check-2"
+              name="check2"
+            />
+            <Checkbox
+              label="Child CheckBox 2"
+              isChecked={isChecked3}
+              onChange={handleChange}
+              id="controlled-check-3"
+              name="check3"
+            />
+          </>
+        }
       />
       <Checkbox
         label="Controlled CheckBox"

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -242,6 +242,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     value={this.state.text as string | number}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
+                    {...(isCode && { dir: 'ltr' })}
                   />
                   <ClipboardCopyButton
                     exitDelay={exitDelay}

package/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx

@@ -36,7 +36,7 @@ class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps>
         contentEditable={!isReadOnly}
         {...props}
       >
-        {isCode ? <pre>{children}</pre> : children}
+        {isCode ? <pre dir="ltr">{children}</pre> : children}
       </div>
     );
   }

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps
@@ -31,7 +32,9 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     aria-expanded={isExpanded}
     {...props}
   >
-    {isExpanded ? <AngleDownIcon aria-hidden="true" /> : <AngleRightIcon aria-hidden="true" />}
+    <div className={css(styles.clipboardCopyToggleIcon)}>
+      <AngleRightIcon aria-hidden="true" />
+    </div>
   </Button>
 );
 ClipboardCopyToggle.displayName = 'ClipboardCopyToggle';

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap

@@ -7,7 +7,9 @@ exports[`expanded code content render 1`] = `
     contenteditable="true"
     id="id-1"
   >
-    <pre>
+    <pre
+      dir="ltr"
+    >
       {
     "name": "@patternfly/react-core",
     "version": "1.33.2"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -15,19 +15,23 @@ exports[`ClipboardCopyToggle toggle button render 1`] = `
     id="my-id"
     type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 256 512"
-      width="1em"
+    <div
+      class="pf-v5-c-clipboard-copy__toggle-icon"
     >
-      <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
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <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>
+    </div>
   </button>
 </DocumentFragment>
 `;

package/src/components/DragDrop/Draggable.tsx

@@ -265,6 +265,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
 
     if (!onDrag({ droppableId, index })) {
       // Consumer disallowed drag
+      droppableItems.forEach((item) => resetDroppableItem(item));
       return;
     }
 

package/src/components/Drawer/Drawer.tsx

@@ -11,7 +11,7 @@ export enum DrawerColorVariant {
 export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
-  /** Content rendered in the left hand panel */
+  /** Content rendered in the drawer panel */
   children?: React.ReactNode;
   /** Indicates if the drawer is expanded */
   isExpanded?: boolean;
@@ -19,8 +19,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   isInline?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
-  /** Position of the drawer panel */
-  position?: 'left' | 'right' | 'bottom';
+  /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
+  position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
 }
@@ -39,7 +39,7 @@ export const DrawerContext = React.createContext<Partial<DrawerContextProps>>({
   isExpanded: false,
   isStatic: false,
   onExpand: () => {},
-  position: 'right',
+  position: 'end',
   drawerRef: null,
   drawerContentRef: null,
   isInline: false
@@ -51,7 +51,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isExpanded = false,
   isInline = false,
   isStatic = false,
-  position = 'right',
+  position = 'end',
   onExpand = () => {},
   ...props
 }: DrawerProps) => {
@@ -66,7 +66,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
           isStatic && styles.modifiers.static,
-          position === 'left' && styles.modifiers.panelLeft,
+          (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,
           className
         )}