@patternfly/patternfly 6.0.0-alpha.180 → 6.0.0-alpha.182

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 (18) hide show
  1. package/base/patternfly-variables.css +54 -34
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +55 -35
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/NotificationDrawer/notification-drawer.css +5 -0
  8. package/components/NotificationDrawer/notification-drawer.scss +8 -0
  9. package/components/_index.css +5 -0
  10. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +129 -0
  11. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +268 -0
  12. package/package.json +1 -1
  13. package/patternfly-base-no-globals.css +54 -34
  14. package/patternfly-base.css +54 -34
  15. package/patternfly-no-globals.css +59 -34
  16. package/patternfly.css +59 -34
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -100,15 +100,15 @@
100
100
  --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
101
101
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
102
102
  --pf-t--global--box-shadow--spread--100: 0px;
103
- --pf-t--global--breakpoint--100: 0px;
104
- --pf-t--global--breakpoint--200: 576px;
105
- --pf-t--global--breakpoint--250: 640px;
106
- --pf-t--global--breakpoint--300: 768px;
107
- --pf-t--global--breakpoint--350: 960px;
108
- --pf-t--global--breakpoint--400: 992px;
109
- --pf-t--global--breakpoint--500: 1200px;
110
- --pf-t--global--breakpoint--550: 1280px;
111
- --pf-t--global--breakpoint--600: 1450px;
103
+ --pf-t--global--breakpoint--100: 0rem;
104
+ --pf-t--global--breakpoint--200: 36rem;
105
+ --pf-t--global--breakpoint--250: 40rem;
106
+ --pf-t--global--breakpoint--300: 48rem;
107
+ --pf-t--global--breakpoint--350: 60rem;
108
+ --pf-t--global--breakpoint--400: 62rem;
109
+ --pf-t--global--breakpoint--500: 75rem;
110
+ --pf-t--global--breakpoint--550: 80rem;
111
+ --pf-t--global--breakpoint--600: 90.625rem;
112
112
  --pf-t--global--delay--100: 0ms;
113
113
  --pf-t--global--delay--200: 50ms;
114
114
  --pf-t--global--delay--300: 100ms;
@@ -120,37 +120,41 @@
120
120
  --pf-t--global--duration--50: 50ms;
121
121
  --pf-t--global--duration--500: 500ms;
122
122
  --pf-t--global--duration--600: 600ms;
123
- --pf-t--global--font--family--100: "Red Hat Text VF";
124
- --pf-t--global--font--family--200: "Red Hat Display VF";
125
- --pf-t--global--font--family--300: "Red Hat Mono VF";
123
+ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
124
+ --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
125
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", courier, monospace;
126
126
  --pf-t--global--font--line-height--100: 1.3;
127
127
  --pf-t--global--font--line-height--200: 1.5;
128
- --pf-t--global--font--size--100: 12px;
129
- --pf-t--global--font--size--200: 14px;
130
- --pf-t--global--font--size--300: 16px;
131
- --pf-t--global--font--size--400: 18px;
132
- --pf-t--global--font--size--500: 20px;
133
- --pf-t--global--font--size--600: 22px;
134
- --pf-t--global--font--size--700: 28px;
135
- --pf-t--global--font--size--800: 36px;
128
+ --pf-t--global--font--size--100: 0.75rem;
129
+ --pf-t--global--font--size--200: 0.875rem;
130
+ --pf-t--global--font--size--300: 1rem;
131
+ --pf-t--global--font--size--400: 1.125rem;
132
+ --pf-t--global--font--size--500: 1.25rem;
133
+ --pf-t--global--font--size--600: 1.375rem;
134
+ --pf-t--global--font--size--700: 1.75rem;
135
+ --pf-t--global--font--size--800: 2.25rem;
136
136
  --pf-t--global--font--weight--100: 400;
137
137
  --pf-t--global--font--weight--200: 500;
138
138
  --pf-t--global--font--weight--300: 700;
139
139
  --pf-t--global--font--weight--400: 700;
