@patternfly/patternfly 5.1.0-prerelease.12 → 5.1.0-prerelease.14

package/components/Alert/alert.css

@@ -159,6 +159,9 @@
   transition: var(--pf-v5-c-alert__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-alert__icon {
   display: flex;

package/components/Alert/alert.scss

@@ -199,6 +199,8 @@
 }
 
 .#{$alert}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   display: inline-block;
   transition: var(--#{$alert}__toggle-icon--Transition);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));

package/components/CalendarMonth/calendar-month.css

@@ -84,6 +84,10 @@
   margin-inline-start: var(--pf-v5-c-calendar-month__header-nav-control--MarginLeft);
   margin-inline-end: var(--pf-v5-c-calendar-month__header-nav-control--MarginRight);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-calendar-month__header-nav-control {
+  scale: -1 1;
+}
+
 .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month {
   --pf-v5-c-calendar-month__header-nav-control--MarginRight: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight);
   --pf-v5-c-calendar-month__header-nav-control--MarginLeft: var(--pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft);

package/components/CalendarMonth/calendar-month.scss

@@ -81,6 +81,8 @@
 }
 
 .#{$calendar-month}__header-nav-control {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginLeft);
   margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginRight);
 

package/components/Card/card.css

@@ -270,6 +270,9 @@
   display: inline-block;
   transition: var(--pf-v5-c-card__header-toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-card__header-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-card__title-text {
   font-family: var(--pf-v5-c-card__title-text--FontFamily);

package/components/Card/card.scss

@@ -369,6 +369,8 @@
 }
 
 .#{$card}__header-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   transition: var(--#{$card}__header-toggle-icon--Transition);
 }

package/components/ClipboardCopy/clipboard-copy.css

@@ -50,6 +50,9 @@
 .pf-v5-c-clipboard-copy__toggle-icon {
   transition: var(--pf-v5-c-clipboard-copy__toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-clipboard-copy__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-clipboard-copy__expandable-content {
   padding-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingTop);

package/components/ClipboardCopy/clipboard-copy.scss

@@ -66,6 +66,8 @@
 }
 
 .#{$clipboard-copy}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
 }
 

package/components/JumpLinks/jump-links.css

