@patternfly/patternfly 6.5.0-prerelease.74 → 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 (12) hide show
  1. package/components/Button/button.css +42 -37
  2. package/components/Button/button.scss +48 -43
  3. package/components/ToggleGroup/toggle-group.css +10 -2
  4. package/components/ToggleGroup/toggle-group.scss +15 -2
  5. package/components/_index.css +52 -39
  6. package/docs/components/Button/examples/Button.md +298 -1
  7. package/docs/components/ToggleGroup/examples/toggle-group.md +66 -0
  8. package/package.json +5 -5
  9. package/patternfly-no-globals.css +52 -39
  10. package/patternfly.css +52 -39
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/docs/components/Button/examples/Button.md CHANGED
@@ -4311,6 +4311,303 @@ For when a plain/icon button is placed inline with text
4311
4311
  </span>
4312
4312
  </button>
4313
4313
 
4314
+ <br />
4315
+ <br />
4316
+
4317
+ <strong>Plain</strong>
4318
+ <br />
4319
+ <button
4320
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain"
4321
+ type="button"
4322
+ aria-label="all items read"
4323
+ >
4324
+ <span class="pf-v6-c-button__icon pf-m-start">
4325
+ <svg
4326
+ class="pf-v6-svg"
4327
+ viewBox="0 0 32 32"
4328
+ fill="currentColor"
4329
+ aria-hidden="true"
4330
+ role="img"
4331
+ width="1em"
4332
+ height="1em"
4333
+ >
4334
+ <path
4335
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4336
+ />
4337
+ </svg>
4338
+ </span>
4339
+ </button>
4340
+
4341
+ <button
4342
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
4343
+ type="button"
4344
+ aria-label="all items read"
4345
+ >
4346
+ <span class="pf-v6-c-button__icon pf-m-start">
4347
+ <svg
4348
+ class="pf-v6-svg"
4349
+ viewBox="0 0 32 32"
4350
+ fill="currentColor"
4351
+ aria-hidden="true"
4352
+ role="img"
4353
+ width="1em"
4354
+ height="1em"
4355
+ >
4356
+ <path
4357
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4358
+ />
4359
+ </svg>
4360
+ </span>
4361
+ </button>
4362
+
4363
+ <br />
4364
+
4365
+ <button
4366
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
4367
+ type="button"
4368
+ aria-label="unread items"
4369
+ >
4370
+ <span class="pf-v6-c-button__icon pf-m-start">
4371
+ <svg
4372
+ class="pf-v6-svg"
4373
+ viewBox="0 0 32 32"
4374
+ fill="currentColor"
4375
+ aria-hidden="true"
4376
+ role="img"
4377
+ width="1em"
4378
+ height="1em"
4379
+ >
4380
+ <path
4381
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4382
+ />
4383
+ </svg>
4384
+ </span>
4385
+ </button>
4386
+
4387
+ <button
4388
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
4389
+ type="button"
4390
+ aria-label="unread items"
4391
+ >
4392
+ <span class="pf-v6-c-button__icon pf-m-start">
4393
+ <svg
4394
+ class="pf-v6-svg"
4395
+ viewBox="0 0 32 32"
4396
+ fill="currentColor"
4397
+ aria-hidden="true"
4398
+ role="img"
4399
+ width="1em"
4400
+ height="1em"
4401
+ >
4402
+ <path
4403
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4404
+ />
4405
+ </svg>
4406
+ </span>
4407
+ </button>
4408
+
4409
+ <br />
4410
+
4411
+ <button
4412
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
4413
+ type="button"
4414
+ aria-label="unread items, needs attention"
4415
+ >
4416
+ <span class="pf-v6-c-button__icon pf-m-start">
4417
+ <svg
4418
+ class="pf-v6-svg"
4419
+ viewBox="0 0 32 32"
4420
+ fill="currentColor"
4421
+ aria-hidden="true"
4422
+ role="img"
4423
+ width="1em"
4424
+ height="1em"
4425
+ >
4426
+ <path
4427
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4428
+ />
4429
+ </svg>
4430
+ </span>
4431
+ </button>
4432
+
4433
+ <button
4434
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
4435
+ type="button"
4436
+ aria-label="unread items, needs attention"
4437
+ >
4438
+ <span class="pf-v6-c-button__icon pf-m-start">
4439
+ <svg
4440
+ class="pf-v6-svg"
4441
+ viewBox="0 0 32 32"
4442
+ fill="currentColor"
4443
+ aria-hidden="true"
4444
+ role="img"
4445
+ width="1em"
4446
+ height="1em"
4447
+ >
4448
+ <path
4449
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4450
+ />
4451
+ </svg>
4452
+ </span>
4453
+ </button>
4454
+
4455
+ <br />
4456
+ <br />
4457
+
4458
+ <strong>Plain with count</strong>
4459
+ <br />
4460
+ <button class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain" type="button">
4461
+ <span class="pf-v6-c-button__icon pf-m-start">
4462
+ <svg
4463
+ class="pf-v6-svg"
4464
+ viewBox="0 0 32 32"
4465
+ fill="currentColor"
4466
+ aria-hidden="true"
4467
+ role="img"
4468
+ width="1em"
4469
+ height="1em"
4470
+ >
4471
+ <path
4472
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4473
+ />
4474
+ </svg>
4475
+ </span>
4476
+ <span class="pf-v6-c-button__text">
4477
+ 10
4478
+ <span class="pf-v6-screen-reader">items</span>
4479
+ </span>
4480
+ </button>
4481
+
4482
+ <button
4483
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
4484
+ type="button"
4485
+ >
4486
+ <span class="pf-v6-c-button__icon pf-m-start">
4487
+ <svg
4488
+ class="pf-v6-svg"
4489
+ viewBox="0 0 32 32"
4490
+ fill="currentColor"
4491
+ aria-hidden="true"
4492
+ role="img"
4493
+ width="1em"
4494
+ height="1em"
4495
+ >
4496
+ <path
4497
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4498
+ />
4499
+ </svg>
4500
+ </span>
4501
+ <span class="pf-v6-c-button__text">
4502
+ 10
4503
+ <span class="pf-v6-screen-reader">items</span>
4504
+ </span>
4505
+ </button>
4506
+
4507
+ <br />
4508
+
4509
+ <button
4510
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
4511
+ type="button"
4512
+ >
4513
+ <span class="pf-v6-c-button__icon pf-m-start">
4514
+ <svg
4515
+ class="pf-v6-svg"
4516
+ viewBox="0 0 32 32"
4517
+ fill="currentColor"
4518
+ aria-hidden="true"
4519
+ role="img"
4520
+ width="1em"
4521
+ height="1em"
4522
+ >
4523
+ <path
4524
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4525
+ />
4526
+ </svg>
4527
+ </span>
4528
+ <span class="pf-v6-c-button__text">
4529
+ 10
4530
+ <span class="pf-v6-screen-reader">unread items</span>
4531
+ </span>
4532
+ </button>
4533
+
4534
+ <button
4535
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
4536
+ type="button"
4537
+ >
4538
+ <span class="pf-v6-c-button__icon pf-m-start">
4539
+ <svg
4540
+ class="pf-v6-svg"
4541
+ viewBox="0 0 32 32"
4542
+ fill="currentColor"
4543
+ aria-hidden="true"
4544
+ role="img"
4545
+ width="1em"
4546
+ height="1em"
4547
+ >
4548
+ <path
4549
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4550
+ />
4551
+ </svg>
4552
+ </span>
4553
+ <span class="pf-v6-c-button__text">
4554
+ 10
4555
+ <span class="pf-v6-screen-reader">unread items</span>
4556
+ </span>
4557
+ </button>
4558
+
4559
+ <br />
4560
+
4561
+ <button
4562
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
4563
+ type="button"
4564
+ >
4565
+ <span class="pf-v6-c-button__icon pf-m-start">
4566
+ <svg
4567
+ class="pf-v6-svg"
4568
+ viewBox="0 0 32 32"
4569
+ fill="currentColor"
4570
+ aria-hidden="true"
4571
+ role="img"
4572
+ width="1em"
4573
+ height="1em"
4574
+ >
4575
+ <path
4576
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4577
+ />
4578
+ </svg>
4579
+ </span>
4580
+ <span class="pf-v6-c-button__text">
4581
+ 10
4582
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4583
+ </span>
4584
+ </button>
4585
+
4586
+ <button
4587
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
4588
+ type="button"
4589
+ >
4590
+ <span class="pf-v6-c-button__icon pf-m-start">
4591
+ <svg
4592
+ class="pf-v6-svg"
4593
+ viewBox="0 0 32 32"
4594
+ fill="currentColor"
4595
+ aria-hidden="true"
4596
+ role="img"
4597
+ width="1em"
4598
+ height="1em"
4599
+ >
4600
+ <path
4601
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4602
+ />
4603
+ </svg>
4604
+ </span>
4605
+ <span class="pf-v6-c-button__text">
4606
+ 10
4607
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4608
+ </span>
4609
+ </button>
4610
+
4314
4611
  ```
4315
4612
 
4316
4613
  ### Favorite
@@ -4528,7 +4825,7 @@ Semantic buttons and links are important for usability as well as accessibility.
4528
4825
  | `.pf-m-danger` | `.pf-v6-c-button` | Modifies for danger styles. |
4529
4826
  | `.pf-m-warning` | `.pf-v6-c-button` | Modifies for warning styles. |
4530
4827
  | `.pf-m-link` | `.pf-v6-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
