@patternfly/patternfly 5.1.0-prerelease.4 → 6.0.0-alpha.1

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 (51) hide show
  1. package/CODE_OF_CONDUCT.md +2 -1
  2. package/components/DataList/data-list-grid.css +0 -28
  3. package/components/DataList/data-list.css +0 -28
  4. package/components/FormControl/form-control.css +3 -2
  5. package/components/FormControl/form-control.scss +3 -2
  6. package/components/NumberInput/number-input.css +1 -1
  7. package/components/Pagination/pagination.css +1 -1
  8. package/components/Table/table-grid.css +0 -24
  9. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  10. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  11. package/docs/components/Card/examples/Card.md +152 -64
  12. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  13. package/docs/components/DataList/examples/DataList.md +391 -136
  14. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  15. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  16. package/docs/components/FormControl/examples/FormControl.md +2 -1
  17. package/docs/components/Hint/examples/Hint.md +57 -24
  18. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  19. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  20. package/docs/components/Menu/examples/Menu.md +41 -20
  21. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  22. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  23. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  24. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  25. package/docs/components/Pagination/examples/Pagination.md +195 -65
  26. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  27. package/docs/components/Select/deprecated/Select.css +3 -3
  28. package/docs/components/Select/deprecated/Select.md +40 -52
  29. package/docs/components/Table/examples/Table.md +4546 -1668
  30. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  31. package/docs/components/Toolbar/examples/Toolbar.md +142 -68
  32. package/docs/components/TreeView/examples/TreeView.md +23 -8
  33. package/docs/demos/Card/examples/Card.md +46 -21
  34. package/docs/demos/CardView/examples/CardView.md +182 -74
  35. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  36. package/docs/demos/Dashboard/examples/Dashboard.md +15 -6
  37. package/docs/demos/DataList/examples/DataList.md +163 -70
  38. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  39. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  40. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  42. package/docs/demos/Table/examples/Table.md +1422 -607
  43. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  44. package/docs/demos/Toolbar/examples/Toolbar.md +318 -123
  45. package/package.json +39 -38
  46. package/patternfly-no-globals.css +4 -55
  47. package/patternfly-theme-dark-unversioned.css +4 -55
  48. package/patternfly.css +4 -55
  49. package/patternfly.min.css +1 -1
  50. package/patternfly.min.css.map +1 -1
  51. package/sass-utilities/placeholders.scss +1 -1
package/patternfly.css CHANGED
@@ -79,8 +79,8 @@
79
79
  appearance: textfield;
80
80
  }
81
81
  .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
82
- appearance: none;
83
82
  margin: 0;
83
+ appearance: none;
84
84
  }
85
85
 
86
86
  :where(:root) {
@@ -9380,8 +9380,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9380
9380
  flex-wrap: wrap;
9381
9381
  padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
9382
9382
  }
9383
- }
9384
- @media screen and (min-width: 768px) {
9385
9383
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9386
9384
  margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
9387
9385
  }
@@ -9407,8 +9405,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9407
9405
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__cell.pf-m-flex-5 {
9408
9406
  flex-grow: 5;
9409
9407
  }
9410
- }
9411
- @media screen and (min-width: 768px) {
9412
9408
  .pf-v5-c-data-list:not([class*=pf-m-grid]) .pf-v5-c-data-list__expandable-content {
9413
9409
  max-height: initial;
9414
9410
  overflow-y: visible;
@@ -9442,8 +9438,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9442
9438
  flex-wrap: wrap;
9443
9439
  padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
9444
9440
  }
9445
- }
9446
- @media screen and (min-width: 0) {
9447
9441
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9448
9442
  margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
9449
9443
  }
@@ -9469,8 +9463,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9469
9463
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__cell.pf-m-flex-5 {
9470
9464
  flex-grow: 5;
9471
9465
  }
9472
- }
9473
- @media screen and (min-width: 0) {
9474
9466
  .pf-v5-c-data-list.pf-m-grid-none .pf-v5-c-data-list__expandable-content {
9475
9467
  max-height: initial;
9476
9468
  overflow-y: visible;
@@ -9504,8 +9496,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9504
9496
  flex-wrap: wrap;
9505
9497
  padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
9506
9498
  }
9507
- }
9508
- @media screen and (min-width: 576px) {
9509
9499
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9510
9500
  margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
9511
9501
  }
