@patternfly/patternfly 4.151.4 → 4.154.0

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 (16) hide show
  1. package/components/MenuToggle/menu-toggle.css +1 -1
  2. package/components/MenuToggle/menu-toggle.scss +1 -1
  3. package/components/Nav/nav.css +4 -6
  4. package/components/Nav/nav.scss +5 -9
  5. package/components/TextInputGroup/text-input-group.css +13 -0
  6. package/components/TextInputGroup/text-input-group.scss +19 -0
  7. package/components/Tooltip/tooltip.css +18 -4
  8. package/components/Tooltip/tooltip.scss +42 -4
  9. package/docs/components/MenuToggle/examples/MenuToggle.md +48 -0
  10. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -0
  11. package/docs/components/Tooltip/examples/Tooltip.md +56 -10
  12. package/package.json +1 -1
  13. package/patternfly-no-reset.css +36 -11
  14. package/patternfly.css +36 -11
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -96,7 +96,7 @@
96
96
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
97
97
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
98
98
  }
99
- .pf-c-menu-toggle.pf-m-plain {
99
+ .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
100
100
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
101
101
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
102
102
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -132,7 +132,7 @@
132
132
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
133
133
  }
134
134
 
135
- &.pf-m-plain {
135
+ &.pf-m-plain:not(.pf-m-text) {
136
136
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
137
137
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
138
138
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
package/components/Nav/nav.css CHANGED
@@ -477,13 +477,11 @@
477
477
  }
478
478
 
479
479
  .pf-c-nav__item {
480
- --pf-c-nav__item__toggle-icon--Rotate: 0;
481
480
  position: relative;
482
481
  margin-top: var(--pf-c-nav__item--MarginTop);
483
482
  }
484
483
  .pf-c-nav__item.pf-m-expandable {
485
484
  --pf-c-nav__link--before--BorderBottomWidth: 0;
486
- --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
487
485
  }
488
486
  .pf-c-nav__item.pf-m-expandable::before {
489
487
  position: absolute;
@@ -493,6 +491,9 @@
493
491
  content: "";
494
492
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
495
493
  }
494
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
495
+ transform: rotate(0);
496
+ }
496
497
  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
497
498
  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
498
499
  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -742,10 +743,7 @@
742
743
  display: inline-block;
743
744
  transition: var(--pf-c-nav__toggle-icon--Transition);
744
745
  }
745
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
746
- transform: rotate(0deg);
747
- }
748
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
746
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
749
747
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
750
748
  }
751
749
 
package/components/Nav/nav.scss CHANGED
@@ -578,14 +578,11 @@
578
578
 
579
579
  // Borders
