@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.39

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 (76) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/components/Backdrop/backdrop.css +6 -2
  6. package/components/Backdrop/backdrop.scss +5 -2
  7. package/components/Banner/banner.css +4 -0
  8. package/components/Banner/banner.scss +5 -0
  9. package/components/Card/card.css +3 -0
  10. package/components/Card/card.scss +8 -0
  11. package/components/Divider/divider.css +97 -177
  12. package/components/Divider/divider.scss +60 -79
  13. package/components/Form/form.css +6 -0
  14. package/components/Form/form.scss +4 -1
  15. package/components/Masthead/masthead.css +267 -435
  16. package/components/Masthead/masthead.scss +118 -233
  17. package/components/MenuToggle/menu-toggle.css +1 -0
  18. package/components/MenuToggle/menu-toggle.scss +2 -0
  19. package/components/Popover/popover.css +0 -2
  20. package/components/Popover/popover.scss +2 -2
  21. package/components/SimpleList/simple-list.css +35 -52
  22. package/components/SimpleList/simple-list.scss +41 -51
  23. package/components/Table/table.scss +1 -0
  24. package/components/Tooltip/tooltip.css +0 -2
  25. package/components/Tooltip/tooltip.scss +3 -3
  26. package/components/Truncate/truncate.css +4 -0
  27. package/components/Truncate/truncate.scss +3 -0
  28. package/docs/components/Accordion/examples/Accordion.md +6 -6
  29. package/docs/components/Alert/examples/Alert.md +2 -2
  30. package/docs/components/Brand/examples/Brand.md +9 -33
  31. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  32. package/docs/components/Card/examples/Card.md +18 -20
  33. package/docs/components/Check/examples/Check.md +1 -0
  34. package/docs/components/Content/examples/Content.md +5 -5
  35. package/docs/components/Divider/examples/Divider.css +3 -1
  36. package/docs/components/Divider/examples/Divider.md +4 -5
  37. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  38. package/docs/components/Label/examples/Label.md +11 -11
  39. package/docs/components/Masthead/examples/masthead.md +441 -16
  40. package/docs/components/Nav/examples/Navigation.css +18 -2
  41. package/docs/components/Nav/examples/Navigation.md +1 -1
  42. package/docs/components/Radio/examples/Radio.md +1 -1
  43. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  44. package/docs/components/Table/examples/Table.md +8 -8
  45. package/docs/components/Truncate/examples/Truncate.css +2 -2
  46. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  47. package/docs/demos/Alert/examples/Alert.md +120 -126
  48. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  49. package/docs/demos/Banner/examples/Banner.md +79 -80
  50. package/docs/demos/CardView/examples/CardView.md +40 -42
  51. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  52. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  53. package/docs/demos/DataList/examples/DataList.md +160 -279
  54. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  55. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  56. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  57. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  58. package/docs/demos/Modal/examples/Modal.md +240 -252
  59. package/docs/demos/Nav/examples/Nav.md +320 -336
  60. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  61. package/docs/demos/Page/examples/Page.md +360 -378
  62. package/docs/demos/Page/examples/Penta.md +8 -15
  63. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  64. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  65. package/docs/demos/Table/examples/Table.md +617 -647
  66. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  67. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  68. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  69. package/docs/layouts/Flex/examples/Flex.md +11 -11
  70. package/package.json +32 -32
  71. package/patternfly-no-globals.css +422 -673
  72. package/patternfly-theme-dark-unversioned.css +422 -673
  73. package/patternfly.css +422 -673
  74. package/patternfly.min.css +1 -1
  75. package/patternfly.min.css.map +1 -1
  76. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -239,20 +239,16 @@ section: components
239
239
  </button>
240
240
  </span>
241
241
  <div class="pf-v5-c-masthead__main">
242
- <a
243
- class="pf-v5-c-masthead__brand"
244
- href="#"
245
- style="--pf-v5-c-brand--Height: 36px;"
246
- >
247
- <svg height="36px" viewBox="0 0 679 158" role="img">
248
- <title>Patternfly logo</title>
242
+ <a class="pf-v5-c-masthead__brand" href="#">
243
+ <svg height="40px" viewBox="0 0 679 158">
244
+ <title>PF-HorizontalLogo-Color</title>
249
245
  <defs>
