@patternfly/patternfly 6.0.0-alpha.38 → 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 (36) hide show
  1. package/components/Divider/divider.css +97 -177
  2. package/components/Divider/divider.scss +60 -79
  3. package/components/Masthead/masthead.css +267 -435
  4. package/components/Masthead/masthead.scss +118 -233
  5. package/docs/components/Divider/examples/Divider.css +3 -1
  6. package/docs/components/Divider/examples/Divider.md +4 -5
  7. package/docs/components/Masthead/examples/masthead.md +441 -16
  8. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  9. package/docs/demos/Alert/examples/Alert.md +120 -126
  10. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  11. package/docs/demos/Banner/examples/Banner.md +79 -80
  12. package/docs/demos/CardView/examples/CardView.md +40 -42
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  14. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  15. package/docs/demos/DataList/examples/DataList.md +160 -279
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  17. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  19. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  20. package/docs/demos/Modal/examples/Modal.md +240 -252
  21. package/docs/demos/Nav/examples/Nav.md +320 -336
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  23. package/docs/demos/Page/examples/Page.md +360 -378
  24. package/docs/demos/Page/examples/Penta.md +8 -15
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  26. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  27. package/docs/demos/Table/examples/Table.md +617 -647
  28. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  29. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  30. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +363 -611
  33. package/patternfly-theme-dark-unversioned.css +363 -611
  34. package/patternfly.css +363 -611
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -26,20 +26,16 @@ wrapperTag: div
26
26
  </button>
27
27
  </span>
28
28
  <div class="pf-v5-c-masthead__main">
29
- <a
30
- class="pf-v5-c-masthead__brand"
31
- href="#"
32
- style="--pf-v5-c-brand--Height: 36px;"
33
- >
34
- <svg height="36px" viewBox="0 0 679 158" role="img">
35
- <title>Patternfly logo</title>
29
+ <a class="pf-v5-c-masthead__brand" href="#">
30
+ <svg height="40px" viewBox="0 0 679 158">
31
+ <title>PF-HorizontalLogo-Color</title>
36
32
  <defs>
37
33
  <linearGradient
38
34
  x1="68%"
39
35
  y1="2.25860997e-13%"
40
36
  x2="32%"
41
37
  y2="100%"
42
- id="linearGradient-1"
38
+ id="linearGradient-banner-basic-example-masthead"
43
39
  >
44
40
  <stop stop-color="#2B9AF3" offset="0%" />
45
41
  <stop
@@ -49,13 +45,7 @@ wrapperTag: div
49
45
  />
50
46
  </linearGradient>
51
47
  </defs>
52
- <g
53
- id="PF-HorizontalLogo-Color"
54
- stroke="none"
55
- stroke-width="1"
56
- fill="none"
57
- fill-rule="evenodd"
58
- >
48
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
59
49
  <g
60
50
  transform="translate(206.000000, 45.750000)"
61
51
  fill="var(--pf-t--global--text--color--regular)"
@@ -90,19 +80,18 @@ wrapperTag: div
90
80
  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"
91
81
  />
92
82
  </g>
93
- <g id="Logo" transform="translate(0.000000, 0.000000)">
83
+ <g transform="translate(0.000000, 0.000000)">
94
84
  <path
95
85
  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"
96
- id="Rectangle-Copy-17"
97
- fill="var(--pf-t--global--color--brand--200)"
86
+ fill="#0066CC"
98
87
  />
99
88
  <path
100
89
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
101
- fill="url(#linearGradient-1)"
90
+ fill="url(#linearGradient-banner-basic-example-masthead)"
102
91
  />
103
92
  <path
104
93
  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"
105
- fill="url(#linearGradient-1)"
94
+ fill="url(#linearGradient-banner-basic-example-masthead)"
106
95
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
107
96
  />
108
97
  </g>
@@ -117,8 +106,38 @@ wrapperTag: div
117
106
  >
118
107
  <div class="pf-v5-c-toolbar__content">
119
108
  <div class="pf-v5-c-toolbar__content-section">
109
+ <div class="pf-v5-c-toolbar__item">
110
+ <button
111
+ class="pf-v5-c-menu-toggle"
112
+ type="button"
113
+ aria-expanded="false"
114
+ >
115
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
116
+ <span class="pf-v5-c-menu-toggle__controls">
117
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
118
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
119
+ </span>
120
+ </span>
121
+ </button>
122
+ </div>
123
+
124
+ <div class="pf-v5-c-toolbar__item">
125
+ <button
126
+ class="pf-v5-c-menu-toggle"
127
+ type="button"
128
+ aria-expanded="false"
129
+ >
130
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
131
+ <span class="pf-v5-c-menu-toggle__controls">
132
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
133
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
134
+ </span>
135
+ </span>
136
+ </button>
137
+ </div>
138
+
120
139
  <div
