@patternfly/patternfly 4.147.1 → 4.150.0

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 (33) hide show
  1. package/components/ContextSelector/context-selector.css +68 -0
  2. package/components/ContextSelector/context-selector.scss +74 -0
  3. package/components/Dropdown/dropdown.css +1 -1
  4. package/components/Dropdown/dropdown.scss +1 -1
  5. package/components/Masthead/masthead.css +1 -0
  6. package/components/Masthead/masthead.scss +1 -0
  7. package/components/Nav/nav.css +41 -2
  8. package/components/Nav/nav.scss +54 -2
  9. package/components/Page/page.css +26 -3
  10. package/components/Page/page.scss +31 -0
  11. package/components/Panel/panel.css +78 -0
  12. package/components/Panel/panel.scss +99 -0
  13. package/components/Popover/popover.css +58 -2
  14. package/components/Popover/popover.scss +73 -2
  15. package/components/Tooltip/tooltip.css +4 -4
  16. package/components/Tooltip/tooltip.scss +4 -4
  17. package/components/_all.scss +1 -0
  18. package/docs/components/CodeBlock/examples/CodeBlock.md +0 -1
  19. package/docs/components/ContextSelector/examples/context-selector.md +2 -0
  20. package/docs/components/HelperText/examples/HelperText.md +0 -1
  21. package/docs/components/Menu/examples/Menu.md +19 -20
  22. package/docs/components/Nav/examples/Navigation.css +4 -0
  23. package/docs/components/Nav/examples/Navigation.md +113 -0
  24. package/docs/components/Panel/examples/Panel.md +163 -0
  25. package/docs/components/Popover/examples/Popover.md +237 -15
  26. package/docs/components/Select/examples/Select.md +2 -2
  27. package/docs/components/Sidebar/examples/Sidebar.md +0 -1
  28. package/docs/demos/ContextSelector/examples/ContextSelector.md +1391 -0
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +278 -12
  31. package/patternfly.css +278 -12
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
@@ -0,0 +1,163 @@
1
+ ---
2
+ id: 'Panel'
3
+ beta: true
4
+ section: components
5
+ cssPrefix: pf-c-panel
6
+ ---## Examples
7
+
8
+ ### Basic
9
+
10
+ ```html
11
+ <div class="pf-c-panel">
12
+ <div class="pf-c-panel__main">
13
+ <div class="pf-c-panel__main-body">Main content</div>
14
+ </div>
15
+ </div>
16
+
17
+ ```
18
+
19
+ ### Header
20
+
21
+ ```html
22
+ <div class="pf-c-panel">
23
+ <div class="pf-c-panel__header">Header content</div>
24
+ <hr class="pf-c-divider" />
25
+ <div class="pf-c-panel__main">
26
+ <div class="pf-c-panel__main-body">Main content</div>
27
+ </div>
28
+ </div>
29
+
30
+ ```
31
+
32
+ ### Footer
33
+
34
+ ```html
35
+ <div class="pf-c-panel">
36
+ <div class="pf-c-panel__main">
37
+ <div class="pf-c-panel__main-body">Main content</div>
38
+ </div>
39
+ <div class="pf-c-panel__footer">Footer content</div>
40
+ </div>
41
+
42
+ ```
43
+
44
+ ### Header and footer
45
+
46
+ ```html
47
+ <div class="pf-c-panel">
48
+ <div class="pf-c-panel__header">Header content</div>
49
+ <hr class="pf-c-divider" />
50
+ <div class="pf-c-panel__main">
51
+ <div class="pf-c-panel__main-body">Main content</div>
52
+ </div>
53
+ <div class="pf-c-panel__footer">Footer content</div>
54
+ </div>
55
+
56
+ ```
57
+
58
+ ### No body
59
+
60
+ ```html
61
+ <div class="pf-c-panel">
62
+ <div class="pf-c-panel__main">Main content</div>
63
+ </div>
64
+
65
+ ```
66
+
67
+ ### Raised
68
+
69
+ ```html
70
+ <div class="pf-c-panel pf-m-raised">
71
+ <div class="pf-c-panel__main">
72
+ <div class="pf-c-panel__main-body">Main content</div>
73
+ </div>
74
+ </div>
75
+
76
+ ```
77
+
78
+ ### Bordered
79
+
80
+ ```html
81
+ <div class="pf-c-panel pf-m-bordered">
82
+ <div class="pf-c-panel__main">
83
+ <div class="pf-c-panel__main-body">Main content</div>
84
+ </div>
85
+ </div>
86
+
87
+ ```
88
+
89
+ ### Scrollable
90
+
91
+ ```html
92
+ <div class="pf-c-panel pf-m-scrollable">
93
+ <div class="pf-c-panel__main">
94
+ <div class="pf-c-panel__main-body">
95
+ Main content
96
+ <br />
97
+ <br />Main content
98
+ <br />
99
+ <br />Main content
100
+ <br />
101
+ <br />Main content
102
+ <br />
103
+ <br />Main content
104
+ <br />
105
+ <br />Main content
106
+ <br />
107
+ <br />Main content
108
+ <br />
109
+ <br />Main content
110
+ <br />
111
+ <br />Main content
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ ```
117
+
118
+ ### Scrollable with header and footer
119
+
120
+ ```html
121
+ <div class="pf-c-panel pf-m-scrollable">
122
+ <div class="pf-c-panel__header">Header content</div>
123
+ <hr class="pf-c-divider" />
124
+ <div class="pf-c-panel__main">
125
+ <div class="pf-c-panel__main-body">
126
+ Main content
127
+ <br />
128
+ <br />Main content
129
+ <br />
130
+ <br />Main content
131
+ <br />
132
+ <br />Main content
133
+ <br />
134
+ <br />Main content
135
+ <br />
136
+ <br />Main content
137
+ <br />
138
+ <br />Main content
139
+ <br />
140
+ <br />Main content
141
+ <br />
142
+ <br />Main content
143
+ </div>
144
+ </div>
145
+ <div class="pf-c-panel__footer">Footer content</div>
146
+ </div>
147
+
148
+ ```
149
+
150
+ ## Documentation
151
+
152
+ ### Usage
153
+
154
+ | Class | Applied to | Outcome |
155
+ | ------------------------ | ------------- | ----------------------------------------- |
156
+ | `.pf-c-panel` | `<div>` | Initiates the panel. **Required** |
157
+ | `.pf-c-panel__header` | `<div>` | Initiates the panel header. |
158
+ | `.pf-c-panel__main` | `<div>` | Initiates the panel main content. |
159
+ | `.pf-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
160
+ | `.pf-c-panel__footer` | `<div>` | Initiates the panel footer. |
161
+ | `.pf-m-bordered` | `.pf-c-panel` | Modifies the panel for bordered styles. |
162
+ | `.pf-m-raised` | `.pf-c-panel` | Modifies the panel for raised styles. |
163
+ | `.pf-m-scrollable` | `.pf-c-panel` | Modifies the panel for scrollable styles. |
@@ -264,6 +264,218 @@ cssPrefix: pf-c-popover
264
264
 
265
265
  ```