250
246
  <linearGradient
251
247
  x1="68%"
252
248
  y1="2.25860997e-13%"
253
249
  x2="32%"
254
250
  y2="100%"
255
- id="linearGradient-1"
251
+ id="linearGradient-toolbar-pagination-management-example-masthead"
256
252
  >
257
253
  <stop stop-color="#2B9AF3" offset="0%" />
258
254
  <stop
@@ -262,13 +258,7 @@ section: components
262
258
  />
263
259
  </linearGradient>
264
260
  </defs>
265
- <g
266
- id="PF-HorizontalLogo-Color"
267
- stroke="none"
268
- stroke-width="1"
269
- fill="none"
270
- fill-rule="evenodd"
271
- >
261
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
272
262
  <g
273
263
  transform="translate(206.000000, 45.750000)"
274
264
  fill="var(--pf-t--global--text--color--regular)"
@@ -303,19 +293,18 @@ section: components
303
293
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
304
294
  />
305
295
  </g>
306
- <g id="Logo" transform="translate(0.000000, 0.000000)">
296
+ <g transform="translate(0.000000, 0.000000)">
307
297
  <path
308
298
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
309
- id="Rectangle-Copy-17"
310
- fill="var(--pf-t--global--color--brand--200)"
299
+ fill="#0066CC"
311
300
  />
312
301
  <path
313
302
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
314
- fill="url(#linearGradient-1)"
303
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
315
304
  />
316
305
  <path
317
306
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
318
- fill="url(#linearGradient-1)"
307
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
319
308
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
320
309
  />
321
310
  </g>
@@ -330,8 +319,38 @@ section: components
330
319
  >
331
320
  <div class="pf-v5-c-toolbar__content">
332
321
  <div class="pf-v5-c-toolbar__content-section">
322
+ <div class="pf-v5-c-toolbar__item">
323
+ <button
324
+ class="pf-v5-c-menu-toggle"
325
+ type="button"
326
+ aria-expanded="false"
327
+ >
328
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
329
+ <span class="pf-v5-c-menu-toggle__controls">
330
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
331
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
332
+ </span>
333
+ </span>
334
+ </button>
335
+ </div>
336
+
337
+ <div class="pf-v5-c-toolbar__item">
338
+ <button
339
+ class="pf-v5-c-menu-toggle"
340
+ type="button"
341
+ aria-expanded="false"
342
+ >
343
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
344
+ <span class="pf-v5-c-menu-toggle__controls">
345
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
346
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
347
+ </span>
348
+ </span>
349
+ </button>
350
+ </div>
351
+
333
352
  <div
334
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
353
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
335
354
  >
336
355
  <div
337
356
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -378,27 +397,6 @@ section: components
378
397
  </button>
379
398
  </div>
380
399
  </div>
381
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
382
- <button
383
- class="pf-v5-c-menu-toggle pf-m-full-height"
384
- type="button"
385
- aria-expanded="false"
386
- >
387
- <span class="pf-v5-c-menu-toggle__icon">
388
- <img
389
- class="pf-v5-c-avatar"
390
- alt="Avatar image"
391
- src="/assets/images/img_avatar-light.svg"
392
- />
393
- </span>
394
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
395
- <span class="pf-v5-c-menu-toggle__controls">
396
- <span class="pf-v5-c-menu-toggle__toggle-icon">
397
- <i class="fas fa-angle-down" aria-hidden="true"></i>
398
- </span>
399
- </span>
400
- </button>
401
- </div>
402
400
  </div>
403
401
  </div>
404
402
  </div>
@@ -2841,20 +2839,16 @@ section: components
2841
2839
  </button>
2842
2840
  </span>
2843
2841
  <div class="pf-v5-c-masthead__main">
