@patternfly/patternfly 6.3.0-prerelease.17 → 6.3.0-prerelease.18

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 (11) hide show
  1. package/components/ProgressStepper/progress-stepper.scss +1 -0
  2. package/components/Spinner/spinner.css +5 -0
  3. package/components/Spinner/spinner.scss +6 -0
  4. package/components/_index.css +5 -0
  5. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  6. package/docs/components/Spinner/examples/Spinner.md +10 -0
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +5 -0
  9. package/patternfly.css +5 -0
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -442,5 +442,6 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
442
442
  }
443
443
  }
444
444
  }
445
+
445
446
  }
446
447
  // stylelint-enable
package/components/Spinner/spinner.css CHANGED
@@ -8,6 +8,7 @@
8
8
  --pf-v6-c-spinner--StrokeWidth: 10;
9
9
  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
10
10
  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
11
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
11
12
  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
12
13
  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
13
14
  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -24,6 +25,10 @@
24
25
  .pf-v6-c-spinner.pf-m-inline {
25
26
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
26
27
  }
28
+ .pf-v6-c-spinner.pf-m-xs {
29
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
30
+ --pf-v6-c-spinner--StrokeWidth: 15;
31
+ }
27
32
  .pf-v6-c-spinner.pf-m-sm {
28
33
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
29
34
  }
package/components/Spinner/spinner.scss CHANGED
@@ -14,6 +14,7 @@
14
14
  --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
15
15
 
16
16
  // sizes
17
+ --#{$spinner}--m-xs--diameter: var(--pf-t--global--icon--size--sm);
17
18
  --#{$spinner}--m-sm--diameter: var(--pf-t--global--icon--size--md);
18
19
  --#{$spinner}--m-md--diameter: var(--pf-t--global--icon--size--lg);
19
20
  --#{$spinner}--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -34,6 +35,11 @@
34
35
  --#{$spinner}--diameter: var(--#{$spinner}--m-inline--diameter);
35
36
  }
36
37
 
38
+ &.pf-m-xs {
39
+ --#{$spinner}--diameter: var(--#{$spinner}--m-xs--diameter);
40
+ --#{$spinner}--StrokeWidth: 15;
41
+ }
42
+
37
43
  &.pf-m-sm {
38
44
  --#{$spinner}--diameter: var(--#{$spinner}--m-sm--diameter);
39
45
  }
package/components/_index.css CHANGED
@@ -14935,6 +14935,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14935
14935
  --pf-v6-c-spinner--StrokeWidth: 10;
14936
14936
  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
14937
14937
  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
14938
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
14938
14939
  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
14939
14940
  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
14940
14941
  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -14951,6 +14952,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14951
14952
  .pf-v6-c-spinner.pf-m-inline {
14952
14953
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
14953
14954
  }
14955
+ .pf-v6-c-spinner.pf-m-xs {
14956
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
14957
+ --pf-v6-c-spinner--StrokeWidth: 15;
14958
+ }
14954
14959
  .pf-v6-c-spinner.pf-m-sm {
14955
14960
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
14956
14961
  }
package/docs/components/ProgressStepper/examples/ProgressStepper.md CHANGED
@@ -364,15 +364,28 @@ cssPrefix: pf-v6-c-progress-stepper
364
364
  <li
365
365
  class="pf-v6-c-progress-stepper__step pf-m-current"
366
366
  role="listitem"
367
- aria-label="current step,in process step,"
367
+ aria-label="current step,"
368
368
  >
369
369
  <div class="pf-v6-c-progress-stepper__step-connector">
370
370
  <span class="pf-v6-c-progress-stepper__step-icon">
371
- <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
371
+ <svg
372
+ class="pf-v6-c-spinner pf-m-xs"
373
+ role="progressbar"
374
+ viewBox="0 0 100 100"
375
+ aria-label="Loading..."
376
+ >
377
+ <circle
378
+ class="pf-v6-c-spinner__path"
379
+ cx="50"
380
+ cy="50"
381
+ r="45"
382
+ fill="none"
383
+ />
384
+ </svg>
372
385
  </span>
373
386
  </div>
374
387
  <div class="pf-v6-c-progress-stepper__step-main">
375
- <div class="pf-v6-c-progress-stepper__step-title">Second step</div>
388
+ <div class="pf-v6-c-progress-stepper__step-title">In process</div>
376
389
  <div
