@patternfly/patternfly 6.0.0-alpha.181 → 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 (10) hide show
  1. package/components/NotificationDrawer/notification-drawer.css +5 -0
  2. package/components/NotificationDrawer/notification-drawer.scss +8 -0
  3. package/components/_index.css +5 -0
  4. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +129 -0
  5. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +268 -0
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +5 -0
  8. package/patternfly.css +5 -0
  9. package/patternfly.min.css +1 -1
  10. 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/_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. |
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -602,6 +602,36 @@ section: components
602
602
  class="pf-v6-c-notification-drawer__list-item-timestamp"
603
603
  >50 minutes ago</div>
604
604
  </li>
605
+ <li
606
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
607
+ >
608
+ <div class="pf-v6-c-notification-drawer__list-item-header">
609
+ <span
610
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
611
+ >
612
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
613
+ </span>
614
+ <h2
615
+ class="pf-v6-c-notification-drawer__list-item-header-title"
616
+ >
617
+ <span class="pf-v6-screen-reader">Success notification:</span>
618
+ Notification drawer item title
619
+ </h2>
620
+ </div>
621
+ <div
622
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
623
+ >
624
+ <button class="pf-v6-c-button pf-m-primary" type="button">
625
+ <span class="pf-v6-c-button__text">Action</span>
626
+ </button>
627
+ </div>
628
+ <div
629
+ class="pf-v6-c-notification-drawer__list-item-description"
630
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
631
+ <div
632
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
633
+ >55 minutes ago</div>
634
+ </li>
605
635
  </ul>
606
636
  </div>
607
637
  </div>
@@ -1216,6 +1246,36 @@ section: components
1216
1246
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1217
1247
  >50 minutes ago</div>
1218
1248
  </li>
1249
+ <li
1250
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1251
+ >
1252
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1253
+ <span
1254
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
1255
+ >
1256
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1257
+ </span>
1258
+ <h2
1259
+ class="pf-v6-c-notification-drawer__list-item-header-title"
1260
+ >
1261
+ <span class="pf-v6-screen-reader">Success notification:</span>
1262
+ Notification drawer item title
1263
+ </h2>
1264
+ </div>
1265
+ <div
1266
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1267
+ >
1268
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1269
+ <span class="pf-v6-c-button__text">Action</span>
1270
+ </button>
1271
+ </div>
1272
+ <div
1273
+ class="pf-v6-c-notification-drawer__list-item-description"
1274
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1275
+ <div
1276
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1277
+ >55 minutes ago</div>
1278
+ </li>
1219
1279
  </ul>
1220
1280
  </div>
1221
1281
  </div>
@@ -1833,6 +1893,36 @@ section: components
1833
1893
  class="pf-v6-c-notification-drawer__list-item-timestamp"
1834
1894
  >50 minutes ago</div>
1835
1895
  </li>
1896
+ <li
1897
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
1898
+ >
1899
+ <div class="pf-v6-c-notification-drawer__list-item-header">
1900
+ <span
1901
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
1902
+ >
1903
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1904
+ </span>
1905
+ <h2
1906
+ class="pf-v6-c-notification-drawer__list-item-header-title"
1907
+ >
1908
+ <span class="pf-v6-screen-reader">Success notification:</span>
1909
+ Notification drawer item title
1910
+ </h2>
1911
+ </div>
1912
+ <div
1913
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
1914
+ >
1915
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1916
+ <span class="pf-v6-c-button__text">Action</span>
1917
+ </button>
1918
+ </div>
1919
+ <div
1920
+ class="pf-v6-c-notification-drawer__list-item-description"
1921
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
1922
+ <div
1923
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
1924
+ >55 minutes ago</div>
1925
+ </li>
1836
1926
  </ul>
1837
1927
  </div>
1838
1928
  </div>
@@ -2445,6 +2535,36 @@ section: components
2445
2535
  class="pf-v6-c-notification-drawer__list-item-timestamp"
2446
2536
  >50 minutes ago</div>
2447
2537
  </li>
