@patternfly/react-core 5.1.1-prerelease.9 → 5.2.0-prerelease.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.8","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":"5.2.0-prerelease.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.8","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":"5.2.0-prerelease.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.8","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":"5.2.0-prerelease.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.9",
+  "version": "5.2.0-prerelease.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",
@@ -45,15 +45,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": "^5.2.0-prerelease.0",
+    "@patternfly/react-styles": "^5.2.0-prerelease.0",
+    "@patternfly/react-tokens": "^5.2.0-prerelease.0",
     "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",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -63,6 +63,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^3.21.5",
     "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-svg": "2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.4"
   },
@@ -70,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "295aa26fe74665f75560a61f157c3a02122d550a"
+  "gitHead": "f7f065572254120f68487ab4b4caff597ece5ad3"
 }

package/src/components/BackToTop/BackToTop.tsx

@@ -34,12 +34,14 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
   const [scrollElement, setScrollElement] = React.useState(null);
 
   const toggleVisible = () => {
-    const scrolled = scrollElement.scrollY ? scrollElement.scrollY : scrollElement.scrollTop;
-    if (!isAlwaysVisible) {
-      if (scrolled > 400) {
-        setVisible(true);
-      } else {
-        setVisible(false);
+    if (scrollElement) {
+      const scrolled = scrollElement.scrollY ? scrollElement.scrollY : scrollElement.scrollTop;
+      if (!isAlwaysVisible) {
+        if (scrolled > 400) {
+          setVisible(true);
+        } else {
+          setVisible(false);
+        }
       }
     }
   };

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/__tests__/Button.test.tsx

@@ -5,145 +5,203 @@ import { render, screen } from '@testing-library/react';
 import CartArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/cart-arrow-down-icon';
 import { Button, ButtonVariant } from '../Button';
 
-describe('Button', () => {
-  Object.values(ButtonVariant).forEach(variant => {
-    test(`${variant} button`, () => {
-      const { asFragment } = render(
-        <Button variant={variant} aria-label={variant}>
-          {variant} Button
-        </Button>
-      );
-      expect(asFragment()).toMatchSnapshot();
+Object.values(ButtonVariant).forEach((variant) => {
+  if (variant !== 'primary') {
+    test(`Does not render with class pf-m-${variant} by default`, () => {
+      render(<Button>Not {variant} Button</Button>);
+      expect(screen.getByRole('button')).not.toHaveClass(`pf-m-${variant}`);
     });
+  }
+
+  test(`Renders with class pf-m-${variant} when variant=${variant}`, () => {
+    render(<Button variant={variant}>{variant} Button</Button>);
+    expect(screen.getByRole('button')).toHaveClass(`pf-m-${variant}`);
   });
+});
 
-  test('it adds an aria-label to plain buttons', () => {
-    const label = 'aria-label test';
-    render(<Button aria-label={label} />);
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <Button />
+    </div>
+  );
 
-    expect(screen.getByLabelText(label)).toBeTruthy();
-  });
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
 
-  test('link with icon', () => {
-    const { asFragment } = render(
-      <Button variant={ButtonVariant.link} icon={<CartArrowDownIcon />}>
-        Block Button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-v5-c-button by default', () => {
+  render(<Button>Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-v5-c-button');
+});
 
-  test('isBlock', () => {
-    const { asFragment } = render(<Button isBlock>Block Button</Button>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-primary by default', () => {
+  render(<Button>Button</Button>);
+  expect(screen.getByText('Button')).toHaveClass('pf-m-primary');
+});
 
-  test('isDisabled', () => {
-    const { asFragment } = render(<Button isDisabled>Disabled Button</Button>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with custom class', () => {
+  render(<Button className="custom-class">CSS Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('custom-class');
+});
 
-  test('isDanger secondary', () => {
-    const { asFragment } = render(
-      <Button variant="secondary" isDanger>
-        Disabled Button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with an aria-label', () => {
+  const label = 'aria-label test';
+  render(<Button aria-label={label} />);
 
-  test('isDanger link', () => {
-    const { asFragment } = render(
-      <Button variant="link" isDanger>
-        Disabled Button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+  expect(screen.getByLabelText(label)).toHaveAccessibleName('aria-label test');
+});
 
-  test('isAriaDisabled button', () => {
-    const { asFragment } = render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-block when isBlock = true', () => {
+  render(<Button isBlock>Block Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-block');
+});
 
-  test('isAriaDisabled link button', () => {
-    const { asFragment } = render(
-      <Button isAriaDisabled component="a">
-        Disabled yet focusable button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-active when isActive = true', () => {
+  render(<Button isActive>Active Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-active');
+});
 
-  test('isInline', () => {
-    const { asFragment } = render(
-      <Button variant={ButtonVariant.link} isInline>
-        Hovered Button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-disabled when isDisabled = true', () => {
+  render(<Button isDisabled>Disabled Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-disabled');
+});
 
-  test('size small', () => {
-    const { asFragment } = render(<Button size="sm">Small Button</Button>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-aria-disabled when isAriaDisabled = true', () => {
+  render(<Button isAriaDisabled>Disabled yet focusable button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-aria-disabled');
+});
 
-  test('size large', () => {
-    const { asFragment } = render(<Button size="lg">Large Button</Button>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Does not disable button when isDisabled = true and component = a', () => {
+  render(
+    <Button isDisabled component="a">
+      Disabled yet focusable button
+    </Button>
+  );
+  expect(screen.getByText('Disabled yet focusable button')).not.toHaveProperty('disabled');
+});
 
-  test('isLoading', () => {
-    const { asFragment } = render(
-      <Button isLoading spinnerAriaValueText="Loading">
-        Loading Button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-danger when isDanger = true and variant = secondary', () => {
+  render(
+    <Button variant="secondary" isDanger>
+      Danger Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).toHaveClass('pf-m-danger', 'pf-m-secondary');
+});
 
-  test('isLoading inline link', () => {
-    const { asFragment } = render(
-      <Button variant="link" isInline isLoading aria-label="Loading" spinnerAriaValueText="Loading">
-        Loading Button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-danger when isDanger = true and variant = link', () => {
+  render(
+    <Button variant="link" isDanger>
+      Danger Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).toHaveClass('pf-m-danger', 'pf-m-link');
+});
 
-  test('isLoading icon only', () => {
-    const { asFragment } = render(
-      <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Does not render with class pf-m-danger when isDanger = true and variant != secondary or link', () => {
+  render(
+    <Button variant="primary" isDanger>
+      Danger Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).not.toHaveClass('pf-m-danger');
+});
 
-  test('allows passing in a string as the component', () => {
-    const component = 'a';
-    render(<Button component={component}>anchor button</Button>);
+test('Does not render with class pf-m-danger when isDanger = true and variant = tertiary', () => {
+  render(
+    <Button variant="tertiary" isDanger>
+      Danger Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).not.toHaveClass('pf-m-danger');
+});
 
-    expect(screen.getByText('anchor button')).toBeInTheDocument();
-  });
+test('Does not render with class pf-m-danger when isDanger = true and variant = control', () => {
+  render(
+    <Button variant="control" isDanger>
+      Danger Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).not.toHaveClass('pf-m-danger');
+});
 
-  test('allows passing in a React Component as the component', () => {
-    const Component = () => <div>im a div</div>;
-    render(<Button component={Component} />);
+test('Renders with class pf-m-inline when isInline = true and variant = link', () => {
+  render(
+    <Button variant={ButtonVariant.link} isInline>
+      Hovered Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).toHaveClass('pf-m-inline');
+});
 
-    expect(screen.getByText('im a div')).toBeInTheDocument();
-  });
+test('Renders with class pf-m-small when size = sm', () => {
+  render(<Button size="sm">Small Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-small');
+});
 
-  test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => {
-    const { asFragment } = render(
-      <Button component="a" isDisabled>
-        Disabled Anchor Button
-      </Button>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Renders with class pf-m-display-lg when size = lg', () => {
+  render(<Button size="lg">Large Button</Button>);
+  expect(screen.getByRole('button')).toHaveClass('pf-m-display-lg');
+});
 
-  test('setting tab index through props', () => {
-    render(<Button tabIndex={0}>TabIndex 0 Button</Button>);
-    expect(screen.getByRole('button')).toHaveAttribute('tabindex', '0');
-  });
+test('Renders with class pf-m-in-progress when isLoading = true', () => {
+  render(
+    <Button isLoading spinnerAriaValueText="Loading">
+      Loading Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).toHaveClass('pf-m-in-progress');
+});
+
+test('Renders with class pf-m-progress when isLoading is defined and isLoading = false', () => {
+  render(
+    <Button isLoading={false} spinnerAriaValueText="Loading">
+      Loading Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).toHaveClass('pf-m-progress');
+});
+
+test('Renders without class pf-m-progress when isLoading = false and variant = plain', () => {
+  render(
+    <Button variant="plain" isInline isLoading={false} aria-label="Loading" spinnerAriaValueText="Loading">
+      Loading Button
+    </Button>
+  );
+  expect(screen.getByRole('button')).not.toHaveClass('pf-m-progress');
+});
+
+test('Renders custom icon with class pf-m-in-progress when isLoading = true and icon is present', () => {
+  render(
+    <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
+  );
+
+  expect(screen.getByText('ICON')).toBeVisible();
+  expect(screen.getByText('ICON').parentElement).toHaveClass('pf-m-in-progress');
+});
+
+test('Renders as custom component when component is passed', () => {
+  const component = 'a';
+  render(<Button component={component}>anchor button</Button>);
+
+  expect(screen.getByText('anchor button').tagName).toBe('A');
+});
+
+test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => {
+  render(
+    <Button component="a" isDisabled>
+      Disabled Anchor Button
+    </Button>
+  );
+  expect(screen.getByText('Disabled Anchor Button')).toHaveAttribute('tabindex', '-1');
+});
+
+test('setting tab index through props', () => {
+  render(<Button tabIndex={0}>TabIndex 0 Button</Button>);
+  expect(screen.getByRole('button')).toHaveAttribute('tabindex', '0');
+});
+
+test(`Renders basic button`, () => {
+  const { asFragment } = render(<Button aria-label="basic button">Basic Button</Button>);
+  expect(asFragment()).toMatchSnapshot();
 });