@patternfly/patternfly 4.165.2 → 4.166.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/components/Button/button.css +14 -2
  2. package/components/Button/button.scss +19 -3
  3. package/docs/components/Button/examples/Button.md +24 -1
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +14 -2
  6. package/patternfly.css +14 -2
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -144,6 +144,7 @@
144
144
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
145
145
  --pf-c-button__progress--Opacity: 0;
146
146
  --pf-c-button__progress--TranslateY: -50%;
147
+ --pf-c-button__progress--TranslateX: 0;
147
148
  --pf-c-button__progress--Top: 50%;
148
149
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
149
150
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -152,6 +153,9 @@
152
153
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
153
154
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
154
155
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
156
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
157
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
158
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
155
159
  position: relative;
156
160
  display: inline-block;
157
161
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -437,10 +441,18 @@
437
441
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
438
442
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
439
443
  }
440
- .pf-c-button.pf-m-in-progress {
444
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
441
445
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
442
446
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
443
447
  }
448
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
449
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
450
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
451
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
452
+ }
453
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
454
+ opacity: 0;
455
+ }
444
456
 
445
457
  .pf-c-button__icon.pf-m-start {
446
458
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -454,7 +466,7 @@
454
466
  top: var(--pf-c-button__progress--Top);
455
467
  left: var(--pf-c-button__progress--Left);
456
468
  line-height: 1;
457
- transform: translateY(var(--pf-c-button__progress--TranslateY));
469
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
458
470
  }
459
471
  .pf-c-button__progress .pf-c-spinner {
460
472
  --pf-c-spinner--Color: currentColor;
package/components/Button/button.scss CHANGED
@@ -179,6 +179,7 @@
179
179
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm)); // matches medium spinner diameter plus a spacer
180
180
  --pf-c-button__progress--Opacity: 0;
181
181
  --pf-c-button__progress--TranslateY: -50%;
182
+ --pf-c-button__progress--TranslateX: 0;
182
183
  --pf-c-button__progress--Top: 50%;
183
184
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
184
185
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -187,6 +188,9 @@
187
188
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
188
189
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
189
190
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
191
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
192
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
193
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
190
194
 
191
195
  position: relative;
192
196
  display: inline-block;
@@ -577,8 +581,20 @@
577
581
  }
578
582
 
579
583
  &.pf-m-in-progress {
580
- --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
581
- --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
584
+ &:not(.pf-m-plain) {
585
+ --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
586
+ --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
587
+ }
588
+
589
+ &.pf-m-plain {
590
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
591
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
592
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
593
+
594
+ > :not(.pf-c-button__progress) {
595
+ opacity: 0;
596
+ }
597
+ }
582
598
  }
583
599
  }
584
600
 
@@ -597,7 +613,7 @@
597
613
  top: var(--pf-c-button__progress--Top);
598
614
  left: var(--pf-c-button__progress--Left);
599
615
  line-height: 1;
600
- transform: translateY(var(--pf-c-button__progress--TranslateY));
616
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
601
617
 
