@patternfly/patternfly 5.0.0-alpha.18 → 5.0.0-alpha.19

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 +5 -2
  2. package/components/Progress/progress.scss +5 -2
  3. package/docs/components/Progress/examples/Progress.md +0 -29
  4. package/docs/components/Wizard/examples/Wizard.md +0 -4
  5. package/package.json +2 -2
  6. package/patternfly-no-reset.css +5 -2
  7. package/patternfly.css +5 -2
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Progress/progress.css CHANGED
@@ -4,8 +4,8 @@
4
4
  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
5
5
  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
6
6
  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
7
+ --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
7
8
  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
8
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
9
9
  --pf-c-progress__bar--before--Opacity: .2;
10
10
  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
11
11
  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -118,14 +118,17 @@
118
118
  }
119
119
 
120
120
  .pf-c-progress__status {
121
+ display: flex;
122
+ align-items: flex-start;
123
+ justify-content: flex-end;
121
124
  grid-column: 2/3;
122
125
  grid-row: 1/2;
123
126
  text-align: right;
124
127
  word-break: break-word;
128
+ gap: var(--pf-c-progress__status--Gap);
125
129
  }
126
130
 
127
131
  .pf-c-progress__status-icon {
128
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
129
132
  color: var(--pf-c-progress__status-icon--Color);
130
133
  }
131
134
 
package/components/Progress/progress.scss CHANGED
@@ -7,8 +7,8 @@
7
7
  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
8
8
  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); // the bar always needs white under it so that the semi-transparent color shows correctly
9
9
  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
10
+ --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
10
11
  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100); // the status icon default color is the default text color
11
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
12
12
  --pf-c-progress__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
13
13
  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
14
14
  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -158,15 +158,18 @@
158
158
 
159
159
  // the progress__status is displayed in the upper right
160
160
  .pf-c-progress__status {
161
+ display: flex;
162
+ align-items: flex-start;
163
+ justify-content: flex-end;
161
164
  grid-column: 2 / 3;
162
165
  grid-row: 1 / 2;
163
166
  text-align: right;
164
167
  word-break: break-word;
168
+ gap: var(--pf-c-progress__status--Gap);
165
169
  }
166
170
 
167
171
  // the progress__status-icon is an icon displayed always in the upper right
168
172
  .pf-c-progress__status-icon {
169
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
170
173
  color: var(--pf-c-progress__status-icon--Color);
171
174
  }
172
175
 
package/docs/components/Progress/examples/Progress.md CHANGED
@@ -315,10 +315,6 @@ cssPrefix: pf-c-progress
315
315
  class="pf-c-progress pf-m-outside pf-m-lg"
316
316
  id="progress-outside-static-width-example"
317
317
  >
318
- <div
319
- class="pf-c-progress__description"
320
- id="progress-outside-static-width-example-description"
321
- ></div>
322
318
  <div class="pf-c-progress__status" aria-hidden="true">
323
319
  <span class="pf-c-progress__measure pf-m-static-width">1%</span>
324
320
  </div>
@@ -339,10 +335,6 @@ cssPrefix: pf-c-progress
339
335
  class="pf-c-progress pf-m-outside pf-m-lg"
340
336
  id="progress-outside-static-width-2-example"
341
337
  >
342
- <div
343
- class="pf-c-progress__description"
344
- id="progress-outside-static-width-2-example-description"
345
- ></div>
346
338
  <div class="pf-c-progress__status" aria-hidden="true">
347
339
  <span class="pf-c-progress__measure pf-m-static-width">50%</span>
348
340
  </div>
@@ -363,10 +355,6 @@ cssPrefix: pf-c-progress
363
355
  class="pf-c-progress pf-m-outside pf-m-lg"
364
356
  id="progress-outside-static-width-3-example"
365
357
  >
366
- <div
367
- class="pf-c-progress__description"
368
- id="progress-outside-static-width-3-example-description"
369
- ></div>
370
358
  <div class="pf-c-progress__status" aria-hidden="true">
371
359
  <span class="pf-c-progress__measure pf-m-static-width">100%</span>
372
360
  </div>
@@ -389,10 +377,6 @@ cssPrefix: pf-c-progress
389
377
  id="progress-outside-static-width-4-example"
390
378
  style="--pf-c-progress__measure--m-static-width--MinWidth: 6ch;"
391
379
  >
392
- <div
393
- class="pf-c-progress__description"
394
- id="progress-outside-static-width-4-example-description"
395
- ></div>
396
380
  <div class="pf-c-progress__status" aria-hidden="true">
397
381
  <span class="pf-c-progress__measure pf-m-static-width">1,000</span>
398
382
  </div>
@@ -414,10 +398,6 @@ cssPrefix: pf-c-progress
414
398
  id="progress-outside-static-width-5-example"
415
399
  style="--pf-c-progress__measure--m-static-width--MinWidth: 6ch;"