140
- --pf-t--global--icon--size--100: 12px;
141
- --pf-t--global--icon--size--200: 14px;
142
- --pf-t--global--icon--size--250: 16px;
143
- --pf-t--global--icon--size--300: 22px;
144
- --pf-t--global--icon--size--400: 56px;
145
- --pf-t--global--icon--size--500: 96px;
146
- --pf-t--global--spacer--100: 4px;
147
- --pf-t--global--spacer--200: 8px;
148
- --pf-t--global--spacer--300: 16px;
149
- --pf-t--global--spacer--400: 24px;
150
- --pf-t--global--spacer--500: 32px;
151
- --pf-t--global--spacer--600: 48px;
152
- --pf-t--global--spacer--700: 64px;
153
- --pf-t--global--spacer--800: 80px;
140
+ --pf-t--global--icon--size--100: 0.75rem;
141
+ --pf-t--global--icon--size--200: 0.875rem;
142
+ --pf-t--global--icon--size--250: 1rem;
143
+ --pf-t--global--icon--size--300: 1.375rem;
144
+ --pf-t--global--icon--size--400: 3.5rem;
145
+ --pf-t--global--icon--size--500: 6rem;
146
+ --pf-t--global--spacer--100: 0.25rem;
147
+ --pf-t--global--spacer--200: 0.5rem;
148
+ --pf-t--global--spacer--300: 1rem;
149
+ --pf-t--global--spacer--400: 1.5rem;
150
+ --pf-t--global--spacer--500: 2rem;
151
+ --pf-t--global--spacer--600: 3rem;
152
+ --pf-t--global--spacer--700: 4rem;
153
+ --pf-t--global--spacer--800: 5rem;
154
+ --pf-t--global--text-decoration--line--100: none;
155
+ --pf-t--global--text-decoration--line--200: underline;
156
+ --pf-t--global--text-decoration--style--100: solid;
157
+ --pf-t--global--text-decoration--style--200: dashed;
154
158
  --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
155
159
  --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
156
160
  --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
@@ -351,6 +355,18 @@
351
355
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
352
356
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
353
357
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
358
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
359
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
360
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
361
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
362
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
363
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
364
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
365
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
366
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
367
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
368
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
369
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
354
370
  --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
355
371
  --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
356
372
  --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
@@ -519,6 +535,8 @@
519
535
  --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
520
536
  --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
521
537
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
538
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
539
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
522
540
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
523
541
  --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
524
542
  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
@@ -532,6 +550,8 @@
532
550
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
533
551
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
534
552
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
553
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
554
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
535
555
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
536
556
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
537
557
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 21 Jun 2024 21:25:19 GMT
3
+ // Generated on Wed, 03 Jul 2024 20:18:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 21 Jun 2024 21:25:19 GMT
3
+ // Generated on Wed, 03 Jul 2024 20:18:13 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 21 Jun 2024 21:25:18 GMT
3
+ // Generated on Wed, 03 Jul 2024 20:18:13 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 21 Jun 2024 21:25:18 GMT
3
+ // Generated on Wed, 03 Jul 2024 20:18:13 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -35,15 +35,15 @@
35
35
  --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
36
36
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
37
37
  --pf-t--global--box-shadow--spread--100: 0px;
38
- --pf-t--global--breakpoint--100: 0px;
39
- --pf-t--global--breakpoint--200: 576px;
40
- --pf-t--global--breakpoint--250: 640px;
41
- --pf-t--global--breakpoint--300: 768px;
42
- --pf-t--global--breakpoint--350: 960px;
43
- --pf-t--global--breakpoint--400: 992px;
44
- --pf-t--global--breakpoint--500: 1200px;
45
- --pf-t--global--breakpoint--550: 1280px;
46
- --pf-t--global--breakpoint--600: 1450px;
38
+ --pf-t--global--breakpoint--100: 0rem;
39
+ --pf-t--global--breakpoint--200: 36rem;
40
+ --pf-t--global--breakpoint--250: 40rem;
41
+ --pf-t--global--breakpoint--300: 48rem;
42
+ --pf-t--global--breakpoint--350: 60rem;
43
+ --pf-t--global--breakpoint--400: 62rem;
44
+ --pf-t--global--breakpoint--500: 75rem;
45
+ --pf-t--global--breakpoint--550: 80rem;
46
+ --pf-t--global--breakpoint--600: 90.625rem;
47
47
  --pf-t--global--delay--100: 0ms;
48
48
  --pf-t--global--delay--200: 50ms;
49
49
  --pf-t--global--delay--300: 100ms;
@@ -55,37 +55,41 @@
55
55
  --pf-t--global--duration--50: 50ms;
56
56
  --pf-t--global--duration--500: 500ms;
57
57
  --pf-t--global--duration--600: 600ms;
58
- --pf-t--global--font--family--100: "Red Hat Text VF";
59
- --pf-t--global--font--family--200: "Red Hat Display VF";
60
- --pf-t--global--font--family--300: "Red Hat Mono VF";
58
+ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
59
+ --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", helvetica, arial, sans-serif;
60
+ --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", courier, monospace;
61
61
  --pf-t--global--font--line-height--100: 1.3;
62
62
  --pf-t--global--font--line-height--200: 1.5;
63
- --pf-t--global--font--size--100: 12px;
64
- --pf-t--global--font--size--200: 14px;
65
- --pf-t--global--font--size--300: 16px;
66
- --pf-t--global--font--size--400: 18px;
67
- --pf-t--global--font--size--500: 20px;
68
- --pf-t--global--font--size--600: 22px;
69
- --pf-t--global--font--size--700: 28px;
70
- --pf-t--global--font--size--800: 36px;
63
+ --pf-t--global--font--size--100: 0.75rem;
64
+ --pf-t--global--font--size--200: 0.875rem;
65
+ --pf-t--global--font--size--300: 1rem;
66
+ --pf-t--global--font--size--400: 1.125rem;
67
+ --pf-t--global--font--size--500: 1.25rem;
68
+ --pf-t--global--font--size--600: 1.375rem;
69
+ --pf-t--global--font--size--700: 1.75rem;
70
+ --pf-t--global--font--size--800: 2.25rem;
71
71
  --pf-t--global--font--weight--100: 400;
72
72
  --pf-t--global--font--weight--200: 500;
73
73
  --pf-t--global--font--weight--300: 700;
74
74
  --pf-t--global--font--weight--400: 700;
75
- --pf-t--global--icon--size--100: 12px;
76
- --pf-t--global--icon--size--200: 14px;
77
- --pf-t--global--icon--size--250: 16px;
78
- --pf-t--global--icon--size--300: 22px;
79
- --pf-t--global--icon--size--400: 56px;
80
- --pf-t--global--icon--size--500: 96px;
81
- --pf-t--global--spacer--100: 4px;
82
- --pf-t--global--spacer--200: 8px;
83
- --pf-t--global--spacer--300: 16px;
84
- --pf-t--global--spacer--400: 24px;
85
- --pf-t--global--spacer--500: 32px;
86
- --pf-t--global--spacer--600: 48px;
87
- --pf-t--global--spacer--700: 64px;
88
- --pf-t--global--spacer--800: 80px;
75
+ --pf-t--global--icon--size--100: 0.75rem;
76
+ --pf-t--global--icon--size--200: 0.875rem;
77
+ --pf-t--global--icon--size--250: 1rem;
78
+ --pf-t--global--icon--size--300: 1.375rem;
79
+ --pf-t--global--icon--size--400: 3.5rem;
80
+ --pf-t--global--icon--size--500: 6rem;
81
+ --pf-t--global--spacer--100: 0.25rem;
82
+ --pf-t--global--spacer--200: 0.5rem;
83
+ --pf-t--global--spacer--300: 1rem;
84
+ --pf-t--global--spacer--400: 1.5rem;
85
+ --pf-t--global--spacer--500: 2rem;
86
+ --pf-t--global--spacer--600: 3rem;
87
+ --pf-t--global--spacer--700: 4rem;
88
+ --pf-t--global--spacer--800: 5rem;
89
+ --pf-t--global--text-decoration--line--100: none;
90
+ --pf-t--global--text-decoration--line--200: underline;
91
+ --pf-t--global--text-decoration--style--100: solid;
92
+ --pf-t--global--text-decoration--style--200: dashed;
89
93
  --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
90
94
  --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
91
95
  --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
@@ -286,6 +290,18 @@
286
290
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
287
291
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
288
292
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
293
+ --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
294
+ --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
295
+ --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
296
+ --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
297
+ --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
298
+ --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
299
+ --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
300
+ --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
301
+ --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
302
+ --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
303
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
304
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
289
305
  --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
290
306
  --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
291
307
  --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
@@ -454,6 +470,8 @@
454
470
  --pf-t--global--spacer--gap--group-to-group--horizontal: var(--pf-t--global--spacer--2xl);
