@patternfly/react-core 4.254.1 → 4.255.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.254.1",
+  "version": "4.255.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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "b609c0cf576028d64a9ab93f42b34d84c4f5d54f"
+  "gitHead": "bb273c8429b6dc5794f70dc8ee4c0ea9a15c20f1"
 }

package/src/components/Alert/AlertIcon.tsx

@@ -26,9 +26,9 @@ export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
 
 export const AlertIcon = ({ variant, customIcon, className = '', ...props }: AlertIconProps) => {
   const Icon = variantIcons[variant];
-  return (
+  return Icon ? (
     <div {...props} className={css(styles.alertIcon, className)}>
       {customIcon || <Icon />}
     </div>
-  );
+  ) : null;
 };

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

@@ -103,6 +103,22 @@ describe('Button', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('isLoading inline link', () => {
+    const { asFragment } = render(
+      <Button variant="link" isInline isLoading aria-label="Loading" spinnerAriaValueText="Loading">
+        Loading Button
+      </Button>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('isLoading icon only', () => {
+    const { asFragment } = render(
+      <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('allows passing in a string as the component', () => {
     const component = 'a';
     render(<Button component={component}>anchor button</Button>);
@@ -130,11 +146,4 @@ describe('Button', () => {
     render(<Button tabIndex={0}>TabIndex 0 Button</Button>);
     expect(screen.getByRole('button')).toHaveAttribute('tabindex', '0');
   });
-
-  test('isLoading icon only', () => {
-    const { asFragment } = render(
-      <Button variant="plain" isLoading aria-label="Upload" spinnerAriaValueText="Loading" icon={<div>ICON</div>} />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
 });

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

@@ -240,6 +240,42 @@ exports[`Button isLoading icon only 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Button isLoading inline link 1`] = `
+<DocumentFragment>
+  <button
+    aria-disabled="false"
+    aria-label="Loading"
+    class="pf-c-button pf-m-link pf-m-inline pf-m-progress pf-m-in-progress"
+    data-ouia-component-id="OUIA-Generated-Button-link-5"
+    data-ouia-component-type="PF4/Button"
+    data-ouia-safe="true"
+    type="button"
+  >
+    <span
+      class="pf-c-button__progress"
+    >
+      <span
+        aria-label="Contents"
+        aria-valuetext="Loading"
+        class="pf-c-spinner pf-m-md"
+        role="progressbar"
+      >
+        <span
+          class="pf-c-spinner__clipper"
+        />
+        <span
+          class="pf-c-spinner__lead-ball"
+        />
+        <span
+          class="pf-c-spinner__tail-ball"
+        />
+      </span>
+    </span>
+    Loading Button
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Button isSmall 1`] = `
 <DocumentFragment>
   <button

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

@@ -12,6 +12,7 @@ interface LoadingPropsType {
 export const ButtonProgress: React.FunctionComponent = () => {
   const [isPrimaryLoading, setIsPrimaryLoading] = React.useState<boolean>(true);
   const [isSecondaryLoading, setIsSecondaryLoading] = React.useState<boolean>(true);
+  const [isInlineLoading, setIsInlineLoading] = React.useState<boolean>(true);
   const [isUploading, setIsUploading] = React.useState<boolean>(false);
 
   const primaryLoadingProps = {} as LoadingPropsType;
@@ -24,6 +25,11 @@ export const ButtonProgress: React.FunctionComponent = () => {
   secondaryLoadingProps.spinnerAriaLabel = 'Content being loaded';
   secondaryLoadingProps.isLoading = isSecondaryLoading;
 
+  const inlineLoadingProps = {} as LoadingPropsType;
+  inlineLoadingProps.spinnerAriaValueText = 'Loading';
+  inlineLoadingProps.spinnerAriaLabel = 'Content being loaded';
+  inlineLoadingProps.isLoading = isInlineLoading;
+
   const uploadingProps = {} as LoadingPropsType;
   uploadingProps.spinnerAriaValueText = 'Loading';
   uploadingProps.spinnerAriaLabel = 'Uploading data';
@@ -37,18 +43,25 @@ export const ButtonProgress: React.FunctionComponent = () => {
         onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
         {...primaryLoadingProps}
       >
-        {isPrimaryLoading ? 'Pause loading logs' : 'Resume loading logs'}
+        {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
       </Button>{' '}
       <Button variant="secondary" onClick={() => setIsSecondaryLoading(!isSecondaryLoading)} {...secondaryLoadingProps}>
         {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
       </Button>{' '}
+      <br />
+      <br />
       <Button
         variant="plain"
         {...(!isUploading && { 'aria-label': 'Upload' })}
         onClick={() => setIsUploading(!isUploading)}
         icon={<UploadIcon />}
         {...uploadingProps}
-      />
+      />{' '}
+      <br />
+      <br />
+      <Button variant="link" isInline onClick={() => setIsInlineLoading(!isInlineLoading)} {...inlineLoadingProps}>
+        {isInlineLoading ? 'Pause loading logs' : 'Resume loading logs'}
+      </Button>{' '}
     </React.Fragment>
   );
 };

package/src/next/components/Dropdown/Dropdown.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
 import { Popper } from '../../../helpers/Popper/Popper';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
 
-export interface DropdownProps extends MenuProps {
+export interface DropdownProps extends MenuProps, OUIAProps {
   /** Anything which can be rendered in a dropdown. */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown. */
@@ -25,6 +26,10 @@ export interface DropdownProps extends MenuProps {
   minWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -38,11 +43,14 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   isScrollable,
   minWidth,
   innerRef,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
   const containerRef = React.useRef<HTMLDivElement>();
+  const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
   React.useEffect(() => {
@@ -104,7 +112,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     </Menu>
   );
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} {...ouiaProps}>
       <Popper
         trigger={toggle(toggleRef)}
         removeFindDomNode

package/src/next/components/Dropdown/DropdownItem.tsx

@@ -1,24 +1,34 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuItemProps, MenuItem } from '../../../components/Menu';
+import { useOUIAProps, OUIAProps } from '../../../helpers';
 
-export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'> {
+export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
   /** Anything which can be rendered in a dropdown item */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown item */
   className?: string;
   /** Description of the dropdown item */
   description?: React.ReactNode;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
   description,
+  ouiaId,
+  ouiaSafe,
   ...props
-}: DropdownItemProps) => (
-  <MenuItem className={css(className)} description={description} {...props}>
-    {children}
-  </MenuItem>
-);
+}: DropdownItemProps) => {
+  const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
+  return (
+    <MenuItem className={css(className)} description={description} {...ouiaProps} {...props}>
+      {children}
+    </MenuItem>
+  );
+};
 DropdownItem.displayName = 'DropdownItem';