@patternfly/patternfly 4.179.2 → 4.180.1

package/docs/components/Page/examples/Page.md

@@ -136,7 +136,7 @@ wrapperTag: div
 
 ```
 
-### Centered content
+### Centered section
 
 ```html
 <div class="pf-c-page">
@@ -149,7 +149,16 @@ wrapperTag: div
   </header>
   <main class="pf-c-page__main" tabindex="-1">
     <section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
-      <div class="pf-c-page__main-body">Page section width limited, centered.</div>
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-card">
+          <div class="pf-c-card__body">
+            When a width limited page section is wider than the value of
+            <code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
+            <br />
+            <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
+          </div>
+        </div>
+      </div>
     </section>
   </main>
 </div>

package/docs/components/Select/examples/Select.md

@@ -1849,13 +1849,21 @@ The multiselect should be used when the user is selecting multiple items from a
 
   <div class="pf-c-select__menu">
     <div class="pf-c-select__menu-search">
-      <input
-        class="pf-c-form-control pf-m-search"
-        type="search"
-        id="select-checkbox-expanded-selected-filter-example-search-input"
-        name="select-checkbox-expanded-selected-filter-example-search-input"
-        aria-label="Search"
-      />
+      <div class="pf-c-search-input">
+        <div class="pf-c-search-input__bar">
+          <span class="pf-c-search-input__text">
+            <span class="pf-c-search-input__icon">
+              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+            </span>
+            <input
+              class="pf-c-search-input__text-input"
+              type="text"
+              placeholder="Search"
+              aria-label="Search"
+            />
+          </span>
+        </div>
+      </div>
     </div>
     <hr class="pf-c-divider" />
     <div class="pf-c-select__menu-group">
@@ -2730,13 +2738,21 @@ The plain select variation should be used when you do not want a border applied
 
   <div class="pf-c-select__menu" aria-labelledby="select-favorites-label">
     <div class="pf-c-select__menu-search">
-      <input
-        class="pf-c-form-control pf-m-search"
-        type="search"
-        id="select-favorites-search-input"
-        name="select-favorites-search-input"
-        aria-label="Search"
-      />
+      <div class="pf-c-search-input">
+        <div class="pf-c-search-input__bar">
+          <span class="pf-c-search-input__text">
+            <span class="pf-c-search-input__icon">
+              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+            </span>
+            <input
+              class="pf-c-search-input__text-input"
+              type="text"
+              placeholder="Search"
+              aria-label="Search"
+            />
+          </span>
+        </div>
+      </div>
     </div>
     <hr class="pf-c-divider" />
     <div class="pf-c-select__menu-group">

package/docs/components/Table/examples/Table.md

@@ -19965,6 +19965,14 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
 
 ## Sticky table modifiers
 
+**Note:** Sticky table headers and columns have a higher `z-index` than the `z-index` used for menus (dropdown, select, etc). The intent is that the contents of a scrollable table will scroll under the sticky header/column, including any expanded menus. However, there may be use cases where a menu needs to appear on top of a sticky header/column, such as an expanded menu in a toolbar above a table with a sticky header.
+
+There are a few ways this can be handled:
+
+-   Manipulate the `z-index` of the menu and/or table headers/columns manually.
+-   Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
+-   In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index`  than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
+
 ### Sticky header
 
 ```html