4531
- | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
4828
+ | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, stateful, etc. |
4532
4829
  | `.pf-m-no-padding` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
4533
4830
  | `.pf-m-inline` | `.pf-v6-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
4534
4831
  | `.pf-m-block` | `.pf-v6-c-button` | Creates a block level button. |
package/docs/components/ToggleGroup/examples/toggle-group.md CHANGED
@@ -493,6 +493,71 @@ cssPrefix: pf-v6-c-toggle-group
493
493
 
494
494
  ```
495
495
 
496
+ ### Full width toggle
497
+
498
+ To make toggle group items fill the available space, use `.pf-m-fill`. In the following example, the toggle group items fill the width of the parent as the window size changes.
499
+
500
+ ```html
501
+ <div class="pf-v6-c-toggle-group pf-m-fill">
502
+ <div class="pf-v6-c-toggle-group__item">
503
+ <button class="pf-v6-c-toggle-group__button" type="button">
504
+ <span class="pf-v6-c-toggle-group__text">Option 1</span>
505
+ </button>
506
+ </div>
507
+ <div class="pf-v6-c-toggle-group__item">
508
+ <button class="pf-v6-c-toggle-group__button" type="button">
509
+ <span class="pf-v6-c-toggle-group__text">Option 2</span>
510
+ </button>
511
+ </div>
512
+ <div class="pf-v6-c-toggle-group__item">
513
+ <button class="pf-v6-c-toggle-group__button" type="button">
514
+ <span class="pf-v6-c-toggle-group__text">Option 3</span>
515
+ </button>
516
+ </div>
517
+ </div>
518
+
519
+ <br />
520
+
521
+ <div class="pf-v6-c-toggle-group pf-m-fill">
522
+ <div class="pf-v6-c-toggle-group__item">
523
+ <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
524
+ <span class="pf-v6-c-toggle-group__text">Option 1</span>
525
+ </button>
526
+ </div>
527
+ <div class="pf-v6-c-toggle-group__item">
528
+ <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
529
+ <span class="pf-v6-c-toggle-group__text">Option 2</span>
530
+ </button>
531
+ </div>
532
+ <div class="pf-v6-c-toggle-group__item">
533
+ <button class="pf-v6-c-toggle-group__button" type="button">
534
+ <span class="pf-v6-c-toggle-group__text">Option 3</span>
535
+ </button>
536
+ </div>
537
+ </div>
538
+
539
+ <br />
540
+
541
+ <div class="pf-v6-c-toggle-group pf-m-fill">
542
+ <div class="pf-v6-c-toggle-group__item">
543
+ <button class="pf-v6-c-toggle-group__button" type="button">
544
+ <span class="pf-v6-c-toggle-group__text">Option 1</span>
545
+ </button>
546
+ </div>
547
+ <div class="pf-v6-c-toggle-group__item">
548
+ <button class="pf-v6-c-toggle-group__button" type="button">
549
+ <span class="pf-v6-c-toggle-group__text">Option 2</span>
550
+ </button>
551
+ </div>
552
+ <div class="pf-v6-c-toggle-group__item">
553
+ <button class="pf-v6-c-toggle-group__button" type="button" disabled>
554
+ <span class="pf-v6-c-toggle-group__text">Option 3</span>
555
+ </button>
556
+ </div>
557
+ </div>
558
+
559
+ ```
560
+
496
561
  ## Documentation
