@patternfly/patternfly 5.0.0-alpha.26 → 5.0.0-alpha.28

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/FormControl/form-control.css +2 -5
  2. package/components/FormControl/themes/dark/form-control.scss +2 -6
  3. package/components/Popover/popover.css +2 -0
  4. package/components/Popover/popover.scss +2 -0
  5. package/docs/components/Popover/examples/Popover.md +6 -19
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +4 -5
  8. package/patternfly.css +4 -5
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
  11. package/sass-utilities/themes/dark/scss-variables.scss +1 -1
package/components/FormControl/form-control.css CHANGED
@@ -332,9 +332,9 @@ textarea.pf-c-form-control {
332
332
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
333
333
  --pf-c-form-control--BorderLeftColor: transparent;
334
334
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
335
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
335
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
336
336
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
337
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
337
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
338
338
  color: var(--pf-global--Color--100);
339
339
  }
340
340
  :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
@@ -342,7 +342,4 @@ textarea.pf-c-form-control {
342
342
  }
343
343
  :where(.pf-theme-dark) .pf-c-form-control[readonly] {
344
344
  border-bottom-color: var(--pf-global--palette--black-700);
345
- }
346
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
347
- color: var(--pf-global--palette--black-100);
348
345
  }
package/components/FormControl/themes/dark/form-control.scss CHANGED
@@ -8,9 +8,9 @@
8
8
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
9
9
  --pf-c-form-control--BorderLeftColor: transparent;
10
10
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
11
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
11
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
12
12
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
13
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
13
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
14
14
 
15
15
  color: var(--pf-global--Color--100);
16
16
 
@@ -22,9 +22,5 @@
22
22
  &[readonly] {
23
23
  border-bottom-color: var(--pf-global--palette--black-700); // should be a var?
24
24
  }
25
-
26
- &:disabled {
27
- color: var(--pf-global--palette--black-100); // global var
28
- }
29
25
  }
30
26
  }
package/components/Popover/popover.css CHANGED
@@ -43,6 +43,7 @@
43
43
  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
44
44
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
45
45
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
46
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
46
47
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
47
48
  position: relative;
48
49
  min-width: var(--pf-c-popover--MinWidth);
@@ -150,6 +151,7 @@
150
151
 
151
152
  .pf-c-popover__title-icon {
152
153
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
154
+ font-size: var(--pf-c-popover__title-icon--FontSize);
153
155
  color: var(--pf-c-popover__title-icon--Color);
154
156
  }
155
157
 
package/components/Popover/popover.scss CHANGED
@@ -60,6 +60,7 @@
60
60
  // Title icon
61
61
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
62
62
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
63
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
63
64
 
64
65
  // Footer
65
66
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -219,6 +220,7 @@
219
220
 
220
221
  .pf-c-popover__title-icon {
221
222
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
223
+ font-size: var(--pf-c-popover__title-icon--FontSize);
222
224
  color: var(--pf-c-popover__title-icon--Color);
223
225
  }
224
226
 
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -356,7 +356,7 @@ cssPrefix: pf-c-popover
356
356
  </button>
357
357
  </div>
358
358
  <header class="pf-c-popover__header">
359
- <div class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
359
+ <div class="pf-c-popover__title" id="popover-icon-title-header">
360
360
  <span class="pf-c-popover__title-icon">
361
361
  <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
362
362
  </span>
@@ -391,10 +391,7 @@ cssPrefix: pf-c-popover
391
391
  </button>
392
392
  </div>
393
393
  <header class="pf-c-popover__header">
394
- <div
395
- class="pf-c-popover__title pf-m-icon"
396
- id="popover-default-alert-header"
397
- >
394
+ <div class="pf-c-popover__title" id="popover-default-alert-header">
398
395
  <span class="pf-c-popover__title-icon">
399
396
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
400
397
  </span>
@@ -435,7 +432,7 @@ cssPrefix: pf-c-popover
435
432
  </button>
436
433
  </div>
437
434
  <header class="pf-c-popover__header">
438
- <div class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
435
+ <div class="pf-c-popover__title" id="popover-info-alert-header">
439
436
  <span class="pf-c-popover__title-icon">
440
437
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
441
438
  </span>
@@ -476,10 +473,7 @@ cssPrefix: pf-c-popover
476
473
  </button>
477
474
  </div>
478
475
  <header class="pf-c-popover__header">
479
- <div
480
- class="pf-c-popover__title pf-m-icon"
481
- id="popover-success-alert-header"
482
- >
476
+ <div class="pf-c-popover__title" id="popover-success-alert-header">
483
477
  <span class="pf-c-popover__title-icon">
