@patternfly/patternfly 6.0.0-alpha.164 → 6.0.0-alpha.165

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/Panel/panel.css +17 -14
  2. package/components/Panel/panel.scss +17 -14
  3. package/components/_index.css +17 -14
  4. package/docs/components/Panel/examples/Panel.md +1 -0
  5. package/docs/demos/Panel/Panel.md +88 -0
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +17 -14
  8. package/patternfly.css +17 -14
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/Panel/panel.css CHANGED
@@ -2,43 +2,44 @@
2
2
  --pf-v6-c-panel--Width: auto;
3
3
  --pf-v6-c-panel--MinWidth: auto;
4
4
  --pf-v6-c-panel--MaxWidth: none;
5
- --pf-v6-c-panel--ZIndex: auto;
6
5
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
6
  --pf-v6-c-panel--BoxShadow: none;
7
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
8
8
  --pf-v6-c-panel--before--BorderWidth: 0;
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
11
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
12
12
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
13
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
14
13
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15
14
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
16
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
17
16
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
17
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
19
18
  --pf-v6-c-panel__main--MaxHeight: none;
20
19
  --pf-v6-c-panel__main--Overflow: visible;
21
20
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
22
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23
22
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
24
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
25
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
26
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
27
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
28
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
23
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
24
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
26
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
27
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
29
28
  --pf-v6-c-panel__footer--BoxShadow: none;
30
29
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
31
30
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
32
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
31
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
32
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
33
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
33
34
  }
34
35
 
35
36
  .pf-v6-c-panel {
36
37
  position: relative;
37
- z-index: var(--pf-v6-c-panel--ZIndex);
38
38
  width: var(--pf-v6-c-panel--Width);
39
39
  min-width: var(--pf-v6-c-panel--MinWidth);
40
40
  max-width: var(--pf-v6-c-panel--MaxWidth);
41
41
  background-color: var(--pf-v6-c-panel--BackgroundColor);
42
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
42
43
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
43
44
  }
44
45
  .pf-v6-c-panel::before {
@@ -47,6 +48,7 @@
47
48
  pointer-events: none;
48
49
  content: "";
49
50
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
51
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
50
52
  }
51
53
  .pf-v6-c-panel.pf-m-bordered {
52
54
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -57,12 +59,13 @@
57
59
  .pf-v6-c-panel.pf-m-raised {
58
60
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
59
61
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
60
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
61
62
  }
62
63
  .pf-v6-c-panel.pf-m-scrollable {
63
64
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
64
65
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
65
66
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
67
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
68
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
66
69
  }
67
70
 
68
71
  .pf-v6-c-panel__header {
package/components/Panel/panel.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  --#{$panel}--Width: auto;
5
5
  --#{$panel}--MinWidth: auto;
6
6
  --#{$panel}--MaxWidth: none;
7
- --#{$panel}--ZIndex: auto;
8
7
  --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9
8
  --#{$panel}--BoxShadow: none;
9
+ --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--small);
10
10
 
11
11
  // border
12
12
  --#{$panel}--before--BorderWidth: 0;
@@ -16,18 +16,17 @@
16
16
  --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
17
 
18
18
  // bordered
19
- --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
19
+ --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
20
20
 
21
21
  // raised
22
22
  --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
23
- --#{$panel}--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
24
23
  --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
25
24
 
26
25
  // header
27
26
  --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
28
- --#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
27
+ --#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
29
28
  --#{$panel}__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
30
- --#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
29
+ --#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31
30
 
32
31
  // main
33
32
  --#{$panel}__main--MaxHeight: none;
@@ -35,30 +34,32 @@
35
34
 
36
35
  // body
37
36
  --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
38
- --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
37
+ --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
39
38
  --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
40
- --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
39
+ --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
41
40
 
42
41
  // footer
43
- --#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
44
- --#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
45
- --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
46
- --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
42
+ --#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
43
+ --#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
44
+ --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
45
+ --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
47
46
  --#{$panel}__footer--BoxShadow: none;
48
47
 
49
48
  // scrollable
50
49
  --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
51
50
  --#{$panel}--m-scrollable__main--Overflow: auto;
52
- --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
51
+ --#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
52
+ --#{$panel}--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
53
+ --#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
53
54
  }
54
55
 
55
56
  .#{$panel} {
56
57
  position: relative;
