@patternfly/patternfly 5.0.0-alpha.22 → 5.0.0-alpha.23

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 (10) hide show
  1. package/components/Popover/popover.css +21 -24
  2. package/components/Popover/popover.scss +25 -32
  3. package/docs/components/LogViewer/examples/LogViewer.md +10 -4
  4. package/docs/components/Popover/examples/Popover.md +175 -104
  5. package/docs/demos/Card/examples/Card.md +17 -11
  6. package/package.json +1 -1
  7. package/patternfly-no-reset.css +21 -24
  8. package/patternfly.css +21 -24
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Popover/popover.css CHANGED
@@ -34,15 +34,13 @@
34
34
  --pf-c-popover__arrow--m-left--TranslateX: 50%;
35
35
  --pf-c-popover__arrow--m-left--TranslateY: -50%;
36
36
  --pf-c-popover__arrow--m-left--Rotate: 45deg;
37
- --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
38
- --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
39
- --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
40
- --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
41
- --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
42
- --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
43
- --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
44
- --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
45
- --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
37
+ --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
38
+ --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
39
+ --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
40
+ --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
41
+ --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
42
+ --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
43
+ --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
46
44
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
47
45
  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
48
46
  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -122,16 +120,14 @@
122
120
  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
123
121
  background-color: var(--pf-c-popover__content--BackgroundColor);
124
122
  }
