@patternfly/patternfly 4.222.1 → 4.222.2

package/components/InputGroup/input-group.css

@@ -22,6 +22,9 @@
   --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-input-group--c-form-control--MarginRight: 0;
   color: var(--pf-global--Color--100);
@@ -71,6 +74,11 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderWidth: 0;
   margin-left: 0;
 }
+.pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
+}
 
 :where(.pf-theme-dark) .pf-c-input-group {
   --pf-c-input-group--BackgroundColor: transparent;
@@ -79,6 +87,8 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
   --pf-c-input-group__text--BorderLeftColor: transparent;
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }
 :where(.pf-theme-dark) .pf-c-input-group > * + * {
   margin-left: 0;
@@ -92,4 +102,8 @@ label.pf-c-input-group__text {
 }
 :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
   --pf-c-input-group__text--BackgroundColor: transparent;
+}
+:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  color: var(--pf-c-input-group__text--m-disabled--Color);
 }

package/components/InputGroup/input-group.scss

@@ -15,6 +15,9 @@
   --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
 
   // Form control
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
@@ -84,6 +87,12 @@
 
     margin-left: 0;
   }
+
+  &.pf-m-disabled {
+    --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
+    --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+    --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
+  }
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/InputGroup/themes/dark/input-group.scss

@@ -8,6 +8,8 @@
     --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
     --pf-c-input-group__text--BorderLeftColor: transparent;
     --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
+    --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 
     > * + * {
       margin-left: 0;
@@ -24,5 +26,11 @@
     &.pf-m-plain {
       --pf-c-input-group__text--BackgroundColor: transparent;
     }
+
+    &.pf-m-disabled {
+      --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+
+      color: var(--pf-c-input-group__text--m-disabled--Color);
+    }
   }
 }

package/components/Slider/slider.css

@@ -182,13 +182,6 @@
   z-index: var(--pf-c-slider__value--m-floating--ZIndex);
   transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
 }
-.pf-c-slider__value.pf-m-floating .pf-c-input-group {
-  align-items: center;
-}
-.pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
-  position: absolute;
-  left: 100%;
-}
 .pf-c-slider__value .pf-c-form-control {
   width: var(--pf-c-slider__value--c-form-control--Width);
 }

package/components/Slider/slider.scss

@@ -218,15 +218,6 @@
     left: var(--pf-c-slider__value--m-floating--Left);
     z-index: var(--pf-c-slider__value--m-floating--ZIndex);
     transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
-
-    .pf-c-input-group {
-      align-items: center;
-    }
-
-    .pf-c-input-group__text {
-      position: absolute;
-      left: 100%;
-    }
   }
 
   .pf-c-form-control {

package/docs/components/InputGroup/examples/InputGroup.md

@@ -233,3 +233,4 @@ When using the `.pf-c-input-group` always ensure labels are used outside the inp
 | `.pf-c-input-group__text` | `<span>`                  | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
 | `.pf-m-plain`             | `.pf-c-input-group`       | Removes the background from the input group.                                                 |
 | `.pf-m-plain`             | `.pf-c-input-group__text` | Removes the border from the text element.                                                    |
+| `.pf-m-disabled`          | `.pf-c-input-group__text` | Adds disabled styling to match a disabled input within the input group.                      |

package/docs/components/Slider/examples/Slider.md

@@ -267,7 +267,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text pf-m-plain">%</span>
+      <span class="pf-c-input-group__text">%</span>
     </div>
   </div>
 </div>
@@ -297,7 +297,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text pf-m-plain">%</span>
+      <span class="pf-c-input-group__text">%</span>
     </div>
   </div>
 </div>
@@ -329,7 +329,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text pf-m-plain">%</span>
+        <span class="pf-c-input-group__text">%</span>
       </div>
     </div>
   </div>
@@ -393,7 +393,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text pf-m-plain">%</span>
+        <span class="pf-c-input-group__text pf-m-disabled">%</span>
       </div>
     </div>
   </div>
@@ -429,7 +429,7 @@ cssPrefix: pf-c-slider
           value="50"
           aria-label="Slider value input"
         />
-        <span class="pf-c-input-group__text pf-m-plain">%</span>
+        <span class="pf-c-input-group__text">%</span>
       </div>
     </div>
   </div>
@@ -570,7 +570,7 @@ cssPrefix: pf-c-slider
         value="50"
         aria-label="Slider value input"
       />
-      <span class="pf-c-input-group__text pf-m-plain">%</span>
+      <span class="pf-c-input-group__text pf-m-disabled">%</span>
     </div>
   </div>
 </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.222.1",
+  "version": "4.222.2",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -16144,6 +16144,9 @@ textarea.pf-c-form-control {
   --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-input-group--c-form-control--MarginRight: 0;
   color: var(--pf-global--Color--100);
@@ -16193,6 +16196,11 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderWidth: 0;
   margin-left: 0;
 }
+.pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
+}
 
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
@@ -16237,6 +16245,8 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
   --pf-c-input-group__text--BorderLeftColor: transparent;
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }
 :where(.pf-theme-dark) .pf-c-input-group > * + * {
   margin-left: 0;
@@ -16251,6 +16261,10 @@ label.pf-c-input-group__text {
 :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
   --pf-c-input-group__text--BackgroundColor: transparent;
 }
+:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  color: var(--pf-c-input-group__text--m-disabled--Color);
+}
 
 .pf-c-jump-links {
   --pf-c-jump-links__list--Display: flex;
@@ -25978,13 +25992,6 @@ label.pf-c-radio, .pf-c-radio__label,
   z-index: var(--pf-c-slider__value--m-floating--ZIndex);
   transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
 }
-.pf-c-slider__value.pf-m-floating .pf-c-input-group {
-  align-items: center;
-}
-.pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
-  position: absolute;
-  left: 100%;
-}
 .pf-c-slider__value .pf-c-form-control {
   width: var(--pf-c-slider__value--c-form-control--Width);
 }

package/patternfly.css

@@ -16271,6 +16271,9 @@ textarea.pf-c-form-control {
   --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
   --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-input-group--c-form-control--MarginRight: 0;
   color: var(--pf-global--Color--100);
@@ -16320,6 +16323,11 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderWidth: 0;
   margin-left: 0;
 }
+.pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
+}
 
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
@@ -16364,6 +16372,8 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
   --pf-c-input-group__text--BorderLeftColor: transparent;
   --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }
 :where(.pf-theme-dark) .pf-c-input-group > * + * {
   margin-left: 0;
@@ -16378,6 +16388,10 @@ label.pf-c-input-group__text {
 :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
   --pf-c-input-group__text--BackgroundColor: transparent;
 }
+:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
+  --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
+  color: var(--pf-c-input-group__text--m-disabled--Color);
+}
 
 .pf-c-jump-links {
   --pf-c-jump-links__list--Display: flex;
@@ -26105,13 +26119,6 @@ label.pf-c-radio, .pf-c-radio__label,
   z-index: var(--pf-c-slider__value--m-floating--ZIndex);
   transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
 }
-.pf-c-slider__value.pf-m-floating .pf-c-input-group {
-  align-items: center;
-}
-.pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
-  position: absolute;
-  left: 100%;
-}
 .pf-c-slider__value .pf-c-form-control {
   width: var(--pf-c-slider__value--c-form-control--Width);
 }