497
562
 
498
563
  ### Accessibility
@@ -512,4 +577,5 @@ cssPrefix: pf-v6-c-toggle-group
512
577
  | `.pf-v6-c-toggle-group__text` | `<span>` | Initiates the toggle button text element. |
513
578
  | `.pf-v6-c-toggle-group__icon` | `<span>` | Initiates the toggle button icon element. |
514
579
  | `.pf-m-compact` | `.pf-v6-c-toggle-group` | Modifies the toggle group for compact styles. |
580
+ | `.pf-m-fill` | `.pf-v6-c-toggle-group` | Modifies the group items to fill the available space. |
515
581
  | `.pf-m-selected` | `.pf-v6-c-toggle-group__button` | Modifies the toggle button group button for the selected state. |
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.74",
4
+ "version": "6.5.0-prerelease.76",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
8
8
  "a11y": "patternfly-a11y --config patternfly-a11y.config",
9
- "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
9
+ "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/bitmaps_test_glass backstop_data/html_report",
10
10
  "backstop:test": "backstop test --config='backstop.js'",
11
11
  "backstop:test:dark": "backstop test --config='backstop.js' --dark",
12
12
  "backstop:test:glass": "backstop test --config='backstop.js' --glass",
@@ -71,10 +71,10 @@
71
71
  "@octokit/rest": "^20.1.0",