@@ -9531,8 +9521,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9531
9521
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__cell.pf-m-flex-5 {
9532
9522
  flex-grow: 5;
9533
9523
  }
9534
- }
9535
- @media screen and (min-width: 576px) {
9536
9524
  .pf-v5-c-data-list.pf-m-grid-sm .pf-v5-c-data-list__expandable-content {
9537
9525
  max-height: initial;
9538
9526
  overflow-y: visible;
@@ -9566,8 +9554,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9566
9554
  flex-wrap: wrap;
9567
9555
  padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
9568
9556
  }
9569
- }
9570
- @media screen and (min-width: 768px) {
9571
9557
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9572
9558
  margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
9573
9559
  }
@@ -9593,8 +9579,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9593
9579
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__cell.pf-m-flex-5 {
9594
9580
  flex-grow: 5;
9595
9581
  }
9596
- }
9597
- @media screen and (min-width: 768px) {
9598
9582
  .pf-v5-c-data-list.pf-m-grid-md .pf-v5-c-data-list__expandable-content {
9599
9583
  max-height: initial;
9600
9584
  overflow-y: visible;
@@ -9628,8 +9612,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9628
9612
  flex-wrap: wrap;
9629
9613
  padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
9630
9614
  }
9631
- }
9632
- @media screen and (min-width: 992px) {
9633
9615
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9634
9616
  margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
9635
9617
  }
@@ -9655,8 +9637,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9655
9637
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__cell.pf-m-flex-5 {
9656
9638
  flex-grow: 5;
9657
9639
  }
9658
- }
9659
- @media screen and (min-width: 992px) {
9660
9640
  .pf-v5-c-data-list.pf-m-grid-lg .pf-v5-c-data-list__expandable-content {
9661
9641
  max-height: initial;
9662
9642
  overflow-y: visible;
@@ -9690,8 +9670,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9690
9670
  flex-wrap: wrap;
9691
9671
  padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
9692
9672
  }
9693
- }
9694
- @media screen and (min-width: 1200px) {
9695
9673
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9696
9674
  margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
9697
9675
  }
@@ -9717,8 +9695,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9717
9695
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
9718
9696
  flex-grow: 5;
9719
9697
  }
9720
- }
9721
- @media screen and (min-width: 1200px) {
9722
9698
  .pf-v5-c-data-list.pf-m-grid-xl .pf-v5-c-data-list__expandable-content {
9723
9699
  max-height: initial;
9724
9700
  overflow-y: visible;
@@ -9752,8 +9728,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9752
9728
  flex-wrap: wrap;
9753
9729
  padding-bottom: var(--pf-v5-c-data-list__item-content--md--PaddingBottom);
9754
9730
  }
9755
- }
9756
- @media screen and (min-width: 1450px) {
9757
9731
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell:not(:last-child):not(.pf-m-icon) {
9758
9732
  margin-right: var(--pf-v5-c-data-list__cell--MarginRight);
9759
9733
  }
@@ -9779,8 +9753,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
9779
9753
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__cell.pf-m-flex-5 {
9780
9754
  flex-grow: 5;
9781
9755
  }
9782
- }
9783
- @media screen and (min-width: 1450px) {
9784
9756
  .pf-v5-c-data-list.pf-m-grid-2xl .pf-v5-c-data-list__expandable-content {
9785
9757
  max-height: initial;
9786
9758
  overflow-y: visible;
@@ -14959,6 +14931,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14959
14931
  .pf-v5-c-form-control.pf-m-disabled {
14960
14932
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-disabled--BackgroundColor);
14961
14933
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-disabled--Color);
14934
+ --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-c-form-control--m-disabled--Color);
14962
14935
  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-c-form-control--m-disabled__toggle-icon--Color);
14963
14936
  --pf-v5-c-form-control--before--BorderStyle: none;
14964
14937
  --pf-v5-c-form-control--after--BorderStyle: none;
@@ -15010,10 +14983,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15010
14983
  .pf-v5-c-form-control.pf-m-placeholder > select {
15011
14984
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
15012
14985
  }