377
390
  class="pf-v6-c-progress-stepper__step-description"
378
391
  >This is the second thing to happen</div>
@@ -783,7 +796,7 @@ cssPrefix: pf-v6-c-progress-stepper
783
796
 
784
797
  ```
785
798
 
786
- ### Basic with Patternfly icons
799
+ ### Basic in process
787
800
 
788
801
  ```html
789
802
  <ol class="pf-v6-c-progress-stepper" role="list">
@@ -804,11 +817,24 @@ cssPrefix: pf-v6-c-progress-stepper
804
817
  <li
805
818
  class="pf-v6-c-progress-stepper__step pf-m-current"
806
819
  role="listitem"
807
- aria-label="current step,in process step,"
820
+ aria-label="current step,"
808
821
  >
809
822
  <div class="pf-v6-c-progress-stepper__step-connector">
810
823
  <span class="pf-v6-c-progress-stepper__step-icon">
811
- <i class="pf-v6-pficon pf-v6-pficon-in-progress" aria-hidden="true"></i>
824
+ <svg
825
+ class="pf-v6-c-spinner pf-m-xs"
826
+ role="progressbar"
827
+ viewBox="0 0 100 100"
828
+ aria-label="Loading..."
829
+ >
830
+ <circle
831
+ class="pf-v6-c-spinner__path"
832
+ cx="50"
833
+ cy="50"
834
+ r="45"
835
+ fill="none"
836
+ />
837
+ </svg>
812
838
  </span>
813
839
  </div>
814
840
  <div class="pf-v6-c-progress-stepper__step-main">
package/docs/components/Spinner/examples/Spinner.md CHANGED
@@ -21,6 +21,15 @@ cssPrefix: pf-v6-c-spinner
21
21
  ### Sizes
22
22
 
23
23
  ```html
24
+ <svg
25
+ class="pf-v6-c-spinner pf-m-xs"
26
+ role="progressbar"
27
+ viewBox="0 0 100 100"
28
+ aria-label="Loading..."
29
+ >
30
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
31
+ </svg>
32
+
24
33
  <svg
25
34
  class="pf-v6-c-spinner pf-m-sm"
26
35
  role="progressbar"
@@ -117,6 +126,7 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
117
126
 
118
127
  | Class | Applied to | Outcome |
119
128
  | -- | -- | -- |
129
+ | `.pf-m-xs` | `.pf-v6-c-spinner` | Creates a extra-small spinner. |
120
130
  | `.pf-m-sm` | `.pf-v6-c-spinner` | Creates a small spinner. |
121
131
  | `.pf-m-md` | `.pf-v6-c-spinner` | Creates a medium spinner. |
122
132
  | `.pf-m-lg` | `.pf-v6-c-spinner` | Creates a large spinner. |
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.3.0-prerelease.17",
4
+ "version": "6.3.0-prerelease.18",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -22397,6 +22397,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22397
22397
  --pf-v6-c-spinner--StrokeWidth: 10;
22398
22398
  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
22399
22399
  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
22400
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
22400
22401
  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
22401
22402
  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
22402
22403
  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -22413,6 +22414,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22413
22414
  .pf-v6-c-spinner.pf-m-inline {
22414
22415
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
22415
22416
  }
22417
+ .pf-v6-c-spinner.pf-m-xs {
22418
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
22419
+ --pf-v6-c-spinner--StrokeWidth: 15;
22420
+ }
22416
22421
  .pf-v6-c-spinner.pf-m-sm {
22417
22422
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
22418
22423
  }
package/patternfly.css CHANGED
@@ -22533,6 +22533,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22533
22533
  --pf-v6-c-spinner--StrokeWidth: 10;
22534
22534
  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
22535
22535
  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
22536
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
22536
22537
  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
22537
22538
  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
22538
22539
  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -22549,6 +22550,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22549
22550
  .pf-v6-c-spinner.pf-m-inline {
22550
22551
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
22551
22552
  }
22553
+ .pf-v6-c-spinner.pf-m-xs {
22554
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
22555
+ --pf-v6-c-spinner--StrokeWidth: 15;
22556
+ }
22552
22557
  .pf-v6-c-spinner.pf-m-sm {
22553
22558
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
22554
22559
  }