@patternfly/patternfly 5.0.0-alpha.14 → 5.0.0-alpha.19

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 (159) hide show
  1. package/assets/pficon/pficon.woff +0 -0
  2. package/assets/pficon/pficon.woff2 +0 -0
  3. package/components/Accordion/accordion.css +2 -0
  4. package/components/Accordion/accordion.scss +2 -0
  5. package/components/AppLauncher/app-launcher.css +2 -0
  6. package/components/AppLauncher/app-launcher.scss +2 -0
  7. package/components/Breadcrumb/breadcrumb.css +2 -0
  8. package/components/Breadcrumb/breadcrumb.scss +2 -0
  9. package/components/ContextSelector/context-selector.css +5 -1
  10. package/components/ContextSelector/context-selector.scss +6 -2
  11. package/components/DataList/data-list.css +2 -0
  12. package/components/DataList/data-list.scss +2 -0
  13. package/components/Drawer/drawer.css +13 -13
  14. package/components/Dropdown/dropdown.css +12 -10
  15. package/components/Dropdown/dropdown.scss +2 -0
  16. package/components/ExpandableSection/expandable-section.css +2 -0
  17. package/components/ExpandableSection/expandable-section.scss +2 -0
  18. package/components/Label/label.css +2 -0
  19. package/components/Label/label.scss +2 -0
  20. package/components/Login/login.css +1 -1
  21. package/components/Menu/menu.css +2 -0
  22. package/components/Menu/menu.scss +2 -0
  23. package/components/MenuToggle/menu-toggle.css +2 -0
  24. package/components/MenuToggle/menu-toggle.scss +2 -0
  25. package/components/Page/page.css +60 -60
  26. package/components/Pagination/pagination.css +2 -2
  27. package/components/Progress/progress.css +5 -2
  28. package/components/Progress/progress.scss +5 -2
  29. package/components/SearchInput/search-input.css +2 -0
  30. package/components/SearchInput/search-input.scss +2 -0
  31. package/components/Table/table-grid.css +28 -28
  32. package/components/Table/table-tree-view.css +4 -4
  33. package/components/TextInputGroup/text-input-group.css +4 -2
  34. package/components/TextInputGroup/text-input-group.scss +4 -3
  35. package/components/Toolbar/toolbar.css +35 -35
  36. package/components/TreeView/tree-view.css +7 -15
  37. package/components/TreeView/tree-view.scss +7 -18
  38. package/components/Wizard/wizard.css +2 -0
  39. package/components/Wizard/wizard.scss +2 -0
  40. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  41. package/docs/components/Accordion/examples/Accordion.md +12 -12
  42. package/docs/components/ActionList/examples/ActionList.md +6 -6
  43. package/docs/components/Alert/examples/Alert.md +19 -19
  44. package/docs/components/AlertGroup/examples/AlertGroup.md +10 -10
  45. package/docs/components/AppLauncher/examples/application-launcher.md +34 -34
  46. package/docs/components/Avatar/examples/Avatar.md +11 -11
  47. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  48. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  49. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  50. package/docs/components/Badge/examples/Badge.md +5 -5
  51. package/docs/components/Banner/examples/Banner.md +8 -8
  52. package/docs/components/Brand/examples/Brand.md +9 -9
  53. package/docs/components/Breadcrumb/examples/Breadcrumb.md +15 -15
  54. package/docs/components/Button/examples/Button.md +35 -35
  55. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  56. package/docs/components/Card/examples/Card.md +27 -27
  57. package/docs/components/Check/examples/Check.md +13 -13
  58. package/docs/components/Chip/examples/Chip.md +13 -13
  59. package/docs/components/ChipGroup/examples/ChipGroup.md +15 -15
  60. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  61. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  62. package/docs/components/CodeEditor/examples/CodeEditor.md +56 -33
  63. package/docs/components/Content/examples/Content.md +10 -10
  64. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  65. package/docs/components/ContextSelector/examples/context-selector.md +80 -74
  66. package/docs/components/DataList/examples/DataList.md +83 -83
  67. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  68. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  69. package/docs/components/Divider/examples/Divider.md +9 -9
  70. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  71. package/docs/components/Drawer/examples/Drawer.md +43 -43
  72. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  73. package/docs/components/Dropdown/examples/Dropdown.md +50 -50
  74. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  75. package/docs/components/EmptyState/examples/EmptyState.md +19 -19
  76. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  77. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  78. package/docs/components/Form/examples/Form.md +64 -64
  79. package/docs/components/FormControl/examples/FormControl.md +20 -20
  80. package/docs/components/HelperText/examples/HelperText.md +11 -11
  81. package/docs/components/Hint/examples/Hint.md +7 -7
  82. package/docs/components/Icon/examples/Icon.md +10 -10
  83. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  84. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  85. package/docs/components/JumpLinks/examples/JumpLinks.md +21 -21
  86. package/docs/components/Label/examples/Label.md +31 -31
  87. package/docs/components/LabelGroup/examples/LabelGroup.md +22 -22
  88. package/docs/components/List/examples/List.md +6 -6
  89. package/docs/components/LogViewer/examples/LogViewer.md +69 -69
  90. package/docs/components/Login/examples/Login.md +22 -22
  91. package/docs/components/Masthead/examples/masthead.md +9 -9
  92. package/docs/components/Menu/examples/Menu.md +78 -76
  93. package/docs/components/MenuToggle/examples/MenuToggle.md +24 -24
  94. package/docs/components/ModalBox/examples/ModalBox.md +35 -35
  95. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +22 -22
  96. package/docs/components/Nav/examples/Navigation.md +36 -36
  97. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  98. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +39 -39
  99. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  100. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  101. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  102. package/docs/components/Page/examples/Page.md +54 -54
  103. package/docs/components/Pagination/examples/Pagination.md +27 -27
  104. package/docs/components/Panel/examples/Panel.md +10 -10
  105. package/docs/components/Popover/examples/Popover.md +34 -34
  106. package/docs/components/Progress/examples/Progress.md +31 -60
  107. package/docs/components/ProgressStepper/examples/ProgressStepper.md +24 -24
  108. package/docs/components/Radio/examples/Radio.md +11 -11
  109. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  110. package/docs/components/Select/examples/Select.md +143 -143
  111. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  112. package/docs/components/SimpleList/examples/SimpleList.md +11 -11
  113. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  114. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  115. package/docs/components/Slider/examples/Slider.md +24 -24
  116. package/docs/components/Spinner/examples/Spinner.md +24 -24
  117. package/docs/components/Switch/examples/Switch.md +19 -19
  118. package/docs/components/TabContent/examples/TabContent.md +13 -13
  119. package/docs/components/Table/examples/Table.md +155 -155
  120. package/docs/components/Tabs/examples/Tabs.md +47 -47
  121. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
  122. package/docs/components/Tile/examples/Tile.md +15 -15
  123. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  124. package/docs/components/Title/examples/Title.md +17 -17
  125. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  126. package/docs/components/Toolbar/examples/Toolbar.md +113 -113
  127. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  128. package/docs/components/TreeView/examples/TreeView.md +34 -34
  129. package/docs/components/Truncate/examples/Truncate.md +4 -4
  130. package/docs/components/Wizard/examples/Wizard.md +47 -51
  131. package/docs/demos/DataList/examples/DataList.md +4 -4
  132. package/docs/demos/Masthead/examples/Masthead.md +6 -6
  133. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6 -6
  134. package/docs/demos/Table/examples/Table.md +22 -22
  135. package/docs/demos/Toolbar/examples/Toolbar.md +8 -8
  136. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  137. package/docs/layouts/Flex/examples/Flex.md +98 -98
  138. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  139. package/docs/layouts/Grid/examples/Grid.md +9 -9
  140. package/docs/layouts/Level/examples/Level.md +5 -5
  141. package/docs/layouts/Split/examples/Split.md +7 -7
  142. package/docs/layouts/Stack/examples/Stack.md +6 -6
  143. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  144. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  145. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  146. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  147. package/docs/utilities/Display/examples/Display.md +11 -11
  148. package/docs/utilities/Flex/examples/Flex.md +34 -34
  149. package/docs/utilities/Float/examples/Float.md +4 -4
  150. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  151. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  152. package/docs/utilities/Text/examples/Text.md +27 -27
  153. package/icons/{pf-icons.json → pf-icons.mjs} +1 -1
  154. package/layouts/Grid/grid.css +5 -5
  155. package/package.json +56 -61
  156. package/patternfly-no-reset.css +201 -178
  157. package/patternfly.css +201 -178
  158. package/patternfly.min.css +1 -1
  159. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -547,24 +547,24 @@