72
72
  "@patternfly/documentation-framework": "6.38.3",
73
73
  "@patternfly/patternfly-a11y": "5.1.0",
74
- "@patternfly/react-code-editor": "6.4.1",
75
- "@patternfly/react-core": "6.4.1",
74
+ "@patternfly/react-code-editor": "6.4.3",
75
+ "@patternfly/react-core": "6.4.3",
76
76
  "@patternfly/react-icons": "6.5.0-prerelease.13",
77
- "@patternfly/react-table": "6.4.1",
77
+ "@patternfly/react-table": "6.4.3",
78
78
  "@rspack/cli": "^1.6.0",
79
79
  "@rspack/core": "^1.6.0",
80
80
  "@rspack/dev-server": "^1.1.4",
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);
@@ -31438,9 +31443,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31438
31443
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
31439
31444
  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
31440
31445
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
31441
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
31446
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
31442
31447
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31443
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
31448
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
31444
31449
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31445
31450
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
31446
31451
  }
@@ -31455,6 +31460,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31455
31460
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
31456
31461
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
31457
31462
  }
31463
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
31464
+ display: flex;
31465
+ flex-grow: 1;
31466
+ }
31467
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
31468
+ flex-basis: 100%;
31469
+ justify-content: center;
31470
+ }
31458
31471
 
31459
31472
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
31460
31473
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);