@patternfly/patternfly 4.179.1 → 4.180.0

package/components/Dropdown/dropdown.css

@@ -111,8 +111,8 @@
   --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
-  --pf-c-dropdown__toggle-image--MarginTop: var(--pf-global--spacer--xs);
-  --pf-c-dropdown__toggle-image--MarginBottom: var(--pf-global--spacer--xs);
+  --pf-c-dropdown__toggle-image--MarginTop: 0;
+  --pf-c-dropdown__toggle-image--MarginBottom: 0;
   --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -394,9 +394,11 @@
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
   flex-shrink: 0;
+  align-self: center;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
+  line-height: 1;
 }
 .pf-c-dropdown__toggle-image:last-child {
   --pf-c-dropdown__toggle-image--MarginRight: 0;

package/components/Dropdown/dropdown.scss

@@ -142,8 +142,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
 
   // Image
-  --pf-c-dropdown__toggle-image--MarginTop: var(--pf-global--spacer--xs);
-  --pf-c-dropdown__toggle-image--MarginBottom: var(--pf-global--spacer--xs);
+  --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change
+  --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change
   --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
 
   // Divider
@@ -537,9 +537,11 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
   flex-shrink: 0;
+  align-self: center;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
+  line-height: 1;
 
   &:last-child {
     --pf-c-dropdown__toggle-image--MarginRight: 0;

package/components/FormControl/form-control.scss

@@ -13,6 +13,7 @@ $pf-c-form-control__select--Coordinates: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1
 $pf-c-form-control__select--ViewBox: "320" !default;
 
 // Input - search
+// Remove at breaking change
 $pf-c-form-control--m-search--Color: $pf-global--icon--Color--light !default;
 $pf-c-form-control--m-search--Coordinates: "M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" !default;
 
@@ -116,6 +117,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   --pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background); // remove in breaking change
 
   // Input m-search
+  // Remove at breaking change
   --pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl);
   --pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);
   --pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);
@@ -308,6 +310,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
     }
   }
 
+  // Remove at breaking change
   &.pf-m-search {
     --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--m-search--PaddingLeft);
 

package/components/MenuToggle/menu-toggle.css

@@ -64,7 +64,6 @@
   --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
   --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -212,7 +211,11 @@
 }
 
 .pf-c-menu-toggle__icon {
+  display: inline-flex;
+  align-self: center;
+  flex-shrink: 0;
   margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
+  line-height: 1;
 }
 
 .pf-c-menu-toggle__text {

package/components/MenuToggle/menu-toggle.scss

@@ -87,9 +87,6 @@
   // Icon
   --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
 
-  // Image
-  --pf-c-menu-toggle__image--MarginRight: var(--pf-global--spacer--sm);
-
   // Count
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
 
@@ -279,7 +276,11 @@
 }
 
 .pf-c-menu-toggle__icon {
+  display: inline-flex;
+  align-self: center;
+  flex-shrink: 0;
   margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
+  line-height: 1;
 }
 
 .pf-c-menu-toggle__text {

package/components/SearchInput/search-input.css

@@ -42,6 +42,7 @@
   --pf-c-search-input__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
   position: relative;
+  width: 100%;
 }
 
 .pf-c-search-input__bar {

package/components/SearchInput/search-input.scss

@@ -56,6 +56,7 @@
   --pf-c-search-input__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
   position: relative;
+  width: 100%;
 }
 
 .pf-c-search-input__bar {

package/components/Select/select.css

@@ -23,7 +23,7 @@
   --pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-select__toggle--before--BorderWidth: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
+  --pf-c-select__toggle--before--BorderWidth: initial;
   --pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
   --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
@@ -234,6 +234,7 @@
   border: 0;
 }
 .pf-c-select__toggle::before {
+  --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth);
   position: absolute;
   top: 0;
   right: 0;
@@ -242,7 +243,7 @@
   content: "";
   border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
   border-style: solid;
-  border-width: var(--pf-c-select__toggle--before--BorderWidth);
+  border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
 }
 .pf-c-select__toggle:hover {
   --pf-c-select__toggle--before--BorderBottomColor: var(--pf-c-select__toggle--hover--before--BorderBottomColor);

package/components/Select/select.scss

@@ -15,7 +15,7 @@
   --pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-select__toggle--before--BorderWidth: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth); // remove at breaking change
+  --pf-c-select__toggle--before--BorderWidth: initial; // remove at breaking change
   --pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300);
   --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
@@ -292,6 +292,8 @@
   }
 
   &::before {
+    --pf-c-select__toggle--before--BorderWidth-base: var(--pf-c-select__toggle--before--BorderTopWidth) var(--pf-c-select__toggle--before--BorderRightWidth) var(--pf-c-select__toggle--before--BorderBottomWidth) var(--pf-c-select__toggle--before--BorderLeftWidth); // remove at breaking change
+
     position: absolute;
     top: 0;
     right: 0;
@@ -300,7 +302,7 @@
     content: "";
     border-color: var(--pf-c-select__toggle--before--BorderTopColor) var(--pf-c-select__toggle--before--BorderRightColor) var(--pf-c-select__toggle--before--BorderBottomColor) var(--pf-c-select__toggle--before--BorderLeftColor);
     border-style: solid;
-    border-width: var(--pf-c-select__toggle--before--BorderWidth);
+    border-width: var(--pf-c-select__toggle--before--BorderWidth, var(--pf-c-select__toggle--before--BorderWidth-base));
   }
 
   &:hover {

package/docs/components/AppLauncher/examples/application-launcher.md

@@ -413,14 +413,21 @@ cssPrefix: pf-c-app-launcher
   </button>
   <div class="pf-c-app-launcher__menu">
     <div class="pf-c-app-launcher__menu-search">
-      <input
-        class="pf-c-form-control"
-        type="search"
-        aria-label="Type to filter"
-        placeholder="Filter by name..."
-        id="app-launcher-favorites-text-input"
-        name="textInput1"
-      />
+      <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>
     <section class="pf-c-app-launcher__group">
       <h1 class="pf-c-app-launcher__group-title">Favorites</h1>

package/docs/components/ContextSelector/examples/context-selector.md

@@ -24,23 +24,20 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          type="search"
-          placeholder="Search"
-          id="textInput1"
-          name="textInput1"
-          aria-labelledby="context-selector-collapsed-example-search-button"
-        />
-        <button
-          class="pf-c-button pf-m-control"
-          type="button"
-          id="context-selector-collapsed-example-search-button"
-          aria-label="Search menu items"
-        >
-          <i class="fas fa-search" aria-hidden="true"></i>
-        </button>
+      <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>
     <ul class="pf-c-context-selector__menu-list">
@@ -141,23 +138,20 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          type="search"
-          placeholder="Search"
-          id="textInput2"
-          name="textInput2"
-          aria-labelledby="context-selector-expanded-example-search-button"
-        />
-        <button
-          class="pf-c-button pf-m-control"
-          type="button"
-          id="context-selector-expanded-example-search-button"
-          aria-label="Search menu items"
-        >
-          <i class="fas fa-search" aria-hidden="true"></i>
-        </button>
+      <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>
     <ul class="pf-c-context-selector__menu-list">
@@ -266,23 +260,20 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          type="search"
-          placeholder="Search"
-          id="textInput1"
-          name="textInput1"
-          aria-labelledby="context-selector-plain-with-text-collapsed-example-search-button"
-        />
-        <button
-          class="pf-c-button pf-m-control"
-          type="button"
-          id="context-selector-plain-with-text-collapsed-example-search-button"
-          aria-label="Search menu items"
-        >
-          <i class="fas fa-search" aria-hidden="true"></i>
-        </button>
+      <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>
     <ul class="pf-c-context-selector__menu-list">
@@ -386,23 +377,20 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          type="search"
-          placeholder="Search"
-          id="textInput2"
-          name="textInput2"
-          aria-labelledby="context-selector-plain-with-text-expanded-example-search-button"
-        />
-        <button
-          class="pf-c-button pf-m-control"
-          type="button"
-          id="context-selector-plain-with-text-expanded-example-search-button"
-          aria-label="Search menu items"
-        >
-          <i class="fas fa-search" aria-hidden="true"></i>
-        </button>
+      <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>
     <ul class="pf-c-context-selector__menu-list">
@@ -508,23 +496,20 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          type="search"
-          placeholder="Search"
-          id="context-selector-with-footer-example-textInput3"
-          name="textInput3"
-          aria-labelledby="context-selector-with-footer-example-search-button"
-        />
-        <button
-          class="pf-c-button pf-m-control"
-          type="button"
-          id="context-selector-with-footer-example-search-button"
-          aria-label="Search menu items"
-        >
-          <i class="fas fa-search" aria-hidden="true"></i>
-        </button>
+      <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>
     <ul class="pf-c-context-selector__menu-list">
@@ -632,23 +617,20 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-input-group">
-        <input
-          class="pf-c-form-control"
-          type="search"
-          placeholder="Search"
-          id="context-selector-with-footer-example-two-textInput3"
-          name="textInput3"
-          aria-labelledby="context-selector-with-footer-example-two-search-button"
-        />
-        <button
-          class="pf-c-button pf-m-control"
-          type="button"
-          id="context-selector-with-footer-example-two-search-button"
-          aria-label="Search menu items"
-        >
-          <i class="fas fa-search" aria-hidden="true"></i>
-        </button>
+      <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>
     <ul class="pf-c-context-selector__menu-list">