@patternfly/react-core 4.255.0 → 4.255.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.255.0",
+  "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": "d37ff721bbea043cbb5c51b95829f8143d37c80c"
+  "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>
   );
 };