125
- .pf-c-popover__content > .pf-c-title {
126
- margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
127
- }
128
- .pf-c-popover__content > .pf-c-button {
123
+
124
+ .pf-c-popover__close {
129
125
  position: absolute;
130
- top: var(--pf-c-popover--c-button--Top);
131
- right: var(--pf-c-popover--c-button--Right);
126
+ top: var(--pf-c-popover__close--Top);
127
+ right: var(--pf-c-popover__close--Right);
132
128
  }
133
- .pf-c-popover__content > .pf-c-button + * {
134
- padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
129
+ .pf-c-popover__close + * {
130
+ padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
135
131
  }
136
132
 
137
133
  .pf-c-popover__arrow {
@@ -143,15 +139,13 @@
143
139
  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
144
140
  }
145
141
 
146
- .pf-c-popover__title {
147
- flex: 0 0 auto;
148
- margin-bottom: var(--pf-c-popover__title--MarginBottom);
149
- font-family: var(--pf-c-popover__title--FontFamily);
150
- font-size: var(--pf-c-popover__title--FontSize);
151
- line-height: var(--pf-c-popover__title--LineHeight);
142
+ .pf-c-popover__header {
143
+ margin-bottom: var(--pf-c-popover__header--MarginBottom);
152
144
  }
153
- .pf-c-popover__title.pf-m-icon {
145
+
146
+ .pf-c-popover__title {
154
147
  display: flex;
148
+ flex: 0 0 auto;
155
149
  }
156
150
 
157
151
  .pf-c-popover__title-icon {
@@ -160,6 +154,9 @@
160
154
  }
161
155
 
162
156
  .pf-c-popover__title-text {
157
+ font-family: var(--pf-c-popover__title-text--FontFamily);
158
+ font-size: var(--pf-c-popover__title-text--FontSize);
159
+ line-height: var(--pf-c-popover__title-text--LineHeight);
163
160
  color: var(--pf-c-popover__title-text--Color, inherit);
164
161
  }
165
162
 
package/components/Popover/popover.scss CHANGED
@@ -45,19 +45,17 @@
45
45
  --pf-c-popover__arrow--m-left--Rotate: 45deg;
46
46
 
47
47
  // Close
48
- --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
49
- --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
50
- --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
51
- --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
48
+ --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
49
+ --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
50
+ --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
52
51
 
53
52
  // Header
54
- --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
53
+ --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
55
54
 
56
- // Title
57
- --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
58
- --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
59
- --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
60
- --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
55
+ // Title text
56
+ --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
57
+ --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
58
+ --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
61
59
 
62
60
  // Title icon
63
61
  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -187,22 +185,17 @@
187
185
  position: relative;
188
186
  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
189
187
  background-color: var(--pf-c-popover__content--BackgroundColor);
188
+ }
190
189
 
191
- // Remove in breaking change
192
- > .pf-c-title {
193
- margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
194
- }
195
-
196
- // Close button
197
- > .pf-c-button {
198
- position: absolute;
199
- top: var(--pf-c-popover--c-button--Top);
200
- right: var(--pf-c-popover--c-button--Right);
190
+ // Close button
191
+ .pf-c-popover__close {
192
+ position: absolute;
193
+ top: var(--pf-c-popover__close--Top);
194
+ right: var(--pf-c-popover__close--Right);
201
195
 
202
- // Create room for the close button
203
- + * {
204
- padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
205
- }
196
+ // Create room for the close button
197
+ + * {
198
+ padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
206
199
  }
207
200
  }
208
201
 
@@ -215,16 +208,13 @@
215
208
  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
216
209
  }
217
210
 
211
+ .pf-c-popover__header {
212
+ margin-bottom: var(--pf-c-popover__header--MarginBottom);
213
+ }
214
+
218
215
  .pf-c-popover__title {
216
+ display: flex;
219
217
  flex: 0 0 auto;
220
- margin-bottom: var(--pf-c-popover__title--MarginBottom);
221
- font-family: var(--pf-c-popover__title--FontFamily);
222
- font-size: var(--pf-c-popover__title--FontSize);
223
- line-height: var(--pf-c-popover__title--LineHeight);
224
-
225
- &.pf-m-icon {
226
- display: flex;
227
- }
228
218
  }
229
219
 
230
220
  .pf-c-popover__title-icon {
@@ -233,6 +223,9 @@
233
223
  }
234
224
 
235
225
  .pf-c-popover__title-text {
226
+ font-family: var(--pf-c-popover__title-text--FontFamily);
227
+ font-size: var(--pf-c-popover__title-text--FontSize);
228
+ line-height: var(--pf-c-popover__title-text--LineHeight);
236
229
  color: var(--pf-c-popover__title-text--Color, inherit);
237
230
  }
238
231
 
package/docs/components/LogViewer/examples/LogViewer.md CHANGED
@@ -5049,10 +5049,16 @@ cssPrefix: pf-c-log-viewer
5049
5049
  >
5050
5050
  <div class="pf-c-popover__arrow"></div>
5051
5051
  <div class="pf-c-popover__content">
5052
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
5053
- <i class="fas fa-times" aria-hidden="true"></i>
5054
- </button>
5055
- <h1 class="pf-c-title pf-m-md" id="popover-bottom-header">Clear this log?</h1>
5052
+ <div class="pf-c-popover__close">
5053
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
5054
+ <i class="fas fa-times" aria-hidden="true"></i>
5055
+ </button>
5056
+ </div>
5057
+ <header class="pf-c-popover__header">
5058
+ <div class="pf-c-popover__title" id="popover-bottom-header">
5059
+ <h1 class="pf-c-popover__title-text">Clear this log?</h1>
5060
+ </div>
5061
+ </header>
5056
5062
  <div
5057
5063
  class="pf-c-popover__body"
5058
5064
  id="popover-bottom-body"
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -18,10 +18,16 @@ cssPrefix: pf-c-popover
18
18
  >
19
19
  <div class="pf-c-popover__arrow"></div>
20
20
  <div class="pf-c-popover__content">
21
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
22
- <i class="fas fa-times" aria-hidden="true"></i>
23
- </button>
24
- <h1 class="pf-c-title pf-m-md" id="popover-top-header">Popover header</h1>
21
+ <div class="pf-c-popover__close">
22
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
23
+ <i class="fas fa-times" aria-hidden="true"></i>
24
+ </button>
25
+ </div>
26
+ <header class="pf-c-popover__header">
27
+ <div class="pf-c-popover__title" id="popover-top-header">
28
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
29
+ </div>
30
+ </header>
25
31
  <div
26
32
  class="pf-c-popover__body"
27
33
  id="popover-top-body"
@@ -44,10 +50,16 @@ cssPrefix: pf-c-popover
44
50
  >
45
51
  <div class="pf-c-popover__arrow"></div>
46
52
  <div class="pf-c-popover__content">
47
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
48
- <i class="fas fa-times" aria-hidden="true"></i>
49
- </button>
50
- <h1 class="pf-c-title pf-m-md" id="popover-right-header">Popover header</h1>
53
+ <div class="pf-c-popover__close">
54
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
55
+ <i class="fas fa-times" aria-hidden="true"></i>
56
+ </button>
57
+ </div>
58
+ <header class="pf-c-popover__header">
59
+ <div class="pf-c-popover__title" id="popover-right-header">
60
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
61
+ </div>
62
+ </header>
51
63
  <div
52
64
  class="pf-c-popover__body"
53
65
  id="popover-right-body"
@@ -70,10 +82,16 @@ cssPrefix: pf-c-popover
70
82
  >
71
83
  <div class="pf-c-popover__arrow"></div>
72
84
  <div class="pf-c-popover__content">
73
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
74
- <i class="fas fa-times" aria-hidden="true"></i>
75
- </button>
76
- <h1 class="pf-c-title pf-m-md" id="popover-bottom-header">Popover header</h1>
85
+ <div class="pf-c-popover__close">
86
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
87
+ <i class="fas fa-times" aria-hidden="true"></i>
88
+ </button>
89
+ </div>
90
+ <header class="pf-c-popover__header">
91
+ <div class="pf-c-popover__title" id="popover-bottom-header">
92
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
93
+ </div>
94
+ </header>
77
95
  <div
78
96
  class="pf-c-popover__body"
79
97
  id="popover-bottom-body"
@@ -96,10 +114,16 @@ cssPrefix: pf-c-popover
96
114
  >
97
115
  <div class="pf-c-popover__arrow"></div>
98
116
  <div class="pf-c-popover__content">
99
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
100
- <i class="fas fa-times" aria-hidden="true"></i>
101
- </button>
102
- <h1 class="pf-c-title pf-m-md" id="popover-left-header">Popover header</h1>
117
+ <div class="pf-c-popover__close">
118
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
119
+ <i class="fas fa-times" aria-hidden="true"></i>
120
+ </button>
121
+ </div>
122
+ <header class="pf-c-popover__header">
123
+ <div class="pf-c-popover__title" id="popover-left-header">
124
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
125
+ </div>
126
+ </header>
103
127
  <div
104
128
  class="pf-c-popover__body"
105
129
  id="popover-left-body"
@@ -122,10 +146,16 @@ cssPrefix: pf-c-popover
122
146
  >
123
147
  <div class="pf-c-popover__arrow"></div>
124
148
  <div class="pf-c-popover__content">
125
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
126
- <i class="fas fa-times" aria-hidden="true"></i>
127
- </button>
128
- <h1 class="pf-c-title pf-m-md" id="popover-left-start-header">Popover header</h1>
149
+ <div class="pf-c-popover__close">
150
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
151
+ <i class="fas fa-times" aria-hidden="true"></i>
152
+ </button>
153
+ </div>
154
+ <header class="pf-c-popover__header">
155
+ <div class="pf-c-popover__title" id="popover-left-start-header">
156
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
157
+ </div>
158
+ </header>
129
159
  <div
130
160
  class="pf-c-popover__body"
131
161
  id="popover-left-start-body"
@@ -148,10 +178,16 @@ cssPrefix: pf-c-popover
148
178
  >
149
179
  <div class="pf-c-popover__arrow"></div>
150
180
  <div class="pf-c-popover__content">
151
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
152
- <i class="fas fa-times" aria-hidden="true"></i>
153
- </button>
154
- <h1 class="pf-c-title pf-m-md" id="popover-left-end-header">Popover header</h1>
181
+ <div class="pf-c-popover__close">
182
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
183
+ <i class="fas fa-times" aria-hidden="true"></i>
184
+ </button>
185
+ </div>
186
+ <header class="pf-c-popover__header">
187
+ <div class="pf-c-popover__title" id="popover-left-end-header">
188
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
189
+ </div>
190
+ </header>
155
191
  <div
156
192
  class="pf-c-popover__body"
157
193
  id="popover-left-end-body"
@@ -174,13 +210,16 @@ cssPrefix: pf-c-popover
174
210
  >
175
211
  <div class="pf-c-popover__arrow"></div>
176
212
  <div class="pf-c-popover__content">
177
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
178
- <i class="fas fa-times" aria-hidden="true"></i>
179
- </button>
180
- <h1
181
- class="pf-c-title pf-m-md"
182
- id="popover-bottom-start-header"
183
- >Popover header</h1>
213
+ <div class="pf-c-popover__close">
214
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
215
+ <i class="fas fa-times" aria-hidden="true"></i>
216
+ </button>
217
+ </div>
218
+ <header class="pf-c-popover__header">
219
+ <div class="pf-c-popover__title" id="popover-bottom-start-header">
220
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
221
+ </div>
222
+ </header>
184
223
  <div
185
224
  class="pf-c-popover__body"
186
225
  id="popover-bottom-start-body"
@@ -203,10 +242,16 @@ cssPrefix: pf-c-popover
203
242
  >
204
243
  <div class="pf-c-popover__arrow"></div>
205
244
  <div class="pf-c-popover__content">
206
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
207
- <i class="fas fa-times" aria-hidden="true"></i>
208
- </button>
209
- <h1 class="pf-c-title pf-m-md" id="popover-bottom-end-header">Popover header</h1>
245
+ <div class="pf-c-popover__close">
246
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
247
+ <i class="fas fa-times" aria-hidden="true"></i>
248
+ </button>
249
+ </div>
250
+ <header class="pf-c-popover__header">
251
+ <div class="pf-c-popover__title" id="popover-bottom-end-header">
252
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
253
+ </div>
254
+ </header>
210
255
  <div
211
256
  class="pf-c-popover__body"
212
257
  id="popover-bottom-end-body"
@@ -229,9 +274,11 @@ cssPrefix: pf-c-popover
229
274
  >
230
275
  <div class="pf-c-popover__arrow"></div>
231
276
  <div class="pf-c-popover__content">
232
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
233
- <i class="fas fa-times" aria-hidden="true"></i>
234
- </button>
277
+ <div class="pf-c-popover__close">
278
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
279
+ <i class="fas fa-times" aria-hidden="true"></i>
280
+ </button>
281
+ </div>
235
282
  <div
236
283
  class="pf-c-popover__body"
237
284
  id="popover-no-header-body"
@@ -274,10 +321,16 @@ cssPrefix: pf-c-popover
274
321
  >
275
322
  <div class="pf-c-popover__arrow"></div>
276
323
  <div class="pf-c-popover__content">
277
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
278
- <i class="fas fa-times" aria-hidden="true"></i>
279
- </button>
280
- <h1 class="pf-c-title pf-m-md" id="popover-width-auto-header">Popover header</h1>
324
+ <div class="pf-c-popover__close">
325
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
326
+ <i class="fas fa-times" aria-hidden="true"></i>
327
+ </button>
328
+ </div>
329
+ <header class="pf-c-popover__header">
330
+ <div class="pf-c-popover__title" id="popover-width-auto-header">
331
+ <h1 class="pf-c-popover__title-text">Popover header</h1>
332
+ </div>
333
+ </header>
281
334
  <div class="pf-c-popover__body" id="popover-width-auto-body">Popovers body</div>
282
335
  <footer class="pf-c-popover__footer">Popover footer</footer>
283
336
  </div>
@@ -297,16 +350,18 @@ cssPrefix: pf-c-popover
297
350
  >
298
351
  <div class="pf-c-popover__arrow"></div>
299
352
  <div class="pf-c-popover__content">
300
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
301
- <i class="fas fa-times" aria-hidden="true"></i>
302
- </button>
353
+ <div class="pf-c-popover__close">
354
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
355
+ <i class="fas fa-times" aria-hidden="true"></i>
356
+ </button>
357
+ </div>
303
358
  <header class="pf-c-popover__header">
304
- <h1 class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
359
+ <div class="pf-c-popover__title pf-m-icon" id="popover-icon-title-header">
305
360
  <span class="pf-c-popover__title-icon">
306
361
  <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
307
362
  </span>
308
- <span class="pf-c-popover__title-text">Popover with icon title</span>
309
- </h1>
363
+ <h1 class="pf-c-popover__title-text">Popover with icon title</h1>
364
+ </div>
310
365
  </header>
311
366
  <div
312
367
  class="pf-c-popover__body"
@@ -330,23 +385,27 @@ cssPrefix: pf-c-popover
330
385
  >
331
386
  <div class="pf-c-popover__arrow"></div>
332
387
  <div class="pf-c-popover__content">
333
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
334
- <i class="fas fa-times" aria-hidden="true"></i>
335
- </button>
388
+ <div class="pf-c-popover__close">
389
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
390
+ <i class="fas fa-times" aria-hidden="true"></i>
391
+ </button>
392
+ </div>
336
393
  <header class="pf-c-popover__header">
337
- <h1
394
+ <div
338
395
  class="pf-c-popover__title pf-m-icon"
339
396
  id="popover-default-alert-header"
340
397
  >
341
398
  <span class="pf-c-popover__title-icon">
342
399
  <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
343
400
  </span>
344
- <span class="pf-u-screen-reader">
345
- Default
346
- alert:
347
- </span>
348
- <span class="pf-c-popover__title-text">Default popover title</span>
349
- </h1>
401
+ <h1 class="pf-c-popover__title-text">
402
+ <span class="pf-screen-reader">
403
+ Default
404
+ alert:
405
+ </span>
406
+ Default popover title
407
+ </h1>
408
+ </div>
350
409
  </header>
351
410
  <div
352
411
  class="pf-c-popover__body"
@@ -370,20 +429,24 @@ cssPrefix: pf-c-popover
370
429
  >
371
430
  <div class="pf-c-popover__arrow"></div>
372
431
  <div class="pf-c-popover__content">
373
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
374
- <i class="fas fa-times" aria-hidden="true"></i>
375
- </button>
432
+ <div class="pf-c-popover__close">
433
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
434
+ <i class="fas fa-times" aria-hidden="true"></i>
435
+ </button>
436
+ </div>
376
437
  <header class="pf-c-popover__header">
377
- <h1 class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
438
+ <div class="pf-c-popover__title pf-m-icon" id="popover-info-alert-header">
378
439
  <span class="pf-c-popover__title-icon">
379
440
  <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
380
441
  </span>
381
- <span class="pf-u-screen-reader">
382
- Info
383
- alert:
384
- </span>
385
- <span class="pf-c-popover__title-text">Info popover title</span>
386
- </h1>
442
+ <h1 class="pf-c-popover__title-text">
443
+ <span class="pf-screen-reader">
444
+ Info
445
+ alert:
446
+ </span>
447
+ Info popover title
448
+ </h1>
449
+ </div>
387
450
  </header>
388
451
  <div
389
452
  class="pf-c-popover__body"
@@ -407,23 +470,27 @@ cssPrefix: pf-c-popover
407
470
  >
408
471
  <div class="pf-c-popover__arrow"></div>
409
472
  <div class="pf-c-popover__content">
410
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
411
- <i class="fas fa-times" aria-hidden="true"></i>
412
- </button>
473
+ <div class="pf-c-popover__close">
474
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
475
+ <i class="fas fa-times" aria-hidden="true"></i>
476
+ </button>
477
+ </div>
413
478
  <header class="pf-c-popover__header">
414
- <h1
479
+ <div
415
480
  class="pf-c-popover__title pf-m-icon"
416
481
  id="popover-success-alert-header"
417
482
  >
418
483
  <span class="pf-c-popover__title-icon">
419
484
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
420
485
  </span>
421
- <span class="pf-u-screen-reader">
422
- Success
423
- alert:
424
- </span>
425
- <span class="pf-c-popover__title-text">Success popover title</span>
426
- </h1>
486
+ <h1 class="pf-c-popover__title-text">
487
+ <span class="pf-screen-reader">
488
+ Success
489
+ alert:
490
+ </span>
491
+ Success popover title
492
+ </h1>
493
+ </div>
427
494
  </header>
428
495
  <div
429
496
  class="pf-c-popover__body"
@@ -447,23 +514,22 @@ cssPrefix: pf-c-popover
447
514
  >
448
515
  <div class="pf-c-popover__arrow"></div>
449
516
  <div class="pf-c-popover__content">
450
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
451
- <i class="fas fa-times" aria-hidden="true"></i>
452
- </button>
453
517
  <header class="pf-c-popover__header">
454
- <h1
518
+ <div
455
519
  class="pf-c-popover__title pf-m-icon"
456
520
  id="popover-warning-alert-header"
457
521
  >
458
522
  <span class="pf-c-popover__title-icon">
459
523
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
460
524
  </span>
461
- <span class="pf-u-screen-reader">
462
- Warning
463
- alert:
464
- </span>
465
- <span class="pf-c-popover__title-text">Warning popover title</span>
466
- </h1>
525
+ <h1 class="pf-c-popover__title-text">
526
+ <span class="pf-screen-reader">
527
+ Warning
528
+ alert:
529
+ </span>
530
+ Warning popover title
531
+ </h1>
532
+ </div>
467
533
  </header>
468
534
  <div
469
535
  class="pf-c-popover__body"
@@ -487,23 +553,27 @@ cssPrefix: pf-c-popover
487
553
  >
488
554
  <div class="pf-c-popover__arrow"></div>
489
555
  <div class="pf-c-popover__content">
490
- <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
491
- <i class="fas fa-times" aria-hidden="true"></i>
492
- </button>
556
+ <div class="pf-c-popover__close">
557
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
558
+ <i class="fas fa-times" aria-hidden="true"></i>
559
+ </button>
560
+ </div>
493
561
  <header class="pf-c-popover__header">
494
- <h1
562
+ <div
495
563
  class="pf-c-popover__title pf-m-icon"
496
564
  id="popover-danger-alert-header"
497
565
  >
498
566
  <span class="pf-c-popover__title-icon">
499
567
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
500
568
  </span>
501
- <span class="pf-u-screen-reader">
502
- Danger
503
- alert:
504
- </span>
505
- <span class="pf-c-popover__title-text">Danger popover title</span>
506
- </h1>
569
+ <h1 class="pf-c-popover__title-text">
570
+ <span class="pf-screen-reader">
571
+ Danger
572
+ alert:
573
+ </span>
574
+ Danger popover title
575
+ </h1>
576
+ </div>
507
577
  </header>
508
578
  <div
509
579
  class="pf-c-popover__body"
@@ -532,6 +602,7 @@ A popover is used to provide contextual information for another component on cli
532
602
  | `aria-modal="true"` | `.pf-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
533
603
  | `aria-label="Close"` | `.pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
534
604
  | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
605
+ | `.pf-screen-reader` | `.pf-c-popover__title-text` | Adds text to be read saying the alert status before the title. If `.pf-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
535
606
 
536
607
  ### Usage
537
608
 
@@ -540,12 +611,12 @@ A popover is used to provide contextual information for another component on cli
540
611
  | `.pf-c-popover` | `<div>` | Creates a popover. Always use it with a modifier class that positions the popover relative to the element that triggered it. **Required** |
541
612
  | `.pf-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
542
613
  | `.pf-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
543
- | `.pf-c-button` | `<button>` | Positions the close icon in the top-right corner of the popover. **Required** |
544
- | `.pf-c-popover__header` | `<header>` | Creates the popover header |
545
- | `.pf-c-popover__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<div>` | Creates the popover title |
546
- | `.pf-c-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>` | Initiates a title. Always use it with a modifier class. See the [title component](/components/title) for more info.|
547
- | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon |
548
- | `.pf-c-popover__title-text` | `<span>` | Creates the popover title text |
614
+ | `.pf-c-popover__close` | `<div>` | Positions the close icon in the top-right corner of the popover. **Required if there is a close button** |
615
+ | `.pf-c-button` | `<button>` | Creates the close button for the popover. |
616
+ | `.pf-c-popover__header` | `<header>` | Creates the popover header. **Required if there is a title**|
617
+ | `.pf-c-popover__title` | `<div>` | Creates the popover title. |
618
+ | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon. |
619
+ | `.pf-c-popover__title-text` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<span>` | Creates the popover title text. |
549
620
  | `.pf-c-popover__body` | `<div>` | The popover's body text. **Required** |
550
621
  | `.pf-c-popover__footer` | `<footer>` | Initiates a popover footer. |
551
622
  | `.pf-m-left{-top/bottom}` | `.pf-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |