@patternfly/patternfly 4.216.3 → 4.217.0

package/components/Button/button.css

@@ -89,6 +89,12 @@
   --pf-c-button--m-link--m-inline--FontSize: inherit;
   --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-button--m-link--m-inline--PaddingTop: 0;
+  --pf-c-button--m-link--m-inline--PaddingRight: 0;
+  --pf-c-button--m-link--m-inline--PaddingBottom: 0;
+  --pf-c-button--m-link--m-inline--PaddingLeft: 0;
+  --pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
+  --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
   --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
   --pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100);
   --pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
@@ -287,8 +293,9 @@
 }
 .pf-c-button.pf-m-link.pf-m-inline {
   --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
+  --pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
   display: inline;
-  padding: 0;
+  padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
   text-align: left;
   white-space: normal;
   cursor: pointer;
@@ -454,6 +461,9 @@
   --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
   transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
 }
+.pf-c-button.pf-m-in-progress {
+  --pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
+}
 .pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
   --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
   --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);

package/components/Button/button.scss

@@ -112,6 +112,12 @@
   --pf-c-button--m-link--m-inline--FontSize: inherit;
   --pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   --pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover);
+  --pf-c-button--m-link--m-inline--PaddingTop: 0;
+  --pf-c-button--m-link--m-inline--PaddingRight: 0;
+  --pf-c-button--m-link--m-inline--PaddingBottom: 0;
+  --pf-c-button--m-link--m-inline--PaddingLeft: 0;
+  --pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs);
+  --pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm));
 
   // Link danger
   --pf-c-button--m-link--m-danger--BackgroundColor: transparent;
@@ -368,9 +374,10 @@
 
     &.pf-m-inline {
       --pf-c-button--FontSize: var(--pf-c-button--m-link--m-inline--FontSize);
+      --pf-c-button__progress--Left: var(--pf-c-button--m-link--m-inline__progress--Left);
 
       display: inline;
-      padding: 0;
+      padding: var(--pf-c-button--m-link--m-inline--PaddingTop) var(--pf-c-button--m-link--m-inline--PaddingRight) var(--pf-c-button--m-link--m-inline--PaddingBottom) var(--pf-c-button--m-link--m-inline--PaddingLeft);
       text-align: left;
       white-space: normal;
       cursor: pointer;
@@ -598,6 +605,8 @@
   }
 
   &.pf-m-in-progress {
+    --pf-c-button--m-link--m-inline--PaddingLeft: var(--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft);
+
     &:not(.pf-m-plain) {
       --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
       --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);

package/components/Spinner/spinner.css

@@ -7,10 +7,14 @@
   --pf-c-spinner--m-md--diameter: var(--pf-global--icon--FontSize--md);
   --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
   --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
+  --pf-c-spinner--m-inline--diameter: 1em;
   width: var(--pf-c-spinner--Width);
   height: var(--pf-c-spinner--Height);
   overflow: hidden;
 }
+.pf-c-spinner.pf-m-inline {
+  --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
+}
 .pf-c-spinner.pf-m-sm {
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
 }

package/components/Spinner/spinner.scss

@@ -12,11 +12,18 @@
   --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
   --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
 
+  // inline
+  --pf-c-spinner--m-inline--diameter: 1em;
+
   width: var(--pf-c-spinner--Width);
   height: var(--pf-c-spinner--Height);
   overflow: hidden;
 
   // Modifiers change the variables for size variations
+  &.pf-m-inline {
+    --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
+  }
+
   &.pf-m-sm {
     --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
   }

package/components/TextInputGroup/text-input-group.css

@@ -9,6 +9,11 @@
   --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
   --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-text-input-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -54,7 +59,8 @@
 .pf-c-text-input-group__main {
   display: flex;
   flex: 1;
-  gap: var(--pf-global--spacer--sm);
+  flex-wrap: wrap;
+  gap: var(--pf-c-text-input-group__main--RowGap) var(--pf-c-text-input-group__main--ColumnGap);
   min-width: 0;
 }
 .pf-c-text-input-group__main.pf-m-icon {
@@ -63,17 +69,10 @@
 .pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
   margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
 }