547
547
  }
548
548
  @media (min-height: 0) {
549
549
  .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
550
- .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
551
- .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
552
- .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
553
- .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
554
- .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
555
- .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
550
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
551
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
552
+ .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
553
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
554
+ .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
555
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
556
556
  position: sticky;
557
557
  top: 0;
558
558
  z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
559
559
  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
560
560
  }
561
561
  .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
562
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
563
- .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
564
- .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
565
- .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
566
- .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
567
- .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
562
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
563
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
564
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
565
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
566
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
567
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
568
568
  position: sticky;
569
569
  bottom: 0;
570
570
  z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -573,24 +573,24 @@
573
573
  }
574
574
  @media (min-height: 40rem) {
575
575
  .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
576
- .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
577
- .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
578
- .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
579
- .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
580
- .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
581
- .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
576
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
577
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
578
+ .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
579
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
580
+ .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
581
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
582
582
  position: sticky;
583
583
  top: 0;
584
584
  z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
585
585
  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
586
586
  }
587
587
  .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
588
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
589
- .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
590
- .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
591
- .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
592
- .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
593
- .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
588
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
589
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
590
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
591
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
592
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
593
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
594
594
  position: sticky;
595
595
  bottom: 0;
596
596
  z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -599,24 +599,24 @@
599
599
  }