2844
- <a
2845
- class="pf-v5-c-masthead__brand"
2846
- href="#"
2847
- style="--pf-v5-c-brand--Height: 36px;"
2848
- >
2849
- <svg height="36px" viewBox="0 0 679 158" role="img">
2850
- <title>Patternfly logo</title>
2842
+ <a class="pf-v5-c-masthead__brand" href="#">
2843
+ <svg height="40px" viewBox="0 0 679 158">
2844
+ <title>PF-HorizontalLogo-Color</title>
2851
2845
  <defs>
2852
2846
  <linearGradient
2853
2847
  x1="68%"
2854
2848
  y1="2.25860997e-13%"
2855
2849
  x2="32%"
2856
2850
  y2="100%"
2857
- id="linearGradient-1"
2851
+ id="linearGradient-toolbar-pagination-management-example-masthead"
2858
2852
  >
2859
2853
  <stop stop-color="#2B9AF3" offset="0%" />
2860
2854
  <stop
@@ -2864,13 +2858,7 @@ section: components
2864
2858
  />
2865
2859
  </linearGradient>
2866
2860
  </defs>
2867
- <g
2868
- id="PF-HorizontalLogo-Color"
2869
- stroke="none"
2870
- stroke-width="1"
2871
- fill="none"
2872
- fill-rule="evenodd"
2873
- >
2861
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2874
2862
  <g
2875
2863
  transform="translate(206.000000, 45.750000)"
2876
2864
  fill="var(--pf-t--global--text--color--regular)"
@@ -2905,19 +2893,18 @@ section: components
2905
2893
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
2906
2894
  />
2907
2895
  </g>
2908
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2896
+ <g transform="translate(0.000000, 0.000000)">
2909
2897
  <path
2910
2898
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
2911
- id="Rectangle-Copy-17"
2912
- fill="var(--pf-t--global--color--brand--200)"
2899
+ fill="#0066CC"
2913
2900
  />
2914
2901
  <path
2915
2902
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2916
- fill="url(#linearGradient-1)"
2903
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2917
2904
  />
2918
2905
  <path
2919
2906
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2920
- fill="url(#linearGradient-1)"
2907
+ fill="url(#linearGradient-toolbar-pagination-management-example-masthead)"
2921
2908
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2922
2909
  />
2923
2910
  </g>
@@ -2932,8 +2919,38 @@ section: components
2932
2919
  >
2933
2920
  <div class="pf-v5-c-toolbar__content">
2934
2921
  <div class="pf-v5-c-toolbar__content-section">
2922
+ <div class="pf-v5-c-toolbar__item">
2923
+ <button
2924
+ class="pf-v5-c-menu-toggle"
2925
+ type="button"
2926
+ aria-expanded="false"
2927
+ >
2928
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2929
+ <span class="pf-v5-c-menu-toggle__controls">
2930
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2931
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2932
+ </span>
2933
+ </span>
2934
+ </button>
2935
+ </div>
2936
+
2937
+ <div class="pf-v5-c-toolbar__item">
2938
+ <button
2939
+ class="pf-v5-c-menu-toggle"
2940
+ type="button"
2941
+ aria-expanded="false"
2942
+ >
2943
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2944
+ <span class="pf-v5-c-menu-toggle__controls">
2945
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2946
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2947
+ </span>
2948
+ </span>
2949
+ </button>
2950
+ </div>
2951
+
2935
2952
  <div
2936
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2953
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2937
2954
  >
2938
2955
  <div
2939
2956
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2980,27 +2997,6 @@ section: components
2980
2997
  </button>
2981
2998
  </div>
2982
2999
  </div>
2983
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2984
- <button
2985
- class="pf-v5-c-menu-toggle pf-m-full-height"
2986
- type="button"
2987
- aria-expanded="false"
2988
- >
2989
- <span class="pf-v5-c-menu-toggle__icon">
2990
- <img
2991
- class="pf-v5-c-avatar"
2992
- alt="Avatar image"
2993
- src="/assets/images/img_avatar-light.svg"
2994
- />
2995
- </span>
2996
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2997
- <span class="pf-v5-c-menu-toggle__controls">
2998
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2999
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3000
- </span>
3001
- </span>
3002
- </button>
3003
- </div>
3004
3000
  </div>
3005
3001
  </div>
3006
3002
  </div>