602
618
  .pf-c-spinner {
603
619
  --pf-c-spinner--Color: currentColor;
package/docs/components/Button/examples/Button.md CHANGED
@@ -404,6 +404,29 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
404
404
  Secondary loading
405
405
  </button>
406
406
 
407
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Upload">
408
+ <i class="fas fa-upload" aria-hidden="true"></i>
409
+ </button>
410
+
411
+ <button
412
+ class="pf-c-button pf-m-plain pf-m-in-progress"
413
+ type="button"
414
+ aria-label="Upload"
415
+ >
416
+ <i class="fas fa-upload" aria-hidden="true"></i>
417
+ <span class="pf-c-button__progress">
418
+ <span
419
+ class="pf-c-spinner pf-m-md"
420
+ role="progressbar"
421
+ aria-label="Loading..."
422
+ >
423
+ <span class="pf-c-spinner__clipper"></span>
424
+ <span class="pf-c-spinner__lead-ball"></span>
425
+ <span class="pf-c-spinner__tail-ball"></span>
426
+ </span>
427
+ </span>
428
+ </button>
429
+
407
430
  ```
408
431
 
409
432
  ## Documentation
@@ -453,5 +476,5 @@ Semantic buttons and links are important for usability as well as accessibility.
453
476
  | `.pf-m-small` | `.pf-c-button` | Modifies the button so that it has small font size. |
454
477
  | `.pf-m-aria-disabled` | `.pf-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
455
478
  | `.pf-m-display-lg` | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
456
- | `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state. |
479
+ | `.pf-m-progress` | `.pf-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
457
480
  | `.pf-m-in-progress` | `.pf-c-button` | Indicates that the button is in the in progress state. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.165.2",
4
+ "version": "4.166.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -6792,6 +6792,7 @@ button.pf-c-breadcrumb__link {
6792
6792
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
6793
6793
  --pf-c-button__progress--Opacity: 0;
6794
6794
  --pf-c-button__progress--TranslateY: -50%;
6795
+ --pf-c-button__progress--TranslateX: 0;
6795
6796
  --pf-c-button__progress--Top: 50%;
6796
6797
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
6797
6798
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -6800,6 +6801,9 @@ button.pf-c-breadcrumb__link {
6800
6801
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
6801
6802
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
6802
6803
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
6804
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
6805
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
6806
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
6803
6807
  position: relative;
6804
6808
  display: inline-block;
6805
6809
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7085,10 +7089,18 @@ button.pf-c-breadcrumb__link {
7085
7089
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
7086
7090
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
7087
7091
  }
7088
- .pf-c-button.pf-m-in-progress {
7092
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
7089
7093
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
7090
7094
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
7091
7095
  }
7096
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
7097
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
7098
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
7099
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
7100
+ }
7101
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
7102
+ opacity: 0;
7103
+ }
7092
7104
 
7093
7105
  .pf-c-button__icon.pf-m-start {
7094
7106
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -7102,7 +7114,7 @@ button.pf-c-breadcrumb__link {
7102
7114
  top: var(--pf-c-button__progress--Top);
7103
7115
  left: var(--pf-c-button__progress--Left);
7104
7116
  line-height: 1;
7105
- transform: translateY(var(--pf-c-button__progress--TranslateY));
7117
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
7106
7118
  }
7107
7119
  .pf-c-button__progress .pf-c-spinner {
7108
7120
  --pf-c-spinner--Color: currentColor;
package/patternfly.css CHANGED
@@ -6914,6 +6914,7 @@ button.pf-c-breadcrumb__link {
6914
6914
  --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
6915
6915
  --pf-c-button__progress--Opacity: 0;
6916
6916
  --pf-c-button__progress--TranslateY: -50%;
6917
+ --pf-c-button__progress--TranslateX: 0;
6917
6918
  --pf-c-button__progress--Top: 50%;
6918
6919
  --pf-c-button__progress--Left: var(--pf-global--spacer--md);
6919
6920
  --pf-c-button--m-progress--TransitionProperty: padding;
@@ -6922,6 +6923,9 @@ button.pf-c-breadcrumb__link {
6922
6923
  --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
6923
6924
  --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
6924
6925
  --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
6926
+ --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
6927
+ --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
6928
+ --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
6925
6929
  position: relative;
6926
6930
  display: inline-block;
6927
6931
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -7207,10 +7211,18 @@ button.pf-c-breadcrumb__link {
7207
7211
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
7208
7212
  transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
7209
7213
  }
7210
- .pf-c-button.pf-m-in-progress {
7214
+ .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
7211
7215
  --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
7212
7216
  --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
7213
7217
  }
7218
+ .pf-c-button.pf-m-in-progress.pf-m-plain {
7219
+ --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
7220
+ --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
7221
+ --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
7222
+ }
7223
+ .pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
7224
+ opacity: 0;
7225
+ }
7214
7226
 
7215
7227
  .pf-c-button__icon.pf-m-start {
7216
7228
  margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -7224,7 +7236,7 @@ button.pf-c-breadcrumb__link {
7224
7236
  top: var(--pf-c-button__progress--Top);
7225
7237
  left: var(--pf-c-button__progress--Left);
7226
7238
  line-height: 1;
7227
- transform: translateY(var(--pf-c-button__progress--TranslateY));
7239
+ transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
7228
7240
  }
7229
7241
  .pf-c-button__progress .pf-c-spinner {
7230
7242
  --pf-c-spinner--Color: currentColor;