266
266
 
267
+ ### Popover with icon in the title
268
+
269
+ ```html
270
+ <div
271
+ class="pf-c-popover pf-m-left"
272
+ aria-modal="true"
273
+ aria-labelledby="popover-top-header"
274
+ aria-describedby="popover-top-body"
275
+ >
276
+ <div class="pf-c-popover__arrow"></div>
277
+ <div class="pf-c-popover__content">
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
+ <header class="pf-c-popover__header">
282
+ <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
283
+ <span class="pf-c-popover__title-icon">
284
+ <i class="fas fa-fw fa-bullhorn" aria-hidden="true"></i>
285
+ </span>
286
+ <span class="pf-c-popover__title-text">Popover with icon title</span>
287
+ </h1>
288
+ </header>
289
+ <div
290
+ class="pf-c-popover__body"
291
+ id="popover-top-body"
292
+ >Popovers are triggered by click rather than hover. Click again to close.</div>
293
+ <footer class="pf-c-popover__footer">Popover footer</footer>
294
+ </div>
295
+ </div>
296
+
297
+ ```
298
+
299
+ ### Default alert popover
300
+
301
+ ```html
302
+ <div
303
+ class="pf-c-popover pf-m-default pf-m-left"
304
+ aria-modal="true"
305
+ aria-labelledby="popover-top-header"
306
+ aria-describedby="popover-top-body"
307
+ >
308
+ <div class="pf-c-popover__arrow"></div>
309
+ <div class="pf-c-popover__content">
310
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
311
+ <i class="fas fa-times" aria-hidden="true"></i>
312
+ </button>
313
+ <header class="pf-c-popover__header">
314
+ <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
315
+ <span class="pf-c-popover__title-icon">
316
+ <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
317
+ </span>
318
+ <span class="pf-u-screen-reader">
319
+ Default
320
+ alert:
321
+ </span>
322
+ <span class="pf-c-popover__title-text">Default popover title</span>
323
+ </h1>
324
+ </header>
325
+ <div
326
+ class="pf-c-popover__body"
327
+ id="popover-top-body"
328
+ >Popovers are triggered by click rather than hover. Click again to close.</div>
329
+ <footer class="pf-c-popover__footer">Popover footer</footer>
330
+ </div>
331
+ </div>
332
+
333
+ ```
334
+
335
+ ### Info alert popover
336
+
337
+ ```html
338
+ <div
339
+ class="pf-c-popover pf-m-info pf-m-top"
340
+ aria-modal="true"
341
+ aria-labelledby="popover-top-header"
342
+ aria-describedby="popover-top-body"
343
+ >
344
+ <div class="pf-c-popover__arrow"></div>
345
+ <div class="pf-c-popover__content">
346
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
347
+ <i class="fas fa-times" aria-hidden="true"></i>
348
+ </button>
349
+ <header class="pf-c-popover__header">
350
+ <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
351
+ <span class="pf-c-popover__title-icon">
352
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
353
+ </span>
354
+ <span class="pf-u-screen-reader">
355
+ Info
356
+ alert:
357
+ </span>
358
+ <span class="pf-c-popover__title-text">Info popover title</span>
359
+ </h1>
360
+ </header>
361
+ <div
362
+ class="pf-c-popover__body"
363
+ id="popover-top-body"
364
+ >Popovers are triggered by click rather than hover. Click again to close.</div>
365
+ <footer class="pf-c-popover__footer">Popover footer</footer>
366
+ </div>
367
+ </div>
368
+
369
+ ```
370
+
371
+ ### Success alert popover
372
+
373
+ ```html
374
+ <div
375
+ class="pf-c-popover pf-m-success pf-m-top"
376
+ aria-modal="true"
377
+ aria-labelledby="popover-top-header"
378
+ aria-describedby="popover-top-body"
379
+ >
380
+ <div class="pf-c-popover__arrow"></div>
381
+ <div class="pf-c-popover__content">
382
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
383
+ <i class="fas fa-times" aria-hidden="true"></i>
384
+ </button>
385
+ <header class="pf-c-popover__header">
386
+ <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
387
+ <span class="pf-c-popover__title-icon">
388
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
389
+ </span>
390
+ <span class="pf-u-screen-reader">
391
+ Success
392
+ alert:
393
+ </span>
394
+ <span class="pf-c-popover__title-text">Success popover title</span>
395
+ </h1>
396
+ </header>
397
+ <div
398
+ class="pf-c-popover__body"
399
+ id="popover-top-body"
400
+ >Popovers are triggered by click rather than hover. Click again to close.</div>
401
+ <footer class="pf-c-popover__footer">Popover footer</footer>
402
+ </div>
403
+ </div>
404
+
405
+ ```
406
+
407
+ ### Warning alert popover
408
+
409
+ ```html
410
+ <div
411
+ class="pf-c-popover pf-m-warning pf-m-top"
412
+ aria-modal="true"
413
+ aria-labelledby="popover-top-header"
414
+ aria-describedby="popover-top-body"
415
+ >
416
+ <div class="pf-c-popover__arrow"></div>
417
+ <div class="pf-c-popover__content">
418
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
419
+ <i class="fas fa-times" aria-hidden="true"></i>
420
+ </button>
421
+ <header class="pf-c-popover__header">
422
+ <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
423
+ <span class="pf-c-popover__title-icon">
424
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
425
+ </span>
426
+ <span class="pf-u-screen-reader">
427
+ Warning
428
+ alert:
429
+ </span>
430
+ <span class="pf-c-popover__title-text">Warning popover title</span>
431
+ </h1>
432
+ </header>
433
+ <div
434
+ class="pf-c-popover__body"
435
+ id="popover-top-body"
436
+ >Popovers are triggered by click rather than hover. Click again to close.</div>
437
+ <footer class="pf-c-popover__footer">Popover footer</footer>
438
+ </div>
439
+ </div>
440
+
441
+ ```
442
+
443
+ ### Danger alert popover
444
+
445
+ ```html
446
+ <div
447
+ class="pf-c-popover pf-m-danger pf-m-top"
448
+ aria-modal="true"
449
+ aria-labelledby="popover-top-header"
450
+ aria-describedby="popover-top-body"
451
+ >
452
+ <div class="pf-c-popover__arrow"></div>
453
+ <div class="pf-c-popover__content">
454
+ <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
455
+ <i class="fas fa-times" aria-hidden="true"></i>
456
+ </button>
457
+ <header class="pf-c-popover__header">
458
+ <h1 class="pf-c-popover__title pf-m-icon" id="popover-top-header">
459
+ <span class="pf-c-popover__title-icon">
460
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
461
+ </span>
462
+ <span class="pf-u-screen-reader">
463
+ Danger
464
+ alert:
465
+ </span>
466
+ <span class="pf-c-popover__title-text">Danger popover title</span>
467
+ </h1>
468
+ </header>
469
+ <div
470
+ class="pf-c-popover__body"
471
+ id="popover-top-body"
472
+ >Popovers are triggered by click rather than hover. Click again to close.</div>
473
+ <footer class="pf-c-popover__footer">Popover footer</footer>
474
+ </div>
475
+ </div>
476
+
477
+ ```
478
+
267
479
  ## Documentation
