@patternfly/patternfly 5.2.0-prerelease.7 → 5.2.1

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 (12) hide show
  1. package/README.md +0 -1
  2. package/components/Card/card.css +1 -0
  3. package/components/Card/card.scss +1 -0
  4. package/components/ModalBox/modal-box.css +9 -5
  5. package/components/ModalBox/modal-box.scss +26 -11
  6. package/docs/components/ModalBox/examples/ModalBox.md +46 -5
  7. package/package.json +2 -2
  8. package/patternfly-no-globals.css +10 -5
  9. package/patternfly-theme-dark-unversioned.css +10 -5
  10. package/patternfly.css +10 -5
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/README.md CHANGED
@@ -121,4 +121,3 @@ PatternFly 5 is supported on the latest two major versions of the following brow
121
121
  - Firefox
122
122
  - Safari
123
123
  - Edge
124
-
package/components/Card/card.css CHANGED
@@ -309,6 +309,7 @@
309
309
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label {
310
310
  position: absolute;
311
311
  inset: 0;
312
+ justify-self: auto;
312
313
  cursor: pointer;
313
314
  }
314
315
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__label::before,
package/components/Card/card.scss CHANGED
@@ -418,6 +418,7 @@
418
418
  .#{$card}__selectable-actions .#{$radio}__label {
419
419
  position: absolute;
420
420
  inset: 0;
421
+ justify-self: auto;
421
422
  cursor: pointer;
422
423
 
423
424
  &::before {
package/components/ModalBox/modal-box.css CHANGED
@@ -73,19 +73,23 @@
73
73
  max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
74
74
  max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
75
75
  }
76
- .pf-v5-c-modal-box.pf-m-danger {
76
+ .pf-v5-c-modal-box__title.pf-m-danger, .pf-v5-c-modal-box.pf-m-danger {
77
77
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-danger__title-icon--Color);
78
78
  }
79
- .pf-v5-c-modal-box.pf-m-warning {
79
+
80
+ .pf-v5-c-modal-box__title.pf-m-warning, .pf-v5-c-modal-box.pf-m-warning {
80
81
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-warning__title-icon--Color);
81
82
  }
82
- .pf-v5-c-modal-box.pf-m-success {
83
+
84
+ .pf-v5-c-modal-box__title.pf-m-success, .pf-v5-c-modal-box.pf-m-success {
83
85
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-success__title-icon--Color);
84
86
  }
85
- .pf-v5-c-modal-box.pf-m-custom {
87
+
88
+ .pf-v5-c-modal-box__title.pf-m-custom, .pf-v5-c-modal-box.pf-m-custom {
86
89
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-custom__title-icon--Color);
87
90
  }
88
- .pf-v5-c-modal-box.pf-m-info {
91
+
92
+ .pf-v5-c-modal-box__title.pf-m-info, .pf-v5-c-modal-box.pf-m-info {
89
93
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-info__title-icon--Color);
90
94
  }
91
95
 
package/components/ModalBox/modal-box.scss CHANGED
@@ -91,30 +91,45 @@
91
91
  }
92
92
 
93
93
  &.pf-m-align-top {
94
- inset-block-start: var(--#{$modal-box}--m-align-top--MarginTop);
94
+ inset-block-start: var(--#{$modal-box}--m-align-top--MarginTop);
95
95
  align-self: flex-start;
96
96
  max-width: var(--#{$modal-box}--m-align-top--MaxWidth);
97
97
  max-height: var(--#{$modal-box}--m-align-top--MaxHeight);
98
98
  }
99
99
 
100
- &.pf-m-danger {
101
- --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-danger__title-icon--Color);
100
+ @at-root .#{$modal-box}__title,
101
+ & {
102
+ &.pf-m-danger {
103
+ --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-danger__title-icon--Color);
104
+ }
102
105
  }
103
106
 
104
- &.pf-m-warning {
105
- --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-warning__title-icon--Color);
107
+ @at-root .#{$modal-box}__title,
108
+ & {
109
+ &.pf-m-warning {
110
+ --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-warning__title-icon--Color);
111
+ }
106
112
  }
107
113
 
108
- &.pf-m-success {
109
- --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-success__title-icon--Color);
114
+ @at-root .#{$modal-box}__title,
115
+ & {
116
+ &.pf-m-success {
117
+ --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-success__title-icon--Color);
118
+ }
110
119
  }
111
120
 
112
- &.pf-m-custom {
113
- --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-custom__title-icon--Color);
121
+ @at-root .#{$modal-box}__title,
122
+ & {
123
+ &.pf-m-custom {
124
+ --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-custom__title-icon--Color);
125
+ }
114
126
  }
115
127
 
116
- &.pf-m-info {
117
- --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-info__title-icon--Color);
128
+ @at-root .#{$modal-box}__title,
129
+ & {
130
+ &.pf-m-info {
131
+ --#{$modal-box}__title-icon--Color: var(--#{$modal-box}--m-info__title-icon--Color);
132
+ }
118
133
  }
119
134
  }
120
135
 
package/docs/components/ModalBox/examples/ModalBox.md CHANGED
@@ -470,6 +470,47 @@ cssPrefix: pf-v5-c-modal-box
470
470
 
471
471
  ```
472
472
 
473
+ ### Danger alert with modifier on modal title
474
+
475
+ The status modifier classes can be applied directly to the modal title element, instead of the parent modal.
476
+
477
+ ```html isFullscreen isBeta
478
+ <div
479
+ class="pf-v5-c-modal-box"
480
+ role="dialog"
481
+ aria-modal="true"
482
+ aria-labelledby="danger-alert-title-title"
483
+ aria-describedby="danger-alert-title-description"
484
+ >
485
+ <div class="pf-v5-c-modal-box__close">
486
+ <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Close">
487
+ <i class="fas fa-times" aria-hidden="true"></i>
488
+ </button>
489
+ </div>
490
+ <header class="pf-v5-c-modal-box__header">
491
+ <h1
492
+ class="pf-v5-c-modal-box__title pf-m-icon pf-m-danger"
493
+ id="danger-alert-title-title"
494
+ >
495
+ <span class="pf-v5-c-modal-box__title-icon">
496
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
497
+ </span>
498
+ <span class="pf-v5-u-screen-reader">
499
+ Danger
500
+ alert:
501
+ </span>
502
+ <span class="pf-v5-c-modal-box__title-text">Danger alert modal title</span>
503
+ </h1>
504
+ </header>
505
+ <div
506
+ class="pf-v5-c-modal-box__body"
507
+ id="danger-alert-title-description"
508
+ >To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.</div>
509
+ <footer class="pf-v5-c-modal-box__footer">Modal footer</footer>
510
+ </div>
511
+
512
+ ```
513
+
473
514
  ## Documentation
474
515
 
475
516
  ### Overview
@@ -511,9 +552,9 @@ A modal box is a generic rectangular container that can be used to build modals.
511
552
  | `.pf-m-lg` | `.pf-v5-c-modal-box` | Modifies for a large modal box width. |
512
553
  | `.pf-m-align-top` | `.pf-v5-c-modal-box` | Modifies for top alignment. |
513
554
  | `.pf-m-icon` | `.pf-v5-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
514
- | `.pf-m-custom` | `.pf-v5-c-modal-box` | Modifies for the custom alert state. |
515
- | `.pf-m-info` | `.pf-v5-c-modal-box` | Modifies for the info alert state. |
516
- | `.pf-m-success` | `.pf-v5-c-modal-box` | Modifies for the success alert state. |
517
- | `.pf-m-warning` | `.pf-v5-c-modal-box` | Modifies for the warning alert state. |
518
- | `.pf-m-danger` | `.pf-v5-c-modal-box` | Modifies for the danger alert state. |
555
+ | `.pf-m-custom` | `.pf-v5-c-modal-box`, `.pf-v5-c-modal-box__title` | Modifies for the custom alert state. |
556
+ | `.pf-m-info` | `.pf-v5-c-modal-box`, `.pf-v5-c-modal-box__title` | Modifies for the info alert state. |
557
+ | `.pf-m-success` | `.pf-v5-c-modal-box`, `.pf-v5-c-modal-box__title` | Modifies for the success alert state. |
558
+ | `.pf-m-warning` | `.pf-v5-c-modal-box`, `.pf-v5-c-modal-box__title` | Modifies for the warning alert state. |
559
+ | `.pf-m-danger` | `.pf-v5-c-modal-box`, `.pf-v5-c-modal-box__title` | Modifies for the danger alert state. |
519
560
  | `.pf-m-help` | `.pf-v5-c-modal-box__header` | Modifies the modal box header to support the help action |
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.2.0-prerelease.7",
4
+ "version": "5.2.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -45,7 +45,7 @@
45
45
  "@commitlint/config-conventional": "^18.4.3",
46
46
  "@fortawesome/fontawesome": "^1.1.8",
47
47
  "@octokit/rest": "^20.0.2",
48
- "@patternfly/documentation-framework": "5.3.9",
48
+ "@patternfly/documentation-framework": "5.3.18",
49
49
  "@patternfly/patternfly-a11y": "4.3.1",
50
50
  "@patternfly/react-code-editor": "5.1.2",
51
51
  "@patternfly/react-core": "5.1.2",
package/patternfly-no-globals.css CHANGED
@@ -8106,6 +8106,7 @@ button.pf-v5-c-breadcrumb__link {
8106
8106
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label {
8107
8107
  position: absolute;
8108
8108
  inset: 0;
8109
+ justify-self: auto;
8109
8110
  cursor: pointer;
8110
8111
  }
8111
8112
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__label::before,
@@ -18882,19 +18883,23 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18882
18883
  max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
18883
18884
  max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
18884
18885
  }
18885
- .pf-v5-c-modal-box.pf-m-danger {
18886
+ .pf-v5-c-modal-box__title.pf-m-danger, .pf-v5-c-modal-box.pf-m-danger {
18886
18887
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-danger__title-icon--Color);
18887
18888
  }