580
580
  .pf-c-nav__item {
581
- --pf-c-nav__item__toggle-icon--Rotate: 0; // resets it for any inherited items
582
-
583
581
  position: relative;
584
582
  margin-top: var(--pf-c-nav__item--MarginTop);
585
583
 
586
584
  &.pf-m-expandable {
587
585
  --pf-c-nav__link--before--BorderBottomWidth: 0;
588
- --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
589
586
 
590
587
  &::before {
591
588
  position: absolute;
@@ -598,6 +595,10 @@
598
595
  }
599
596
 
600
597
  .pf-c-nav__item {
598
+ &:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
599
+ transform: rotate(0);
600
+ }
601
+
601
602
  &.pf-m-expandable {
602
603
  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
603
604
  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -915,12 +916,7 @@
915
916
  display: inline-block;
916
917
  transition: var(--pf-c-nav__toggle-icon--Transition);
917
918
 
918
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__item & {
919
- transform: rotate(0deg);
920
- }
921
-
922
- .pf-c-nav__item.pf-m-expanded &,
923
- .pf-c-nav__item .pf-c-nav__item.pf-m-expanded & {
919
+ .pf-c-nav__item.pf-m-expanded & {
924
920
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
925
921
  }
926
922
  }
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .pf-c-text-input-group {
2
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
2
3
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
3
4
  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
4
5
  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -23,12 +24,24 @@
23
24
  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
24
25
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
25
26
  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
27
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
28
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
26
29
  position: relative;
27
30
  display: flex;
31
+ color: var(--pf-c-text-input-group--Color, inherit);
32
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
28
33
  }
29
34
  .pf-c-text-input-group:hover {
30
35
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
31
36
  }
37
+ .pf-c-text-input-group.pf-m-disabled {
38
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
39
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
40
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
41
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
42
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
43
+ pointer-events: none;
44
+ }
32
45
 
33
46
  .pf-c-text-input-group__main {
34
47
  display: flex;
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -1,4 +1,7 @@
1
1
  .pf-c-text-input-group {
2
+ // Component
3
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
4
+
2
5
  // Base border
3
6
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
4
7
  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -35,12 +38,28 @@
35
38
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
36
39
  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
37
40
 
41
+ // input disabled style
42
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
43
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
44
+
38
45
  position: relative;
39
46
  display: flex;
47
+ color: var(--pf-c-text-input-group--Color, inherit);
48
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
40
49
 
41
50
  &:hover {
42
51
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
43
52
  }
53
+
54
+ &.pf-m-disabled {
55
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
56
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
57
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
58
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
59
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
60
+
61
+ pointer-events: none;
62
+ }
44
63
  }
45
64
 
46
65
  .pf-c-text-input-group__main {
package/components/Tooltip/tooltip.css CHANGED
@@ -26,26 +26,40 @@
26
26
  max-width: var(--pf-c-tooltip--MaxWidth);
27
27
  box-shadow: var(--pf-c-tooltip--BoxShadow);
28
28
  }
29
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
29
+ .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
30
30
  bottom: 0;
31
31
  left: 50%;
32
32
  transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
33
33
  }
34
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
34
+ .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
35
35
  top: 0;
36
36
  left: 50%;
37
37
  transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
38
38
  }
39
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
39
+ .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
40
40
  top: 50%;
41
41
  right: 0;
42
42
  transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
43
43
  }
44
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
44
+ .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
45
45
  top: 50%;
46
46
  left: 0;
47
47
  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
48
48
  }
49
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
50
+ top: var(--pf-c-tooltip__arrow--Height);
51
+ }
52
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
53
+ top: auto;
54
+ bottom: 0;
55
+ }
56
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
57
+ left: var(--pf-c-tooltip__arrow--Width);
58
+ }
59
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
60
+ right: 0;
61
+ left: auto;
62
+ }
49
63
 
