@patternfly/patternfly 5.0.0-alpha.49 → 5.0.0-alpha.50

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 (72) hide show
  1. package/base/patternfly-variables.css +1 -1
  2. package/components/Breadcrumb/breadcrumb.css +1 -5
  3. package/components/Breadcrumb/breadcrumb.scss +1 -8
  4. package/components/Divider/divider.css +12 -12
  5. package/components/List/list.css +1 -1
  6. package/components/List/list.scss +1 -1
  7. package/components/LogViewer/log-viewer.css +0 -3
  8. package/components/LogViewer/log-viewer.scss +0 -4
  9. package/components/Masthead/masthead.css +12 -12
  10. package/components/MultipleFileUpload/multiple-file-upload.css +3 -3
  11. package/components/MultipleFileUpload/multiple-file-upload.scss +3 -3
  12. package/components/Pagination/pagination.css +12 -12
  13. package/components/Tabs/tabs.css +24 -24
  14. package/components/TextInputGroup/text-input-group.css +1 -5
  15. package/components/TextInputGroup/text-input-group.scss +1 -7
  16. package/components/Toolbar/toolbar.css +54 -54
  17. package/components/_all.scss +1 -2
  18. package/docs/components/AppLauncher/examples/application-launcher.md +8 -7
  19. package/docs/components/Chip/examples/Chip.md +713 -4
  20. package/docs/components/ContextSelector/examples/context-selector.md +12 -12
  21. package/docs/components/DualListSelector/examples/DualListSelector.md +32 -32
  22. package/docs/components/LogViewer/examples/LogViewer.md +40 -40
  23. package/docs/components/Menu/examples/Menu.md +20 -18
  24. package/docs/components/Select/examples/Select.md +16 -14
  25. package/docs/components/TextInputGroup/examples/TextInputGroup.css +0 -13
  26. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -21
  27. package/docs/components/Toolbar/examples/Toolbar.md +10 -10
  28. package/docs/components/TreeView/examples/TreeView.md +8 -7
  29. package/docs/demos/AboutModal/examples/AboutModal.md +21 -21
  30. package/docs/demos/Alert/examples/Alert.md +63 -63
  31. package/docs/demos/BackToTop/examples/BackToTop.md +21 -21
  32. package/docs/demos/Banner/examples/Banner.md +42 -42
  33. package/docs/demos/CardView/examples/CardView.md +21 -21
  34. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -91
  35. package/docs/demos/Dashboard/examples/Dashboard.md +21 -21
  36. package/docs/demos/DataList/examples/DataList.md +104 -105
  37. package/docs/demos/DescriptionList/examples/DescriptionList.md +63 -63
  38. package/docs/demos/Drawer/examples/Drawer.md +105 -105
  39. package/docs/demos/JumpLinks/examples/JumpLinks.md +126 -126
  40. package/docs/demos/Masthead/examples/Masthead.md +56 -55
  41. package/docs/demos/Modal/examples/Modal.md +126 -126
  42. package/docs/demos/Nav/examples/Nav.md +168 -168
  43. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +105 -105
  44. package/docs/demos/Page/examples/Page.md +189 -189
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +153 -153
  46. package/docs/demos/Skeleton/examples/Skeleton.md +21 -21
  47. package/docs/demos/Table/examples/Table.md +339 -339
  48. package/docs/demos/Tabs/examples/Tabs.md +126 -126
  49. package/docs/demos/Toolbar/examples/Toolbar.md +50 -50
  50. package/docs/demos/Wizard/examples/Wizard.md +189 -189
  51. package/docs/layouts/Flex/examples/Flex.md +319 -215
  52. package/layouts/Flex/flex.css +738 -31
  53. package/layouts/Flex/flex.scss +101 -17
  54. package/package.json +1 -1
  55. package/patternfly-base-no-globals.css +1 -1
  56. package/patternfly-base.css +1 -1
  57. package/patternfly-no-globals.css +859 -389
  58. package/patternfly.css +859 -389
  59. package/patternfly.min.css +1 -1
  60. package/patternfly.min.css.map +1 -1
  61. package/sass-utilities/component-namespaces.scss +0 -3
  62. package/sass-utilities/functions.scss +9 -5
  63. package/sass-utilities/themes/dark/scss-variables.scss +1 -4
  64. package/components/Breadcrumb/themes/dark/breadcrumb.scss +0 -7
  65. package/components/SearchInput/search-input.css +0 -199
  66. package/components/SearchInput/search-input.scss +0 -231
  67. package/components/SearchInput/themes/dark/search-input.scss +0 -16
  68. package/docs/components/ChipGroup/examples/ChipGroup.md +0 -716
  69. package/docs/components/SearchInput/examples/SearchInput.css +0 -12
  70. package/docs/components/SearchInput/examples/SearchInput.md +0 -681
  71. /package/components/{ChipGroup → Chip}/chip-group.css +0 -0
  72. /package/components/{ChipGroup → Chip}/chip-group.scss +0 -0