416
400
  >
417
- <div
418
- class="pf-c-progress__description"
419
- id="progress-outside-static-width-5-example-description"
420
- ></div>
421
401
  <div class="pf-c-progress__status" aria-hidden="true">
422
402
  <span class="pf-c-progress__measure pf-m-static-width">50,000</span>
423
403
  </div>
@@ -439,10 +419,6 @@ cssPrefix: pf-c-progress
439
419
  id="progress-outside-static-width-6-example"
440
420
  style="--pf-c-progress__measure--m-static-width--MinWidth: 6ch;"
441
421
  >
442
- <div
443
- class="pf-c-progress__description"
444
- id="progress-outside-static-width-6-example-description"
445
- ></div>
446
422
  <div class="pf-c-progress__status" aria-hidden="true">
447
423
  <span class="pf-c-progress__measure pf-m-static-width">100,000</span>
448
424
  </div>
@@ -464,10 +440,6 @@ cssPrefix: pf-c-progress
464
440
 
465
441
  ```html
466
442
  <div class="pf-c-progress pf-m-singleline" id="progress-singleline-example">
467
- <div
468
- class="pf-c-progress__description"
469
- id="progress-singleline-example-description"
470
- ></div>
471
443
  <div class="pf-c-progress__status" aria-hidden="true">
472
444
  <span class="pf-c-progress__measure">33%</span>
473
445
  </div>
@@ -493,7 +465,6 @@ cssPrefix: pf-c-progress
493
465
  class="pf-c-progress__description"
494
466
  id="progress-no-measure-example-description"
495
467
  >Title</div>
496
- <div class="pf-c-progress__status" aria-hidden="true"></div>
497
468
  <div
498
469
  class="pf-c-progress__bar"
499
470
  role="progressbar"
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -1227,10 +1227,6 @@ wrapperTag: div
1227
1227
  class="pf-c-progress pf-m-singleline"
1228
1228
  id="progress-singleline-example"
1229
1229
  >
1230
- <div
1231
- class="pf-c-progress__description"
1232
- id="progress-singleline-example-description"
1233
- ></div>
1234
1230
  <div class="pf-c-progress__status" aria-hidden="true">
1235
1231
  <span class="pf-c-progress__measure">33%</span>
1236
1232
  </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": "5.0.0-alpha.18",
4
+ "version": "5.0.0-alpha.19",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,7 +42,7 @@
42
42
  "@commitlint/config-conventional": "^17.4.2",
43
43
  "@fortawesome/fontawesome": "^1.1.8",
44
44
  "@octokit/rest": "^19.0.7",
45
- "@patternfly/documentation-framework": "1.8.0",
45
+ "@patternfly/documentation-framework": "1.9.0",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "4.82.113",
48
48
  "@patternfly/react-core": "4.276.6",
package/patternfly-no-reset.css CHANGED
@@ -23183,8 +23183,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23183
23183
  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
23184
23184
  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
23185
23185
  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
23186
+ --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
23186
23187
  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
23187
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
23188
23188
  --pf-c-progress__bar--before--Opacity: .2;
23189
23189
  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
23190
23190
  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -23297,14 +23297,17 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23297
23297
  }
23298
23298
 
23299
23299
  .pf-c-progress__status {
23300
+ display: flex;
23301
+ align-items: flex-start;
23302
+ justify-content: flex-end;
23300
23303
  grid-column: 2/3;
23301
23304
  grid-row: 1/2;
23302
23305
  text-align: right;
23303
23306
  word-break: break-word;
23307
+ gap: var(--pf-c-progress__status--Gap);
23304
23308
  }
23305
23309
 
23306
23310
  .pf-c-progress__status-icon {
23307
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
23308
23311
  color: var(--pf-c-progress__status-icon--Color);
23309
23312
  }
23310
23313
 
package/patternfly.css CHANGED
@@ -23306,8 +23306,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23306
23306
  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
23307
23307
  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
23308
23308
  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
23309
+ --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
23309
23310
  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
23310
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
23311
23311
  --pf-c-progress__bar--before--Opacity: .2;
23312
23312
  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
23313
23313
  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -23420,14 +23420,17 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23420
23420
  }
23421
23421
 
23422
23422
  .pf-c-progress__status {
23423
+ display: flex;
23424
+ align-items: flex-start;
23425
+ justify-content: flex-end;
23423
23426
  grid-column: 2/3;
23424
23427
  grid-row: 1/2;
23425
23428
  text-align: right;
23426
23429
  word-break: break-word;
23430
+ gap: var(--pf-c-progress__status--Gap);
23427
23431
  }
23428
23432
 
23429
23433
  .pf-c-progress__status-icon {
23430
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
23431
23434
  color: var(--pf-c-progress__status-icon--Color);
23432
23435
  }
23433
23436