121
- 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"
140
+ 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"
122
141
  >
123
142
  <div
124
143
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -165,27 +184,6 @@ wrapperTag: div
165
184
  </button>
166
185
  </div>
167
186
  </div>
168
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
169
- <button
170
- class="pf-v5-c-menu-toggle pf-m-full-height"
171
- type="button"
172
- aria-expanded="false"
173
- >
174
- <span class="pf-v5-c-menu-toggle__icon">
175
- <img
176
- class="pf-v5-c-avatar"
177
- alt="Avatar image"
178
- src="/assets/images/img_avatar-light.svg"
179
- />
180
- </span>
181
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
182
- <span class="pf-v5-c-menu-toggle__controls">
183
- <span class="pf-v5-c-menu-toggle__toggle-icon">
184
- <i class="fas fa-angle-down" aria-hidden="true"></i>
185
- </span>
186
- </span>
187
- </button>
188
- </div>
189
187
  </div>
190
188
  </div>
191
189
  </div>
@@ -489,20 +487,16 @@ wrapperTag: div
489
487
  </button>
490
488
  </span>
491
489
  <div class="pf-v5-c-masthead__main">
492
- <a
493
- class="pf-v5-c-masthead__brand"
494
- href="#"
495
- style="--pf-v5-c-brand--Height: 36px;"
496
- >
497
- <svg height="36px" viewBox="0 0 679 158" role="img">
498
- <title>Patternfly logo</title>
490
+ <a class="pf-v5-c-masthead__brand" href="#">
491
+ <svg height="40px" viewBox="0 0 679 158">
492
+ <title>PF-HorizontalLogo-Color</title>
499
493
  <defs>
500
494
  <linearGradient
501
495
  x1="68%"
502
496
  y1="2.25860997e-13%"
503
497
  x2="32%"
504
498
  y2="100%"
505
- id="linearGradient-1"
499
+ id="linearGradient-banner-top-bottom-example-masthead"
506
500
  >
507
501
  <stop stop-color="#2B9AF3" offset="0%" />
508
502
  <stop
@@ -513,7 +507,6 @@ wrapperTag: div
513
507
  </linearGradient>
514
508
  </defs>
515
509
  <g
516
- id="PF-HorizontalLogo-Color"
517
510
  stroke="none"
518
511
  stroke-width="1"
519
512
  fill="none"
@@ -555,19 +548,18 @@ wrapperTag: div
555
548
  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"
556
549
  />
557
550
  </g>
558
- <g id="Logo" transform="translate(0.000000, 0.000000)">
551
+ <g transform="translate(0.000000, 0.000000)">
559
552
  <path
560
553
  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"
561
- id="Rectangle-Copy-17"
562
- fill="var(--pf-t--global--color--brand--200)"
554
+ fill="#0066CC"
563
555
  />
564
556
  <path
565
557
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
566
- fill="url(#linearGradient-1)"
558
+ fill="url(#linearGradient-banner-top-bottom-example-masthead)"
567
559
  />
568
560
  <path
569
561
  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"
570
- fill="url(#linearGradient-1)"
562
+ fill="url(#linearGradient-banner-top-bottom-example-masthead)"
571
563
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
572
564
  />
573
565
  </g>
@@ -582,8 +574,38 @@ wrapperTag: div
582
574
  >
583
575
  <div class="pf-v5-c-toolbar__content">
584
576
  <div class="pf-v5-c-toolbar__content-section">
577
+ <div class="pf-v5-c-toolbar__item">
578
+ <button
579
+ class="pf-v5-c-menu-toggle"
580
+ type="button"
581
+ aria-expanded="false"
582
+ >
583
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
584
+ <span class="pf-v5-c-menu-toggle__controls">
585
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
586
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
587
+ </span>
588
+ </span>
589
+ </button>
590
+ </div>
591
+
592
+ <div class="pf-v5-c-toolbar__item">
593
+ <button
594
+ class="pf-v5-c-menu-toggle"
595
+ type="button"
596
+ aria-expanded="false"
597
+ >
598
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
599
+ <span class="pf-v5-c-menu-toggle__controls">
600
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
601
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
602
+ </span>
603
+ </span>
604
+ </button>
605
+ </div>
606
+
585
607
  <div
