feat(spinner): added isInline, updated link button (#8328)

* feat(spinner): added isInline, updated link button * chore(button): update snaps * chore(spinner/button): PR feedback
patternfly · Nov 15, 2022 · 29f76e1 · 29f76e1
1 parent 7dda7a9
commit 29f76e1
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 2 deletions.
diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
@@ -172,6 +172,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         <span className={css(styles.buttonProgress)}>
           <Spinner
             size={spinnerSize.md}
+            isInline={isInline}
             aria-valuetext={spinnerAriaValueText}
             aria-label={spinnerAriaLabel}
             aria-labelledby={spinnerAriaLabelledBy}

diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -257,7 +257,7 @@ exports[`Button isLoading inline link 1`] = `
       <span
         aria-label="Contents"
         aria-valuetext="Loading"
-        class="pf-c-spinner pf-m-md"
+        class="pf-c-spinner pf-m-inline"
         role="progressbar"
       >
         <span

diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx
@@ -20,6 +20,8 @@ export interface SpinnerProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'si
   isSVG?: boolean;
   /** Diameter of spinner set as CSS variable */
   diameter?: string;
+  /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
+  isInline?: boolean;
   /** Accessible label to describe what is loading */
   'aria-label'?: string;
   /** Id of element which describes what is being loaded */
@@ -33,6 +35,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   'aria-valuetext': ariaValueText = 'Loading...',
   isSVG = false,
   diameter,
+  isInline = false,
   'aria-label': ariaLabel,
   'aria-labelledBy': ariaLabelledBy,
   ...props
@@ -41,7 +44,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
 
   return (
     <Component
-      className={css(styles.spinner, styles.modifiers[size], className)}
+      className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
       role="progressbar"
       aria-valuetext={ariaValueText}
       {...(isSVG && { viewBox: '0 0 100 100' })}

diff --git a/packages/react-core/src/components/Spinner/examples/Spinner.md b/packages/react-core/src/components/Spinner/examples/Spinner.md
@@ -17,3 +17,7 @@ propComponents: ['Spinner']
 ### Custom size
 ```ts file="./SpinnerCustomSize.tsx"
 ```
+
+### Inline size
+```ts file="./SpinnerInline.tsx" isBeta
+```
diff --git a/packages/react-core/src/components/Spinner/examples/SpinnerInline.tsx b/packages/react-core/src/components/Spinner/examples/SpinnerInline.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Spinner, Text, TextContent } from '@patternfly/react-core';
+
+export const SpinnerInline: React.FunctionComponent = () => (
+  <React.Fragment>
+    <TextContent>
+      <Text component="h1">
+        Heading
+        <Spinner isInline isSVG aria-label="Spinner in a heading" />
+      </Text>
+      <Text component="p">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
+      </Text>
+      <Text component="h2">
+        Second level
+        <Spinner isInline isSVG aria-label="spinner in a subheading" />
+      </Text>
+      <Text component="p">
+        Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '}
+        <Spinner isInline isSVG aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium
+        urna vel cursus venenatis. Suspendisse potenti.
+      </Text>
+      <small>
+        Sometimes you need small text
+        <Spinner isInline isSVG aria-label="Spinner in a small element" />
+      </small>
+    </TextContent>
+  </React.Fragment>
+);