@patternfly/patternfly 6.3.0-prerelease.53 → 6.3.0-prerelease.55

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 (72) hide show
  1. package/README.md +17 -11
  2. package/base/patternfly-variables.css +1208 -1
  3. package/base/patternfly-variables.scss +10 -0
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +13 -1
  7. package/base/tokens/tokens-default.scss +60 -2
  8. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  9. package/base/tokens/tokens-highcontrast.scss +703 -0
  10. package/base/tokens/tokens-local.scss +39 -0
  11. package/base/tokens/tokens-palette.scss +9 -1
  12. package/components/Accordion/accordion.css +21 -0
  13. package/components/Accordion/accordion.scss +27 -1
  14. package/components/Alert/alert-group.css +15 -2
  15. package/components/Alert/alert-group.scss +18 -2
  16. package/components/Badge/badge.css +2 -0
  17. package/components/Badge/badge.scss +2 -0
  18. package/components/Banner/banner.css +4 -0
  19. package/components/Banner/banner.scss +4 -0
  20. package/components/Button/button.css +32 -3
  21. package/components/Button/button.scss +34 -5
  22. package/components/Card/card.css +5 -3
  23. package/components/Card/card.scss +5 -3
  24. package/components/CodeBlock/code-block.css +3 -0
  25. package/components/CodeBlock/code-block.scss +3 -0
  26. package/components/CodeEditor/code-editor.css +8 -3
  27. package/components/CodeEditor/code-editor.scss +11 -6
  28. package/components/Drawer/drawer.css +44 -41
  29. package/components/Drawer/drawer.scss +42 -36
  30. package/components/DualListSelector/dual-list-selector.css +19 -1
  31. package/components/DualListSelector/dual-list-selector.scss +20 -1
  32. package/components/Label/label.css +20 -11
  33. package/components/Label/label.scss +21 -11
  34. package/components/Login/login.css +3 -0
  35. package/components/Login/login.scss +3 -0
  36. package/components/Menu/menu.css +11 -0
  37. package/components/Menu/menu.scss +12 -1
  38. package/components/MenuToggle/menu-toggle.css +12 -5
  39. package/components/MenuToggle/menu-toggle.scss +12 -5
  40. package/components/ModalBox/modal-box.css +3 -0
  41. package/components/ModalBox/modal-box.scss +3 -0
  42. package/components/Nav/nav.css +17 -0
  43. package/components/Nav/nav.scss +20 -0
  44. package/components/Page/page.css +62 -23
  45. package/components/Page/page.scss +42 -13
  46. package/components/Panel/panel.css +7 -1
  47. package/components/Panel/panel.scss +7 -1
  48. package/components/Popover/popover.css +4 -0
  49. package/components/Popover/popover.scss +4 -0
  50. package/components/Progress/progress.css +10 -0
  51. package/components/Progress/progress.scss +11 -0
  52. package/components/SimpleList/simple-list.css +15 -0
  53. package/components/SimpleList/simple-list.scss +17 -1
  54. package/components/Table/table.css +29 -0
  55. package/components/Table/table.scss +33 -0
  56. package/components/Tabs/tabs.css +7 -0
  57. package/components/Tabs/tabs.scss +8 -1
  58. package/components/TreeView/tree-view.css +15 -0
  59. package/components/TreeView/tree-view.scss +17 -0
  60. package/components/Wizard/wizard.css +22 -1
  61. package/components/Wizard/wizard.scss +25 -3
  62. package/components/_index.css +390 -94
  63. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  64. package/docs/components/Login/examples/Login.md +22 -22
  65. package/docs/components/Table/examples/Table.md +936 -1412
  66. package/package.json +3 -2
  67. package/patternfly-base-no-globals.css +1208 -1
  68. package/patternfly-base.css +1208 -1
  69. package/patternfly-no-globals.css +1598 -95
  70. package/patternfly.css +1598 -95
  71. package/patternfly.min.css +1 -1
  72. package/patternfly.min.css.map +1 -1
