@patternfly/patternfly 6.5.0-prerelease.58 → 6.5.0-prerelease.59

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 (9) hide show
  1. package/components/Progress/progress.css +3 -1
  2. package/components/Progress/progress.scss +3 -1
  3. package/components/_index.css +3 -1
  4. package/docs/components/Progress/examples/Progress.md +91 -7
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +3 -1
  7. package/patternfly.css +3 -1
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Progress/progress.css CHANGED
@@ -2,7 +2,7 @@
2
2
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
3
3
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
4
4
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
5
- --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
5
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
6
6
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
7
7
  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
8
8
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
@@ -12,6 +12,7 @@
12
12
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
13
13
  --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
14
14
  --pf-v6-c-progress__indicator--BorderColor: transparent;
15
+ --pf-v6-c-progress__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
15
16
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
16
17
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
17
18
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -181,6 +182,7 @@
181
182
  position: absolute;
182
183
  height: var(--pf-v6-c-progress__indicator--Height);
183
184
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
185
+ border-radius: var(--pf-v6-c-progress__indicator--BorderRadius);
184
186
  }
185
187
  .pf-v6-c-progress__indicator::before {
186
188
  position: absolute;
package/components/Progress/progress.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  // Element variables
8
8
  --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
9
9
  --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
10
- --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
10
+ --#{$progress}__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
11
11
  --#{$progress}__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
12
  --#{$progress}__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
13
  --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
@@ -17,6 +17,7 @@
17
17
  --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
18
18
  --#{$progress}__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
19
19
  --#{$progress}__indicator--BorderColor: transparent;
20
+ --#{$progress}__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
20
21
  --#{$progress}__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
21
22
 
22
23
  // Modifier variables
@@ -222,6 +223,7 @@
222
223
  position: absolute; // position absolute to bring above the semi-transparent bar overlay
223
224
  height: var(--#{$progress}__indicator--Height);
224
225
  background-color: var(--#{$progress}__indicator--BackgroundColor);
226
+ border-radius: var(--#{$progress}__indicator--BorderRadius);
225
227
 
226
228
  // for forced colors mode
227
229
  &::before {
package/components/_index.css CHANGED
@@ -15073,7 +15073,7 @@ ul.pf-v6-c-list {
15073
15073
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
15074
15074
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
15075
15075
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
15076
- --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
15076
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
15077
15077
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
15078
15078
  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15079
15079
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
@@ -15083,6 +15083,7 @@ ul.pf-v6-c-list {
15083
15083
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
15084
15084
  --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
15085
15085
  --pf-v6-c-progress__indicator--BorderColor: transparent;
15086
+ --pf-v6-c-progress__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
15086
15087
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
15087
15088
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
15088
15089
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -15252,6 +15253,7 @@ ul.pf-v6-c-list {
15252
15253
  position: absolute;
15253
15254
  height: var(--pf-v6-c-progress__indicator--Height);
15254
15255
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
15256
+ border-radius: var(--pf-v6-c-progress__indicator--BorderRadius);
15255
15257
  }
15256
15258
  .pf-v6-c-progress__indicator::before {
15257
15259
  position: absolute;
package/docs/components/Progress/examples/Progress.md CHANGED
@@ -440,7 +440,19 @@ When conveying status, you should ensure:
440
440
  <div class="pf-v6-c-progress__status" aria-hidden="true">
441
441
  <span class="pf-v6-c-progress__measure">100%</span>
442
442
  <span class="pf-v6-c-progress__status-icon">
443
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
443
+ <svg
444
+ class="pf-v6-svg"
445
+ viewBox="0 0 32 32"
446
+ fill="currentColor"
447
+ aria-hidden="true"
448
+ role="img"
449
+ width="1em"
450
+ height="1em"
451
+ >
452
+ <path
453
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
454
+ />
455
+ </svg>
444
456
  </span>
445
457
  </div>
446
458
  <div
@@ -468,7 +480,19 @@ When conveying status, you should ensure:
468
480
  <div class="pf-v6-c-progress__status" aria-hidden="true">
469
481
  <span class="pf-v6-c-progress__measure">100%</span>
470
482
  <span class="pf-v6-c-progress__status-icon">
471
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
483
+ <svg
484
+ class="pf-v6-svg"
485
+ viewBox="0 0 32 32"
486
+ fill="currentColor"
487
+ aria-hidden="true"
488
+ role="img"
489
+ width="1em"
490
+ height="1em"
491
+ >
492
+ <path
493
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
494
+ />
495
+ </svg>
472
496
  </span>
473
497
  </div>
474
498
  <div
@@ -496,7 +520,19 @@ When conveying status, you should ensure:
496
520
  <div class="pf-v6-c-progress__status" aria-hidden="true">
497
521
  <span class="pf-v6-c-progress__measure">33%</span>
498
522
  <span class="pf-v6-c-progress__status-icon">
499
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 32 32"
526
+ fill="currentColor"
527
+ aria-hidden="true"
528
+ role="img"
529
+ width="1em"
530
+ height="1em"
531
+ >
532
+ <path
533
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
534
+ />
535
+ </svg>
500
536
  </span>
501
537
  </div>
502
538
  <div
@@ -526,7 +562,19 @@ When conveying status, you should ensure:
526
562
  >Title</div>
527
563
  <div class="pf-v6-c-progress__status" aria-hidden="true">
528
564
  <span class="pf-v6-c-progress__status-icon">
529
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 32 32"
568
+ fill="currentColor"
569
+ aria-hidden="true"
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
576
+ />
577
+ </svg>
530
578
  </span>
531
579
  </div>
532
580
  <div
@@ -558,7 +606,19 @@ When conveying status, you should ensure:
558
606
  >Title</div>
559
607
  <div class="pf-v6-c-progress__status" aria-hidden="true">
560
608
  <span class="pf-v6-c-progress__status-icon">
561
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
609
+ <svg
610
+ class="pf-v6-svg"
611
+ viewBox="0 0 32 32"
612
+ fill="currentColor"
613
+ aria-hidden="true"
614
+ role="img"
615
+ width="1em"
616
+ height="1em"
617
+ >
618
+ <path
619
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
620
+ />
621
+ </svg>
562
622
  </span>
563
623
  </div>
564
624
  <div
@@ -591,7 +651,19 @@ When conveying status, you should ensure:
591
651
  <div class="pf-v6-c-progress__status" aria-hidden="true">
592
652
  <span class="pf-v6-c-progress__measure">33%</span>
593
653
  <span class="pf-v6-c-progress__status-icon">
594
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
654
+ <svg
655
+ class="pf-v6-svg"
656
+ viewBox="0 0 32 32"
657
+ fill="currentColor"
658
+ aria-hidden="true"
659
+ role="img"
660
+ width="1em"
661
+ height="1em"
662
+ >
663
+ <path
664
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
665
+ />
666
+ </svg>
595
667
  </span>
596
668
  </div>
597
669
  <div
@@ -621,7 +693,19 @@ When conveying status, you should ensure:
621
693
  >Title</div>
622
694
  <div class="pf-v6-c-progress__status" aria-hidden="true">
623
695
  <span class="pf-v6-c-progress__status-icon">
624
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
696
+ <svg
697
+ class="pf-v6-svg"
698
+ viewBox="0 0 32 32"
699
+ fill="currentColor"
700
+ aria-hidden="true"
701
+ role="img"
702
+ width="1em"
703
+ height="1em"
704
+ >
705
+ <path
706
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
707
+ />
708
+ </svg>
625
709
  </span>
626
710
  </div>
627
711
  <div
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": "6.5.0-prerelease.58",
4
+ "version": "6.5.0-prerelease.59",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -24214,7 +24214,7 @@ ul.pf-v6-c-list {
24214
24214
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
24215
24215
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
24216
24216
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
24217
- --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
24217
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
24218
24218
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
24219
24219
  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24220
24220
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
@@ -24224,6 +24224,7 @@ ul.pf-v6-c-list {
24224
24224
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
24225
24225
  --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
24226
24226
  --pf-v6-c-progress__indicator--BorderColor: transparent;
24227
+ --pf-v6-c-progress__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
24227
24228
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
24228
24229
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
24229
24230
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -24393,6 +24394,7 @@ ul.pf-v6-c-list {
24393
24394
  position: absolute;
24394
24395
  height: var(--pf-v6-c-progress__indicator--Height);
24395
24396
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
24397
+ border-radius: var(--pf-v6-c-progress__indicator--BorderRadius);
24396
24398
  }
24397
24399
  .pf-v6-c-progress__indicator::before {
24398
24400
  position: absolute;
package/patternfly.css CHANGED
@@ -24361,7 +24361,7 @@ ul.pf-v6-c-list {
24361
24361
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
24362
24362
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
24363
24363
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
24364
- --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
24364
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
24365
24365
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
24366
24366
  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24367
24367
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
@@ -24371,6 +24371,7 @@ ul.pf-v6-c-list {
24371
24371
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
24372
24372
  --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
24373
24373
  --pf-v6-c-progress__indicator--BorderColor: transparent;
24374
+ --pf-v6-c-progress__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
24374
24375
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
24375
24376
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
24376
24377
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -24540,6 +24541,7 @@ ul.pf-v6-c-list {
24540
24541
  position: absolute;
24541
24542
  height: var(--pf-v6-c-progress__indicator--Height);
24542
24543
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
24544
+ border-radius: var(--pf-v6-c-progress__indicator--BorderRadius);
24543
24545
  }
24544
24546
  .pf-v6-c-progress__indicator::before {
24545
24547
  position: absolute;