50
64
  .pf-c-tooltip__content {
51
65
  position: relative;
package/components/Tooltip/tooltip.scss CHANGED
@@ -32,7 +32,9 @@
32
32
  max-width: var(--pf-c-tooltip--MaxWidth);
33
33
  box-shadow: var(--pf-c-tooltip--BoxShadow);
34
34
 
35
- &.pf-m-top {
35
+ &.pf-m-top,
36
+ &.pf-m-top-left,
37
+ &.pf-m-top-right {
36
38
  .pf-c-tooltip__arrow {
37
39
  bottom: 0;
38
40
  left: 50%;
@@ -40,7 +42,9 @@
40
42
  }
41
43
  }
42
44
 
43
- &.pf-m-bottom {
45
+ &.pf-m-bottom,
46
+ &.pf-m-bottom-left,
47
+ &.pf-m-bottom-right {
44
48
  .pf-c-tooltip__arrow {
45
49
  top: 0;
46
50
  left: 50%;
@@ -48,7 +52,9 @@
48
52
  }
49
53
  }
50
54
 
51
- &.pf-m-left {
55
+ &.pf-m-left,
56
+ &.pf-m-left-top,
57
+ &.pf-m-left-bottom {
52
58
  .pf-c-tooltip__arrow {
53
59
  top: 50%;
54
60
  right: 0;
@@ -56,13 +62,45 @@
56
62
  }
57
63
  }
58
64
 
59
- &.pf-m-right {
65
+ &.pf-m-right,
66
+ &.pf-m-right-top,
67
+ &.pf-m-right-bottom {
60
68
  .pf-c-tooltip__arrow {
61
69
  top: 50%;
62
70
  left: 0;
63
71
  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
64
72
  }
65
73
  }
74
+
75
+ &.pf-m-left-top,
76
+ &.pf-m-right-top {
77
+ .pf-c-tooltip__arrow {
78
+ top: var(--pf-c-tooltip__arrow--Height);
79
+ }
80
+ }
81
+
82
+ &.pf-m-left-bottom,
83
+ &.pf-m-right-bottom {
84
+ .pf-c-tooltip__arrow {
85
+ top: auto;
86
+ bottom: 0;
87
+ }
88
+ }
89
+
90
+ &.pf-m-top-left,
91
+ &.pf-m-bottom-left {
92
+ .pf-c-tooltip__arrow {
93
+ left: var(--pf-c-tooltip__arrow--Width);
94
+ }
95
+ }
96
+
97
+ &.pf-m-top-right,
98
+ &.pf-m-bottom-right {
99
+ .pf-c-tooltip__arrow {
100
+ right: 0;
101
+ left: auto;
102
+ }
103
+ }
66
104
  }
67
105
 
68
106
  .pf-c-tooltip__content {
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -186,6 +186,53 @@ cssPrefix: pf-c-menu-toggle
186
186
 
187
187
  ```
188
188
 
189
+ ### Plain with text
190
+
191
+ ```html
192
+ <button
193
+ class="pf-c-menu-toggle pf-m-plain pf-m-text"
194
+ type="button"
195
+ aria-expanded="false"
196
+ disabled
197
+ >
198
+ <span class="pf-c-menu-toggle__text">Disabled</span>
199
+ <span class="pf-c-menu-toggle__controls">
200
+ <span class="pf-c-menu-toggle__toggle-icon">
201
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
202
+ </span>
203
+ </span>
204
+ </button>
205
+
206
+ &nbsp;
207
+ <button
208
+ class="pf-c-menu-toggle pf-m-plain pf-m-text"
209
+ type="button"
210
+ aria-expanded="false"
211
+ >
212
+ <span class="pf-c-menu-toggle__text">Custom text</span>
213
+ <span class="pf-c-menu-toggle__controls">
214
+ <span class="pf-c-menu-toggle__toggle-icon">
215
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
216
+ </span>
217
+ </span>
218
+ </button>
219
+
220
+ &nbsp;
221
+ <button
222
+ class="pf-c-menu-toggle pf-m-plain pf-m-text pf-m-expanded"
223
+ type="button"
224
+ aria-expanded="true"
225
+ >
226
+ <span class="pf-c-menu-toggle__text">Custom text (expanded)</span>
227
+ <span class="pf-c-menu-toggle__controls">
228
+ <span class="pf-c-menu-toggle__toggle-icon">
229
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
230
+ </span>
231
+ </span>
232
+ </button>
233
+
234
+ ```
235
+
189
236
  ### With image and text
190
237
 
191
238
  ```html
@@ -246,6 +293,7 @@ cssPrefix: pf-c-menu-toggle
246
293
  | `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
247
294
  | `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
248
295
  | `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
296
+ | `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
249
297
  | `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
250
298
  | `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
251
299
  | `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -23,6 +23,25 @@ cssPrefix: pf-c-text-input-group
23
23
 
24
24
  ```
25
25
 
26
+ ### Disabled
27
+
28
+ ```html
29
+ <div class="pf-c-text-input-group pf-m-disabled">
30
+ <div class="pf-c-text-input-group__main">
31
+ <span class="pf-c-text-input-group__text">
32
+ <input
33
+ class="pf-c-text-input-group__text-input"
34
+ type="text"
35
+ value="Disabled"
36
+ aria-label="Disabled text input group example input"
37
+ disabled
38
+ />
39
+ </span>
40
+ </div>
41
+ </div>
42
+
43
+ ```
44
+
26
45
  ### Utilities and icon
27
46
 
28
47
  ```html
package/docs/components/Tooltip/examples/Tooltip.md CHANGED
@@ -60,6 +60,52 @@ cssPrefix: pf-c-tooltip
60
60
 
61
61
  ```
62
62
 
63
+ ### Left with top and bottom positions
64
+
65
+ ```html
66
+ <div class="pf-c-tooltip pf-m-left-top" role="tooltip">
67
+ <div class="pf-c-tooltip__arrow"></div>
68
+
69
+ <div
70
+ class="pf-c-tooltip__content"
71
+ id="tooltip-left-top-content"
72
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
73
+ </div>
74
+ <br />
75
+ <div class="pf-c-tooltip pf-m-left-bottom" role="tooltip">
76
+ <div class="pf-c-tooltip__arrow"></div>
77
+
78
+ <div
79
+ class="pf-c-tooltip__content"
80
+ id="tooltip-left-bottom-content"
81
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
82
+ </div>
83
+
84
+ ```
85
+
86
+ ### Bottom with left and right positions
87
+
88
+ ```html
89
+ <div class="pf-c-tooltip pf-m-bottom-left" role="tooltip">
90
+ <div class="pf-c-tooltip__arrow"></div>
91
+
92
+ <div
93
+ class="pf-c-tooltip__content"
94
+ id="tooltip-bottom-left-content"
95
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
96
+ </div>
97
+ <br />
98
+ <div class="pf-c-tooltip pf-m-bottom-right" role="tooltip">
99
+ <div class="pf-c-tooltip__arrow"></div>
100
+
101
+ <div
102
+ class="pf-c-tooltip__content"
103
+ id="tooltip-bottom-right-content"
104
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
105
+ </div>
106
+
107
+ ```
108
+
63
109
  ### Left aligned text
64
110
 
65
111
  ```html
@@ -89,13 +135,13 @@ A tooltip is used to provide contextual information for another component on hov
89
135
 
90
136
  ### Usage
91
137
 
92
- | Class | Applied to | Outcome |
93
- | ------------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
94
- | `.pf-c-tooltip` | `<div>` | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required** |
95
- | `.pf-c-tooltip__arrow` | `<div>` | Creates an arrow pointing towards the element the tooltip describes. **Required** |
96
- | `.pf-c-tooltip__content` | `<div>` | Creates the body of the tooltip. **Required** |
97
- | `.pf-m-left` | `.pf-c-tooltip` | Positions the tooltip to the left of the element. |
98
- | `.pf-m-right` | `.pf-c-tooltip` | Positions the tooltip to the right of the element. |
99
- | `.pf-m-top` | `.pf-c-tooltip` | Positions the tooltip to the top of the element. |
100
- | `.pf-m-bottom` | `.pf-c-tooltip` | Positions the tooltip to the bottom of the element. |
101
- | `.pf-m-text-align-left` | `.pf-c-tooltip__content` | Modifies tooltip content to text align left. |
138
+ | Class | Applied to | Outcome |
139
+ | --------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
140
+ | `.pf-c-tooltip` | `<div>` | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required** |
141
+ | `.pf-c-tooltip__arrow` | `<div>` | Creates an arrow pointing towards the element the tooltip describes. **Required** |
142
+ | `.pf-c-tooltip__content` | `<div>` | Creates the body of the tooltip. **Required** |
143
+ | `.pf-m-left{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
144
+ | `.pf-m-right{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
145
+ | `.pf-m-top{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
146
+ | `.pf-m-bottom{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
147
+ | `.pf-m-text-align-left` | `.pf-c-tooltip__content` | Modifies tooltip content to text align left. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.151.4",
4
+ "version": "4.154.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -16222,7 +16222,7 @@ ul.pf-c-list {
16222
16222
  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
16223
16223
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
16224
16224
  }
16225
- .pf-c-menu-toggle.pf-m-plain {
16225
+ .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
16226
16226
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
16227
16227
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
16228
16228
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -16962,13 +16962,11 @@ ul.pf-c-list {
16962
16962
  }
16963
16963
 
16964
16964
  .pf-c-nav__item {
16965
- --pf-c-nav__item__toggle-icon--Rotate: 0;
16966
16965
  position: relative;
16967
16966
  margin-top: var(--pf-c-nav__item--MarginTop);
16968
16967
  }
16969
16968
  .pf-c-nav__item.pf-m-expandable {
16970
16969
  --pf-c-nav__link--before--BorderBottomWidth: 0;
16971
- --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
16972
16970
  }
16973
16971
  .pf-c-nav__item.pf-m-expandable::before {
16974
16972
  position: absolute;
@@ -16978,6 +16976,9 @@ ul.pf-c-list {
16978
16976
  content: "";
16979
16977
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16980
16978
  }
16979
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
16980
+ transform: rotate(0);
16981
+ }
16981
16982
  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
16982
16983
  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
16983
16984
  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -17227,10 +17228,7 @@ ul.pf-c-list {
17227
17228
  display: inline-block;
17228
17229
  transition: var(--pf-c-nav__toggle-icon--Transition);
17229
17230
  }
17230
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
17231
- transform: rotate(0deg);
17232
- }
17233
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
17231
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
17234
17232
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
17235
17233
  }
17236
17234
 
@@ -25784,6 +25782,7 @@ svg.pf-c-spinner.pf-m-xl {
25784
25782
  }
25785
25783
 
25786
25784
  .pf-c-text-input-group {
25785
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
25787
25786
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25788
25787
  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
25789
25788
  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -25808,12 +25807,24 @@ svg.pf-c-spinner.pf-m-xl {
25808
25807
  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
25809
25808
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
25810
25809
  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
25810
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
25811
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
25811
25812
  position: relative;
25812
25813
  display: flex;
25814
+ color: var(--pf-c-text-input-group--Color, inherit);
25815
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
25813
25816
  }
25814
25817
  .pf-c-text-input-group:hover {
25815
25818
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
25816
25819
  }
25820
+ .pf-c-text-input-group.pf-m-disabled {
25821
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
25822
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
25823
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
25824
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
25825
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
25826
+ pointer-events: none;
25827
+ }
25817
25828
 
25818
25829
  .pf-c-text-input-group__main {
25819
25830
  display: flex;
@@ -26237,26 +26248,40 @@ svg.pf-c-spinner.pf-m-xl {
26237
26248
  max-width: var(--pf-c-tooltip--MaxWidth);
26238
26249
  box-shadow: var(--pf-c-tooltip--BoxShadow);
26239
26250
  }
26240
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
26251
+ .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
26241
26252
  bottom: 0;
26242
26253
  left: 50%;
26243
26254
  transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
26244
26255
  }
26245
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
26256
+ .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
26246
26257
  top: 0;
26247
26258
  left: 50%;
26248
26259
  transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
26249
26260
  }
26250
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
26261
+ .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
26251
26262
  top: 50%;
26252
26263
  right: 0;
26253
26264
  transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
26254
26265
  }
26255
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
26266
+ .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
26256
26267
  top: 50%;
26257
26268
  left: 0;
26258
26269
  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
26259
26270
  }
26271
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
26272
+ top: var(--pf-c-tooltip__arrow--Height);
26273
+ }
26274
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
26275
+ top: auto;
26276
+ bottom: 0;
26277
+ }
26278
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
26279
+ left: var(--pf-c-tooltip__arrow--Width);
26280
+ }
26281
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
26282
+ right: 0;
26283
+ left: auto;
26284
+ }
26260
26285
 
26261
26286
  .pf-c-tooltip__content {
26262
26287
  position: relative;