package/docs/components/Login/examples/Login.md CHANGED
@@ -23,12 +23,12 @@ wrapperTag: div
23
23
  />
24
24
  </header>
25
25
  <main class="pf-v6-c-login__main">
26
- <header class="pf-v6-c-login__main-header">
26
+ <div class="pf-v6-c-login__main-header">
27
27
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
28
28
  <p
29
29
  class="pf-v6-c-login__main-header-desc"
30
30
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
31
- </header>
31
+ </div>
32
32
  <div class="pf-v6-c-login__main-body">
33
33
  <form class="pf-v6-c-form" novalidate>
34
34
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -100,7 +100,7 @@ wrapperTag: div
100
100
  </form>
101
101
  </div>
102
102
 
103
- <footer class="pf-v6-c-login__main-footer">
103
+ <div class="pf-v6-c-login__main-footer">
104
104
  <ul class="pf-v6-c-login__main-footer-links" role="list">
105
105
  <li class="pf-v6-c-login__main-footer-links-item">
106
106
  <button
@@ -217,7 +217,7 @@ wrapperTag: div
217
217
  <a href="#">Forgot username or password?</a>
218
218
  </p>
219
219
  </div>
220
- </footer>
220
+ </div>
221
221
  </main>
222
222
  <footer class="pf-v6-c-login__footer">
223
223
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -256,12 +256,12 @@ wrapperTag: div
256
256
  />
257
257
  </header>
258
258
  <main class="pf-v6-c-login__main">
259
- <header class="pf-v6-c-login__main-header">
259
+ <div class="pf-v6-c-login__main-header">
260
260
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
261
261
  <p
262
262
  class="pf-v6-c-login__main-header-desc"
263
263
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
264
- </header>
264
+ </div>
265
265
  <div class="pf-v6-c-login__main-body">
266
266
  <form class="pf-v6-c-form" novalidate>
267
267
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -350,7 +350,7 @@ wrapperTag: div
350
350
  </form>
351
351
  </div>
352
352
 
353
- <footer class="pf-v6-c-login__main-footer">
353
+ <div class="pf-v6-c-login__main-footer">
354
354
  <ul class="pf-v6-c-login__main-footer-links" role="list">
355
355
  <li class="pf-v6-c-login__main-footer-links-item">
356
356
  <button
@@ -467,7 +467,7 @@ wrapperTag: div
467
467
  <a href="#">Forgot username or password?</a>
468
468
  </p>
469
469
  </div>
470
- </footer>
470
+ </div>
471
471
  </main>
472
472
  <footer class="pf-v6-c-login__footer">
473
473
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -506,12 +506,12 @@ wrapperTag: div
506
506
  />
507
507
  </header>
508
508
  <main class="pf-v6-c-login__main">
509
- <header class="pf-v6-c-login__main-header">
509
+ <div class="pf-v6-c-login__main-header">
510
510
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
511
511
  <p
512
512
  class="pf-v6-c-login__main-header-desc"
513
513
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
514
- </header>
514
+ </div>
515
515
  <div class="pf-v6-c-login__main-body">
516
516
  <form class="pf-v6-c-form" novalidate>
517
517
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -595,7 +595,7 @@ wrapperTag: div
595
595
  </form>
596
596
  </div>
597
597
 
598
- <footer class="pf-v6-c-login__main-footer">
598
+ <div class="pf-v6-c-login__main-footer">
599
599
  <ul class="pf-v6-c-login__main-footer-links" role="list">
600
600
  <li class="pf-v6-c-login__main-footer-links-item">
601
601
  <button
@@ -712,7 +712,7 @@ wrapperTag: div
712
712
  <a href="#">Forgot username or password?</a>
713
713
  </p>
714
714
  </div>
715
- </footer>
715
+ </div>
716
716
  </main>
717
717
  <footer class="pf-v6-c-login__footer">
718
718
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -751,12 +751,12 @@ wrapperTag: div
751
751
  />
