@patternfly/patternfly 4.178.0 → 4.179.2

package/docs/components/Spinner/examples/Spinner.md

@@ -6,51 +6,6 @@ cssPrefix: pf-c-spinner
 
 ### Basic
 
-```html
-<span class="pf-c-spinner" role="progressbar" aria-label="Loading...">
-  <span class="pf-c-spinner__clipper"></span>
-  <span class="pf-c-spinner__lead-ball"></span>
-  <span class="pf-c-spinner__tail-ball"></span>
-</span>
-
-```
-
-### Multiple sizes
-
-```html
-<span class="pf-c-spinner pf-m-sm" role="progressbar" aria-label="Loading...">
-  <span class="pf-c-spinner__clipper"></span>
-  <span class="pf-c-spinner__lead-ball"></span>
-  <span class="pf-c-spinner__tail-ball"></span>
-</span>
-
-<span class="pf-c-spinner pf-m-md" role="progressbar" aria-label="Loading...">
-  <span class="pf-c-spinner__clipper"></span>
-  <span class="pf-c-spinner__lead-ball"></span>
-  <span class="pf-c-spinner__tail-ball"></span>
-</span>
-
-<span class="pf-c-spinner pf-m-lg" role="progressbar" aria-label="Loading...">
-  <span class="pf-c-spinner__clipper"></span>
-  <span class="pf-c-spinner__lead-ball"></span>
-  <span class="pf-c-spinner__tail-ball"></span>
-</span>
-
-<span class="pf-c-spinner pf-m-xl" role="progressbar" aria-label="Loading...">
-  <span class="pf-c-spinner__clipper"></span>
-  <span class="pf-c-spinner__lead-ball"></span>
-  <span class="pf-c-spinner__tail-ball"></span>
-</span>
-
-```
-
-<br />
-<br />
-<br />
-## SVG spinner
-
-### SVG spinner basic
-
 ```html
 <svg
   class="pf-c-spinner"
@@ -63,7 +18,7 @@ cssPrefix: pf-c-spinner
 
 ```
 
-### SVG spinner, multiple sizes
+### Sizes
 
 ```html
 <svg
@@ -104,7 +59,7 @@ cssPrefix: pf-c-spinner
 
 ```
 
-### SVG spinner, custom size
+### Custom size
 
 ```html
 <svg
@@ -119,6 +74,46 @@ cssPrefix: pf-c-spinner
 
 ```
 
+### Basic (legacy)
+
+```html
+<span class="pf-c-spinner" role="progressbar" aria-label="Loading...">
+  <span class="pf-c-spinner__clipper"></span>
+  <span class="pf-c-spinner__lead-ball"></span>
+  <span class="pf-c-spinner__tail-ball"></span>
+</span>
+
+```
+
+### Sizes (legacy)
+
+```html
+<span class="pf-c-spinner pf-m-sm" role="progressbar" aria-label="Loading...">
+  <span class="pf-c-spinner__clipper"></span>
+  <span class="pf-c-spinner__lead-ball"></span>
+  <span class="pf-c-spinner__tail-ball"></span>
+</span>
+
+<span class="pf-c-spinner pf-m-md" role="progressbar" aria-label="Loading...">
+  <span class="pf-c-spinner__clipper"></span>
+  <span class="pf-c-spinner__lead-ball"></span>
+  <span class="pf-c-spinner__tail-ball"></span>
+</span>
+
+<span class="pf-c-spinner pf-m-lg" role="progressbar" aria-label="Loading...">
+  <span class="pf-c-spinner__clipper"></span>
+  <span class="pf-c-spinner__lead-ball"></span>
+  <span class="pf-c-spinner__tail-ball"></span>
+</span>
+
+<span class="pf-c-spinner pf-m-xl" role="progressbar" aria-label="Loading...">
+  <span class="pf-c-spinner__clipper"></span>
+  <span class="pf-c-spinner__lead-ball"></span>
+  <span class="pf-c-spinner__tail-ball"></span>
+</span>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -136,6 +131,14 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
 
 ### Usage
 
+| Class                      | Applied to      | Outcome                                                                          |
+| -------------------------- | --------------- | -------------------------------------------------------------------------------- |
+| `.pf-c-spinner`            | `<svg>`         | Creates a spinner component. The default is an extra large spinner. **Required** |
+| `.pf-c-spinner__path`      | `<circle>`      | Creates a spinner circle component. **Required**                                 |
+| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration.                   |
+
+### Usage (legacy)
+
 | Class                      | Applied to | Outcome                                                                          |
 | -------------------------- | ---------- | -------------------------------------------------------------------------------- |
 | `.pf-c-spinner`            | `<span>`   | Creates a spinner component. The default is an extra large spinner. **Required** |
@@ -143,14 +146,6 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
 | `.pf-c-spinner__lead-ball` | `<span>`   | Rounds out the beginning of the spinning line. **Required**                      |
 | `.pf-c-spinner__tail-ball` | `<span>`   | Rounds out the end of the spinning line. **Required**                            |
 
-### SVG variant
-
-| Class                      | Applied to      | Outcome                                                                          |
-| -------------------------- | --------------- | -------------------------------------------------------------------------------- |
-| `.pf-c-spinner`            | `<svg>`         | Creates a spinner component. The default is an extra large spinner. **Required** |
-| `.pf-c-spinner__path`      | `<circle>`      | Creates a spinner circle component. **Required**                                 |
-| `--pf-c-spinner--diameter` | `.pf-c-spinner` | Modifies the value for `--pf-c-spinner--diameter` declaration.                   |
-
 ### Modifiers
 
 | Class      | Applied to      | Outcome                         |

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -293,6 +293,206 @@ cssPrefix: pf-d-back-to-top
               <div class="pf-c-card__body">This is a card</div>
             </div>
           </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
         </div>
       </div>
     </section>