2538
+ <li
2539
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
2540
+ >
2541
+ <div class="pf-v6-c-notification-drawer__list-item-header">
2542
+ <span
2543
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
2544
+ >
2545
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
2546
+ </span>
2547
+ <h2
2548
+ class="pf-v6-c-notification-drawer__list-item-header-title"
2549
+ >
2550
+ <span class="pf-v6-screen-reader">Success notification:</span>
2551
+ Notification drawer item title
2552
+ </h2>
2553
+ </div>
2554
+ <div
2555
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
2556
+ >
2557
+ <button class="pf-v6-c-button pf-m-primary" type="button">
2558
+ <span class="pf-v6-c-button__text">Action</span>
2559
+ </button>
2560
+ </div>
2561
+ <div
2562
+ class="pf-v6-c-notification-drawer__list-item-description"
2563
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
2564
+ <div
2565
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
2566
+ >55 minutes ago</div>
2567
+ </li>
2448
2568
  </ul>
2449
2569
  </div>
2450
2570
  </div>
@@ -3134,6 +3254,43 @@ section: components
3134
3254
  class="pf-v6-c-notification-drawer__list-item-timestamp"
3135
3255
  >50 minutes ago</div>
3136
3256
  </li>
3257
+ <li
3258
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
3259
+ >
3260
+ <div
3261
+ class="pf-v6-c-notification-drawer__list-item-header"
3262
+ >
3263
+ <span
3264
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
3265
+ >
3266
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
3267
+ </span>
3268
+ <h2
3269
+ class="pf-v6-c-notification-drawer__list-item-header-title"
3270
+ >
3271
+ <span
3272
+ class="pf-v6-screen-reader"
3273
+ >Success notification:</span>
3274
+ Notification drawer item title
3275
+ </h2>
3276
+ </div>
3277
+ <div
3278
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
3279
+ >
3280
+ <button
3281
+ class="pf-v6-c-button pf-m-primary"
3282
+ type="button"
3283
+ >
3284
+ <span class="pf-v6-c-button__text">Action</span>
3285
+ </button>
3286
+ </div>
3287
+ <div
3288
+ class="pf-v6-c-notification-drawer__list-item-description"
3289
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
3290
+ <div
3291
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
3292
+ >55 minutes ago</div>
3293
+ </li>
3137
3294
  </ul>
3138
3295
  </section>
3139
3296
  <section
@@ -3470,6 +3627,43 @@ section: components
3470
3627
  class="pf-v6-c-notification-drawer__list-item-timestamp"
3471
3628
  >50 minutes ago</div>
3472
3629
  </li>
3630
+ <li
3631
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
3632
+ >
3633
+ <div
3634
+ class="pf-v6-c-notification-drawer__list-item-header"
3635
+ >
3636
+ <span
3637
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
3638
+ >
3639
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
3640
+ </span>
3641
+ <h2
3642
+ class="pf-v6-c-notification-drawer__list-item-header-title"
3643
+ >
3644
+ <span
3645
+ class="pf-v6-screen-reader"
3646
+ >Success notification:</span>
3647
+ Notification drawer item title
3648
+ </h2>
3649
+ </div>
3650
+ <div
3651
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
3652
+ >
3653
+ <button
3654
+ class="pf-v6-c-button pf-m-primary"
3655
+ type="button"
3656
+ >
3657
+ <span class="pf-v6-c-button__text">Action</span>
3658
+ </button>
3659
+ </div>
3660
+ <div
3661
+ class="pf-v6-c-notification-drawer__list-item-description"
3662
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
3663
+ <div
3664
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
3665
+ >55 minutes ago</div>
3666
+ </li>
3473
3667
  </ul>
3474
3668
  </section>
3475
3669
  <section class="pf-v6-c-notification-drawer__group">
@@ -3808,6 +4002,43 @@ section: components
3808
4002
  class="pf-v6-c-notification-drawer__list-item-timestamp"
3809
4003
  >50 minutes ago</div>
3810
4004
  </li>