package/components/Toolbar/toolbar.css CHANGED
@@ -678,10 +678,10 @@
678
678
  flex-wrap: wrap;
679
679
  }
680
680
  }
681
- .pf-v5-c-toolbar .pf-m-space-items-none > * {
682
- --pf-v5-c-toolbar--spacer: 0;
681
+ .pf-v5-c-toolbar .pf-m-space-items-base > * {
682
+ --pf-v5-c-toolbar--spacer: ;
683
683
  }
684
- .pf-v5-c-toolbar .pf-m-space-items-none > :last-child {
684
+ .pf-v5-c-toolbar .pf-m-space-items-base > :last-child {
685
685
  --pf-v5-c-toolbar--spacer: 0;
686
686
  }
687
687
  .pf-v5-c-toolbar .pf-m-space-items-sm > * {
@@ -703,10 +703,10 @@
703
703
  --pf-v5-c-toolbar--spacer: 0;
704
704
  }
705
705
  @media (min-width: 576px) {
706
- .pf-v5-c-toolbar .pf-m-space-items-none-on-sm > * {
707
- --pf-v5-c-toolbar--spacer: 0;
706
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-sm > * {
707
+ --pf-v5-c-toolbar--spacer: ;
708
708
  }
709
- .pf-v5-c-toolbar .pf-m-space-items-none-on-sm > :last-child {
709
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-sm > :last-child {
710
710
  --pf-v5-c-toolbar--spacer: 0;
711
711
  }
712
712
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-sm > * {
@@ -729,10 +729,10 @@
729
729
  }
730
730
  }
731
731
  @media (min-width: 768px) {
732
- .pf-v5-c-toolbar .pf-m-space-items-none-on-md > * {
733
- --pf-v5-c-toolbar--spacer: 0;
732
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-md > * {
733
+ --pf-v5-c-toolbar--spacer: ;
734
734
  }
735
- .pf-v5-c-toolbar .pf-m-space-items-none-on-md > :last-child {
735
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-md > :last-child {
736
736
  --pf-v5-c-toolbar--spacer: 0;
737
737
  }
738
738
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-md > * {
@@ -755,10 +755,10 @@
755
755
  }
756
756
  }
757
757
  @media (min-width: 992px) {
758
- .pf-v5-c-toolbar .pf-m-space-items-none-on-lg > * {
759
- --pf-v5-c-toolbar--spacer: 0;
758
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-lg > * {
759
+ --pf-v5-c-toolbar--spacer: ;
760
760
  }
761
- .pf-v5-c-toolbar .pf-m-space-items-none-on-lg > :last-child {
761
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-lg > :last-child {
762
762
  --pf-v5-c-toolbar--spacer: 0;
763
763
  }
764
764
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-lg > * {
@@ -781,10 +781,10 @@
781
781
  }
782
782
  }
783
783
  @media (min-width: 1200px) {
784
- .pf-v5-c-toolbar .pf-m-space-items-none-on-xl > * {
785
- --pf-v5-c-toolbar--spacer: 0;
784
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-xl > * {
785
+ --pf-v5-c-toolbar--spacer: ;
786
786
  }
787
- .pf-v5-c-toolbar .pf-m-space-items-none-on-xl > :last-child {
787
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-xl > :last-child {
788
788
  --pf-v5-c-toolbar--spacer: 0;
789
789
  }
790
790
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-xl > * {
@@ -807,10 +807,10 @@
807
807
  }
808
808
  }
809
809
  @media (min-width: 1450px) {
810
- .pf-v5-c-toolbar .pf-m-space-items-none-on-2xl > * {
811
- --pf-v5-c-toolbar--spacer: 0;
810
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-2xl > * {
811
+ --pf-v5-c-toolbar--spacer: ;
812
812
  }
813
- .pf-v5-c-toolbar .pf-m-space-items-none-on-2xl > :last-child {
813
+ .pf-v5-c-toolbar .pf-m-space-items-base-on-2xl > :last-child {
814
814
  --pf-v5-c-toolbar--spacer: 0;
815
815
  }
816
816
  .pf-v5-c-toolbar .pf-m-space-items-sm-on-2xl > * {
@@ -832,11 +832,11 @@
832
832
  --pf-v5-c-toolbar--spacer: 0;
833
833
  }
834
834
  }
835
- .pf-v5-c-toolbar .pf-m-spacer-none {
836
- --pf-v5-c-toolbar--spacer: 0;
835
+ .pf-v5-c-toolbar .pf-m-spacer-base {
836
+ --pf-v5-c-toolbar--spacer: ;
837
837
  }
838
- .pf-v5-c-toolbar .pf-m-spacer-none:last-child {
839
- --pf-v5-c-toolbar--spacer: 0;
838
+ .pf-v5-c-toolbar .pf-m-spacer-base:last-child {
839
+ --pf-v5-c-toolbar--spacer: ;
840
840
  }
841
841
  .pf-v5-c-toolbar .pf-m-spacer-sm {
842
842
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -857,11 +857,11 @@
857
857
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--lg);
858
858
  }
859
859
  @media (min-width: 576px) {
860
- .pf-v5-c-toolbar .pf-m-spacer-none-on-sm {
861
- --pf-v5-c-toolbar--spacer: 0;
860
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-sm {
861
+ --pf-v5-c-toolbar--spacer: ;
862
862
  }
863
- .pf-v5-c-toolbar .pf-m-spacer-none-on-sm:last-child {
864
- --pf-v5-c-toolbar--spacer: 0;
863
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-sm:last-child {
864
+ --pf-v5-c-toolbar--spacer: ;
865
865
  }
866
866
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-sm {
867
867
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -883,11 +883,11 @@
883
883
  }
884
884
  }
885
885
  @media (min-width: 768px) {
886
- .pf-v5-c-toolbar .pf-m-spacer-none-on-md {
887
- --pf-v5-c-toolbar--spacer: 0;
886
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-md {
887
+ --pf-v5-c-toolbar--spacer: ;
888
888
  }
889
- .pf-v5-c-toolbar .pf-m-spacer-none-on-md:last-child {
890
- --pf-v5-c-toolbar--spacer: 0;
889
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-md:last-child {
890
+ --pf-v5-c-toolbar--spacer: ;
891
891
  }
892
892
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-md {
893
893
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -909,11 +909,11 @@
909
909
  }
910
910
  }
911
911
  @media (min-width: 992px) {
912
- .pf-v5-c-toolbar .pf-m-spacer-none-on-lg {
913
- --pf-v5-c-toolbar--spacer: 0;
912
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-lg {
913
+ --pf-v5-c-toolbar--spacer: ;
914
914
  }
915
- .pf-v5-c-toolbar .pf-m-spacer-none-on-lg:last-child {
916
- --pf-v5-c-toolbar--spacer: 0;
915
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-lg:last-child {
916
+ --pf-v5-c-toolbar--spacer: ;
917
917
  }
918
918
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-lg {
919
919
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -935,11 +935,11 @@
935
935
  }
936
936
  }
937
937
  @media (min-width: 1200px) {
938
- .pf-v5-c-toolbar .pf-m-spacer-none-on-xl {
939
- --pf-v5-c-toolbar--spacer: 0;
938
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-xl {
939
+ --pf-v5-c-toolbar--spacer: ;
940
940
  }
941
- .pf-v5-c-toolbar .pf-m-spacer-none-on-xl:last-child {
942
- --pf-v5-c-toolbar--spacer: 0;
941
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-xl:last-child {
942
+ --pf-v5-c-toolbar--spacer: ;
943
943
  }
944
944
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-xl {
945
945
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -961,11 +961,11 @@
961
961
  }
962
962
  }
963
963
  @media (min-width: 1450px) {
964
- .pf-v5-c-toolbar .pf-m-spacer-none-on-2xl {
965
- --pf-v5-c-toolbar--spacer: 0;
964
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-2xl {
965
+ --pf-v5-c-toolbar--spacer: ;
966
966
  }
967
- .pf-v5-c-toolbar .pf-m-spacer-none-on-2xl:last-child {
968
- --pf-v5-c-toolbar--spacer: 0;
967
+ .pf-v5-c-toolbar .pf-m-spacer-base-on-2xl:last-child {
968
+ --pf-v5-c-toolbar--spacer: ;
969
969
  }
970
970
  .pf-v5-c-toolbar .pf-m-spacer-sm-on-2xl {
971
971
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -986,8 +986,8 @@
986
986
  --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--lg);
987
987
  }
988
988
  }
989
- .pf-v5-c-toolbar.pf-m-inset-none {
990
- --pf-v5-c-toolbar--inset: 0;
989
+ .pf-v5-c-toolbar.pf-m-inset-base {
990
+ --pf-v5-c-toolbar--inset: ;
991
991
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
992
992
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
993
993
  }
@@ -1017,8 +1017,8 @@
1017
1017
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1018
1018
  }
1019
1019
  @media (min-width: 576px) {
1020
- .pf-v5-c-toolbar.pf-m-inset-none-on-sm {
1021
- --pf-v5-c-toolbar--inset: 0;
1020
+ .pf-v5-c-toolbar.pf-m-inset-base-on-sm {
1021
+ --pf-v5-c-toolbar--inset: ;
1022
1022
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1023
1023
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1024
1024
  }
@@ -1049,8 +1049,8 @@
1049
1049
  }
1050
1050
  }
1051
1051
  @media (min-width: 768px) {
1052
- .pf-v5-c-toolbar.pf-m-inset-none-on-md {
1053
- --pf-v5-c-toolbar--inset: 0;
1052
+ .pf-v5-c-toolbar.pf-m-inset-base-on-md {
1053
+ --pf-v5-c-toolbar--inset: ;
1054
1054
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1055
1055
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1056
1056
  }
@@ -1081,8 +1081,8 @@
1081
1081
  }
1082
1082
  }
1083
1083
  @media (min-width: 992px) {
1084
- .pf-v5-c-toolbar.pf-m-inset-none-on-lg {
1085
- --pf-v5-c-toolbar--inset: 0;
1084
+ .pf-v5-c-toolbar.pf-m-inset-base-on-lg {
1085
+ --pf-v5-c-toolbar--inset: ;
1086
1086
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1087
1087
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1088
1088
  }
@@ -1113,8 +1113,8 @@
1113
1113
  }
1114
1114
  }
1115
1115
  @media (min-width: 1200px) {
1116
- .pf-v5-c-toolbar.pf-m-inset-none-on-xl {
1117
- --pf-v5-c-toolbar--inset: 0;
1116
+ .pf-v5-c-toolbar.pf-m-inset-base-on-xl {
1117
+ --pf-v5-c-toolbar--inset: ;
1118
1118
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1119
1119
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1120
1120
  }
@@ -1145,8 +1145,8 @@
1145
1145
  }
1146
1146
  }
1147
1147
  @media (min-width: 1450px) {
1148
- .pf-v5-c-toolbar.pf-m-inset-none-on-2xl {
1149
- --pf-v5-c-toolbar--inset: 0;
1148
+ .pf-v5-c-toolbar.pf-m-inset-base-on-2xl {
1149
+ --pf-v5-c-toolbar--inset: ;
1150
1150
  --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
1151
1151
  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
1152
1152
  }
package/components/_all.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  @import "./Card/card";
18
18
  @import "./Check/check";
19
19
  @import "./Chip/chip";
20
- @import "./ChipGroup/chip-group";
20
+ @import "./Chip/chip-group";
21
21
  @import "./ClipboardCopy/clipboard-copy";
22
22
  @import "./CodeBlock/code-block";
23
23
  @import "./CodeEditor/code-editor";
@@ -65,7 +65,6 @@
65
65
  @import "./Progress/progress";
66
66
  @import "./ProgressStepper/progress-stepper";
67
67
  @import "./Radio/radio";
68
- @import "./SearchInput/search-input";
69
68
  @import "./Select/select";
70
69
  @import "./Sidebar/sidebar";
71
70
  @import "./SimpleList/simple-list";
package/docs/components/AppLauncher/examples/application-launcher.md CHANGED
@@ -466,17 +466,18 @@ cssPrefix: pf-v5-c-app-launcher
466
466
  </button>
467
467
  <div class="pf-v5-c-app-launcher__menu">
468
468
  <div class="pf-v5-c-app-launcher__menu-search">
469
- <div class="pf-v5-c-search-input">
470
- <div class="pf-v5-c-search-input__bar">
471
- <span class="pf-v5-c-search-input__text">
472
- <span class="pf-v5-c-search-input__icon">
473
- <i class="fas fa-search fa-fw" aria-hidden="true"></i>
469
+ <div class="pf-v5-c-text-input-group">
470
+ <div class="pf-v5-c-text-input-group__main pf-m-icon">
471
+ <span class="pf-v5-c-text-input-group__text">
472
+ <span class="pf-v5-c-text-input-group__icon">
473
+ <i class="fas fa-fw fa-search"></i>
474
474
  </span>
475
475
  <input
476
- class="pf-v5-c-search-input__text-input"
476
+ class="pf-v5-c-text-input-group__text-input"
477
477
  type="text"
478
478
  placeholder="Search"
479
- aria-label="Search"
479
+ value
480
+ aria-label="Search input"
480
481
  />
481
482
  </span>
482
483
  </div>