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

package/layouts/Flex/flex.css

@@ -34,7 +34,7 @@
   --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
   order: var(--pf-v5-l-flex--item--Order);
   max-width: 100%;
-  margin-right: var(--pf-v5-l-flex--spacer--column);
+  margin-inline-end: var(--pf-v5-l-flex--spacer--column);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-l-flex > * {
@@ -78,28 +78,40 @@
   align-items: normal;
 }
 .pf-v5-l-flex.pf-m-column > * {
-  margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+  margin-block-start: 0;
+  margin-block-end: var(--pf-v5-l-flex--spacer--row);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-column-reverse {
   flex-direction: column-reverse;
   align-items: normal;
 }
 .pf-v5-l-flex.pf-m-column-reverse > * {
-  margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+  margin-block-start: var(--pf-v5-l-flex--spacer--row);
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-row {
   flex-direction: row;
   align-items: var(--pf-v5-l-flex--m-row--AlignItems);
 }
 .pf-v5-l-flex.pf-m-row > * {
-  margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: var(--pf-v5-l-flex--spacer--column);
 }
 .pf-v5-l-flex.pf-m-row-reverse {
   flex-direction: row-reverse;
   align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
 }
 .pf-v5-l-flex.pf-m-row-reverse > * {
-  margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-wrap {
   flex-wrap: wrap;
@@ -162,10 +174,10 @@
   align-content: space-around;
 }
 .pf-v5-l-flex > .pf-m-align-right {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .pf-v5-l-flex > .pf-m-align-left {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .pf-v5-l-flex > .pf-m-grow {
   flex-grow: 1;
@@ -175,7 +187,7 @@
 }
 .pf-v5-l-flex > .pf-m-full-width {
   width: 100%;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex > .pf-m-flex-1 {
   flex: 1 0 0;
@@ -224,28 +236,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-sm > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-sm {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-sm > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-sm {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-sm > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-sm {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-sm > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-sm {
     flex-wrap: wrap;
@@ -308,10 +332,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-sm {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-sm {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-sm {
     flex-grow: 1;
@@ -321,7 +345,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-sm {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-sm {
     flex: 1 0 0;
@@ -371,28 +395,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-md > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-md {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-md > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-md {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-md > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-md {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-md > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-md {
     flex-wrap: wrap;
@@ -455,10 +491,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-md {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-md {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-md {
     flex-grow: 1;
@@ -468,7 +504,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-md {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-md {
     flex: 1 0 0;
@@ -518,28 +554,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-lg > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-lg {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-lg > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-lg {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-lg > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-lg {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-lg > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-lg {
     flex-wrap: wrap;
@@ -602,10 +650,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-lg {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-lg {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-lg {
     flex-grow: 1;
@@ -615,7 +663,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-lg {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-lg {
     flex: 1 0 0;
@@ -665,28 +713,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-xl > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-xl {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-xl > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-xl {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-xl > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-xl {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-xl > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-xl {
     flex-wrap: wrap;
@@ -749,10 +809,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-xl {
     flex-grow: 1;
@@ -762,7 +822,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-xl {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-xl {
     flex: 1 0 0;
@@ -812,28 +872,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-2xl > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-2xl {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-2xl > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-2xl {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-2xl > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-2xl {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-2xl > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-2xl {
     flex-wrap: wrap;
@@ -896,10 +968,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-2xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-2xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-2xl {
     flex-grow: 1;
@@ -909,7 +981,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-2xl {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-2xl {
     flex: 1 0 0;

package/layouts/Flex/flex.scss

@@ -40,7 +40,7 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   order: var(--#{$flex}--item--Order);
   max-width: 100%;
-  margin-right: var(--#{$flex}--spacer--column);
+  margin-inline-end: var(--#{$flex}--spacer--column);
 
   // don't set base value for --#{$flex}--item--Order as it defaults to 0
   @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
@@ -92,7 +92,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
         align-items: normal;
 
         > * {
-          margin: 0 0 var(--#{$flex}--spacer--row) 0;
+          margin-block-start: 0;
+          margin-block-end: var(--#{$flex}--spacer--row);
+          margin-inline-start: 0;
+          margin-inline-end: 0;
         }
       }
 
@@ -102,7 +105,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
         align-items: normal;
 
         > * {
-          margin: var(--#{$flex}--spacer--row) 0 0 0;
+          margin-block-start: var(--#{$flex}--spacer--row);
+          margin-block-end: 0;
+          margin-inline-start: 0;
+          margin-inline-end: 0;
         }
       }
 
@@ -113,7 +119,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
         // unset styling set for .pf-m-column
         > * {
-          margin: 0 var(--#{$flex}--spacer--column) 0 0;
+          margin-block-start: 0;
+          margin-block-end: 0;
+          margin-inline-start: 0;
+          margin-inline-end: var(--#{$flex}--spacer--column);
         }
       }
 
@@ -124,7 +133,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
         // unset styling set for .pf-m-column
         > * {
-          margin: 0 0 0 var(--#{$flex}--spacer--column);
+          margin-block-start: 0;
+          margin-block-end: 0;
+          margin-inline-start: var(--#{$flex}--spacer--column);
+          margin-inline-end: 0;
         }
       }
 
@@ -215,11 +227,11 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
       // alignment
       > .pf-m-align-right#{$breakpoint-name} {
-        margin-left: auto;
+        margin-inline-start: auto;
       }
 
       > .pf-m-align-left#{$breakpoint-name} {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
 
       // item properties
@@ -233,7 +245,7 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
       > .pf-m-full-width#{$breakpoint-name} {
         width: 100%;
-        margin-right: 0;
+        margin-inline-end: 0;
       }
 
       > .pf-m-flex-1#{$breakpoint-name} {

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.7",
+  "version": "6.0.0-alpha.8",
   "keywords": [],
   "license": "MIT",
   "scripts": {
     "a11y": "patternfly-a11y --config patternfly-a11y.config",
+    "backstop:test": "backstop test --config='backstop.js'",
+    "backstop:approve": "backstop approve --config='backstop.js'",
     "build-patternfly": "gulp buildPatternfly",
     "build": "gulp build",
     "build:docs": "gulp buildWebpack",
@@ -43,12 +45,13 @@
     "@commitlint/config-conventional": "^17.6.7",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.0.1",
-    "@patternfly/documentation-framework": "5.0.18",
+    "@patternfly/documentation-framework": "5.2.17",
     "@patternfly/patternfly-a11y": "4.3.1",
-    "@patternfly/react-code-editor": "5.0.0",
-    "@patternfly/react-core": "5.0.0",
-    "@patternfly/react-table": "5.0.0",
+    "@patternfly/react-code-editor": "5.1.1",
+    "@patternfly/react-core": "5.1.1",
+    "@patternfly/react-table": "5.1.1",
     "@starptech/prettyhtml": "^0.10.0",
+    "backstopjs": "^6.2.2",
     "cheerio": "^1.0.0-rc.12",
     "commander": "^11.0.0",
     "cssnano": "^6.0.1",
@@ -88,6 +91,7 @@
     "stylelint-config-recess-order": "^4.3.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-use-logical-spec": "^5.0.0",
     "surge": "^0.23.1",
     "unified": "^10.1.2",
     "webpack": "^5.88.2"