4005
+ <li
4006
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
4007
+ >
4008
+ <div
4009
+ class="pf-v6-c-notification-drawer__list-item-header"
4010
+ >
4011
+ <span
4012
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
4013
+ >
4014
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
4015
+ </span>
4016
+ <h2
4017
+ class="pf-v6-c-notification-drawer__list-item-header-title"
4018
+ >
4019
+ <span
4020
+ class="pf-v6-screen-reader"
4021
+ >Success notification:</span>
4022
+ Notification drawer item title
4023
+ </h2>
4024
+ </div>
4025
+ <div
4026
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
4027
+ >
4028
+ <button
4029
+ class="pf-v6-c-button pf-m-primary"
4030
+ type="button"
4031
+ >
4032
+ <span class="pf-v6-c-button__text">Action</span>
4033
+ </button>
4034
+ </div>
4035
+ <div
4036
+ class="pf-v6-c-notification-drawer__list-item-description"
4037
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
4038
+ <div
4039
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
4040
+ >55 minutes ago</div>
4041
+ </li>
3811
4042
  </ul>
3812
4043
  </section>
3813
4044
  <section class="pf-v6-c-notification-drawer__group">
@@ -4146,6 +4377,43 @@ section: components
4146
4377
  class="pf-v6-c-notification-drawer__list-item-timestamp"
4147
4378
  >50 minutes ago</div>
4148
4379
  </li>
4380
+ <li
4381
+ class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success"
4382
+ >
4383
+ <div
4384
+ class="pf-v6-c-notification-drawer__list-item-header"
4385
+ >
4386
+ <span
4387
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
4388
+ >
4389
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
4390
+ </span>
4391
+ <h2
4392
+ class="pf-v6-c-notification-drawer__list-item-header-title"
4393
+ >
4394
+ <span
4395
+ class="pf-v6-screen-reader"
4396
+ >Success notification:</span>
4397
+ Notification drawer item title
4398
+ </h2>
4399
+ </div>
4400
+ <div
4401
+ class="pf-v6-c-notification-drawer__list-item-action pf-m-no-offset"
4402
+ >
4403
+ <button
4404
+ class="pf-v6-c-button pf-m-primary"
4405
+ type="button"
4406
+ >
4407
+ <span class="pf-v6-c-button__text">Action</span>
4408
+ </button>
4409
+ </div>
4410
+ <div
4411
+ class="pf-v6-c-notification-drawer__list-item-description"
4412
+ >This example uses ".pf-m-no-offset" on the action wrapper to disable the default offset for button alignment.</div>
4413
+ <div
4414
+ class="pf-v6-c-notification-drawer__list-item-timestamp"
4415
+ >55 minutes ago</div>
4416
+ </li>
4149
4417
  </ul>
4150
4418
  </section>
4151
4419
  </div>
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.181",
4
+ "version": "6.0.0-alpha.182",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -17106,6 +17106,7 @@ ul.pf-v6-c-list {
17106
17106
  --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
17107
17107
  --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
17108
17108
  --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
17109
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
17109
17110
  --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
17110
17111
  --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
17111
17112
  --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
@@ -17256,6 +17257,10 @@ ul.pf-v6-c-list {
17256
17257
  .pf-v6-c-notification-drawer__list-item-action {
17257
17258
  grid-row: 1/3;
17258
17259
  grid-column: 2/3;
17260
+ margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
17261
+ }
17262
+ .pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
17263
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
17259
17264
  }
17260
17265
 
17261
17266
  .pf-v6-c-notification-drawer__list-item-description {
package/patternfly.css CHANGED
@@ -17227,6 +17227,7 @@ ul.pf-v6-c-list {
17227
17227
  --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
17228
17228
  --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
17229
17229
  --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
17230
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
17230
17231
  --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
17231
17232
  --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
17232
17233
  --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
@@ -17377,6 +17378,10 @@ ul.pf-v6-c-list {
17377
17378
  .pf-v6-c-notification-drawer__list-item-action {
17378
17379
  grid-row: 1/3;
17379
17380
  grid-column: 2/3;
17381
+ margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
17382
+ }
17383
+ .pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
17384
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
17380
17385
  }
17381
17386
 
17382
17387
  .pf-v6-c-notification-drawer__list-item-description {