@patternfly/patternfly 4.222.0 → 4.222.2

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 (13) hide show
  1. package/components/InputGroup/input-group.css +14 -0
  2. package/components/InputGroup/input-group.scss +9 -0
  3. package/components/InputGroup/themes/dark/input-group.scss +8 -0
  4. package/components/Slider/slider.css +0 -7
  5. package/components/Slider/slider.scss +0 -9
  6. package/docs/components/InputGroup/examples/InputGroup.md +1 -0
  7. package/docs/components/Slider/examples/Slider.md +6 -6
  8. package/docs/demos/Tabs/examples/Tabs.md +37 -534
  9. package/package.json +1 -1
  10. package/patternfly-no-reset.css +14 -7
  11. package/patternfly.css +14 -7
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/InputGroup/input-group.css CHANGED
@@ -22,6 +22,9 @@
22
22
  --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
23
23
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
24
24
  --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
25
+ --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
26
+ --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
27
+ --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
25
28
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
26
29
  --pf-c-input-group--c-form-control--MarginRight: 0;
27
30
  color: var(--pf-global--Color--100);
@@ -71,6 +74,11 @@ label.pf-c-input-group__text {
71
74
  --pf-c-input-group__text--BorderWidth: 0;
72
75
  margin-left: 0;
73
76
  }
77
+ .pf-c-input-group__text.pf-m-disabled {
78
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
79
+ --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
80
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
81
+ }
74
82
 
75
83
  :where(.pf-theme-dark) .pf-c-input-group {
76
84
  --pf-c-input-group--BackgroundColor: transparent;
@@ -79,6 +87,8 @@ label.pf-c-input-group__text {
79
87
  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
80
88
  --pf-c-input-group__text--BorderLeftColor: transparent;
81
89
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
90
+ --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
91
+ --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
82
92
  }
83
93
  :where(.pf-theme-dark) .pf-c-input-group > * + * {
84
94
  margin-left: 0;
@@ -92,4 +102,8 @@ label.pf-c-input-group__text {
92
102
  }
93
103
  :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
94
104
  --pf-c-input-group__text--BackgroundColor: transparent;
105
+ }
106
+ :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
107
+ --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
108
+ color: var(--pf-c-input-group__text--m-disabled--Color);
95
109
  }
package/components/InputGroup/input-group.scss CHANGED
@@ -15,6 +15,9 @@
15
15
  --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
16
16
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
17
17
  --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
18
+ --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
19
+ --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
20
+ --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
18
21
 
19
22
  // Form control
20
23
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
@@ -84,6 +87,12 @@
84
87
 
85
88
  margin-left: 0;
86
89
  }
90
+
91
+ &.pf-m-disabled {
92
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
93
+ --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
94
+ --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
95
+ }
87
96
  }
88
97
 
89
98
  // stylelint-disable no-invalid-position-at-import-rule
package/components/InputGroup/themes/dark/input-group.scss CHANGED
@@ -8,6 +8,8 @@
8
8
  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
9
9
  --pf-c-input-group__text--BorderLeftColor: transparent;
10
10
  --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
11
+ --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
12
+ --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
11
13
 
12
14
  > * + * {
13
15
  margin-left: 0;
@@ -24,5 +26,11 @@
24
26
  &.pf-m-plain {
25
27
  --pf-c-input-group__text--BackgroundColor: transparent;
26
28
  }
29
+
30
+ &.pf-m-disabled {
31
+ --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
32
+
33
+ color: var(--pf-c-input-group__text--m-disabled--Color);
34
+ }
27
35
  }
28
36
  }
package/components/Slider/slider.css CHANGED
@@ -182,13 +182,6 @@
182
182
  z-index: var(--pf-c-slider__value--m-floating--ZIndex);
183
183
  transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
184
184
  }
185
- .pf-c-slider__value.pf-m-floating .pf-c-input-group {
186
- align-items: center;
187
- }
188
- .pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
189
- position: absolute;
190
- left: 100%;
191
- }
192
185
  .pf-c-slider__value .pf-c-form-control {
193
186
  width: var(--pf-c-slider__value--c-form-control--Width);
194
187
  }
package/components/Slider/slider.scss CHANGED
@@ -218,15 +218,6 @@
218
218
  left: var(--pf-c-slider__value--m-floating--Left);
219
219
  z-index: var(--pf-c-slider__value--m-floating--ZIndex);
220
220
  transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
221
-
222
- .pf-c-input-group {
223
- align-items: center;
224
- }
225
-
226
- .pf-c-input-group__text {
227
- position: absolute;
228
- left: 100%;
229
- }
230
221
  }
231
222
 
232
223
  .pf-c-form-control {
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -233,3 +233,4 @@ When using the `.pf-c-input-group` always ensure labels are used outside the inp
233
233
  | `.pf-c-input-group__text` | `<span>` | Initiates the input group text. This can be used to show text, radio, icons, or check boxes. |
234
234
  | `.pf-m-plain` | `.pf-c-input-group` | Removes the background from the input group. |
235
235
  | `.pf-m-plain` | `.pf-c-input-group__text` | Removes the border from the text element. |
236
+ | `.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 CHANGED
@@ -267,7 +267,7 @@ cssPrefix: pf-c-slider
267
267
  value="50"
268
268
  aria-label="Slider value input"
269
269
  />
270
- <span class="pf-c-input-group__text pf-m-plain">%</span>
270
+ <span class="pf-c-input-group__text">%</span>
271
271
  </div>
272
272
  </div>
273
273
  </div>
@@ -297,7 +297,7 @@ cssPrefix: pf-c-slider
297
297
  value="50"
298
298
  aria-label="Slider value input"
299
299
  />
300
- <span class="pf-c-input-group__text pf-m-plain">%</span>
300
+ <span class="pf-c-input-group__text">%</span>
301
301
  </div>
302
302
  </div>
303
303
  </div>
@@ -329,7 +329,7 @@ cssPrefix: pf-c-slider
329
329
  value="50"
330
330
  aria-label="Slider value input"
331
331
  />
332
- <span class="pf-c-input-group__text pf-m-plain">%</span>
332
+ <span class="pf-c-input-group__text">%</span>
333
333
  </div>
334
334
  </div>
335
335
  </div>
@@ -393,7 +393,7 @@ cssPrefix: pf-c-slider
393
393
  value="50"
394
394
  aria-label="Slider value input"
395
395
  />
396
- <span class="pf-c-input-group__text pf-m-plain">%</span>
396
+ <span class="pf-c-input-group__text pf-m-disabled">%</span>
397
397
  </div>
398
398
  </div>
399
399
  </div>
@@ -429,7 +429,7 @@ cssPrefix: pf-c-slider
429
429
  value="50"
430
430
  aria-label="Slider value input"
431
431
  />
432
- <span class="pf-c-input-group__text pf-m-plain">%</span>
432
+ <span class="pf-c-input-group__text">%</span>
433
433
  </div>
434
434
  </div>
435
435
  </div>
@@ -570,7 +570,7 @@ cssPrefix: pf-c-slider
570
570
  value="50"
571
571
  aria-label="Slider value input"
572
572
  />
573
- <span class="pf-c-input-group__text pf-m-plain">%</span>
573
+ <span class="pf-c-input-group__text pf-m-disabled">%</span>
574
574
  </div>
575
575
  </div>
576
576
  </div>