600
600
  @media (min-height: 48rem) {
601
601
  .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
602
- .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
603
- .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
604
- .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
605
- .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
606
- .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
607
- .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
602
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
603
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
604
+ .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
605
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
606
+ .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
607
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
608
608
  position: sticky;
609
609
  top: 0;
610
610
  z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
611
611
  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
612
612
  }
613
613
  .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
614
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
615
- .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
616
- .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
617
- .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
618
- .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
619
- .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
614
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
615
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
616
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
617
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
618
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
619
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
620
620
  position: sticky;
621
621
  bottom: 0;
622
622
  z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -625,24 +625,24 @@
625
625
  }
626
626
  @media (min-height: 60rem) {
627
627
  .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
628
- .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
629
- .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
630
- .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
631
- .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
632
- .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
633
- .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
628
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
629
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
630
+ .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
631
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
632
+ .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
633
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
634
634
  position: sticky;
635
635
  top: 0;
636
636
  z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
637
637
  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
638
638
  }
639
639
  .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
640
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
641
- .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
642
- .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
643
- .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
644
- .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
645
- .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
640
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
641
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
642
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
643
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
644
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
645
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
646
646
  position: sticky;
647
647
  bottom: 0;
648
648
  z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -651,24 +651,24 @@
651
651
  }
652
652
  @media (min-height: 80rem) {
653
653
  .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
654
- .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
655
- .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
656
- .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
657
- .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
658
- .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
659
- .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
654
+ .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
655
+ .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
656
+ .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
657
+ .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
658
+ .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
659
+ .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
660
660
  position: sticky;
661
661
  top: 0;
662
662
  z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
663
663
  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
664
664
  }
665
665
  .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
666
- .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
667
- .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
668
- .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
669
- .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
670
- .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
671
- .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
666
+ .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
667
+ .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
668
+ .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
669
+ .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
670
+ .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
671
+ .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
672
672
  position: sticky;
673
673
  bottom: 0;
674
674
  z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
package/components/Pagination/pagination.css CHANGED
@@ -145,8 +145,8 @@
145
145
  padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
146
146
  }
147
147
  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
148
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
149
- .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
148
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
149
+ .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
150
150
  display: block;
151
151
  }
152
152
  .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
package/components/Progress/progress.css CHANGED
@@ -4,8 +4,8 @@
4
4
  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
5
5
  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
6
6
  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
7
+ --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
7
8
  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
8
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
9
9
  --pf-c-progress__bar--before--Opacity: .2;
10
10
  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
11
11
  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -118,14 +118,17 @@
118
118
  }
119
119
 
120
120
  .pf-c-progress__status {
121
+ display: flex;
122
+ align-items: flex-start;
123
+ justify-content: flex-end;
121
124
  grid-column: 2/3;
122
125
  grid-row: 1/2;
123
126
  text-align: right;
124
127
  word-break: break-word;
128
+ gap: var(--pf-c-progress__status--Gap);
125
129
  }
126
130
 