752
752
  </header>
753
753
  <main class="pf-v6-c-login__main">
754
- <header class="pf-v6-c-login__main-header">
754
+ <div class="pf-v6-c-login__main-header">
755
755
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
756
756
  <p
757
757
  class="pf-v6-c-login__main-header-desc"
758
758
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
759
- </header>
759
+ </div>
760
760
  <div class="pf-v6-c-login__main-body">
761
761
  <form class="pf-v6-c-form" novalidate>
762
762
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -847,7 +847,7 @@ wrapperTag: div
847
847
  </form>
848
848
  </div>
849
849
 
850
- <footer class="pf-v6-c-login__main-footer">
850
+ <div class="pf-v6-c-login__main-footer">
851
851
  <ul class="pf-v6-c-login__main-footer-links" role="list">
852
852
  <li class="pf-v6-c-login__main-footer-links-item">
853
853
  <button
@@ -964,7 +964,7 @@ wrapperTag: div
964
964
  <a href="#">Forgot username or password?</a>
965
965
  </p>
966
966
  </div>
967
- </footer>
967
+ </div>
968
968
  </main>
969
969
  <footer class="pf-v6-c-login__footer">
970
970
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -1003,7 +1003,7 @@ wrapperTag: div
1003
1003
  />
1004
1004
  </header>
1005
1005
  <main class="pf-v6-c-login__main">
1006
- <header class="pf-v6-c-login__main-header">
1006
+ <div class="pf-v6-c-login__main-header">
1007
1007
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
1008
1008
  <p
1009
1009
  class="pf-v6-c-login__main-header-desc"
@@ -1023,7 +1023,7 @@ wrapperTag: div
1023
1023
  </span>
1024
1024
  </button>
1025
1025
  </div>
1026
- </header>
1026
+ </div>
1027
1027
  <div class="pf-v6-c-login__main-body">
1028
1028
  <form class="pf-v6-c-form" novalidate>
1029
1029
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -1094,7 +1094,7 @@ wrapperTag: div
1094
1094
  </form>
1095
1095
  </div>
1096
1096
 
1097
- <footer class="pf-v6-c-login__main-footer">
1097
+ <div class="pf-v6-c-login__main-footer">
1098
1098
  <ul class="pf-v6-c-login__main-footer-links" role="list">
1099
1099
  <li class="pf-v6-c-login__main-footer-links-item">
1100
1100
  <button
@@ -1211,7 +1211,7 @@ wrapperTag: div
1211
1211
  <a href="#">Forgot username or password?</a>
1212
1212
  </p>
1213
1213
  </div>
1214
- </footer>
1214
+ </div>
1215
1215
  </main>
1216
1216
  <footer class="pf-v6-c-login__footer">
1217
1217
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -1243,14 +1243,14 @@ wrapperTag: div
1243
1243
  | `.pf-v6-c-login__header` | `<header>` | Positions the login header. **Required**|
1244
1244
  | `.pf-v6-c-login__header .pf-v6-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
1245
1245
  | `.pf-v6-c-login__main` | `<main>` | Positions the login main area. **Required** |
1246
- | `.pf-v6-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
1246
+ | `.pf-v6-c-login__main-header` | `<div>` | Creates the header of the main area. **Required** |
1247
1247
  | `.pf-v6-c-login__main-header .pf-v6-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
1248
1248
  | `.pf-v6-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
1249
1249
  | `.pf-v6-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1250
1250
  | `.pf-v6-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1251
1251
  | `.pf-v6-c-login__main-body .pf-v6-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
1252
1252
  | `.pf-v6-c-login__main-body .pf-v6-c-form .pf-v6-c-form-helper-text` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden`. **Required** |
1253
- | `.pf-v6-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1253
+ | `.pf-v6-c-login__main-footer` | `<div>` | Creates the footer of the main area. **Required** |
1254
1254
  | `.pf-v6-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1255
1255
  | `.pf-v6-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
1256
1256
  | `.pf-v6-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |