@patternfly/patternfly 6.0.0-alpha.181 → 6.0.0-alpha.183

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 (14) hide show
  1. package/components/NotificationDrawer/notification-drawer.css +5 -0
  2. package/components/NotificationDrawer/notification-drawer.scss +8 -0
  3. package/components/Table/table-grid.css +5 -0
  4. package/components/Table/table-grid.scss +1 -0
  5. package/components/Table/table-tree-view.css +20 -0
  6. package/components/Table/table-tree-view.scss +5 -0
  7. package/components/_index.css +30 -0
  8. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +129 -0
  9. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +268 -0
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +30 -0
  12. package/patternfly.css +30 -0
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
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/Table/table-grid.css CHANGED
@@ -155,6 +155,7 @@
155
155
  grid-column: 2;
156
156
  }
157
157
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
158
+ position: revert;
158
159
  font-weight: bold;
159
160
  text-align: start;
160
161
  content: attr(data-label);
@@ -454,6 +455,7 @@
454
455
  grid-column: 2;
455
456
  }
456
457
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
458
+ position: revert;
457
459
  font-weight: bold;
458
460
  text-align: start;
459
461
  content: attr(data-label);
@@ -756,6 +758,7 @@
756
758
  grid-column: 2;
757
759
  }
758
760
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
761
+ position: revert;
759
762
  font-weight: bold;
760
763
  text-align: start;
761
764
  content: attr(data-label);
@@ -1058,6 +1061,7 @@
1058
1061
  grid-column: 2;
1059
1062
  }
1060
1063
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
1064
+ position: revert;
1061
1065
  font-weight: bold;
1062
1066
  text-align: start;
1063
1067
  content: attr(data-label);
@@ -1360,6 +1364,7 @@
1360
1364
  grid-column: 2;
1361
1365
  }
1362
1366
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
1367
+ position: revert;
1363
1368
  font-weight: bold;
1364
1369
  text-align: start;
1365
1370
  content: attr(data-label);
package/components/Table/table-grid.scss CHANGED
@@ -269,6 +269,7 @@
269
269
  }
270
270
 
271
271
  &::before {
272
+ position: revert;
272
273
  font-weight: bold;
273
274
  text-align: start;
274
275
  content: attr(data-label);
package/components/Table/table-tree-view.css CHANGED
@@ -178,10 +178,14 @@
178
178
  grid-column: 2;
179
179
  }
180
180
  .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
181
+ position: revert;
181
182
  font-weight: var(--pf-t--global--font--weight--body--bold);
182
183
  text-align: start;
183
184
  content: attr(data-label);
184
185
  }
186
+ .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
187
+ border-inline-end: 0;
188
+ }
185
189
  .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
186
190
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
187
191
  }
@@ -318,10 +322,14 @@
318
322
  grid-column: 2;
319
323
  }
320
324
  .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
325
+ position: revert;
321
326
  font-weight: var(--pf-t--global--font--weight--body--bold);
322
327
  text-align: start;
323
328
  content: attr(data-label);
324
329
  }
330
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
331
+ border-inline-end: 0;
332
+ }
325
333
  .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
326
334
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
327
335
  }
@@ -459,10 +467,14 @@
459
467
  grid-column: 2;
460
468
  }
461
469
  .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
470
+ position: revert;
462
471
  font-weight: var(--pf-t--global--font--weight--body--bold);
463
472
  text-align: start;
464
473
  content: attr(data-label);
465
474
  }
475
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
476
+ border-inline-end: 0;
477
+ }
466
478
  .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
467
479
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
468
480
  }
@@ -600,10 +612,14 @@
600
612
  grid-column: 2;
601
613
  }
602
614
  .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
615
+ position: revert;
603
616
  font-weight: var(--pf-t--global--font--weight--body--bold);
604
617
  text-align: start;
605
618
  content: attr(data-label);
606
619
  }
620
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
621
+ border-inline-end: 0;
622
+ }
607
623
  .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
608
624
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
609
625
  }
@@ -741,10 +757,14 @@
741
757
  grid-column: 2;
742
758
  }
743
759
  .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
760
+ position: revert;
744
761
  font-weight: var(--pf-t--global--font--weight--body--bold);
745
762
  text-align: start;
746
763
  content: attr(data-label);
747
764
  }
765
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
766
+ border-inline-end: 0;
767
+ }
748
768
  .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
749
769
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
750
770
  }
package/components/Table/table-tree-view.scss CHANGED
@@ -257,12 +257,17 @@ $pf-v6-c-tree-view--MaxDepth: 10;
257
257
  }
258
258
 
259
259
  &::before {
260
+ position: revert;
260
261
  font-weight: var(--pf-t--global--font--weight--body--bold);
261
262
  text-align: start;
262
263
  content: attr(data-label);
263
264
  }
264
265
  }
265
266
 
267
+ .#{$table}__tr > :where(th, td).pf-m-border-right::before {
268
+ border-inline-end: 0;
269
+ }
270
+
266
271
  // - Table tree view tr tree view details expanded
267
272
  tr:where(.#{$table}__tr).pf-m-tree-view-details-expanded {
268
273
  padding-block-end: var(--#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
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 {
@@ -14748,6 +14753,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14748
14753
  grid-column: 2;
14749
14754
  }
14750
14755
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
14756
+ position: revert;
14751
14757
  font-weight: bold;
14752
14758
  text-align: start;
14753
14759
  content: attr(data-label);
@@ -15047,6 +15053,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15047
15053
  grid-column: 2;
15048
15054
  }
15049
15055
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15056
+ position: revert;
15050
15057
  font-weight: bold;
15051
15058
  text-align: start;
15052
15059
  content: attr(data-label);
@@ -15349,6 +15356,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15349
15356
  grid-column: 2;
15350
15357
  }
15351
15358
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15359
+ position: revert;
15352
15360
  font-weight: bold;
15353
15361
  text-align: start;
15354
15362
  content: attr(data-label);
@@ -15651,6 +15659,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15651
15659
  grid-column: 2;
15652
15660
  }
15653
15661
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15662
+ position: revert;
15654
15663
  font-weight: bold;
15655
15664
  text-align: start;
15656
15665
  content: attr(data-label);
@@ -15953,6 +15962,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15953
15962
  grid-column: 2;
15954
15963
  }
15955
15964
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15965
+ position: revert;
15956
15966
  font-weight: bold;
15957
15967
  text-align: start;
15958
15968
  content: attr(data-label);
@@ -17261,10 +17271,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17261
17271
  grid-column: 2;
17262
17272
  }
17263
17273
  .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17274
+ position: revert;
17264
17275
  font-weight: var(--pf-t--global--font--weight--body--bold);
17265
17276
  text-align: start;
17266
17277
  content: attr(data-label);
17267
17278
  }
17279
+ .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17280
+ border-inline-end: 0;
17281
+ }
17268
17282
  .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17269
17283
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17270
17284
  }
@@ -17401,10 +17415,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17401
17415
  grid-column: 2;
17402
17416
  }
17403
17417
  .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17418
+ position: revert;
17404
17419
  font-weight: var(--pf-t--global--font--weight--body--bold);
17405
17420
  text-align: start;
17406
17421
  content: attr(data-label);
17407
17422
  }
17423
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17424
+ border-inline-end: 0;
17425
+ }
17408
17426
  .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17409
17427
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17410
17428
  }
@@ -17542,10 +17560,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17542
17560
  grid-column: 2;
17543
17561
  }
17544
17562
  .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17563
+ position: revert;
17545
17564
  font-weight: var(--pf-t--global--font--weight--body--bold);
17546
17565
  text-align: start;
17547
17566
  content: attr(data-label);
17548
17567
  }
17568
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17569
+ border-inline-end: 0;
17570
+ }
17549
17571
  .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17550
17572
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17551
17573
  }
@@ -17683,10 +17705,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17683
17705
  grid-column: 2;
17684
17706
  }
17685
17707
  .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17708
+ position: revert;
17686
17709
  font-weight: var(--pf-t--global--font--weight--body--bold);
17687
17710
  text-align: start;
17688
17711
  content: attr(data-label);
17689
17712
  }
17713
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17714
+ border-inline-end: 0;
17715
+ }
17690
17716
  .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17691
17717
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17692
17718
  }
@@ -17824,10 +17850,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17824
17850
  grid-column: 2;
17825
17851
  }
17826
17852
  .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17853
+ position: revert;
17827
17854
  font-weight: var(--pf-t--global--font--weight--body--bold);
17828
17855
  text-align: start;
17829
17856
  content: attr(data-label);
17830
17857
  }
17858
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17859
+ border-inline-end: 0;
17860
+ }
17831
17861
  .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17832
17862
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17833
17863
  }
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. |