57
- z-index: var(--#{$panel}--ZIndex);
58
58
  width: var(--#{$panel}--Width);
59
59
  min-width: var(--#{$panel}--MinWidth);
60
60
  max-width: var(--#{$panel}--MaxWidth);
61
61
  background-color: var(--#{$panel}--BackgroundColor);
62
+ border-radius: var(--#{$panel}--BorderRadius);
62
63
  box-shadow: var(--#{$panel}--BoxShadow);
63
64
 
64
65
  &::before {
@@ -67,6 +68,7 @@
67
68
  pointer-events: none;
68
69
  content: "";
69
70
  border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
71
+ border-radius: var(--#{$panel}--BorderRadius);
70
72
  }
71
73
 
72
74
  &.pf-m-bordered {
@@ -80,13 +82,14 @@
80
82
  &.pf-m-raised {
81
83
  --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
82
84
  --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
83
- --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex);
84
85
  }
85
86
 
86
87
  &.pf-m-scrollable {
87
88
  --#{$panel}__main--MaxHeight: var(--#{$panel}--m-scrollable__main--MaxHeight);
88
89
  --#{$panel}__main--Overflow: var(--#{$panel}--m-scrollable__main--Overflow);
89
90
  --#{$panel}__footer--BoxShadow: var(--#{$panel}--m-scrollable__footer--BoxShadow);
91
+ --#{$panel}__footer--PaddingBlockStart: var(--#{$panel}--m-scrollable__footer--PaddingBlockStart);
92
+ --#{$panel}__footer--PaddingBlockEnd: var(--#{$panel}--m-scrollable__footer--PaddingBlockEnd);
90
93
  }
91
94
  }
92
95
 
package/components/_index.css CHANGED
@@ -12543,43 +12543,44 @@ ul.pf-v6-c-list {
12543
12543
  --pf-v6-c-panel--Width: auto;
12544
12544
  --pf-v6-c-panel--MinWidth: auto;
12545
12545
  --pf-v6-c-panel--MaxWidth: none;
12546
- --pf-v6-c-panel--ZIndex: auto;
12547
12546
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12548
12547
  --pf-v6-c-panel--BoxShadow: none;
12548
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
12549
12549
  --pf-v6-c-panel--before--BorderWidth: 0;
12550
12550
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
12551
12551
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12552
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
12552
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
12553
12553
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
12554
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
12555
12554
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
12556
12555
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
12557
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12556
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12558
12557
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12559
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
12558
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12560
12559
  --pf-v6-c-panel__main--MaxHeight: none;
12561
12560
  --pf-v6-c-panel__main--Overflow: visible;
12562
12561
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
12563
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12562
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12564
12563
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12565
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
12566
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
12567
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12568
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12569
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
12564
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12565
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12566
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12567
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12568
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12570
12569
  --pf-v6-c-panel__footer--BoxShadow: none;
12571
12570
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
12572
12571
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
12573
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
12572
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
12573
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
12574
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12574
12575
  }
12575
12576
 
12576
12577
  .pf-v6-c-panel {
12577
12578
  position: relative;
12578
- z-index: var(--pf-v6-c-panel--ZIndex);
12579
12579
  width: var(--pf-v6-c-panel--Width);
12580
12580
  min-width: var(--pf-v6-c-panel--MinWidth);
12581
12581
  max-width: var(--pf-v6-c-panel--MaxWidth);
12582
12582
  background-color: var(--pf-v6-c-panel--BackgroundColor);
12583
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
12583
12584
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
12584
12585
  }
12585
12586
  .pf-v6-c-panel::before {
@@ -12588,6 +12589,7 @@ ul.pf-v6-c-list {
12588
12589
  pointer-events: none;
12589
12590
  content: "";
12590
12591
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
12592
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
12591
12593
  }
12592
12594
  .pf-v6-c-panel.pf-m-bordered {
12593
12595
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -12598,12 +12600,13 @@ ul.pf-v6-c-list {
12598
12600
  .pf-v6-c-panel.pf-m-raised {
12599
12601
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
12600
12602
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
12601
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
12602
12603
  }
12603
12604
  .pf-v6-c-panel.pf-m-scrollable {
12604
12605
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
12605
12606
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
12606
12607
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
12608
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
12609
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
12607
12610
  }
12608
12611
 
12609
12612
  .pf-v6-c-panel__header {
package/docs/components/Panel/examples/Panel.md CHANGED
@@ -167,6 +167,7 @@ cssPrefix: pf-v6-c-panel
167
167
  | `.pf-v6-c-panel__header` | `<div>` | Initiates the panel header. |
168
168
  | `.pf-v6-c-panel__main` | `<div>` | Initiates the panel main content. |
169
169
  | `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
170
+ | `.pf-v6-c-panel__menu` | `<div>` | Initiates a panel menu container. |
170
171
  | `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
171
172
  | `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
172
173
  | `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
package/docs/demos/Panel/Panel.md ADDED
@@ -0,0 +1,88 @@
1
+ ---
2
+ id: Panel
3
+ section: components
4
+ ---## Demos
5
+
6
+ ### With a menu
7
+
8
+ ```html
9
+ <div class="pf-v6-c-panel pf-m-raised">
10
+ <div class="pf-v6-c-panel__header">Header content</div>
11
+ <hr class="pf-v6-c-divider" />
12
+ <div class="pf-v6-c-panel__main">
13
+ <div class="pf-v6-c-panel__menu">
14
+ <div class="pf-v6-c-menu pf-m-plain">
15
+ <div class="pf-v6-c-menu__content">
16
+ <ul class="pf-v6-c-menu__list" role="menu">
17
+ <li class="pf-v6-c-menu__list-item" role="none">
18
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
19
+ <span class="pf-v6-c-menu__item-main">
20
+ <span class="pf-v6-c-menu__item-text">Action</span>
21
+ </span>
22
+ </button>
23
+ </li>
24
+ <li class="pf-v6-c-menu__list-item" role="none">
25
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
26
+ <span class="pf-v6-c-menu__item-main">
27
+ <span class="pf-v6-c-menu__item-text">Link</span>
28
+ </span>
29
+ </a>
30
+ </li>
31
+ <li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
32
+ <button
33
+ class="pf-v6-c-menu__item"
34
+ type="button"
35
+ disabled
36
+ role="menuitem"
37
+ >
38
+ <span class="pf-v6-c-menu__item-main">
39
+ <span class="pf-v6-c-menu__item-text">Disabled action</span>
40
+ </span>
41
+ </button>
42
+ </li>
43
+ <li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
44
+ <a
45
+ class="pf-v6-c-menu__item"
46
+ href="#"
47
+ aria-disabled="true"
48
+ tabindex="-1"
49
+ role="menuitem"
50
+ >
51
+ <span class="pf-v6-c-menu__item-main">
52
+ <span class="pf-v6-c-menu__item-text">Disabled link</span>
53
+ </span>
54
+ </a>
55
+ </li>
56
+ <li class="pf-v6-c-menu__list-item pf-m-aria-disabled" role="none">
57
+ <button
58
+ class="pf-v6-c-menu__item"
59
+ type="button"
60
+ aria-disabled="true"
61
+ role="menuitem"
62
+ >
63
+ <span class="pf-v6-c-menu__item-main">
64
+ <span class="pf-v6-c-menu__item-text">Aria-disabled action</span>
65
+ </span>
66
+ </button>
67
+ </li>
68
+ <li class="pf-v6-c-menu__list-item pf-m-aria-disabled" role="none">
69
+ <a
70
+ class="pf-v6-c-menu__item"
71
+ href="#"
72
+ aria-disabled="true"
73
+ role="menuitem"
74
+ >
75
+ <span class="pf-v6-c-menu__item-main">
76
+ <span class="pf-v6-c-menu__item-text">Aria-disabled link</span>
77
+ </span>
78
+ </a>
79
+ </li>
80
+ </ul>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <div class="pf-v6-c-panel__footer">Footer content</div>
86
+ </div>
87
+
88
+ ```
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.164",
4
+ "version": "6.0.0-alpha.165",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -18581,43 +18581,44 @@ ul.pf-v6-c-list {
18581
18581
  --pf-v6-c-panel--Width: auto;
18582
18582
  --pf-v6-c-panel--MinWidth: auto;
18583
18583
  --pf-v6-c-panel--MaxWidth: none;
18584
- --pf-v6-c-panel--ZIndex: auto;
18585
18584
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18586
18585
  --pf-v6-c-panel--BoxShadow: none;
18586
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
18587
18587
  --pf-v6-c-panel--before--BorderWidth: 0;
18588
18588
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
18589
18589
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18590
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
18590
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
18591
18591
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
18592
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
18593
18592
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
18594
18593
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18595
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18594
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18596
18595
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18597
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
18596
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18598
18597
  --pf-v6-c-panel__main--MaxHeight: none;
18599
18598
  --pf-v6-c-panel__main--Overflow: visible;
18600
18599
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
18601
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18600
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18602
18601
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18603
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
18604
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18605
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18606
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18607
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
18602
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18603
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18604
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18605
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18606
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18608
18607
  --pf-v6-c-panel__footer--BoxShadow: none;
18609
18608
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
18610
18609
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
18611
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
18610
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
18611
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18612
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18612
18613
  }
18613
18614
 
18614
18615
  .pf-v6-c-panel {
18615
18616
  position: relative;
18616
- z-index: var(--pf-v6-c-panel--ZIndex);
18617
18617
  width: var(--pf-v6-c-panel--Width);
18618
18618
  min-width: var(--pf-v6-c-panel--MinWidth);
18619
18619
  max-width: var(--pf-v6-c-panel--MaxWidth);
18620
18620
  background-color: var(--pf-v6-c-panel--BackgroundColor);
18621
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18621
18622
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
18622
18623
  }
18623
18624
  .pf-v6-c-panel::before {
@@ -18626,6 +18627,7 @@ ul.pf-v6-c-list {
18626
18627
  pointer-events: none;
18627
18628
  content: "";
18628
18629
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
18630
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18629
18631
  }
18630
18632
  .pf-v6-c-panel.pf-m-bordered {
18631
18633
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -18636,12 +18638,13 @@ ul.pf-v6-c-list {
18636
18638
  .pf-v6-c-panel.pf-m-raised {
18637
18639
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
18638
18640
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
18639
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
18640
18641
  }
18641
18642
  .pf-v6-c-panel.pf-m-scrollable {
18642
18643
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
18643
18644
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
18644
18645
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
18646
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
18647
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
18645
18648
  }
18646
18649
 
18647
18650
  .pf-v6-c-panel__header {
package/patternfly.css CHANGED
@@ -18702,43 +18702,44 @@ ul.pf-v6-c-list {
18702
18702
  --pf-v6-c-panel--Width: auto;
18703
18703
  --pf-v6-c-panel--MinWidth: auto;
18704
18704
  --pf-v6-c-panel--MaxWidth: none;
18705
- --pf-v6-c-panel--ZIndex: auto;
18706
18705
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18707
18706
  --pf-v6-c-panel--BoxShadow: none;
18707
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
18708
18708
  --pf-v6-c-panel--before--BorderWidth: 0;
18709
18709
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
18710
18710
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18711
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
18711
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
18712
18712
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
18713
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
18714
18713
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
18715
18714
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18716
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18715
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18717
18716
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18718
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
18717
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18719
18718
  --pf-v6-c-panel__main--MaxHeight: none;
18720
18719
  --pf-v6-c-panel__main--Overflow: visible;
18721
18720
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
18722
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18721
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18723
18722
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18724
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
18725
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18726
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18727
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18728
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
18723
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18724
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18725
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18726
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18727
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18729
18728
  --pf-v6-c-panel__footer--BoxShadow: none;
18730
18729
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
18731
18730
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
18732
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
18731
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
18732
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18733
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18733
18734
  }
18734
18735
 
18735
18736
  .pf-v6-c-panel {
18736
18737
  position: relative;
18737
- z-index: var(--pf-v6-c-panel--ZIndex);
18738
18738
  width: var(--pf-v6-c-panel--Width);
18739
18739
  min-width: var(--pf-v6-c-panel--MinWidth);
18740
18740
  max-width: var(--pf-v6-c-panel--MaxWidth);
18741
18741
  background-color: var(--pf-v6-c-panel--BackgroundColor);
18742
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18742
18743
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
18743
18744
  }
18744
18745
  .pf-v6-c-panel::before {
@@ -18747,6 +18748,7 @@ ul.pf-v6-c-list {
18747
18748
  pointer-events: none;
18748
18749
  content: "";
18749
18750
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
18751
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18750
18752
  }
18751
18753
  .pf-v6-c-panel.pf-m-bordered {
18752
18754
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -18757,12 +18759,13 @@ ul.pf-v6-c-list {
18757
18759
  .pf-v6-c-panel.pf-m-raised {
18758
18760
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
18759
18761
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
18760
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
18761
18762
  }
18762
18763
  .pf-v6-c-panel.pf-m-scrollable {
18763
18764
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
18764
18765
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
18765
18766
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
18767
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
18768
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
18766
18769
  }
18767
18770
 
18768
18771
  .pf-v6-c-panel__header {