455
471
  --pf-t--global--spacer--gap--group-to-group--vertical: var(--pf-t--global--spacer--lg);
456
472
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
473
+ --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
474
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
457
475
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
458
476
  --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
459
477
  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
@@ -467,6 +485,8 @@
467
485
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
468
486
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
469
487
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
488
+ --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
489
+ --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
470
490
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
471
491
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
472
492
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 21 Jun 2024 21:25:19 GMT
3
+ // Generated on Wed, 03 Jul 2024 20:18:13 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000;
package/components/NotificationDrawer/notification-drawer.css CHANGED
@@ -46,6 +46,7 @@
46
46
  --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
47
47
  --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
48
48
  --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
49
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
49
50
  --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
50
51
  --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
51
52
  --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
@@ -196,6 +197,10 @@
196
197
  .pf-v6-c-notification-drawer__list-item-action {
197
198
  grid-row: 1/3;
198
199
  grid-column: 2/3;
200
+ margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
201
+ }
202
+ .pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
203
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
199
204
  }
200
205
 
201
206
  .pf-v6-c-notification-drawer__list-item-description {
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -65,6 +65,9 @@
65
65
  --#{$notification-drawer}__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
66
66
  --#{$notification-drawer}__list-item-header-title--max-lines: 1;
67
67
 
68
+ // List item action
69
+ --#{$notification-drawer}__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
70
+
68
71
  // List item description
69
72
  --#{$notification-drawer}__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
70
73
 
@@ -237,6 +240,11 @@
237
240
  .#{$notification-drawer}__list-item-action {
238
241
  grid-row: 1 / 3;
239
242
  grid-column: 2 / 3;
243
+ margin-block-start: var(--#{$notification-drawer}__list-item-action--MarginBlockStart);
244
+
245
+ &.pf-m-no-offset {
246
+ --#{$notification-drawer}__list-item-action--MarginBlockStart: 0;
247
+ }
240
248
  }
241
249
 
242
250
  .#{$notification-drawer}__list-item-description {
package/components/_index.css CHANGED
@@ -11023,6 +11023,7 @@ ul.pf-v6-c-list {
11023
11023
  --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
11024
11024
  --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
11025
11025
  --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
11026
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
11026
11027
  --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
11027
11028
  --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
11028
11029
  --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
@@ -11173,6 +11174,10 @@ ul.pf-v6-c-list {
11173
11174
  .pf-v6-c-notification-drawer__list-item-action {
11174
11175
  grid-row: 1/3;
11175
11176
  grid-column: 2/3;
11177
+ margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
11178
+ }
11179
+ .pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
11180
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
11176
11181
  }
11177
11182
 
11178
11183
  .pf-v6-c-notification-drawer__list-item-description {
package/docs/components/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -275,6 +275,30 @@ cssPrefix: pf-v6-c-notification-drawer
275
275
  class="pf-v6-c-notification-drawer__list-item-timestamp"
276
276
  >50 minutes ago</div>
277
277
  </li>
278
+ <li class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success">
279
+ <div class="pf-v6-c-notification-drawer__list-item-header">
280
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
281
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
282
+ </span>
283
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
284
+ <span class="pf-v6-screen-reader">Success notification:</span>
285
+ Notification drawer item title
286
+ </h2>
287
+ </div>
288
+ <div
289
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
290
+ >
291
+ <button class="pf-v6-c-button pf-m-primary" type="button">
292
+ <span class="pf-v6-c-button__text">Action</span>
293
+ </button>
294
+ </div>
295
+ <div
296
+ class="pf-v6-c-notification-drawer__list-item-description"
297
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
298
+ <div
299
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
300
+ >55 minutes ago</div>
301
+ </li>
278
302
  </ul>
279
303
  </div>
280
304
  </div>
@@ -570,6 +594,32 @@ cssPrefix: pf-v6-c-notification-drawer
570
594
  class="pf-v6-c-notification-drawer__list-item-timestamp"
571
595
  >50 minutes ago</div>
572
596
  </li>
597
+ <li
598
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
599
+ >
600
+ <div class="pf-v6-c-notification-drawer__list-item-header">
601
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
602
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
603
+ </span>
604
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
605
+ <span class="pf-v6-screen-reader">Success notification:</span>
606
+ Notification drawer item title
607
+ </h2>
608
+ </div>
609
+ <div
610
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
611
+ >
612
+ <button class="pf-v6-c-button pf-m-primary" type="button">
613
+ <span class="pf-v6-c-button__text">Action</span>
614
+ </button>
615
+ </div>
616
+ <div
617
+ class="pf-v6-c-notification-drawer__list-item-description"
618
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
619
+ <div
620
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
621
+ >55 minutes ago</div>
622
+ </li>
573
623
  </ul>
574
624
  </section>
575
625
  <section class="pf-v6-c-notification-drawer__group pf-m-expanded">
@@ -827,6 +877,32 @@ cssPrefix: pf-v6-c-notification-drawer
827
877
  class="pf-v6-c-notification-drawer__list-item-timestamp"
828
878
  >50 minutes ago</div>
829
879
  </li>
880
+ <li
881
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
882
+ >
883
+ <div class="pf-v6-c-notification-drawer__list-item-header">
884
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
885
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
886
+ </span>
887
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
888
+ <span class="pf-v6-screen-reader">Success notification:</span>
889
+ Notification drawer item title
890
+ </h2>
891
+ </div>
892
+ <div
893
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
894
+ >
895
+ <button class="pf-v6-c-button pf-m-primary" type="button">
896
+ <span class="pf-v6-c-button__text">Action</span>
897
+ </button>
898
+ </div>
899
+ <div
900
+ class="pf-v6-c-notification-drawer__list-item-description"
901
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
902
+ <div
903
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
904
+ >55 minutes ago</div>
905
+ </li>
830
906
  </ul>
831
907
  </section>
832
908
  <section class="pf-v6-c-notification-drawer__group">
@@ -1084,6 +1160,32 @@ cssPrefix: pf-v6-c-notification-drawer
1084
1160
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1085
1161
  >50 minutes ago</div>
1086
1162
  </li>
1163
+ <li
1164
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1165
+ >
1166
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1167
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1168
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1169
+ </span>
1170
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1171
+ <span class="pf-v6-screen-reader">Success notification:</span>
1172
+ Notification drawer item title
1173
+ </h2>
1174
+ </div>
1175
+ <div
1176
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1177
+ >
1178
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1179
+ <span class="pf-v6-c-button__text">Action</span>
1180
+ </button>
1181
+ </div>
1182
+ <div
1183
+ class="pf-v6-c-notification-drawer__list-item-description"
1184
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1185
+ <div
1186
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1187
+ >55 minutes ago</div>
1188
+ </li>
1087
1189
  </ul>
1088
1190
  </section>
1089
1191
  <section class="pf-v6-c-notification-drawer__group">
@@ -1341,6 +1443,32 @@ cssPrefix: pf-v6-c-notification-drawer
1341
1443
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1342
1444
  >50 minutes ago</div>
1343
1445
  </li>
1446
+ <li
1447
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1448
+ >
1449
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1450
+ <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1451
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1452
+ </span>
1453
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1454
+ <span class="pf-v6-screen-reader">Success notification:</span>
1455
+ Notification drawer item title
1456
+ </h2>
1457
+ </div>
1458
+ <div
1459
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1460
+ >
1461
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1462
+ <span class="pf-v6-c-button__text">Action</span>
1463
+ </button>
1464
+ </div>
1465
+ <div
1466
+ class="pf-v6-c-notification-drawer__list-item-description"
1467
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1468
+ <div
1469
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1470
+ >55 minutes ago</div>
1471
+ </li>
1344
1472
  </ul>
1345
1473
  </section>
1346
1474
  </div>
@@ -1393,3 +1521,4 @@ cssPrefix: pf-v6-c-notification-drawer
1393
1521
  | `.pf-m-hoverable` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item hover states to inidicate it is clickable. |
1394
1522
  | `.pf-m-expanded` | `.pf-v6-c-notification-drawer__group` | Modifies a notification group for the expanded state. |
1395
1523
  | `.pf-m-truncate` | `.pf-v6-c-notification-drawer__list-item-header-title` | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-v6-c-notification-drawer__list-item-header-title--max-lines` (the default value is `1`). |
1524
+ | `.pf-m-no-offset` | `.pf-v6-c-notification-drawer__list-item-action` | Modifies a notification item action to remove the vertical offset for action alignment. |