@patternfly/patternfly 4.151.3 → 4.153.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 (14) hide show
  1. package/RELEASE-NOTES.md +36 -1
  2. package/components/Nav/nav.css +4 -6
  3. package/components/Nav/nav.scss +5 -9
  4. package/components/TextInputGroup/text-input-group.css +13 -0
  5. package/components/TextInputGroup/text-input-group.scss +19 -0
  6. package/components/Tooltip/tooltip.css +18 -4
  7. package/components/Tooltip/tooltip.scss +42 -4
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -0
  9. package/docs/components/Tooltip/examples/Tooltip.md +56 -10
  10. package/package.json +1 -1
  11. package/patternfly-no-reset.css +35 -10
  12. package/patternfly.css +35 -10
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/RELEASE-NOTES.md CHANGED
@@ -4,6 +4,42 @@ section: developer-resources
4
4
  releaseNoteTOC: true
5
5
  ---
6
6
 
7
+ ## 2021.14 release notes (2021-10-26)
8
+ Packages released:
9
+ - [@patternfly/patternfly@v4.151.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.151.4)
10
+
11
+ ### Components
12
+ - **App launcher, menu, select:** Fixed favorite colors ([#4437](https://github.com/patternfly/patternfly/pull/4437))
13
+ - **Card:** Added hoverable/selectable/selected-raised ([#4425](https://github.com/patternfly/patternfly/pull/4425))
14
+ - **Context selector:** Added demos ([#4454](https://github.com/patternfly/patternfly/pull/4454))
15
+ - **Form:** Added group role to section and field group ([#4424](https://github.com/patternfly/patternfly/pull/4424))
16
+ - **Modal:** Added demo to link form to submit button in footer ([#4432](https://github.com/patternfly/patternfly/pull/4432))
17
+ - **Nav:**
18
+ - Added third level expansion ([#4460](https://github.com/patternfly/patternfly/pull/4460))
19
+ - Removed broken icon font size var ([#4473](https://github.com/patternfly/patternfly/pull/4473))
20
+ - **Pagination:** Added indeterminate count example ([#4428](https://github.com/patternfly/patternfly/pull/4428))
21
+ - **Panel:** Added panel component ([#4456](https://github.com/patternfly/patternfly/pull/4456))
22
+ - **Popover:**
23
+ - Added alert styling ([#4452](https://github.com/patternfly/patternfly/pull/4452))
24
+ - Increased box shadow from medium to large ([#4457](https://github.com/patternfly/patternfly/pull/4457))
25
+ - **Select:** Added vars for width/min-width ([#4443](https://github.com/patternfly/patternfly/pull/4443))
26
+ - **Table:** Added nested headers ([#4448](https://github.com/patternfly/patternfly/pull/4448))
27
+ - **Text input group:** Moved icon modifier to main element ([#4465](https://github.com/patternfly/patternfly/pull/4465))
28
+ - **Tile:** Updated hover/selected styles ([#4439](https://github.com/patternfly/patternfly/pull/4439))
29
+ - **Toolbar:** Renamed sticky-top to sticky ([#4461](https://github.com/patternfly/patternfly/pull/4461))
30
+ - **Tooltip:** Updated spacing, arrow ([#4462](https://github.com/patternfly/patternfly/pull/4462))
31
+
32
+ ### Other
33
+ - **Build:** Fix select border minification ([#4442](https://github.com/patternfly/patternfly/pull/4442))
34
+ - **Docs:**
35
+ - Promote beta components ([#4459](https://github.com/patternfly/patternfly/pull/4459))
36
+ - Renamed drag drop to drag and drop in sidebar ([#4450](https://github.com/patternfly/patternfly/pull/4450))
37
+ - **Global:** Updated use of date element in examples (#4412) ([#4423](https://github.com/patternfly/patternfly/pull/4423))
38
+ - **Icons:**
39
+ - Copied unicodes from PF3 icons, make new icon unicodes persist ([#4402](https://github.com/patternfly/patternfly/pull/4402))
40
+ - Moved unicodes json write to src so it's bundled with build ([#4468](https://github.com/patternfly/patternfly/pull/4468))
41
+
42
+
7
43
  ## 2021.13 release notes (2021-10-13)
8
44
  Packages released:
9
45
  - [@patternfly/patternfly@v4.144.5](https://www.npmjs.com/package/@patternfly/patternfly/v/4.144.5)
@@ -29,7 +65,6 @@ Packages released:
29
65
  - **Nav:**
30
66
  - Added support for menu component as flyout ([#4417](https://github.com/patternfly/patternfly/pull/4417))
31
67
  - Marked nav flyout example as beta, updated release notes ([#4444](https://github.com/patternfly/patternfly/pull/4444))
32
- - Removed broken icon font size var ([#4473](https://github.com/patternfly/patternfly/pull/4473))
33
68
  - **Progress stepper:** Added help text for popover ([#4381](https://github.com/patternfly/patternfly/pull/4381))
34
69
  - **Radio, checkbox, form:** Corrected label alignment ([#4375](https://github.com/patternfly/patternfly/pull/4375))
35
70
  - **Select:**
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/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.3",
4
+ "version": "4.153.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -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;
package/patternfly.css CHANGED
@@ -17098,13 +17098,11 @@ ul.pf-c-list {
17098
17098
  }
17099
17099
 
17100
17100
  .pf-c-nav__item {
17101
- --pf-c-nav__item__toggle-icon--Rotate: 0;
17102
17101
  position: relative;
17103
17102
  margin-top: var(--pf-c-nav__item--MarginTop);
17104
17103
  }
17105
17104
  .pf-c-nav__item.pf-m-expandable {
17106
17105
  --pf-c-nav__link--before--BorderBottomWidth: 0;
17107
- --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
17108
17106
  }
17109
17107
  .pf-c-nav__item.pf-m-expandable::before {
17110
17108
  position: absolute;
@@ -17114,6 +17112,9 @@ ul.pf-c-list {
17114
17112
  content: "";
17115
17113
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
17116
17114
  }
17115
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
17116
+ transform: rotate(0);
17117
+ }
17117
17118
  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
17118
17119
  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
17119
17120
  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -17363,10 +17364,7 @@ ul.pf-c-list {
17363
17364
  display: inline-block;
17364
17365
  transition: var(--pf-c-nav__toggle-icon--Transition);
17365
17366
  }
17366
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
17367
- transform: rotate(0deg);
17368
- }
17369
- .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 {
17367
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
17370
17368
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
17371
17369
  }
17372
17370
 
@@ -25920,6 +25918,7 @@ svg.pf-c-spinner.pf-m-xl {
25920
25918
  }
25921
25919
 
25922
25920
  .pf-c-text-input-group {
25921
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
25923
25922
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
25924
25923
  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
25925
25924
  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -25944,12 +25943,24 @@ svg.pf-c-spinner.pf-m-xl {
25944
25943
  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
25945
25944
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
25946
25945
  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
25946
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
25947
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
25947
25948
  position: relative;
25948
25949
  display: flex;
25950
+ color: var(--pf-c-text-input-group--Color, inherit);
25951
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
25949
25952
  }
25950
25953
  .pf-c-text-input-group:hover {
25951
25954
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
25952
25955
  }
25956
+ .pf-c-text-input-group.pf-m-disabled {
25957
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
25958
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
25959
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
25960
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
25961
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
25962
+ pointer-events: none;
25963
+ }
25953
25964
 
25954
25965
  .pf-c-text-input-group__main {
25955
25966
  display: flex;
@@ -26373,26 +26384,40 @@ svg.pf-c-spinner.pf-m-xl {
26373
26384
  max-width: var(--pf-c-tooltip--MaxWidth);
26374
26385
  box-shadow: var(--pf-c-tooltip--BoxShadow);
26375
26386
  }
26376
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
26387
+ .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 {
26377
26388
  bottom: 0;
26378
26389
  left: 50%;
26379
26390
  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));
26380
26391
  }
26381
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
26392
+ .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 {
26382
26393
  top: 0;
26383
26394
  left: 50%;
26384
26395
  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));
26385
26396
  }
26386
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
26397
+ .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 {
26387
26398
  top: 50%;
26388
26399
  right: 0;
26389
26400
  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));
26390
26401
  }
26391
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
26402
+ .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 {
26392
26403
  top: 50%;
26393
26404
  left: 0;
26394
26405
  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));
26395
26406
  }
26407
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
26408
+ top: var(--pf-c-tooltip__arrow--Height);
26409
+ }
26410
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
26411
+ top: auto;
26412
+ bottom: 0;
26413
+ }
26414
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
26415
+ left: var(--pf-c-tooltip__arrow--Width);
26416
+ }
26417
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
26418
+ right: 0;
26419
+ left: auto;
26420
+ }
26396
26421
 
26397
26422
  .pf-c-tooltip__content {
26398
26423
  position: relative;