18888
- .pf-v5-c-modal-box.pf-m-warning {
18889
+
18890
+ .pf-v5-c-modal-box__title.pf-m-warning, .pf-v5-c-modal-box.pf-m-warning {
18889
18891
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-warning__title-icon--Color);
18890
18892
  }
18891
- .pf-v5-c-modal-box.pf-m-success {
18893
+
18894
+ .pf-v5-c-modal-box__title.pf-m-success, .pf-v5-c-modal-box.pf-m-success {
18892
18895
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-success__title-icon--Color);
18893
18896
  }
18894
- .pf-v5-c-modal-box.pf-m-custom {
18897
+
18898
+ .pf-v5-c-modal-box__title.pf-m-custom, .pf-v5-c-modal-box.pf-m-custom {
18895
18899
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-custom__title-icon--Color);
18896
18900
  }
18897
- .pf-v5-c-modal-box.pf-m-info {
18901
+
18902
+ .pf-v5-c-modal-box__title.pf-m-info, .pf-v5-c-modal-box.pf-m-info {
18898
18903
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-info__title-icon--Color);
18899
18904
  }
18900
18905
 
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -8223,6 +8223,7 @@ button.pf-v5-c-breadcrumb__link {
8223
8223
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label {
8224
8224
  position: absolute;
8225
8225
  inset: 0;
8226
+ justify-self: auto;
8226
8227
  cursor: pointer;
8227
8228
  }
8228
8229
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__label::before,
@@ -18999,19 +19000,23 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18999
19000
  max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
19000
19001
  max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
19001
19002
  }
19002
- .pf-v5-c-modal-box.pf-m-danger {
19003
+ .pf-v5-c-modal-box__title.pf-m-danger, .pf-v5-c-modal-box.pf-m-danger {
19003
19004
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-danger__title-icon--Color);
19004
19005
  }
19005
- .pf-v5-c-modal-box.pf-m-warning {
19006
+
19007
+ .pf-v5-c-modal-box__title.pf-m-warning, .pf-v5-c-modal-box.pf-m-warning {
19006
19008
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-warning__title-icon--Color);
19007
19009
  }
19008
- .pf-v5-c-modal-box.pf-m-success {
19010
+
19011
+ .pf-v5-c-modal-box__title.pf-m-success, .pf-v5-c-modal-box.pf-m-success {
19009
19012
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-success__title-icon--Color);
19010
19013
  }
19011
- .pf-v5-c-modal-box.pf-m-custom {
19014
+
19015
+ .pf-v5-c-modal-box__title.pf-m-custom, .pf-v5-c-modal-box.pf-m-custom {
19012
19016
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-custom__title-icon--Color);
19013
19017
  }
19014
- .pf-v5-c-modal-box.pf-m-info {
19018
+
19019
+ .pf-v5-c-modal-box__title.pf-m-info, .pf-v5-c-modal-box.pf-m-info {
19015
19020
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-info__title-icon--Color);
19016
19021
  }
19017
19022
 
package/patternfly.css CHANGED
@@ -8223,6 +8223,7 @@ button.pf-v5-c-breadcrumb__link {
8223
8223
  .pf-v5-c-card__selectable-actions .pf-v5-c-radio__label {
8224
8224
  position: absolute;
8225
8225
  inset: 0;
8226
+ justify-self: auto;
8226
8227
  cursor: pointer;
8227
8228
  }
8228
8229
  .pf-v5-c-card__selectable-actions .pf-v5-c-check__label::before,
@@ -18999,19 +19000,23 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18999
19000
  max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth);
19000
19001
  max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight);
19001
19002
  }
19002
- .pf-v5-c-modal-box.pf-m-danger {
19003
+ .pf-v5-c-modal-box__title.pf-m-danger, .pf-v5-c-modal-box.pf-m-danger {
19003
19004
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-danger__title-icon--Color);
19004
19005
  }
19005
- .pf-v5-c-modal-box.pf-m-warning {
19006
+
19007
+ .pf-v5-c-modal-box__title.pf-m-warning, .pf-v5-c-modal-box.pf-m-warning {
19006
19008
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-warning__title-icon--Color);
19007
19009
  }
19008
- .pf-v5-c-modal-box.pf-m-success {
19010
+
19011
+ .pf-v5-c-modal-box__title.pf-m-success, .pf-v5-c-modal-box.pf-m-success {
19009
19012
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-success__title-icon--Color);
19010
19013
  }
19011
- .pf-v5-c-modal-box.pf-m-custom {
19014
+
19015
+ .pf-v5-c-modal-box__title.pf-m-custom, .pf-v5-c-modal-box.pf-m-custom {
19012
19016
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-custom__title-icon--Color);
19013
19017
  }
19014
- .pf-v5-c-modal-box.pf-m-info {
19018
+
19019
+ .pf-v5-c-modal-box__title.pf-m-info, .pf-v5-c-modal-box.pf-m-info {
19015
19020
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-c-modal-box--m-info__title-icon--Color);
19016
19021
  }
19017
19022