15013
- .pf-v5-c-form-control.pf-m-placeholder > select > * {
14986
+ .pf-v5-c-form-control.pf-m-placeholder > select * {
15014
14987
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
15015
14988
  }
15016
- .pf-v5-c-form-control.pf-m-placeholder > select > *:disabled {
14989
+ .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
15017
14990
  color: revert;
15018
14991
  }
15019
14992
  .pf-v5-c-form-control > textarea {
@@ -25507,16 +25480,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
25507
25480
  grid-column: 2;
25508
25481
  grid-row: 2;
25509
25482
  }
25510
- }
25511
- @media screen and (max-width: 768px) {
25512
25483
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25513
25484
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
25514
25485
  }
25515
25486
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25516
25487
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
25517
25488
  }
25518
- }
25519
- @media screen and (max-width: 768px) {
25520
25489
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
25521
25490
  --pf-v5-c-table--cell--Overflow: auto;
25522
25491
  }
@@ -25527,8 +25496,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
25527
25496
  .pf-m-grid-md.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
25528
25497
  --pf-v5-c-table--cell--MaxWidth: 100%;
25529
25498
  }
25530
- }
25531
- @media screen and (max-width: 768px) {
25532
25499
  .pf-m-grid-md.pf-v5-c-table [class*=pf-m-width] {
25533
25500
  --pf-v5-c-table--cell--Width: auto;
25534
25501
  }
@@ -25819,16 +25786,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
25819
25786
  grid-column: 2;
25820
25787
  grid-row: 2;
25821
25788
  }
25822
- }
25823
- @media screen and (max-width: 992px) {
25824
25789
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25825
25790
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
25826
25791
  }
25827
25792
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25828
25793
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
25829
25794
  }
25830
- }
25831
- @media screen and (max-width: 992px) {
25832
25795
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
25833
25796
  --pf-v5-c-table--cell--Overflow: auto;
25834
25797
  }
@@ -25839,8 +25802,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
25839
25802
  .pf-m-grid-lg.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
25840
25803
  --pf-v5-c-table--cell--MaxWidth: 100%;
25841
25804
  }
25842
- }
25843
- @media screen and (max-width: 992px) {
25844
25805
  .pf-m-grid-lg.pf-v5-c-table [class*=pf-m-width] {
25845
25806
  --pf-v5-c-table--cell--Width: auto;
25846
25807
  }
@@ -26131,16 +26092,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
26131
26092
  grid-column: 2;
26132
26093
  grid-row: 2;
26133
26094
  }
26134
- }
26135
- @media screen and (max-width: 1200px) {
26136
26095
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26137
26096
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
26138
26097
  }
26139
26098
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26140
26099
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
26141
26100
  }
26142
- }
26143
- @media screen and (max-width: 1200px) {
26144
26101
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
26145
26102
  --pf-v5-c-table--cell--Overflow: auto;
26146
26103
  }
@@ -26151,8 +26108,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
26151
26108
  .pf-m-grid-xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
26152
26109
  --pf-v5-c-table--cell--MaxWidth: 100%;
26153
26110
  }
26154
- }
26155
- @media screen and (max-width: 1200px) {
26156
26111
  .pf-m-grid-xl.pf-v5-c-table [class*=pf-m-width] {
26157
26112
  --pf-v5-c-table--cell--Width: auto;
26158
26113
  }
@@ -26443,16 +26398,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
26443
26398
  grid-column: 2;
26444
26399
  grid-row: 2;
26445
26400
  }
26446
- }
26447
- @media screen and (max-width: 1450px) {
26448
26401
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26449
26402
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
26450
26403
  }
26451
26404
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26452
26405
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
26453
26406
  }
26454
- }
26455
- @media screen and (max-width: 1450px) {
26456
26407
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-nowrap {
26457
26408
  --pf-v5-c-table--cell--Overflow: auto;
26458
26409
  }
@@ -26463,8 +26414,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
26463
26414
  .pf-m-grid-2xl.pf-v5-c-table :where(.pf-v5-c-table, .pf-v5-c-table__thead, .pf-v5-c-table__tbody, .pf-v5-c-table__tr, .pf-v5-c-table__th, .pf-v5-c-table__td, .pf-v5-c-table__text).pf-m-truncate {
26464
26415
  --pf-v5-c-table--cell--MaxWidth: 100%;
26465
26416
  }
26466
- }
26467
- @media screen and (max-width: 1450px) {
26468
26417
  .pf-m-grid-2xl.pf-v5-c-table [class*=pf-m-width] {
26469
26418
  --pf-v5-c-table--cell--Width: auto;
26470
26419
  }