@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.8

package/components/DataList/data-list.scss

@@ -167,7 +167,7 @@
   font-size: var(--#{$data-list}--FontSize);
   line-height: var(--#{$data-list}--LineHeight);
   overflow-wrap: break-word;
-  border-top: var(--#{$data-list}--BorderTopWidth) solid var(--#{$data-list}--BorderTopColor);
+  border-block-start: var(--#{$data-list}--BorderTopWidth) solid var(--#{$data-list}--BorderTopColor);
 
   &.pf-m-compact {
     --#{$data-list}__check--FontSize: var(--#{$data-list}--m-compact__check--FontSize);
@@ -233,13 +233,13 @@
   display: flex;
   flex-direction: column;
   background-color: var(--#{$data-list}__item--BackgroundColor);
-  border-bottom: var(--#{$data-list}__item--BorderBottomWidth) solid var(--#{$data-list}__item--BorderBottomColor);
+  border-block-end: var(--#{$data-list}__item--BorderBottomWidth) solid var(--#{$data-list}__item--BorderBottomColor);
 
   &::before {
     position: absolute;
-    top: var(--#{$data-list}__item--before--Top);
-    bottom: 0;
-    left: 0;
+    inset-block-start: var(--#{$data-list}__item--before--Top);
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: var(--#{$data-list}__item--before--Width);
     content: "";
     background-color: var(--#{$data-list}__item--before--BackgroundColor);
@@ -262,7 +262,7 @@
 
         // stylelint-disable
         + .#{$data-list}__item {
-          border-top: var(--#{$data-list}__item--m-clickable--hover--item--BorderTopWidth) solid var(--#{$data-list}__item--m-clickable--hover--item--BorderTopColor);
+          border-block-start: var(--#{$data-list}__item--m-clickable--hover--item--BorderTopWidth) solid var(--#{$data-list}__item--m-clickable--hover--item--BorderTopColor);
         }
         // stylelint-enable
       }
@@ -292,10 +292,10 @@
   &.pf-m-ghost-row {
     &::after {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       content: "";
       background-color: var(--#{$data-list}__item--m-ghost-row--after--BackgroundColor);
       opacity: var(--#{$data-list}__item--m-ghost-row--after--Opacity);
@@ -310,19 +310,19 @@
 .#{$data-list}__item-row {
   display: flex;
   flex-wrap: nowrap;
-  padding-right: var(--#{$data-list}__item-row--PaddingRight);
-  padding-left: var(--#{$data-list}__item-row--PaddingLeft);
+  padding-inline-start: var(--#{$data-list}__item-row--PaddingLeft);
+  padding-inline-end: var(--#{$data-list}__item-row--PaddingRight);
 }
 
 .#{$data-list}__item-control {
   display: flex;
   flex-wrap: nowrap;
-  padding-top: var(--#{$data-list}__item-control--PaddingTop);
-  padding-bottom: var(--#{$data-list}__item-control--PaddingBottom);
-  margin-right: var(--#{$data-list}__item-control--MarginRight);
+  padding-block-start: var(--#{$data-list}__item-control--PaddingTop);
+  padding-block-end: var(--#{$data-list}__item-control--PaddingBottom);
+  margin-inline-end: var(--#{$data-list}__item-control--MarginRight);
 
   > *:not(:last-child) {
-    margin-right: var(--#{$data-list}__item-control--not-last-child--MarginRight);
+    margin-inline-end: var(--#{$data-list}__item-control--not-last-child--MarginRight);
   }
 }
 
@@ -331,7 +331,7 @@
   align-items: center;
   align-self: flex-start;
   height: var(--#{$data-list}__check--Height);
-  margin-top: var(--#{$data-list}__check--MarginTop);
+  margin-block-start: var(--#{$data-list}__check--MarginTop);
 
   > input {
     cursor: pointer;
@@ -341,8 +341,13 @@
 .#{$data-list}__item-draggable-button {
   display: flex;
   flex-direction: column; // fixes safari alignment
-  padding: var(--#{$data-list}__item-draggable-button--PaddingTop) var(--#{$data-list}__item-draggable-button--PaddingRight) var(--#{$data-list}__item-draggable-button--PaddingBottom) var(--#{$data-list}__item-draggable-button--PaddingLeft);
-  margin: var(--#{$data-list}__item-draggable-button--MarginTop) 0 var(--#{$data-list}__item-draggable-button--MarginBottom) var(--#{$data-list}__item-draggable-button--MarginLeft);
+  padding-block-start: var(--#{$data-list}__item-draggable-button--PaddingTop);
+  padding-block-end: var(--#{$data-list}__item-draggable-button--PaddingBottom);
+  padding-inline-start: var(--#{$data-list}__item-draggable-button--PaddingLeft);
+  padding-inline-end: var(--#{$data-list}__item-draggable-button--PaddingRight);
+  margin-block-start: var(--#{$data-list}__item-draggable-button--MarginTop);
+  margin-block-end: var(--#{$data-list}__item-draggable-button--MarginBottom);
+  margin-inline-start: var(--#{$data-list}__item-draggable-button--MarginLeft);
   background-color: var(--#{$data-list}__item-draggable-button--BackgroundColor);
   border: 0;
 
@@ -376,28 +381,32 @@
 
   align-content: flex-start;
   align-items: flex-start;
-  padding-top: var(--#{$data-list}__item-action--PaddingTop);
-  padding-bottom: var(--#{$data-list}__item-action--PaddingBottom);
-  margin-left: var(--#{$data-list}__item-action--MarginLeft);
+  padding-block-start: var(--#{$data-list}__item-action--PaddingTop);
+  padding-block-end: var(--#{$data-list}__item-action--PaddingBottom);
+  margin-inline-start: var(--#{$data-list}__item-action--MarginLeft);
 
   > *:not(:last-child) {
-    margin-right: var(--#{$data-list}__item-action--not-last-child--MarginRight);
+    margin-inline-end: var(--#{$data-list}__item-action--not-last-child--MarginRight);
   }
 
   // offset action button
   .#{$data-list}__action {
-    margin-top: var(--#{$data-list}__action--MarginTop);
-    margin-bottom: var(--#{$data-list}__item-action__action--MarginBottom);
+    margin-block-start: var(--#{$data-list}__action--MarginTop);
+    margin-block-end: var(--#{$data-list}__item-action__action--MarginBottom);
   }
 }
 
 // toggle
 .#{$data-list}__toggle {
-  margin: var(--#{$data-list}__toggle--MarginTop) 0 var(--#{$data-list}__toggle--MarginBottom) var(--#{$data-list}__toggle--MarginLeft);
+  margin-block-start: var(--#{$data-list}__toggle--MarginTop);
+  margin-block-end: var(--#{$data-list}__toggle--MarginBottom);
+  margin-inline-start: var(--#{$data-list}__toggle--MarginLeft);
 }
 
 // toggle icon rotate
 .#{$data-list}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   height: var(--#{$data-list}__toggle-icon--Height);
   pointer-events: none;
   transition: var(--#{$data-list}__toggle-icon--Transition);
@@ -414,29 +423,29 @@
 .#{$data-list}__cell {
   flex: 1;
   grid-column: 1 / -1;
-  padding-top: var(--#{$data-list}__cell--PaddingTop);
-  padding-bottom: var(--#{$data-list}__cell--PaddingBottom);
+  padding-block-start: var(--#{$data-list}__cell--PaddingTop);
+  padding-block-end: var(--#{$data-list}__cell--PaddingBottom);
 
   // for all subsequent .#{$data-list}__cell's, set to full width
   & + & {
     flex: 1 0 100%;
     order: 1;
-    padding-top: var(--#{$data-list}__cell--cell--PaddingTop);
+    padding-block-start: var(--#{$data-list}__cell--cell--PaddingTop);
   }
 
   &.pf-m-icon {
     flex-grow: 0;
     grid-column: 1 / 2;
-    margin-right: var(--#{$data-list}__cell--m-icon--MarginRight);
+    margin-inline-end: var(--#{$data-list}__cell--m-icon--MarginRight);
   }
 
   &.pf-m-icon + & {
     grid-column: 2 / 3;
-    padding-top: var(--#{$data-list}__cell--m-icon--cell--PaddingTop);
+    padding-block-start: var(--#{$data-list}__cell--m-icon--cell--PaddingTop);
   }
 
   &.pf-m-align-right {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
 
@@ -461,14 +470,17 @@
   overflow-y: auto;
 
   .#{$data-list}__expandable-content-body {
-    padding: var(--#{$data-list}__expandable-content-body--PaddingTop) var(--#{$data-list}__expandable-content-body--PaddingRight) var(--#{$data-list}__expandable-content-body--PaddingBottom) var(--#{$data-list}__expandable-content-body--PaddingLeft);
+    padding-block-start: var(--#{$data-list}__expandable-content-body--PaddingTop);
+    padding-block-end: var(--#{$data-list}__expandable-content-body--PaddingBottom);
+    padding-inline-start: var(--#{$data-list}__expandable-content-body--PaddingLeft);
+    padding-inline-end: var(--#{$data-list}__expandable-content-body--PaddingRight);
 
     > .#{$data-list} {
-      margin-left: var(--#{$data-list}--MarginLeft);
+      margin-inline-start: var(--#{$data-list}--MarginLeft);
     }
 
     .#{$data-list}__item:last-child {
-      border-bottom: 0;
+      border-block-end: 0;
     }
 
     .#{$data-list}__item-row {

package/components/DatePicker/date-picker.css

@@ -18,7 +18,7 @@
 }
 
 .pf-v5-c-date-picker__helper-text {
-  margin-top: var(--pf-v5-c-date-picker__helper-text--MarginTop);
+  margin-block-start: var(--pf-v5-c-date-picker__helper-text--MarginTop);
 }
 
 .pf-v5-c-date-picker__input .pf-v5-c-form-control {
@@ -27,9 +27,9 @@
 
 .pf-v5-c-date-picker__calendar {
   position: absolute;
-  top: var(--pf-v5-c-date-picker__calendar--Top);
-  right: var(--pf-v5-c-date-picker__calendar--Right);
-  left: var(--pf-v5-c-date-picker__calendar--Left);
+  inset-block-start: var(--pf-v5-c-date-picker__calendar--Top);
+  inset-inline-start: var(--pf-v5-c-date-picker__calendar--Left);
+  inset-inline-end: var(--pf-v5-c-date-picker__calendar--Right);
   z-index: var(--pf-v5-c-date-picker__calendar--ZIndex);
   background-color: var(--pf-v5-c-date-picker__calendar--BackgroundColor);
   box-shadow: var(--pf-v5-c-date-picker__calendar--BoxShadow);
@@ -45,10 +45,10 @@
 .pf-v5-c-date-picker__calendar.pf-m-static {
   --pf-v5-c-date-picker--m-top__calendar--TranslateY: 0;
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
 }

package/components/DatePicker/date-picker.scss

@@ -21,7 +21,7 @@
 }
 
 .#{$date-picker}__helper-text {
-  margin-top: var(--#{$date-picker}__helper-text--MarginTop);
+  margin-block-start: var(--#{$date-picker}__helper-text--MarginTop);
 }
 
 .#{$date-picker}__input {
@@ -32,9 +32,9 @@
 
 .#{$date-picker}__calendar {
   position: absolute;
-  top: var(--#{$date-picker}__calendar--Top);
-  right: var(--#{$date-picker}__calendar--Right);
-  left: var(--#{$date-picker}__calendar--Left);
+  inset-block-start: var(--#{$date-picker}__calendar--Top);
+  inset-inline-start: var(--#{$date-picker}__calendar--Left);
+  inset-inline-end: var(--#{$date-picker}__calendar--Right);
   z-index: var(--#{$date-picker}__calendar--ZIndex);
   background-color: var(--#{$date-picker}__calendar--BackgroundColor);
   box-shadow: var(--#{$date-picker}__calendar--BoxShadow);
@@ -54,10 +54,10 @@
     --#{$date-picker}--m-top__calendar--TranslateY: 0;
 
     position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset-block-start: auto;
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: auto;
     z-index: auto;
     min-width: min-content;
   }

package/components/DescriptionList/description-list.css

@@ -122,13 +122,13 @@
 .pf-v5-c-description-list.pf-m-fill-columns {
   display: block;
   column-count: var(--pf-v5-c-description-list--GridTemplateColumns--count);
-  margin-bottom: calc(var(--pf-v5-c-description-list--RowGap) * -1);
+  margin-block-end: calc(var(--pf-v5-c-description-list--RowGap) * -1);
 }
 .pf-v5-c-description-list.pf-m-fill-columns .pf-v5-c-description-list__group,
 .pf-v5-c-description-list.pf-m-fill-columns > .pf-v5-c-card {
   display: inline-grid;
   width: 100%;
-  margin-bottom: var(--pf-v5-c-description-list--RowGap);
+  margin-block-end: var(--pf-v5-c-description-list--RowGap);
   break-inside: avoid;
   page-break-inside: avoid;
   -webkit-column-break-inside: avoid;
@@ -142,7 +142,10 @@
 }
 .pf-v5-c-description-list > .pf-v5-c-card {
   align-self: stretch;
-  padding: var(--pf-v5-c-card--first-child--PaddingTop) var(--pf-v5-c-card--child--PaddingRight) var(--pf-v5-c-card--child--PaddingBottom) var(--pf-v5-c-card--child--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-card--first-child--PaddingTop);
+  padding-block-end: var(--pf-v5-c-card--child--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-card--child--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-card--child--PaddingRight);
 }
 
 .pf-v5-c-description-list__group,
@@ -159,7 +162,7 @@
 .pf-v5-c-description-list__term,
 .pf-v5-c-description-list__description {
   min-width: 0;
-  text-align: left;
+  text-align: start;
   overflow-wrap: break-word;
 }
 
@@ -176,7 +179,7 @@
 .pf-v5-c-description-list__term-icon {
   flex-shrink: 0;
   min-width: var(--pf-v5-c-description-list__term-icon--MinWidth);
-  margin-right: var(--pf-v5-c-description-list__term-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-description-list__term-icon--MarginRight);
   color: var(--pf-v5-c-description-list__term-icon--Color);
 }
 

package/components/DescriptionList/description-list.scss

@@ -100,13 +100,13 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   &.pf-m-fill-columns {
     display: block;
     column-count: var(--#{$description-list}--GridTemplateColumns--count);
-    margin-bottom: calc(var(--#{$description-list}--RowGap) * -1);
+    margin-block-end: calc(var(--#{$description-list}--RowGap) * -1);
 
     .#{$description-list}__group,
     > .#{$card} {
       display: inline-grid;
       width: 100%;
-      margin-bottom: var(--#{$description-list}--RowGap);
+      margin-block-end: var(--#{$description-list}--RowGap);
       break-inside: avoid;
       page-break-inside: avoid;
 
@@ -127,7 +127,10 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
 
   > .#{$card} {
     align-self: stretch;
-    padding: var(--#{$card}--first-child--PaddingTop) var(--#{$card}--child--PaddingRight) var(--#{$card}--child--PaddingBottom) var(--#{$card}--child--PaddingLeft);
+    padding-block-start: var(--#{$card}--first-child--PaddingTop);
+    padding-block-end: var(--#{$card}--child--PaddingBottom);
+    padding-inline-start: var(--#{$card}--child--PaddingLeft);
+    padding-inline-end: var(--#{$card}--child--PaddingRight);
   }
 }
 
@@ -145,7 +148,7 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
 .#{$description-list}__term,
 .#{$description-list}__description {
   min-width: 0; // this allows overflow-wrap to work
-  text-align: left;
+  text-align: start;
   overflow-wrap: break-word;
 }
 
@@ -163,7 +166,7 @@ $pf-v5-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
 .#{$description-list}__term-icon {
   flex-shrink: 0;
   min-width: var(--#{$description-list}__term-icon--MinWidth);
-  margin-right: var(--#{$description-list}__term-icon--MarginRight);
+  margin-inline-end: var(--#{$description-list}__term-icon--MarginRight);
   color: var(--#{$description-list}__term-icon--Color);
 }
 

package/components/DragDrop/drag-drop.css

@@ -16,10 +16,10 @@
 }
 .pf-v5-c-draggable.pf-m-dragging::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
   border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
 }
@@ -41,10 +41,10 @@
 }
 .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
 }

package/components/DragDrop/drag-drop.scss

@@ -20,10 +20,10 @@
 
     &::after {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       content: "";
       border: var(--#{$draggable}--m-dragging--after--BorderWidth) solid var(--#{$draggable}--m-dragging--after--BorderColor);
     }
@@ -49,10 +49,10 @@
   &::before,
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     pointer-events: none;
     content: "";
   }