-.pf-c-text-input-group__main .pf-c-chip-group {
-  overflow: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
-  display: none;
-}
-.pf-c-text-input-group__main .pf-c-chip-group,
-.pf-c-text-input-group__main .pf-c-chip-group__list {
-  flex-wrap: nowrap;
+.pf-c-text-input-group__main .pf-c-chip-group__main {
+  padding-top: var(--pf-c-text-input-group--c-chip-group__main--PaddingTop);
+  padding-right: var(--pf-c-text-input-group--c-chip-group__main--PaddingRight);
+  padding-bottom: var(--pf-c-text-input-group--c-chip-group__main--PaddingBottom);
 }
 
 .pf-c-text-input-group__text {

package/components/TextInputGroup/text-input-group.scss

@@ -16,6 +16,13 @@
   // Main
   --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-text-input-group__main--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-text-input-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__main--ColumnGap: var(--pf-global--spacer--sm);
+
+  // Chip group
+  --pf-c-text-input-group--c-chip-group__main--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group--c-chip-group__main--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group--c-chip-group__main--PaddingBottom: var(--pf-global--spacer--xs);
 
   // Text input
   --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
@@ -78,7 +85,8 @@
 .pf-c-text-input-group__main {
   display: flex;
   flex: 1;
-  gap: var(--pf-global--spacer--sm);
+  flex-wrap: wrap;
+  gap: var(--pf-c-text-input-group__main--RowGap) var(--pf-c-text-input-group__main--ColumnGap);
   min-width: 0;
 
   &.pf-m-icon {
@@ -89,23 +97,10 @@
     margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
   }
 
-  // Scroll chip group horizontally if there is overflow
-  .pf-c-chip-group {
-    overflow: auto;
-
-    // Hide scrollbar for IE, Edge and Firefox
-    -ms-overflow-style: none;  // IE and Edge
-    scrollbar-width: none;  // Firefox
-
-    // Hide scrollbar for Chrome, Safari and Opera
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .pf-c-chip-group,
-  .pf-c-chip-group__list {
-    flex-wrap: nowrap;
+  .pf-c-chip-group__main {
+    padding-top: var(--pf-c-text-input-group--c-chip-group__main--PaddingTop);
+    padding-right: var(--pf-c-text-input-group--c-chip-group__main--PaddingRight);
+    padding-bottom: var(--pf-c-text-input-group--c-chip-group__main--PaddingBottom);
   }
 }
 

package/docs/components/Button/examples/Button.md

@@ -380,7 +380,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
   </span>
   Primary loading
 </button>
-
+<br />
 <button
   class="pf-c-button pf-m-progress pf-m-secondary"
   type="button"
@@ -403,20 +403,39 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
   </span>
   Secondary loading
 </button>
-
+<br />
 <button class="pf-c-button pf-m-plain" type="button" aria-label="Upload">
   <i class="fas fa-upload" aria-hidden="true"></i>
 </button>
 
+<button class="pf-c-button pf-m-in-progress pf-m-plain" type="button">
+  <span class="pf-c-button__progress">
+    <span
+      class="pf-c-spinner pf-m-md"
+      role="progressbar"
+      aria-label="Uploading..."
+    >
+      <span class="pf-c-spinner__clipper"></span>
+      <span class="pf-c-spinner__lead-ball"></span>
+      <span class="pf-c-spinner__tail-ball"></span>
+    </span>
+  </span>
+
+  <i class="fas fa-upload" aria-hidden="true"></i>
+</button>
+<br />
 <button
-  class="pf-c-button pf-m-plain pf-m-in-progress"
+  class="pf-c-button pf-m-progress pf-m-inline pf-m-link"
+  type="button"
+>Inline loader</button>
+
+<button
+  class="pf-c-button pf-m-progress pf-m-in-progress pf-m-inline pf-m-link"
   type="button"
-  aria-label="Upload"
 >
-  <i class="fas fa-upload" aria-hidden="true"></i>
   <span class="pf-c-button__progress">
     <span
-      class="pf-c-spinner pf-m-md"
+      class="pf-c-spinner pf-m-inline"
       role="progressbar"
       aria-label="Loading..."
     >
@@ -425,6 +444,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
       <span class="pf-c-spinner__tail-ball"></span>
     </span>
   </span>
+  Inline loading
 </button>
 
 ```