484
478
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
485
479
  </span>
@@ -515,10 +509,7 @@ cssPrefix: pf-c-popover
515
509
  <div class="pf-c-popover__arrow"></div>
516
510
  <div class="pf-c-popover__content">
517
511
  <header class="pf-c-popover__header">
518
- <div
519
- class="pf-c-popover__title pf-m-icon"
520
- id="popover-warning-alert-header"
521
- >
512
+ <div class="pf-c-popover__title" id="popover-warning-alert-header">
522
513
  <span class="pf-c-popover__title-icon">
523
514
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
524
515
  </span>
@@ -559,10 +550,7 @@ cssPrefix: pf-c-popover
559
550
  </button>
560
551
  </div>
561
552
  <header class="pf-c-popover__header">
562
- <div
563
- class="pf-c-popover__title pf-m-icon"
564
- id="popover-danger-alert-header"
565
- >
553
+ <div class="pf-c-popover__title" id="popover-danger-alert-header">
566
554
  <span class="pf-c-popover__title-icon">
567
555
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
568
556
  </span>
@@ -624,7 +612,6 @@ A popover is used to provide contextual information for another component on cli
624
612
  | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
625
613
  | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
626
614
  | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
627
- | `.pf-m-icon` | `.pf-c-popover__title` | Modifies the title layout to accommodate an icon. |
628
615
  | `.pf-m-default` | `.pf-c-popover` | Modifies for the default alert state. |
629
616
  | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
630
617
  | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert 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": "5.0.0-alpha.26",
4
+ "version": "5.0.0-alpha.28",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -15510,9 +15510,9 @@ textarea.pf-c-form-control {
15510
15510
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
15511
15511
  --pf-c-form-control--BorderLeftColor: transparent;
15512
15512
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
15513
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
15513
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
15514
15514
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
15515
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
15515
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
15516
15516
  color: var(--pf-global--Color--100);
15517
15517
  }
15518
15518
  :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
@@ -15521,9 +15521,6 @@ textarea.pf-c-form-control {
15521
15521
  :where(.pf-theme-dark) .pf-c-form-control[readonly] {
15522
15522
  border-bottom-color: var(--pf-global--palette--black-700);
15523
15523
  }
15524
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
15525
- color: var(--pf-global--palette--black-100);
15526
- }
15527
15524
 
15528
15525
  .pf-c-hint {
15529
15526
  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
@@ -23010,6 +23007,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23010
23007
  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
23011
23008
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
23012
23009
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
23010
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
23013
23011
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
23014
23012
  position: relative;
23015
23013
  min-width: var(--pf-c-popover--MinWidth);
@@ -23117,6 +23115,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23117
23115
 
23118
23116
  .pf-c-popover__title-icon {
23119
23117
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
23118
+ font-size: var(--pf-c-popover__title-icon--FontSize);
23120
23119
  color: var(--pf-c-popover__title-icon--Color);
23121
23120
  }
23122
23121
 
package/patternfly.css CHANGED
@@ -15633,9 +15633,9 @@ textarea.pf-c-form-control {
15633
15633
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
15634
15634
  --pf-c-form-control--BorderLeftColor: transparent;
15635
15635
  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
15636
- --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
15636
+ --pf-c-form-control--disabled--Color: var(--pf-global--palette--black-300);
15637
15637
  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
15638
- --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
15638
+ --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--200);
15639
15639
  color: var(--pf-global--Color--100);
15640
15640
  }
15641
15641
  :where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
@@ -15644,9 +15644,6 @@ textarea.pf-c-form-control {
15644
15644
  :where(.pf-theme-dark) .pf-c-form-control[readonly] {
15645
15645
  border-bottom-color: var(--pf-global--palette--black-700);
15646
15646
  }
15647
- :where(.pf-theme-dark) .pf-c-form-control:disabled {
15648
- color: var(--pf-global--palette--black-100);
15649
- }
15650
15647
 
15651
15648
  .pf-c-hint {
15652
15649
  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
@@ -23133,6 +23130,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23133
23130
  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
23134
23131
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
23135
23132
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
23133
+ --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
23136
23134
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
23137
23135
  position: relative;
23138
23136
  min-width: var(--pf-c-popover--MinWidth);
@@ -23240,6 +23238,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
23240
23238
 
23241
23239
  .pf-c-popover__title-icon {
23242
23240
  margin-right: var(--pf-c-popover__title-icon--MarginRight);
23241
+ font-size: var(--pf-c-popover__title-icon--FontSize);
23243
23242
  color: var(--pf-c-popover__title-icon--Color);
23244
23243
  }
23245
23244