@@ -252,6 +252,9 @@
   transition: var(--pf-v5-c-jump-links__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-jump-links__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-jump-links__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-jump-links__toggle-text {
   margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft);

package/components/JumpLinks/jump-links.scss

@@ -230,6 +230,8 @@ $pf-v5-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 }
 
 .#{$jump-links}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   color: var(--#{$jump-links}__toggle-icon--Color);
   transition: var(--#{$jump-links}__toggle-icon--Transition);

package/components/Menu/menu.css

@@ -259,6 +259,10 @@
 .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__content > .pf-v5-c-menu__list, .pf-v5-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v5-c-menu__list {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu {
   --pf-v5-c-menu--BoxShadow: none;
   position: absolute;
@@ -270,6 +274,10 @@
 .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu.pf-m-drilldown > .pf-v5-c-menu__content .pf-v5-c-menu.pf-m-drilled-in {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-menu.pf-m-drilldown .pf-v5-c-menu__list {
   position: relative;
   overflow: hidden;
@@ -569,6 +577,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   padding-inline-end: var(--pf-v5-c-menu__item-toggle-icon--PaddingRight);
   color: var(--pf-v5-c-menu__item-toggle-icon, inherit);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-menu__item-text + .pf-v5-c-menu__item-toggle-icon {
   margin-inline-start: var(--pf-v5-c-menu__item-text--item-toggle-icon--MarginLeft);

package/components/Menu/menu.scss

@@ -282,7 +282,11 @@
       // target first list in menu
       > .#{$menu}__content > .#{$menu}__list,
       > .#{$menu}__list {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );    
       }
       // stylelint-enable
     }
@@ -299,7 +303,11 @@
 
       // stylelint-disable selector-max-class
       &.pf-m-drilled-in {
-        transform: translateX(-100%);
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(-100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+        );
       }
       // stylelint-enable
     }
@@ -686,6 +694,8 @@
 
 // Toggle icon
 .#{$menu}__item-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+  
   padding-inline-start: var(--#{$menu}__item-toggle-icon--PaddingLeft);
   padding-inline-end: var(--#{$menu}__item-toggle-icon--PaddingRight);
   color: var(--#{$menu}__item-toggle-icon, inherit);

package/components/Nav/nav.css

@@ -414,6 +414,10 @@
 .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
   margin-inline-start: calc(var(--pf-v5-c-menu__item-toggle-icon--PaddingLeft) * -1);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav .pf-v5-c-menu__item-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav.pf-m-horizontal .pf-v5-c-nav__link::after, .pf-v5-c-nav.pf-m-tertiary .pf-v5-c-nav__link::after {
   content: none;
 }
@@ -857,6 +861,10 @@
   display: inline-block;
   transition: var(--pf-v5-c-nav__toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__item.pf-m-expanded .pf-v5-c-nav__toggle-icon {
   transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
@@ -912,6 +920,10 @@
   opacity: 0;
   transition: var(--pf-v5-c-nav__scroll-button--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button > * {
+  scale: -1 1;
+}
+
 .pf-v5-c-nav__scroll-button::before {
   position: absolute;
   inset-block-start: 0;
@@ -939,6 +951,10 @@
   margin-inline-end: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(1) {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(1)::before {
   inset-inline-end: 0;
 }
@@ -947,6 +963,10 @@
   margin-inline-start: calc(var(--pf-v5-c-nav__scroll-button--Width) * -1);
   transform: translateX(100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button:nth-of-type(2) {
+  transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-nav__scroll-button:nth-of-type(2)::before {
   inset-inline-start: 0;
 }

package/components/Nav/nav.scss

@@ -508,6 +508,8 @@
   }
 
   .#{$menu}__item-toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     margin-inline-start: calc(var(--#{$menu}__item-toggle-icon--PaddingLeft) * -1);
   }
 
@@ -1064,6 +1066,8 @@
   display: inline-block;
   transition: var(--#{$nav}__toggle-icon--Transition);
 
+  @include pf-v5-mirror-inline-on-rtl;
+
   .#{$nav}__item.pf-m-expanded & {
     transform: rotate(var(--#{$nav}__item--m-expanded__toggle-icon--Rotate));
   }
@@ -1132,6 +1136,12 @@
   opacity: 0;
   transition: var(--#{$nav}__scroll-button--Transition);
 
+  // Mirror only the contents to avoid flipping the borders
+  // TODO at breaking change, add an icon wrapper to be mirrored
+  > * {
+    @include pf-v5-mirror-inline-on-rtl;
+  }
+
   &::before {
     position: absolute;
     inset-block-start: 0;
@@ -1163,8 +1173,13 @@
     --#{$nav}__scroll-button--before--BorderRightWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-end: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(-100%);
 
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(-100%),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
+    );
+  
     &::before {
      inset-inline-end: 0;
     }
@@ -1174,7 +1189,12 @@
     --#{$nav}__scroll-button--before--BorderLeftWidth: var(--#{$nav}__scroll-button--before--BorderWidth);
 
     margin-inline-start: calc(var(--#{$nav}__scroll-button--Width) * -1);
-    transform: translateX(100%);
+
+    @include pf-v5-bidirectional-style(
+      $prop: transform,
+      $ltr-val: translateX(100%),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(100%)})
+    );
 
     &::before {
      inset-inline-start: 0;

package/components/NotificationDrawer/notification-drawer.css

@@ -267,6 +267,10 @@
   color: var(--pf-v5-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v5-c-notification-drawer__group-toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/components/NotificationDrawer/notification-drawer.scss

@@ -307,6 +307,8 @@
 }
 
 .#{$notification-drawer}__group-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginRight);
   color: var(--#{$notification-drawer}__group-toggle-icon--Color);
   transition: var(--#{$notification-drawer}__group-toggle-icon--Transition);

package/components/Page/page.css

@@ -399,6 +399,10 @@
   transition: var(--pf-v5-c-page__sidebar--Transition);
   transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
+  transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
+}
+
 .pf-v5-c-page__sidebar.pf-m-expanded {
   --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
   box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);

package/components/Page/page.scss

@@ -404,7 +404,12 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$page}__sidebar--BackgroundColor);
   transition: var(--#{$page}__sidebar--Transition);
-  transform: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ));
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
+    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
+  );
 
   // Mobile
   // Expanded nav

package/components/Tabs/tabs.css

@@ -417,6 +417,9 @@
   transition: var(--pf-v5-c-tabs__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tabs__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tabs__toggle-text {
   margin-inline-start: var(--pf-v5-c-tabs__toggle-text--MarginLeft);
@@ -591,6 +594,9 @@
   transition: var(--pf-v5-c-tabs__link-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tabs__link-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__link-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tabs__item-action {
   display: flex;
@@ -622,6 +628,10 @@
   opacity: 0;
   transition: margin var(--pf-v5-c-tabs__scroll-button--TransitionDuration--margin), transform var(--pf-v5-c-tabs__scroll-button--TransitionDuration--transform), opacity var(--pf-v5-c-tabs__scroll-button--TransitionDuration--opacity);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tabs__scroll-button > * {
+  scale: -1 1;
+}
+
 .pf-v5-c-tabs__scroll-button:hover, .pf-v5-c-tabs__scroll-button:active, .pf-v5-c-tabs__scroll-button:focus {
   --pf-v5-c-tabs__scroll-button--Color: var(--pf-v5-c-tabs__scroll-button--hover--Color);
 }

package/components/Tabs/tabs.scss

@@ -490,6 +490,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   display: inline-block;
   color: var(--#{$tabs}__toggle-icon--Color);
   transition: var(--#{$tabs}__toggle-icon--Transition);
@@ -700,6 +702,8 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
 }
 
 .#{$tabs}__link-toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   align-self: end;
   font-size: var(--#{$tabs}__link-toggle-icon--FontSize);
   color: var(--#{$tabs}__link-toggle-icon--Color);
@@ -741,6 +745,10 @@ $pf-v5-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   opacity: 0;
   transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
 
+  > * {
+    @include pf-v5-mirror-inline-on-rtl; // in breaking change, add an icon wrapper and move this style to the wrapper
+  }
+
   &:hover,
   &:active,
   &:focus {

package/docs/demos/Card/examples/Card.md

@@ -248,7 +248,7 @@ wrapperTag: div
                 <span class="pf-v5-c-label__text">Set up your cluster</span>
               </span>
             </span>
-            <p>Continue setting up your cluster to access all you cain in the Console</p>
+            <p>Continue setting up your cluster to access all you can in the Console</p>
             <ul class="pf-v5-c-list pf-m-plain" role="list">
               <li>
                 <a href="#">Add identity provider</a>
@@ -266,7 +266,11 @@ wrapperTag: div
             <span
               class="pf-v5-c-button__icon pf-m-end"
             >
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -297,7 +301,11 @@ wrapperTag: div
           <a class="pf-v5-c-button pf-m-link pf-m-inline" href="#">
             View all guided tours
             <span class="pf-v5-c-button__icon pf-m-end">
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -331,7 +339,11 @@ wrapperTag: div
           <a class="pf-v5-c-button pf-m-link pf-m-inline" href="#">
             View all quick starts
             <span class="pf-v5-c-button__icon pf-m-end">
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -370,7 +382,11 @@ wrapperTag: div
             <span
               class="pf-v5-c-button__icon pf-m-end"
             >
-              <i class="fas fa-arrow-right" aria-hidden="true"></i>
+              <span class="pf-v5-c-icon pf-v5-m-mirror-inline-rtl">
+                <span class="pf-v5-c-icon__content">
+                  <i class="fas fa-arrow-right" aria-hidden="true"></i>
+                </span>
+              </span>
             </span>
           </a>
         </div>
@@ -387,8 +403,8 @@ wrapperTag: div
 <div class="pf-v5-c-card pf-m-flat" id="card-demo-horizontal-split-example">
   <div class="pf-v5-l-grid pf-m-all-6-col-on-md">
     <div
-      class="pf-v5-l-grid__item pf-d-card__media-item"
-      style="min-height: 200px; background: center / cover url('/assets/images/pfbg_992@2x.jpg'); "
+      class="pf-v5-l-grid__item"
+      style="min-height: 200px; background: no-repeat bottom right / auto 75% url(/assets/images/pfbg-icon.svg) black;"
     ></div>
     <div class="pf-v5-l-grid__item">
       <div class="pf-v5-c-card__title">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.1.0-prerelease.12",
+  "version": "5.1.0-prerelease.14",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,7 +45,7 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.0.1",
-    "@patternfly/documentation-framework": "5.1.9",
+    "@patternfly/documentation-framework": "5.1.10",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.0.0",
     "@patternfly/react-core": "5.0.0",