@patternfly/patternfly 5.1.0-prerelease.3 → 5.1.0-prerelease.5

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 (55) hide show
  1. package/components/DataList/data-list-grid.css +0 -28
  2. package/components/DataList/data-list.css +0 -28
  3. package/components/FormControl/form-control.css +3 -2
  4. package/components/FormControl/form-control.scss +3 -2
  5. package/components/Menu/menu.css +1 -1
  6. package/components/Menu/menu.scss +1 -1
  7. package/components/NumberInput/number-input.css +1 -1
  8. package/components/Pagination/pagination.css +1 -1
  9. package/components/Radio/radio.css +1 -2
  10. package/components/Radio/radio.scss +1 -2
  11. package/components/Table/table-grid.css +0 -24
  12. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  13. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  14. package/docs/components/Button/examples/Button.md +1 -0
  15. package/docs/components/Card/examples/Card.md +152 -64
  16. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  17. package/docs/components/DataList/examples/DataList.md +391 -136
  18. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  19. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  20. package/docs/components/FormControl/examples/FormControl.md +2 -1
  21. package/docs/components/Hint/examples/Hint.md +57 -24
  22. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  23. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  24. package/docs/components/Menu/examples/Menu.md +41 -20
  25. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  26. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  27. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  28. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  29. package/docs/components/Pagination/examples/Pagination.md +195 -65
  30. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  31. package/docs/components/Select/deprecated/Select.css +3 -3
  32. package/docs/components/Select/deprecated/Select.md +40 -52
  33. package/docs/components/Table/examples/Table.md +4546 -1668
  34. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  35. package/docs/components/Toolbar/examples/Toolbar.md +142 -68
  36. package/docs/components/TreeView/examples/TreeView.md +23 -8
  37. package/docs/demos/Card/examples/Card.md +46 -21
  38. package/docs/demos/CardView/examples/CardView.md +182 -74
  39. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  40. package/docs/demos/Dashboard/examples/Dashboard.md +15 -6
  41. package/docs/demos/DataList/examples/DataList.md +163 -70
  42. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  43. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  44. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  46. package/docs/demos/Table/examples/Table.md +1422 -607
  47. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  48. package/docs/demos/Toolbar/examples/Toolbar.md +318 -123
  49. package/package.json +37 -37
  50. package/patternfly-no-globals.css +6 -58
  51. package/patternfly-theme-dark-unversioned.css +6 -58
  52. package/patternfly.css +6 -58
  53. package/patternfly.min.css +1 -1
  54. package/patternfly.min.css.map +1 -1
  55. 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 {
@@ -18077,7 +18050,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
18077
18050
  .pf-v5-c-menu__item-description {
18078
18051
  font-size: var(--pf-v5-c-menu__item-description--FontSize);
18079
18052
  color: var(--pf-v5-c-menu__item-description--Color);
18080
- word-break: break-all;
18053
+ word-break: break-word;
18081
18054
  }
18082
18055
 
18083
18056
  .pf-v5-c-menu__item-icon {
@@ -23117,11 +23090,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
23117
23090
  --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
23118
23091
  --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
23119
23092
  --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
23120
- display: inline-grid;
23093
+ display: grid;
23121
23094
  grid-template-columns: auto 1fr;
23122
23095
  grid-gap: var(--pf-v5-c-radio--GridGap);
23123
23096
  align-items: baseline;
23124
- width: 100%;
23125
23097
  }
23126
23098
  .pf-v5-c-radio.pf-m-standalone {
23127
23099
  --pf-v5-c-radio--GridGap: 0;
@@ -25508,16 +25480,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
25508
25480
  grid-column: 2;
25509
25481
  grid-row: 2;
25510
25482
  }
25511
- }
25512
- @media screen and (max-width: 768px) {
25513
25483
  .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25514
25484
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
25515
25485
  }
25516
25486
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-md.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25517
25487
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
25518
25488
  }