127
131
  .pf-c-progress__status-icon {
128
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
129
132
  color: var(--pf-c-progress__status-icon--Color);
130
133
  }
131
134
 
package/components/Progress/progress.scss CHANGED
@@ -7,8 +7,8 @@
7
7
  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
8
8
  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100); // the bar always needs white under it so that the semi-transparent color shows correctly
9
9
  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
10
+ --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
10
11
  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100); // the status icon default color is the default text color
11
- --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
12
12
  --pf-c-progress__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
13
13
  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
14
14
  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -158,15 +158,18 @@
158
158
 
159
159
  // the progress__status is displayed in the upper right
160
160
  .pf-c-progress__status {
161
+ display: flex;
162
+ align-items: flex-start;
163
+ justify-content: flex-end;
161
164
  grid-column: 2 / 3;
162
165
  grid-row: 1 / 2;
163
166
  text-align: right;
164
167
  word-break: break-word;
168
+ gap: var(--pf-c-progress__status--Gap);
165
169
  }
166
170
 
167
171
  // the progress__status-icon is an icon displayed always in the upper right
168
172
  .pf-c-progress__status-icon {
169
- margin-left: var(--pf-c-progress__status-icon--MarginLeft);
170
173
  color: var(--pf-c-progress__status-icon--Color);
171
174
  }
172
175
 
package/components/SearchInput/search-input.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
13
13
  --pf-c-search-input__text-input--MinWidth: 6ch;
14
14
  --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
15
+ --pf-c-search-input__text-input--BackgroundColor: transparent;
15
16
  --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
16
17
  --pf-c-search-input__icon--Color: var(--pf-global--Color--200);
17
18
  --pf-c-search-input__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -99,6 +100,7 @@
99
100
  width: 100%;
100
101
  min-width: var(--pf-c-search-input__text-input--MinWidth);
101
102
  padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
103
+ background-color: var(--pf-c-search-input__text-input--BackgroundColor);
102
104
  border: 0;
103
105
  }
104
106
  .pf-c-search-input__text-input, .pf-c-search-input__text-input.pf-m-hint {
package/components/SearchInput/search-input.scss CHANGED
@@ -17,6 +17,7 @@
17
17
  --pf-c-search-input__text-input--PaddingLeft: var(--pf-global--spacer--xl);
18
18
  --pf-c-search-input__text-input--MinWidth: 6ch;
19
19
  --pf-c-search-input__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
20
+ --pf-c-search-input__text-input--BackgroundColor: transparent;
20
21
 
21
22
  // Icon
22
23
  --pf-c-search-input__icon--Left: var(--pf-global--spacer--sm);
@@ -120,6 +121,7 @@
120
121
  width: 100%;
121
122
  min-width: var(--pf-c-search-input__text-input--MinWidth);
122
123
  padding: var(--pf-c-search-input__text-input--PaddingTop) var(--pf-c-search-input__text-input--PaddingRight) var(--pf-c-search-input__text-input--PaddingBottom) var(--pf-c-search-input__text-input--PaddingLeft);
124
+ background-color: var(--pf-c-search-input__text-input--BackgroundColor);
123
125
  border: 0;
124
126
 
125
127
  &,
package/components/Table/table-grid.css CHANGED
@@ -418,7 +418,7 @@
418
418
  border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
419
419
  }
420
420
  .pf-m-grid-md.pf-c-table tr:last-child,
421
- .pf-m-grid-md.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
421
+ .pf-m-grid-md.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
422
422
  border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
423
423
  }
424
424
  .pf-m-grid-md.pf-c-table tbody.pf-m-expanded {
@@ -563,7 +563,7 @@
563
563
  --pf-c-table--tbody--after--BorderLeftColor: transparent;
564
564
  }
565
565
  .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable,
566
- .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr {
566
+ .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr {
567
567
  position: relative;
568
568
  }
569
569
  .pf-m-grid-md.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -593,9 +593,9 @@
593
593
  background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
594
594
  }
595
595
  .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
596
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
597
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
598
- .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
596
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
597
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
598
+ .pf-m-grid-md.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
599
599
  width: auto;
600
600
  padding: 0;
601
601
  }
@@ -615,8 +615,8 @@
615
615
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
616
616
  }
617
617
  .pf-m-grid-md.pf-c-table .pf-c-table__check,
618
- .pf-m-grid-md.pf-c-table .pf-c-table__favorite,
619
- .pf-m-grid-md.pf-c-table .pf-c-table__action {
618
+ .pf-m-grid-md.pf-c-table .pf-c-table__favorite,
619
+ .pf-m-grid-md.pf-c-table .pf-c-table__action {
620
620
  grid-row-start: 1;
621
621
  grid-column-start: 2;
622
622
  }
@@ -733,7 +733,7 @@
733
733
  border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
734
734
  }
735
735
  .pf-m-grid-lg.pf-c-table tr:last-child,
736
- .pf-m-grid-lg.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
736
+ .pf-m-grid-lg.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
737
737
  border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
738
738
  }
739
739
  .pf-m-grid-lg.pf-c-table tbody.pf-m-expanded {
@@ -878,7 +878,7 @@
878
878
  --pf-c-table--tbody--after--BorderLeftColor: transparent;
879
879
  }
880
880
  .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable,
881
- .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr {
881
+ .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr {
882
882
  position: relative;
883
883
  }
884
884
  .pf-m-grid-lg.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -908,9 +908,9 @@
908
908
  background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
909
909
  }
910
910
  .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
911
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
912
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
913
- .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
911
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
912
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
913
+ .pf-m-grid-lg.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
914
914
  width: auto;
915
915
  padding: 0;
916
916
  }
@@ -930,8 +930,8 @@
930
930
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
931
931
  }
932
932
  .pf-m-grid-lg.pf-c-table .pf-c-table__check,
933
- .pf-m-grid-lg.pf-c-table .pf-c-table__favorite,
934
- .pf-m-grid-lg.pf-c-table .pf-c-table__action {
933
+ .pf-m-grid-lg.pf-c-table .pf-c-table__favorite,
934
+ .pf-m-grid-lg.pf-c-table .pf-c-table__action {
935
935
  grid-row-start: 1;
936
936
  grid-column-start: 2;
937
937
  }
@@ -1048,7 +1048,7 @@
1048
1048
  border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1049
1049
  }
1050
1050
  .pf-m-grid-xl.pf-c-table tr:last-child,
1051
- .pf-m-grid-xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
1051
+ .pf-m-grid-xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
1052
1052
  border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
1053
1053
  }
1054
1054
  .pf-m-grid-xl.pf-c-table tbody.pf-m-expanded {
@@ -1193,7 +1193,7 @@
1193
1193
  --pf-c-table--tbody--after--BorderLeftColor: transparent;
1194
1194
  }
1195
1195
  .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable,
1196
- .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr {
1196
+ .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr {
1197
1197
  position: relative;
1198
1198
  }
1199
1199
  .pf-m-grid-xl.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -1223,9 +1223,9 @@
1223
1223
  background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
1224
1224
  }
1225
1225
  .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
1226
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
1227
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
1228
- .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
1226
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
1227
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
1228
+ .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
1229
1229
  width: auto;
1230
1230
  padding: 0;
1231
1231
  }
@@ -1245,8 +1245,8 @@
1245
1245
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
1246
1246
  }
1247
1247
  .pf-m-grid-xl.pf-c-table .pf-c-table__check,
1248
- .pf-m-grid-xl.pf-c-table .pf-c-table__favorite,
1249
- .pf-m-grid-xl.pf-c-table .pf-c-table__action {
1248
+ .pf-m-grid-xl.pf-c-table .pf-c-table__favorite,
1249
+ .pf-m-grid-xl.pf-c-table .pf-c-table__action {
1250
1250
  grid-row-start: 1;
1251
1251
  grid-column-start: 2;
1252
1252
  }
@@ -1363,7 +1363,7 @@
1363
1363
  border-bottom: var(--pf-c-table-tr--responsive--border-width--base) solid var(--pf-c-table--responsive--BorderColor);
1364
1364
  }
1365
1365
  .pf-m-grid-2xl.pf-c-table tr:last-child,
1366
- .pf-m-grid-2xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
1366
+ .pf-m-grid-2xl.pf-c-table tbody:last-of-type:not(:only-of-type) > tr {
1367
1367
  border-bottom-width: var(--pf-c-table-tr--responsive--last-child--BorderBottomWidth);
1368
1368
  }
1369
1369
  .pf-m-grid-2xl.pf-c-table tbody.pf-m-expanded {
@@ -1508,7 +1508,7 @@
1508
1508
  --pf-c-table--tbody--after--BorderLeftColor: transparent;
1509
1509
  }