268
480
 
269
481
  ### Overview
@@ -284,18 +496,28 @@ A popover is used to provide contextual information for another component on cli
284
496
 
285
497
  ### Usage
286
498
 
287
- | Class | Applied to | Outcome |
288
- | --------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
289
- | `.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** |
290
- | `.pf-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
291
- | `.pf-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
292
- | `.pf-c-button` | `<button>` | Positions the close icon in the top-right corner of the popover. **Required** |
293
- | `.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. |
294
- | `.pf-c-popover__body` | `<div>` | The popover's body text. **Required** |
295
- | `.pf-c-popover__footer` | `<footer>` | Initiates a popover footer. |
296
- | `.pf-m-left{-top/bottom}` | `.pf-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
297
- | `.pf-m-right{-top/bottom}` | `.pf-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
298
- | `.pf-m-top{-left/right}` | `.pf-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
299
- | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
300
- | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
301
- | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
499
+ | Class | Applied to | Outcome |
500
+ | --------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
501
+ | `.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** |
502
+ | `.pf-c-popover__arrow` | `<div>` | Creates an arrow pointing towards the element the popover describes. **Required** |
503
+ | `.pf-c-popover__content` | `<div>` | Creates the content area of the popover. **Required** |
504
+ | `.pf-c-button` | `<button>` | Positions the close icon in the top-right corner of the popover. **Required** |
505
+ | `.pf-c-popover__header` | `<header>` | Creates the popover header |
506
+ | `.pf-c-popover__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`,`<div>` | Creates the popover title |
507
+ | `.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. |
508
+ | `.pf-c-popover__title-icon` | `<span>` | Creates the popover title icon |
509
+ | `.pf-c-popover__title-text` | `<span>` | Creates the popover title text |
510
+ | `.pf-c-popover__body` | `<div>` | The popover's body text. **Required** |
511
+ | `.pf-c-popover__footer` | `<footer>` | Initiates a popover footer. |
512
+ | `.pf-m-left{-top/bottom}` | `.pf-c-popover` | Positions the popover to the left (or left top/left bottom) of the element. |
513
+ | `.pf-m-right{-top/bottom}` | `.pf-c-popover` | Positions the popover to the right (or right top/right bottom) of the element. |
514
+ | `.pf-m-top{-left/right}` | `.pf-c-popover` | Positions the popover to the top (or top left/top right) of the element. |
515
+ | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
516
+ | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
517
+ | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
518
+ | `.pf-m-icon` | `.pf-c-popover__title` | Modifies the title layout to accommodate an icon. |
519
+ | `.pf-m-default` | `.pf-c-popover` | Modifies for the default alert state. |
520
+ | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
521
+ | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert state. |
522
+ | `.pf-m-warning` | `.pf-c-popover` | Modifies for the warning alert state. |
523
+ | `.pf-m-danger` | `.pf-c-popover` | Modifies for the danger alert state. |
@@ -2915,7 +2915,7 @@ The plain select variation should be used when you do not want a border applied
2915
2915
 
2916
2916
  ### View more menu item
2917
2917
 
2918
- ```html
2918
+ ```html isBeta
2919
2919
  <div class="pf-c-select pf-m-expanded">
2920
2920
  <span id="select-single-view-more-label" hidden>Choose one</span>
2921
2921
 
@@ -2982,7 +2982,7 @@ The plain select variation should be used when you do not want a border applied
2982
2982
 
2983
2983
  ### Loading menu item
2984
2984
 
2985
- ```html
2985
+ ```html isBeta
2986
2986
  <div class="pf-c-select pf-m-expanded">
2987
2987
  <span id="select-single-loading-label" hidden>Choose one</span>
2988
2988
 
@@ -1,6 +1,5 @@
1
1
  ---
2
2
  id: 'Sidebar'
3
- beta: true
4
3
  section: components
5
4
  cssPrefix: pf-c-sidebar
6
5
  ---import './Sidebar.css'