chore(button): added inline progress variant to progress demos (#8172)

Author: jenny-s51

packages/react-core/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();
-  });
 });

packages/react-core/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

packages/react-core/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>
   );
 };