25519
- }
25520
- @media screen and (max-width: 768px) {
25521
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 {
25522
25490
  --pf-v5-c-table--cell--Overflow: auto;
25523
25491
  }
@@ -25528,8 +25496,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
25528
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 {
25529
25497
  --pf-v5-c-table--cell--MaxWidth: 100%;
25530
25498
  }
25531
- }
25532
- @media screen and (max-width: 768px) {
25533
25499
  .pf-m-grid-md.pf-v5-c-table [class*=pf-m-width] {
25534
25500
  --pf-v5-c-table--cell--Width: auto;
25535
25501
  }
@@ -25820,16 +25786,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
25820
25786
  grid-column: 2;
25821
25787
  grid-row: 2;
25822
25788
  }
25823
- }
25824
- @media screen and (max-width: 992px) {
25825
25789
  .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25826
25790
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
25827
25791
  }
25828
25792
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-lg.pf-v5-c-table .pf-v5-c-table__toggle-icon {
25829
25793
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
25830
25794
  }
25831
- }
25832
- @media screen and (max-width: 992px) {
25833
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 {
25834
25796
  --pf-v5-c-table--cell--Overflow: auto;
25835
25797
  }
@@ -25840,8 +25802,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
25840
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 {
25841
25803
  --pf-v5-c-table--cell--MaxWidth: 100%;
25842
25804
  }
25843
- }
25844
- @media screen and (max-width: 992px) {
25845
25805
  .pf-m-grid-lg.pf-v5-c-table [class*=pf-m-width] {
25846
25806
  --pf-v5-c-table--cell--Width: auto;
25847
25807
  }
@@ -26132,16 +26092,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
26132
26092
  grid-column: 2;
26133
26093
  grid-row: 2;
26134
26094
  }
26135
- }
26136
- @media screen and (max-width: 1200px) {
26137
26095
  .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26138
26096
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
26139
26097
  }
26140
26098
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26141
26099
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
26142
26100
  }
26143
- }
26144
- @media screen and (max-width: 1200px) {
26145
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 {
26146
26102
  --pf-v5-c-table--cell--Overflow: auto;
26147
26103
  }
@@ -26152,8 +26108,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
26152
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 {
26153
26109
  --pf-v5-c-table--cell--MaxWidth: 100%;
26154
26110
  }
26155
- }
26156
- @media screen and (max-width: 1200px) {
26157
26111
  .pf-m-grid-xl.pf-v5-c-table [class*=pf-m-width] {
26158
26112
  --pf-v5-c-table--cell--Width: auto;
26159
26113
  }
@@ -26444,16 +26398,12 @@ svg.pf-v5-c-spinner.pf-m-xl {
26444
26398
  grid-column: 2;
26445
26399
  grid-row: 2;
26446
26400
  }
26447
- }
26448
- @media screen and (max-width: 1450px) {
26449
26401
  .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26450
26402
  transition: var(--pf-v5-c-table__toggle__icon--Transition);
26451
26403
  }
26452
26404
  .pf-v5-c-button.pf-m-expanded > .pf-m-grid-2xl.pf-v5-c-table .pf-v5-c-table__toggle-icon {
26453
26405
  transform: rotate(var(--pf-v5-c-table__toggle--m-expanded__icon--Rotate));
26454
26406
  }
26455
- }
26456
- @media screen and (max-width: 1450px) {
26457
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 {
26458
26408
  --pf-v5-c-table--cell--Overflow: auto;
26459
26409
  }
@@ -26464,8 +26414,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
26464
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 {
26465
26415
  --pf-v5-c-table--cell--MaxWidth: 100%;
26466
26416
  }
26467
- }
26468
- @media screen and (max-width: 1450px) {
26469
26417
  .pf-m-grid-2xl.pf-v5-c-table [class*=pf-m-width] {
26470
26418
  --pf-v5-c-table--cell--Width: auto;
26471
26419
  }