feat(Button): added progress support for inline link (#5104)

patternfly · Sep 28, 2022 · e184375 · e184375
1 parent 98e3ca3
commit e184375
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 11 deletions.
diff --git a/src/patternfly/components/Button/button-progress.hbs b/src/patternfly/components/Button/button-progress.hbs
@@ -2,5 +2,19 @@
   {{#if button-progress--attribute}}
     {{{button-progress--attribute}}}
   {{/if}}>
-  {{#> spinner spinner--modifier="pf-m-md"}}Loading...{{/spinner}}
+  {{#if button--IsInline}}
+    {{> button-progress--spinner button-progress--spinner--modifier="pf-m-inline"}}
+  {{else}}
+    {{> button-progress--spinner button-progress--spinner--modifier="pf-m-md"}}
+  {{/if}}
 </span>
+
+{{#*inline "button-progress--spinner"}}
+  {{#> spinner spinner--modifier=button-progress--spinner--modifier~}}
+    {{~#if button--progress-text~}}
+      {{~button--progress-text~}}
+    {{~else~}}
+      Loading...
+    {{~/if~}}
+  {{~/spinner}}
+{{/inline}}
diff --git a/src/patternfly/components/Button/button.hbs b/src/patternfly/components/Button/button.hbs
@@ -1,4 +1,9 @@
-<{{#if button--IsInlineLinkSpan}}span{{else}}button{{/if}} class="pf-c-button{{#if button--IsExpanded}} pf-m-expanded{{/if}}{{#if button--IsProgress}} pf-m-progress{{/if}}{{#if button--IsInProgress}} pf-m-in-progress{{/if}}{{#if button--modifier}} {{button--modifier}}{{/if}}"
+<{{#if button--IsInlineLinkSpan}}span{{else}}button{{/if}} class="pf-c-button
+  {{~#if button--IsExpanded}} pf-m-expanded{{/if}}
+  {{~#if button--IsProgress}} pf-m-progress{{/if}}
+  {{~#if button--IsInProgress}} pf-m-in-progress{{/if}}
+  {{~#if button--IsInline}} pf-m-inline{{/if}}
+  {{~#if button--modifier}} {{button--modifier}}{{/if}}"
   {{#if button--IsSubmit}}
     type="submit"
   {{else if button--IsReset}}

diff --git a/src/patternfly/components/Button/button.scss b/src/patternfly/components/Button/button.scss
@@ -112,6 +112,12 @@
   --pf-c-button--m-link--m-inline--FontSize: inherit;
   --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-button--m-link--m-inline--PaddingTop: 0;
+  --pf-c-button--m-link--m-inline--PaddingRight: 0;
+  --pf-c-button--m-link--m-inline--PaddingBottom: 0;
+  --pf-c-button--m-link--m-inline--PaddingLeft: 0;
+  --pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
+  --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
 
   // Link danger
   --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
@@ -368,9 +374,10 @@
 
     &.pf-m-inline {
       --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
+      --pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
 
       display: inline;
-      padding: 0;
+      padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
       text-align: left;
       white-space: normal;
       cursor: pointer;
@@ -598,6 +605,8 @@
   }
 
   &.pf-m-in-progress {
+    --pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
+
     &:not(.pf-m-plain) {
       --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
       --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);

diff --git a/src/patternfly/components/Button/examples/Button.md b/src/patternfly/components/Button/examples/Button.md
@@ -326,24 +326,29 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
 {{#> button button--modifier="pf-m-primary" button--IsProgress="true" button--IsInProgress="true"}}
   Primary loading
 {{/button}}
-
+<br/>
 {{#> button button--modifier="pf-m-secondary" button--IsProgress="true"}}
   Secondary loader
 {{/button}}
 
 {{#> button button--modifier="pf-m-secondary" button--IsProgress="true" button--IsInProgress="true"}}
   Secondary loading
 {{/button}}
-
+<br/>
 {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Upload"'}}
   <i class="fas fa-upload" aria-hidden="true"></i>
 {{/button}}
 
-{{#> button button--modifier="pf-m-plain pf-m-in-progress" button--attribute='aria-label="Upload"'}}
+{{#> button button--modifier="pf-m-plain" button--IsInProgress="true" button--progress-text="Uploading..."}}
   <i class="fas fa-upload" aria-hidden="true"></i>
-  {{#> button-progress}}
-    {{#> spinner spinner--modifier="pf-m-md"}}Uploading...{{/spinner}}
-  {{/button-progress}}
+{{/button}}
+<br/>
+{{#> button button--modifier="pf-m-link" button--IsInline="true" button--IsProgress="true"}}
+  Inline loader
+{{/button}}
+
+{{#> button button--modifier="pf-m-link" button--IsInline="true" button--IsProgress="true" button--IsInProgress="true"}}
+  Inline loading
 {{/button}}
 ```
 

diff --git a/src/patternfly/components/Spinner/examples/Spinner.md b/src/patternfly/components/Spinner/examples/Spinner.md
@@ -22,6 +22,13 @@ cssPrefix: pf-c-spinner
 {{#> spinner spinner--IsSvg="true" spinner--modifier="pf-m-xl"}}Loading...{{/spinner}}
 ```
 
+### Inline
+An inline spinner inherits its font-size, so its size will match the content around it.
+
+```hbs isBeta
+{{#> spinner spinner--IsSvg="true" spinner--modifier="pf-m-inline"}}Loading...{{/spinner}}
+```
+
 ### Custom size
 ```hbs
 {{#> spinner spinner--IsSvg="true" spinner--attribute='style="--pf-c-spinner--diameter: 80px;"'}}Loading...{{/spinner}}
@@ -57,7 +64,6 @@ Note: If the spinner is showing that loading of a particular region of a page is
 
 Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) must be present before changing its status in order for the change to be read.
 
-
 ### Usage
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -80,3 +86,4 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
 | `.pf-m-md` | `.pf-c-spinner` |  Creates a medium spinner. |
 | `.pf-m-lg` | `.pf-c-spinner` |  Creates a large spinner. |
 | `.pf-m-xl` | `.pf-c-spinner` |  Creates an extra-large spinner. |
+| `.pf-m-inline` | `.pf-c-spinner` |  Creates an inline spinner. |
diff --git a/src/patternfly/components/Spinner/spinner.hbs b/src/patternfly/components/Spinner/spinner.hbs
@@ -34,7 +34,6 @@
     {{#if spinner--attribute}}
       {{{spinner--attribute}}}
     {{/if}}>
-
     <span class="pf-c-spinner__clipper"></span>
     <span class="pf-c-spinner__lead-ball"></span>
     <span class="pf-c-spinner__tail-ball"></span>

diff --git a/src/patternfly/components/Spinner/spinner.scss b/src/patternfly/components/Spinner/spinner.scss
@@ -12,11 +12,18 @@
   --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
   --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
 
+  // inline
+  --pf-c-spinner--m-inline--diameter: 1em;
+
   width: var(--pf-c-spinner--Width);
   height: var(--pf-c-spinner--Height);
   overflow: hidden;
 
   // Modifiers change the variables for size variations
+  &.pf-m-inline {
+    --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
+  }
+
   &.pf-m-sm {
     --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
   }