@patternfly/patternfly 4.151.2 → 4.152.1

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 (11) hide show
  1. package/RELEASE-NOTES.md +37 -1
  2. package/components/Nav/nav.css +5 -7
  3. package/components/Nav/nav.scss +6 -10
  4. package/components/Tooltip/tooltip.css +18 -4
  5. package/components/Tooltip/tooltip.scss +42 -4
  6. package/docs/components/Tooltip/examples/Tooltip.md +56 -10
  7. package/package.json +1 -1
  8. package/patternfly-no-reset.css +23 -11
  9. package/patternfly.css +23 -11
  10. package/patternfly.min.css +1 -1
  11. 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)
@@ -12,8 +48,8 @@ Packages released:
12
48
  - **Backdrop:** Added var for position to allow customization ([#4391](https://github.com/patternfly/patternfly/pull/4391))
13
49
  - **Banner:** Added link style ([#4383](https://github.com/patternfly/patternfly/pull/4383))
14
50
  - **Card:**
15
- * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
16
51
  * Updated log view and event view demos ([#4371](https://github.com/patternfly/patternfly/pull/4371))
52
+ * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
17
53
  - **Drag drop:**
18
54
  * Added drag drop ([#4398](https://github.com/patternfly/patternfly/pull/4398))
19
55
  * Moved drag drop styles into component ([#4404](https://github.com/patternfly/patternfly/pull/4404))
package/components/Nav/nav.css CHANGED
@@ -25,7 +25,7 @@
25
25
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
26
26
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
27
27
  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
28
- --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
28
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
29
29
  --pf-c-nav__item__toggle-icon--Rotate: 0;
30
30
  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
31
31
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
@@ -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
@@ -31,7 +31,7 @@
31
31
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
32
32
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
33
33
  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
34
- --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
34
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
35
35
  --pf-c-nav__item__toggle-icon--Rotate: 0;
36
36
  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
37
37
 
@@ -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/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/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.2",
4
+ "version": "4.152.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -16510,7 +16510,7 @@ ul.pf-c-list {
16510
16510
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
16511
16511
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
16512
16512
  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
16513
- --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
16513
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
16514
16514
  --pf-c-nav__item__toggle-icon--Rotate: 0;
16515
16515
  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
16516
16516
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
@@ -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
 
@@ -26237,26 +26235,40 @@ svg.pf-c-spinner.pf-m-xl {
26237
26235
  max-width: var(--pf-c-tooltip--MaxWidth);
26238
26236
  box-shadow: var(--pf-c-tooltip--BoxShadow);
26239
26237
  }
26240
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
26238
+ .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
26239
  bottom: 0;
26242
26240
  left: 50%;
26243
26241
  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
26242
  }
26245
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
26243
+ .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
26244
  top: 0;
26247
26245
  left: 50%;
26248
26246
  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
26247
  }
26250
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
26248
+ .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
26249
  top: 50%;
26252
26250
  right: 0;
26253
26251
  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
26252
  }
26255
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
26253
+ .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
26254
  top: 50%;
26257
26255
  left: 0;
26258
26256
  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
26257
  }
26258
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
26259
+ top: var(--pf-c-tooltip__arrow--Height);
26260
+ }
26261
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
26262
+ top: auto;
26263
+ bottom: 0;
26264
+ }
26265
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
26266
+ left: var(--pf-c-tooltip__arrow--Width);
26267
+ }
26268
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
26269
+ right: 0;
26270
+ left: auto;
26271
+ }
26260
26272
 
26261
26273
  .pf-c-tooltip__content {
26262
26274
  position: relative;
package/patternfly.css CHANGED
@@ -16646,7 +16646,7 @@ ul.pf-c-list {
16646
16646
  --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
16647
16647
  --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
16648
16648
  --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
16649
- --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
16649
+ --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
16650
16650
  --pf-c-nav__item__toggle-icon--Rotate: 0;
16651
16651
  --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
16652
16652
  --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
@@ -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
 
@@ -26373,26 +26371,40 @@ svg.pf-c-spinner.pf-m-xl {
26373
26371
  max-width: var(--pf-c-tooltip--MaxWidth);
26374
26372
  box-shadow: var(--pf-c-tooltip--BoxShadow);
26375
26373
  }
26376
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
26374
+ .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
26375
  bottom: 0;
26378
26376
  left: 50%;
26379
26377
  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
26378
  }
26381
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
26379
+ .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
26380
  top: 0;
26383
26381
  left: 50%;
26384
26382
  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
26383
  }
26386
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
26384
+ .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
26385
  top: 50%;
26388
26386
  right: 0;
26389
26387
  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
26388
  }
26391
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
26389
+ .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
26390
  top: 50%;
26393
26391
  left: 0;
26394
26392
  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
26393
  }
26394
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
26395
+ top: var(--pf-c-tooltip__arrow--Height);
26396
+ }
26397
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
26398
+ top: auto;
26399
+ bottom: 0;
26400
+ }
26401
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
26402
+ left: var(--pf-c-tooltip__arrow--Width);
26403
+ }
26404
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
26405
+ right: 0;
26406
+ left: auto;
26407
+ }
26396
26408
 
26397
26409
  .pf-c-tooltip__content {
26398
26410
  position: relative;