@patternfly/patternfly 6.5.0-prerelease.75 → 6.5.0-prerelease.76

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 (9) hide show
  1. package/components/Button/button.css +42 -37
  2. package/components/Button/button.scss +48 -43
  3. package/components/_index.css +42 -37
  4. package/docs/components/Button/examples/Button.md +298 -1
  5. package/package.json +2 -2
  6. package/patternfly-no-globals.css +42 -37
  7. package/patternfly.css +42 -37
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -11346,43 +11346,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11346
11346
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
11347
11347
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
11348
11348
  }
11349
- .pf-v6-c-button.pf-m-stateful {
11350
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11351
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11352
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11353
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11354
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11355
- }
11356
- .pf-v6-c-button.pf-m-read {
11357
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11358
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11359
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11360
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11361
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11362
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11363
- }
11364
- .pf-v6-c-button.pf-m-unread {
11365
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11366
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11367
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11368
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11369
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11370
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11371
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11372
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11373
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11374
- }
11375
- .pf-v6-c-button.pf-m-attention {
11376
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11377
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11378
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11379
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11380
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11381
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11382
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11383
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11384
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11385
- }
11386
11349
  .pf-v6-c-button.pf-m-plain {
11387
11350
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
11388
11351
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -11406,6 +11369,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11406
11369
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
11407
11370
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
11408
11371
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
11372
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
11373
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
11374
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
11375
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
11376
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
11409
11377
  }
11410
11378
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
11411
11379
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -11422,6 +11390,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11422
11390
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
11423
11391
  background: var(--pf-v6-c-button--BackgroundColor);
11424
11392
  }
11393
+ .pf-v6-c-button.pf-m-stateful {
11394
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11395
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11396
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11397
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11398
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11399
+ }
11400
+ .pf-v6-c-button.pf-m-read {
11401
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11402
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11403
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11404
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11405
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11406
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11407
+ }
11408
+ .pf-v6-c-button.pf-m-unread {
11409
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11410
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11411
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11412
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11413
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11414
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11415
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11416
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11417
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11418
+ }
11419
+ .pf-v6-c-button.pf-m-attention {
11420
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11421
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11422
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11423
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11424
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11425
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11426
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11427
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11428
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11429
+ }
11425
11430
  .pf-v6-c-button.pf-m-block {
11426
11431
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
11427
11432
  width: var(--pf-v6-c-button--m-block--Width);
package/patternfly.css CHANGED
@@ -11493,43 +11493,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11493
11493
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
11494
11494
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
11495
11495
  }
11496
- .pf-v6-c-button.pf-m-stateful {
11497
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11498
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11499
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11500
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11501
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11502
- }
11503
- .pf-v6-c-button.pf-m-read {
11504
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11505
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11506
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11507
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11508
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11509
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11510
- }
11511
- .pf-v6-c-button.pf-m-unread {
11512
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11513
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11514
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11515
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11516
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11517
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11518
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11519
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11520
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11521
- }
11522
- .pf-v6-c-button.pf-m-attention {
11523
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11524
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11525
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11526
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11527
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11528
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11529
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11530
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11531
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11532
- }
11533
11496
  .pf-v6-c-button.pf-m-plain {
11534
11497
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
11535
11498
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -11553,6 +11516,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11553
11516
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
11554
11517
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
11555
11518
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
11519
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
11520
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
11521
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
11522
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
11523
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
11556
11524
  }
11557
11525
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
11558
11526
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -11569,6 +11537,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11569
11537
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
11570
11538
  background: var(--pf-v6-c-button--BackgroundColor);
11571
11539
  }
11540
+ .pf-v6-c-button.pf-m-stateful {
11541
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11542
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11543
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11544
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11545
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11546
+ }
11547
+ .pf-v6-c-button.pf-m-read {
11548
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11549
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11550
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11551
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11552
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11553
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11554
+ }
11555
+ .pf-v6-c-button.pf-m-unread {
11556
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11557
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11558
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11559
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11560
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11561
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11562
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11563
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11564
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11565
+ }
11566
+ .pf-v6-c-button.pf-m-attention {
11567
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11568
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11569
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11570
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11571
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11572
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11573
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11574
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11575
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11576
+ }
11572
11577
  .pf-v6-c-button.pf-m-block {
11573
11578
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
11574
11579
  width: var(--pf-v6-c-button--m-block--Width);