586
- 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"
608
+ 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"
587
609
  >
588
610
  <div
589
611
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -630,29 +652,6 @@ wrapperTag: div
630
652
  </button>
631
653
  </div>
632
654
  </div>
633
- <div
634
- class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm"
635
- >
636
- <button
637
- class="pf-v5-c-menu-toggle pf-m-full-height"
638
- type="button"
639
- aria-expanded="false"
640
- >
641
- <span class="pf-v5-c-menu-toggle__icon">
642
- <img
643
- class="pf-v5-c-avatar"
644
- alt="Avatar image"
645
- src="/assets/images/img_avatar-light.svg"
646
- />
647
- </span>
648
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
649
- <span class="pf-v5-c-menu-toggle__controls">
650
- <span class="pf-v5-c-menu-toggle__toggle-icon">
651
- <i class="fas fa-angle-down" aria-hidden="true"></i>
652
- </span>
653
- </span>
654
- </button>
655
- </div>
656
655
  </div>
657
656
  </div>
658
657
  </div>
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -24,20 +24,16 @@ section: patterns
24
24
  </button>
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
- <a
28
- class="pf-v5-c-masthead__brand"
29
- href="#"
30
- style="--pf-v5-c-brand--Height: 36px;"
31
- >
32
- <svg height="36px" viewBox="0 0 679 158" role="img">
33
- <title>Patternfly logo</title>
27
+ <a class="pf-v5-c-masthead__brand" href="#">
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
34
30
  <defs>
35
31
  <linearGradient
36
32
  x1="68%"
37
33
  y1="2.25860997e-13%"
38
34
  x2="32%"
39
35
  y2="100%"
40
- id="linearGradient-1"
36
+ id="linearGradient-card-view-basic-example-masthead"
41
37
  >
42
38
  <stop stop-color="#2B9AF3" offset="0%" />
43
39
  <stop
@@ -47,13 +43,7 @@ section: patterns
47
43
  />
48
44
  </linearGradient>
49
45
  </defs>
50
- <g
51
- id="PF-HorizontalLogo-Color"
52
- stroke="none"
53
- stroke-width="1"
54
- fill="none"
55
- fill-rule="evenodd"
56
- >
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
57
47
  <g
58
48
  transform="translate(206.000000, 45.750000)"
59
49
  fill="var(--pf-t--global--text--color--regular)"
@@ -88,19 +78,18 @@ section: patterns
88
78
  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"
89
79
  />
90
80
  </g>
91
- <g id="Logo" transform="translate(0.000000, 0.000000)">
81
+ <g transform="translate(0.000000, 0.000000)">
92
82
  <path
93
83
  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"
94
- id="Rectangle-Copy-17"
95
- fill="var(--pf-t--global--color--brand--200)"
84
+ fill="#0066CC"
96
85
  />
97
86
  <path
98
87
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
99
- fill="url(#linearGradient-1)"
88
+ fill="url(#linearGradient-card-view-basic-example-masthead)"
100
89
  />
101
90
  <path
102
91
  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"
103
- fill="url(#linearGradient-1)"
92
+ fill="url(#linearGradient-card-view-basic-example-masthead)"
104
93
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
105
94
  />
106
95
  </g>
@@ -115,8 +104,38 @@ section: patterns
115
104
  >
116
105
  <div class="pf-v5-c-toolbar__content">
117
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
118
137
  <div
119
- 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"
138
+ 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"
120
139
  >
121
140
  <div
122
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -163,27 +182,6 @@ section: patterns
163
182
  </button>
164
183
  </div>
165
184
  </div>
166
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
167
- <button
168
- class="pf-v5-c-menu-toggle pf-m-full-height"
169
- type="button"
170
- aria-expanded="false"
171
- >
172
- <span class="pf-v5-c-menu-toggle__icon">
173
- <img
174
- class="pf-v5-c-avatar"
175
- alt="Avatar image"
176
- src="/assets/images/img_avatar-light.svg"
177
- />
178
- </span>
179
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
180
- <span class="pf-v5-c-menu-toggle__controls">
181
- <span class="pf-v5-c-menu-toggle__toggle-icon">
182
- <i class="fas fa-angle-down" aria-hidden="true"></i>
183
- </span>
184
- </span>
185
- </button>
186
- </div>
187
185
  </div>
188
186
  </div>
189
187
  </div>