@patternfly/patternfly 4.151.1 → 4.152.0

package/RELEASE-NOTES.md

@@ -4,6 +4,42 @@ section: developer-resources
 releaseNoteTOC: true
 ---
 
+## 2021.14 release notes (2021-10-26)
+Packages released:
+- [@patternfly/patternfly@v4.151.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.151.4)
+
+### Components
+- **App launcher, menu, select:** Fixed favorite colors ([#4437](https://github.com/patternfly/patternfly/pull/4437))
+- **Card:** Added hoverable/selectable/selected-raised ([#4425](https://github.com/patternfly/patternfly/pull/4425))
+- **Context selector:** Added demos ([#4454](https://github.com/patternfly/patternfly/pull/4454))
+- **Form:** Added group role to section and field group ([#4424](https://github.com/patternfly/patternfly/pull/4424))
+- **Modal:** Added demo to link form to submit button in footer ([#4432](https://github.com/patternfly/patternfly/pull/4432))
+- **Nav:**
+  - Added third level expansion ([#4460](https://github.com/patternfly/patternfly/pull/4460))
+  - Removed broken icon font size var ([#4473](https://github.com/patternfly/patternfly/pull/4473))
+- **Pagination:** Added indeterminate count example ([#4428](https://github.com/patternfly/patternfly/pull/4428))
+- **Panel:** Added panel component ([#4456](https://github.com/patternfly/patternfly/pull/4456))
+- **Popover:**
+  - Added alert styling ([#4452](https://github.com/patternfly/patternfly/pull/4452))
+  - Increased box shadow from medium to large ([#4457](https://github.com/patternfly/patternfly/pull/4457))
+- **Select:** Added vars for width/min-width ([#4443](https://github.com/patternfly/patternfly/pull/4443))
+- **Table:** Added nested headers ([#4448](https://github.com/patternfly/patternfly/pull/4448))
+- **Text input group:** Moved icon modifier to main element ([#4465](https://github.com/patternfly/patternfly/pull/4465))
+- **Tile:** Updated hover/selected styles ([#4439](https://github.com/patternfly/patternfly/pull/4439))
+- **Toolbar:** Renamed sticky-top to sticky ([#4461](https://github.com/patternfly/patternfly/pull/4461))
+- **Tooltip:** Updated spacing, arrow ([#4462](https://github.com/patternfly/patternfly/pull/4462))
+
+### Other
+- **Build:** Fix select border minification ([#4442](https://github.com/patternfly/patternfly/pull/4442))
+- **Docs:**
+  - Promote beta components ([#4459](https://github.com/patternfly/patternfly/pull/4459))
+  - Renamed drag drop to drag and drop in sidebar ([#4450](https://github.com/patternfly/patternfly/pull/4450))
+- **Global:** Updated use of date element in examples (#4412) ([#4423](https://github.com/patternfly/patternfly/pull/4423))
+- **Icons:**
+  - Copied unicodes from PF3 icons, make new icon unicodes persist ([#4402](https://github.com/patternfly/patternfly/pull/4402))
+  - Moved unicodes json write to src so it's bundled with build ([#4468](https://github.com/patternfly/patternfly/pull/4468))
+
+
 ## 2021.13 release notes (2021-10-13)
 Packages released:
 - [@patternfly/patternfly@v4.144.5](https://www.npmjs.com/package/@patternfly/patternfly/v/4.144.5)
@@ -12,8 +48,8 @@ Packages released:
 - **Backdrop:** Added var for position to allow customization ([#4391](https://github.com/patternfly/patternfly/pull/4391))
 - **Banner:** Added link style ([#4383](https://github.com/patternfly/patternfly/pull/4383))
 - **Card:**
-  * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
   * Updated log view and event view demos ([#4371](https://github.com/patternfly/patternfly/pull/4371))
+  * Fixed demo image paths ([#4400](https://github.com/patternfly/patternfly/pull/4400))
 - **Drag drop:**
   * Added drag drop ([#4398](https://github.com/patternfly/patternfly/pull/4398))
   * Moved drag drop styles into component ([#4404](https://github.com/patternfly/patternfly/pull/4404))

package/assets/icons/{fa-unicodes.json → iconUnicodes.json}

@@ -1,4 +1,127 @@
 {
+  "pf-icon-add-circle-o": "E61B",
+  "pf-icon-ansible-tower": "E950",
+  "pf-icon-applications": "E936",
+  "pf-icon-arrow": "E929",
+  "pf-icon-asleep": "E92E",
+  "pf-icon-attention-bell": "E951",
+  "pf-icon-automation": "E937",
+  "pf-icon-bell": "E952",
+  "pf-icon-blueprint": "E915",
+  "pf-icon-build": "E902",
+  "pf-icon-builder-image": "E800",
+  "pf-icon-bundle": "E918",
+  "pf-icon-catalog": "E953",
+  "pf-icon-chat": "E954",
+  "pf-icon-close": "E60B",
+  "pf-icon-cloud-security": "E903",
+  "pf-icon-cloud-tenant": "E904",
+  "pf-icon-cluster": "E620",
+  "pf-icon-connected": "E938",
+  "pf-icon-container-node": "E621",
+  "pf-icon-cpu": "E927",
+  "pf-icon-degraded": "E91B",
+  "pf-icon-disconnected": "E955",
+  "pf-icon-domain": "E919",
+  "pf-icon-edit": "E60A",
+  "pf-icon-enhancement": "E93A",
+  "pf-icon-enterprise": "E906",
+  "pf-icon-equalizer": "E956",
+  "pf-icon-error-circle-o": "E926",
+  "pf-icon-export": "E616",
+  "pf-icon-filter": "E943",
+  "pf-icon-flavor": "E957",
+  "pf-icon-folder-close": "E607",
+  "pf-icon-folder-open": "E606",
+  "pf-icon-globe-route": "E958",
+  "pf-icon-help": "E605",
+  "pf-icon-history": "E617",
+  "pf-icon-home": "E618",
+  "pf-icon-import": "E615",
+  "pf-icon-in-progress": "E933",
+  "pf-icon-info": "E92B",
+  "pf-icon-infrastructure": "E93D",
+  "pf-icon-integration": "E948",
+  "pf-icon-key": "E924",
+  "pf-icon-locked": "E923",
+  "pf-icon-maintenance": "E932",
+  "pf-icon-memory": "E908",
+  "pf-icon-messages": "E603",
+  "pf-icon-middleware": "E917",
+  "pf-icon-migration": "E931",
+  "pf-icon-module": "E959",
+  "pf-icon-monitoring": "E95A",
+  "pf-icon-namespaces": "E95B",
+  "pf-icon-network": "E909",
+  "pf-icon-new-process": "E95C",
+  "pf-icon-not-started": "E95D",
+  "pf-icon-off": "E92D",
+  "pf-icon-ok": "E602",
+  "pf-icon-on-running": "E925",
+  "pf-icon-on": "E92C",
+  "pf-icon-openshift": "E95E",
+  "pf-icon-openstack": "E95F",
+  "pf-icon-optimize": "E93E",
+  "pf-icon-orders": "E93F",
+  "pf-icon-os-image": "E960",
+  "pf-icon-package": "E961",
+  "pf-icon-panel-close": "E962",
+  "pf-icon-panel-open": "E963",
+  "pf-icon-paused": "E92F",
+  "pf-icon-pending": "E964",
+  "pf-icon-pficon-dragdrop": "E965",
+  "pf-icon-pficon-history": "E966",
+  "pf-icon-pficon-network-range": "E967",
+  "pf-icon-pficon-satellite": "E968",
+  "pf-icon-pficon-sort-common-asc": "E94E",
+  "pf-icon-pficon-sort-common-desc": "E94F",
+  "pf-icon-pficon-template": "E94C",
+  "pf-icon-pficon-vcenter": "E969",
+  "pf-icon-plugged": "E96A",
+  "pf-icon-port": "E96B",
+  "pf-icon-print": "E612",
+  "pf-icon-private": "E914",
+  "pf-icon-process-automation": "E949",
+  "pf-icon-project": "E96C",
+  "pf-icon-rebalance": "E91C",
+  "pf-icon-rebooting": "E96D",
+  "pf-icon-regions": "E90A",
+  "pf-icon-registry": "E623",
+  "pf-icon-remove2": "E96E",
+  "pf-icon-replicator": "E624",
+  "pf-icon-repository": "E90B",
+  "pf-icon-resource-pool": "E90C",
+  "pf-icon-resources-almost-empty": "E91D",
+  "pf-icon-resources-almost-full": "E912",
+  "pf-icon-resources-empty": "E96F",
+  "pf-icon-resources-full": "E913",
+  "pf-icon-running": "E970",
+  "pf-icon-save": "E601",
+  "pf-icon-screen": "E971",
+  "pf-icon-security": "E946",
+  "pf-icon-server-group": "E91A",
+  "pf-icon-server": "E90D",
+  "pf-icon-service-catalog": "E972",
+  "pf-icon-service": "E61E",
+  "pf-icon-services": "E947",
+  "pf-icon-spinner": "E973",
+  "pf-icon-spinner2": "E613",
+  "pf-icon-storage-domain": "E90E",
+  "pf-icon-task": "E974",
+  "pf-icon-tenant": "E916",
+  "pf-icon-thumb-tack": "E920",
+  "pf-icon-topology": "E608",
+  "pf-icon-trend-down": "E900",
+  "pf-icon-trend-up": "E901",
+  "pf-icon-unknown": "E935",
+  "pf-icon-unlocked": "E922",
+  "pf-icon-unplugged": "E942",
+  "pf-icon-user": "E91E",
+  "pf-icon-users": "E91F",
+  "pf-icon-virtual-machine": "E90F",
+  "pf-icon-volume": "E910",
+  "pf-icon-warning-triangle": "E975",
+  "pf-icon-zone": "E911",
   "fa-500px": "f26e",
   "fa-accessible-icon": "f368",
   "fa-accusoft": "f369",

package/components/Nav/nav.css

@@ -25,7 +25,7 @@
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
-  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-nav__item__toggle-icon--Rotate: 0;
   --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);

package/components/Nav/nav.scss

@@ -31,7 +31,7 @@
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
-  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-nav__item__toggle-icon--Rotate: 0;
   --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
 

package/components/Tooltip/tooltip.css

@@ -26,26 +26,40 @@
   max-width: var(--pf-c-tooltip--MaxWidth);
   box-shadow: var(--pf-c-tooltip--BoxShadow);
 }
-.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
+.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 {
   bottom: 0;
   left: 50%;
   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));
 }
-.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
+.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 {
   top: 0;
   left: 50%;
   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));
 }
-.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
+.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 {
   top: 50%;
   right: 0;
   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));
 }
-.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
+.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 {
   top: 50%;
   left: 0;
   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));
 }
+.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
+  top: var(--pf-c-tooltip__arrow--Height);
+}
+.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
+  top: auto;
+  bottom: 0;
+}
+.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
+  left: var(--pf-c-tooltip__arrow--Width);
+}
+.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
+  right: 0;
+  left: auto;
+}
 
 .pf-c-tooltip__content {
   position: relative;

package/components/Tooltip/tooltip.scss

@@ -32,7 +32,9 @@
   max-width: var(--pf-c-tooltip--MaxWidth);
   box-shadow: var(--pf-c-tooltip--BoxShadow);
 
-  &.pf-m-top {
+  &.pf-m-top,
+  &.pf-m-top-left,
+  &.pf-m-top-right {
     .pf-c-tooltip__arrow {
       bottom: 0;
       left: 50%;
@@ -40,7 +42,9 @@
     }
   }
 
-  &.pf-m-bottom {
+  &.pf-m-bottom,
+  &.pf-m-bottom-left,
+  &.pf-m-bottom-right {
     .pf-c-tooltip__arrow {
       top: 0;
       left: 50%;
@@ -48,7 +52,9 @@
     }
   }
 
-  &.pf-m-left {
+  &.pf-m-left,
+  &.pf-m-left-top,
+  &.pf-m-left-bottom {
     .pf-c-tooltip__arrow {
       top: 50%;
       right: 0;
@@ -56,13 +62,45 @@
     }
   }
 
-  &.pf-m-right {
+  &.pf-m-right,
+  &.pf-m-right-top,
+  &.pf-m-right-bottom {
     .pf-c-tooltip__arrow {
       top: 50%;
       left: 0;
       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));
     }
   }
+
+  &.pf-m-left-top,
+  &.pf-m-right-top {
+    .pf-c-tooltip__arrow {
+      top: var(--pf-c-tooltip__arrow--Height);
+    }
+  }
+
+  &.pf-m-left-bottom,
+  &.pf-m-right-bottom {
+    .pf-c-tooltip__arrow {
+      top: auto;
+      bottom: 0;
+    }
+  }
+
+  &.pf-m-top-left,
+  &.pf-m-bottom-left {
+    .pf-c-tooltip__arrow {
+      left: var(--pf-c-tooltip__arrow--Width);
+    }
+  }
+
+  &.pf-m-top-right,
+  &.pf-m-bottom-right {
+    .pf-c-tooltip__arrow {
+      right: 0;
+      left: auto;
+    }
+  }
 }
 
 .pf-c-tooltip__content {

package/docs/components/Tooltip/examples/Tooltip.md

@@ -60,6 +60,52 @@ cssPrefix: pf-c-tooltip
 
 ```
 
+### Left with top and bottom positions
+
+```html
+<div class="pf-c-tooltip pf-m-left-top" role="tooltip">
+  <div class="pf-c-tooltip__arrow"></div>
+
+  <div
+    class="pf-c-tooltip__content"
+    id="tooltip-left-top-content"
+  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+</div>
+<br />
+<div class="pf-c-tooltip pf-m-left-bottom" role="tooltip">
+  <div class="pf-c-tooltip__arrow"></div>
+
+  <div
+    class="pf-c-tooltip__content"
+    id="tooltip-left-bottom-content"
+  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+</div>
+
+```
+
+### Bottom with left and right positions
+
+```html
+<div class="pf-c-tooltip pf-m-bottom-left" role="tooltip">
+  <div class="pf-c-tooltip__arrow"></div>
+
+  <div
+    class="pf-c-tooltip__content"
+    id="tooltip-bottom-left-content"
+  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+</div>
+<br />
+<div class="pf-c-tooltip pf-m-bottom-right" role="tooltip">
+  <div class="pf-c-tooltip__arrow"></div>
+
+  <div
+    class="pf-c-tooltip__content"
+    id="tooltip-bottom-right-content"
+  >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
+</div>
+
+```
+
 ### Left aligned text
 
 ```html
@@ -89,13 +135,13 @@ A tooltip is used to provide contextual information for another component on hov
 
 ### Usage
 
-| Class                    | Applied to               | Outcome                                                                                                                           |
-| ------------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-tooltip`          | `<div>`                  | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required** |
-| `.pf-c-tooltip__arrow`   | `<div>`                  | Creates an arrow pointing towards the element the tooltip describes. **Required**                                                 |
-| `.pf-c-tooltip__content` | `<div>`                  | Creates the body of the tooltip. **Required**                                                                                     |
-| `.pf-m-left`             | `.pf-c-tooltip`          | Positions the tooltip to the left of the element.                                                                                 |
-| `.pf-m-right`            | `.pf-c-tooltip`          | Positions the tooltip to the right of the element.                                                                                |
-| `.pf-m-top`              | `.pf-c-tooltip`          | Positions the tooltip to the top of the element.                                                                                  |
-| `.pf-m-bottom`           | `.pf-c-tooltip`          | Positions the tooltip to the bottom of the element.                                                                               |
-| `.pf-m-text-align-left`  | `.pf-c-tooltip__content` | Modifies tooltip content to text align left.                                                                                      |
+| Class                       | Applied to               | Outcome                                                                                                                           |
+| --------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-tooltip`             | `<div>`                  | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required** |
+| `.pf-c-tooltip__arrow`      | `<div>`                  | Creates an arrow pointing towards the element the tooltip describes. **Required**                                                 |
+| `.pf-c-tooltip__content`    | `<div>`                  | Creates the body of the tooltip. **Required**                                                                                     |
+| `.pf-m-left{-top/bottom}`   | `.pf-c-tooltip`          | Positions the tooltip to the left (or left top/left bottom) of the element.                                                       |
+| `.pf-m-right{-top/bottom}`  | `.pf-c-tooltip`          | Positions the tooltip to the right (or right top/right bottom) of the element.                                                    |
+| `.pf-m-top{-left/right}`    | `.pf-c-tooltip`          | Positions the tooltip to the top (or top left/top right) of the element.                                                          |
+| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip`          | Positions the tooltip to the bottom (or bottom left/bottom right) of the element.                                                 |
+| `.pf-m-text-align-left`     | `.pf-c-tooltip__content` | Modifies tooltip content to text align left.                                                                                      |

package/package.json

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

package/patternfly-no-reset.css

@@ -16510,7 +16510,7 @@ ul.pf-c-list {
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
-  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-nav__item__toggle-icon--Rotate: 0;
   --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
@@ -26237,26 +26237,40 @@ svg.pf-c-spinner.pf-m-xl {
   max-width: var(--pf-c-tooltip--MaxWidth);
   box-shadow: var(--pf-c-tooltip--BoxShadow);
 }
-.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
+.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 {
   bottom: 0;
   left: 50%;
   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));
 }
-.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
+.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 {
   top: 0;
   left: 50%;
   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));
 }
-.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
+.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 {
   top: 50%;
   right: 0;
   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));
 }
-.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
+.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 {
   top: 50%;
   left: 0;
   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));
 }
+.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
+  top: var(--pf-c-tooltip__arrow--Height);
+}
+.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
+  top: auto;
+  bottom: 0;
+}
+.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
+  left: var(--pf-c-tooltip__arrow--Width);
+}
+.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
+  right: 0;
+  left: auto;
+}
 
 .pf-c-tooltip__content {
   position: relative;

package/patternfly.css

@@ -16646,7 +16646,7 @@ ul.pf-c-list {
   --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
   --pf-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-nav__item__item__link--PaddingRight: var(--pf-global--spacer--xl);
-  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--icon--FontSize--xs);
+  --pf-c-nav__item__item__toggle--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-nav__item__toggle-icon--Rotate: 0;
   --pf-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-c-nav__item--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
@@ -26373,26 +26373,40 @@ svg.pf-c-spinner.pf-m-xl {
   max-width: var(--pf-c-tooltip--MaxWidth);
   box-shadow: var(--pf-c-tooltip--BoxShadow);
 }
-.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
+.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 {
   bottom: 0;
   left: 50%;
   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));
 }
-.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
+.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 {
   top: 0;
   left: 50%;
   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));
 }
-.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
+.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 {
   top: 50%;
   right: 0;
   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));
 }
-.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
+.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 {
   top: 50%;
   left: 0;
   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));
 }
+.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
+  top: var(--pf-c-tooltip__arrow--Height);
+}
+.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
+  top: auto;
+  bottom: 0;
+}
+.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
+  left: var(--pf-c-tooltip__arrow--Width);
+}
+.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
+  right: 0;
+  left: auto;
+}
 
 .pf-c-tooltip__content {
   position: relative;