1510
1510
  .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable,
1511
- .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr {
1511
+ .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr {
1512
1512
  position: relative;
1513
1513
  }
1514
1514
  .pf-m-grid-2xl.pf-c-table tbody.pf-m-hoverable > tr::after {
@@ -1538,9 +1538,9 @@
1538
1538
  background-color: var(--pf-c-table--tr--m-selected--after--BorderLeftColor);
1539
1539
  }
1540
1540
  .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__toggle,
1541
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
1542
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
1543
- .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
1541
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__check,
1542
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__favorite,
1543
+ .pf-m-grid-2xl.pf-c-table tr:not(.pf-c-table__expandable-row) .pf-c-table__action {
1544
1544
  width: auto;
1545
1545
  padding: 0;
1546
1546
  }
@@ -1560,8 +1560,8 @@
1560
1560
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--m-grid--cell--PaddingLeft);
1561
1561
  }
1562
1562
  .pf-m-grid-2xl.pf-c-table .pf-c-table__check,
1563
- .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite,
1564
- .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
1563
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__favorite,
1564
+ .pf-m-grid-2xl.pf-c-table .pf-c-table__action {
1565
1565
  grid-row-start: 1;
1566
1566
  grid-column-start: 2;
1567
1567
  }
package/components/Table/table-tree-view.css CHANGED
@@ -311,7 +311,7 @@
311
311
  display: block;
312
312
  }
313
313
  .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle,
314
- .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
314
+ .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
315
315
  display: inline-block;
316
316
  }
317
317
  .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
@@ -452,7 +452,7 @@
452
452
  display: block;
453
453
  }
454
454
  .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle,
455
- .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
455
+ .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
456
456
  display: inline-block;
457
457
  }
458
458
  .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
@@ -593,7 +593,7 @@
593
593
  display: block;
594
594
  }
595
595
  .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle,
596
- .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
596
+ .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
597
597
  display: inline-block;
598
598
  }
599
599
  .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
@@ -734,7 +734,7 @@
734
734
  display: block;
735
735
  }
736
736
  .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle,
737
- .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
737
+ .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
738
738
  display: inline-block;
739
739
  }
740
740
  .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -20,7 +20,8 @@
20
20
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
21
21
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
22
22
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
23
- --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
23
+ --pf-c-text-input-group__text-input--placeholder--Color: var(--pf-global--Color--dark-200);
24
+ --pf-c-text-input-group__text-input--BackgroundColor: transparent;
24
25
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
25
26
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
26
27
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -120,6 +121,7 @@
120
121
  width: 100%;
121
122
  min-width: var(--pf-c-text-input-group__text-input--MinWidth);
122
123
  padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
124
+ background-color: var(--pf-c-text-input-group__text-input--BackgroundColor);
123
125
  border: 0;
124
126
  }
125
127
  .pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
@@ -129,7 +131,7 @@
129
131
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
130
132
  }
131
133
  .pf-c-text-input-group__text-input::placeholder {
132
- color: var(--pf-c-text-input-group--placeholder--Color);
134
+ color: var(--pf-c-text-input-group__text-input--placeholder--Color);
133
135
  }
134
136
 
135
137
  .pf-c-text-input-group__utilities {
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  .pf-c-text-input-group {
2
- // Component
3
2
  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
4
3
 
5
4
  // Base border
@@ -31,7 +30,8 @@
31
30
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
32
31
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
33
32
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200); // matches placeholder text color
34
- --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
33
+ --pf-c-text-input-group__text-input--placeholder--Color: var(--pf-global--Color--dark-200);
34
+ --pf-c-text-input-group__text-input--BackgroundColor: transparent;
35
35
 
36
36
  // Icon
37
37
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
@@ -155,6 +155,7 @@
155
155
  width: 100%;
156
156
  min-width: var(--pf-c-text-input-group__text-input--MinWidth);
157
157
  padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
158
+ background-color: var(--pf-c-text-input-group__text-input--BackgroundColor);
158
159
  border: 0;
159
160
 
160
161
  &,
@@ -167,7 +168,7 @@
167
168
  }
168
169
 
169
170
  &::placeholder {
170
- color: var(--pf-c-text-input-group--placeholder--Color);
171
+ color: var(--pf-c-text-input-group__text-input--placeholder--Color);
171
172
  }
172
173
  }
173
174