@patternfly/patternfly 5.0.0-alpha.24 → 5.0.0-alpha.25

package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md

@@ -6683,9 +6683,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-1-check-label"
-                    >Patternfly</p>
+                    >Patternfly</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -6765,9 +6766,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-2-check-label"
-                    >ActiveMQ</p>
+                    >ActiveQ</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -6847,9 +6849,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-3-check-label"
-                    >Apache Spark</p>
+                    >Apache Spark</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -6929,9 +6932,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-4-check-label"
-                    >Avro</p>
+                    >Avro</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -7011,9 +7015,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-5-check-label"
-                    >Azure Services</p>
+                    >Azure Services</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -7093,9 +7098,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-6-check-label"
-                    >Crypto</p>
+                    >Crypto</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -7174,9 +7180,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-7-check-label"
-                    >Patternfly</p>
+                    >Patternfly</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -7255,9 +7262,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-8-check-label"
-                    >Patternfly</p>
+                    >Patternfly</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -7336,9 +7344,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-9-check-label"
-                    >Patternfly</p>
+                    >Patternfly</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>
@@ -7417,9 +7426,10 @@ wrapperTag: div
                     </div>
                   </div>
                   <div class="pf-c-card__title">
-                    <p
+                    <h2
+                      class="pf-c-card__title-text"
                       id="primary-detail-card-view-expanded-example-drawer-card-10-check-label"
-                    >Patternfly</p>
+                    >Patternfly</h2>
                     <div class="pf-c-content">
                       <small>Provided by Red Hat</small>
                     </div>

package/docs/demos/Tabs/examples/Tabs.md

@@ -6053,7 +6053,9 @@ section: components
           class="pf-c-card pf-m-selectable-raised pf-m-compact"
           id="modal-tabs-example-card-1"
         >
-          <div class="pf-c-card__title">PatternFly</div>
+          <div class="pf-c-card__title">
+            <h2 class="pf-c-card__title-text">PatternFly</h2>
+          </div>
           <div
             class="pf-c-card__body"
           >PatternFly is a community project that promotes design commonality and improves user experience.</div>
@@ -6062,7 +6064,9 @@ section: components
           class="pf-c-card pf-m-selectable-raised pf-m-compact"
           id="modal-tabs-example-card-2"
         >
-          <div class="pf-c-card__title">ActiveMQ</div>
+          <div class="pf-c-card__title">
+            <h2 class="pf-c-card__title-text">ActiveMQ</h2>
+          </div>
           <div
             class="pf-c-card__body"
           >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
@@ -6071,7 +6075,9 @@ section: components
           class="pf-c-card pf-m-selectable-raised pf-m-compact"
           id="modal-tabs-example-card-3"
         >
-          <div class="pf-c-card__title">Apache Spark</div>
+          <div class="pf-c-card__title">
+            <h2 class="pf-c-card__title-text">Apache Spark</h2>
+          </div>
           <div
             class="pf-c-card__body"
           >This documentation page covers the Apache Spark component for the Apache Camel.</div>
@@ -7082,9 +7088,11 @@ section: components
                         class="pf-l-grid pf-m-all-6-col-on-md pf-m-all-3-col-on-2xl pf-m-gutter"
                       >
                         <div class="pf-c-card pf-m-flat">
-                          <div
-                            class="pf-c-card__title"
-                          >Check system requirements</div>
+                          <div class="pf-c-card__title">
+                            <h2
+                              class="pf-c-card__title-text"
+                            >Check system requirements</h2>
+                          </div>
                           <div class="pf-c-card__body">
                             <p>
                               Your physical or virtual machine should meet the
@@ -7093,9 +7101,11 @@ section: components
                           </div>
                         </div>
                         <div class="pf-c-card pf-m-flat">
-                          <div
-                            class="pf-c-card__title"
-                          >Download an installation ISO image</div>
+                          <div class="pf-c-card__title">
+                            <h2
+                              class="pf-c-card__title-text"
+                            >Download an installation ISO image</h2>
+                          </div>
                           <div class="pf-c-card__body">
                             <p>
                               <a href="#">Download</a>&nbsp;the binary DVD ISO.
@@ -7103,9 +7113,11 @@ section: components
                           </div>
                         </div>
                         <div class="pf-c-card pf-m-flat">
-                          <div
-                            class="pf-c-card__title"
-                          >Create a bootable installation media</div>
+                          <div class="pf-c-card__title">
+                            <h2
+                              class="pf-c-card__title-text"
+                            >Create a bootable installation media</h2>
+                          </div>
                           <div class="pf-c-card__body">
                             <p>
                               <a href="#">Create</a>&nbsp;a bootable installation media, for example a USB flash drive.

package/docs/demos/Wizard/examples/Wizard.md

@@ -924,15 +924,18 @@ wrapperTag: div
     >
       <div class="pf-c-wizard">
         <div class="pf-c-wizard__header">
-          <button
-            class="pf-c-button pf-m-plain pf-c-wizard__close"
-            type="button"
-            aria-label="Close"
-          >
-            <i class="fas fa-times" aria-hidden="true"></i>
-          </button>
-          <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+          <div class="pf-c-wizard__close">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Close"
+            >
+              <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="pf-c-wizard__title">
+            <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+          </div>
           <div
             class="pf-c-wizard__description"
           >Here is where the description goes</div>
@@ -2056,15 +2059,18 @@ wrapperTag: div
     >
       <div class="pf-c-wizard">
         <div class="pf-c-wizard__header">
-          <button
-            class="pf-c-button pf-m-plain pf-c-wizard__close"
-            type="button"
-            aria-label="Close"
-          >
-            <i class="fas fa-times" aria-hidden="true"></i>
-          </button>
-          <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+          <div class="pf-c-wizard__close">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Close"
+            >
+              <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="pf-c-wizard__title">
+            <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+          </div>
           <div
             class="pf-c-wizard__description"
           >Here is where the description goes</div>
@@ -3188,15 +3194,18 @@ wrapperTag: div
     >
       <div class="pf-c-wizard">
         <div class="pf-c-wizard__header">
-          <button
-            class="pf-c-button pf-m-plain pf-c-wizard__close"
-            type="button"
-            aria-label="Close"
-          >
-            <i class="fas fa-times" aria-hidden="true"></i>
-          </button>
-          <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+          <div class="pf-c-wizard__close">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Close"
+            >
+              <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="pf-c-wizard__title">
+            <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+          </div>
           <div
             class="pf-c-wizard__description"
           >Here is where the description goes</div>
@@ -4398,15 +4407,18 @@ wrapperTag: div
     >
       <div class="pf-c-wizard">
         <div class="pf-c-wizard__header">
-          <button
-            class="pf-c-button pf-m-plain pf-c-wizard__close"
-            type="button"
-            aria-label="Close"
-          >
-            <i class="fas fa-times" aria-hidden="true"></i>
-          </button>
-          <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+          <div class="pf-c-wizard__close">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Close"
+            >
+              <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="pf-c-wizard__title">
+            <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+          </div>
           <div
             class="pf-c-wizard__description"
           >Here is where the description goes</div>
@@ -5602,15 +5614,18 @@ wrapperTag: div
     >
       <div class="pf-c-wizard">
         <div class="pf-c-wizard__header">
-          <button
-            class="pf-c-button pf-m-plain pf-c-wizard__close"
-            type="button"
-            aria-label="Close"
-          >
-            <i class="fas fa-times" aria-hidden="true"></i>
-          </button>
-          <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
-
+          <div class="pf-c-wizard__close">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Close"
+            >
+              <i class="fas fa-times" aria-hidden="true"></i>
+            </button>
+          </div>
+          <div class="pf-c-wizard__title">
+            <h1 class="pf-c-wizard__title-text">Wizard title</h1>
+          </div>
           <div
             class="pf-c-wizard__description"
           >Here is where the description goes</div>

package/layouts/Gallery/gallery.css

@@ -7,8 +7,8 @@
   --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
   --pf-l-gallery--GridTemplateRows: auto;
   display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
   --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
 }

package/layouts/Gallery/gallery.scss

@@ -10,8 +10,8 @@ $pf-l-gallery--breakpoint-map: build-breakpoint-map();
   --pf-l-gallery--GridTemplateRows: auto;
 
   display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
 
   &.pf-m-gutter {
     grid-gap: var(--pf-l-gallery--m-gutter--GridGap);

package/layouts/Grid/grid.css

@@ -8,10 +8,10 @@
 }
 .pf-l-grid > *,
 .pf-l-grid .pf-l-grid__item {
-  min-width: 0;
-  min-height: 0;
   grid-column-start: var(--pf-l-grid__item--GridColumnStart);
   grid-column-end: var(--pf-l-grid__item--GridColumnEnd);
+  min-width: 0;
+  min-height: 0;
   order: var(--pf-l-grid--item--Order);
 }
 @media (min-width: 576px) {

package/layouts/Grid/grid.scss

@@ -50,10 +50,10 @@ $pf-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used for c
 
   > *,
   .pf-l-grid__item {
-    min-width: 0;
-    min-height: 0;
     grid-column-start: var(--pf-l-grid__item--GridColumnStart);
     grid-column-end: var(--pf-l-grid__item--GridColumnEnd);
+    min-width: 0;
+    min-height: 0;
 
     @include pf-build-css-variable-stack("order", "--pf-l-grid--item--Order", $pf-l-grid--breakpoint-map);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.24",
+  "version": "5.0.0-alpha.25",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -69,6 +69,7 @@
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sourcemaps": "^3.0.0",
+    "husky": "^8.0.3",
     "lint-staged": "^13.1.1",
     "node-plop": "^0.31.1",
     "postcss": "^8.4.21",
@@ -80,18 +81,16 @@
     "remark-parse": "^10.0.1",
     "remark-stringify": "^10.0.2",
     "rimraf": "*",
-    "sass": "^1.58.0",
+    "sass": "^1.58.3",
     "sass-graph": "^4.0.1",
-    "stylelint": "^15.0.0",
-    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint": "^15.2.0",
+    "stylelint-config-recess-order": "^4.0.0",
     "stylelint-config-standard": "^30.0.1",
-    "stylelint-order": "^6.0.2",
-    "stylelint-scss": "^4.3.0",
+    "stylelint-config-standard-scss": "^7.0.1",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "surge": "^0.23.1",
     "unified": "^10.1.2",
-    "webpack": "^5.75.0",
-    "husky": "^8.0.3"
+    "webpack": "^5.75.0"
   },
   "resolutions": {
     "@babel/preset-env": "7.18.2",

package/patternfly-base-no-reset.css

@@ -376,121 +376,121 @@
 
 @font-face {
   font-family: "RedHatDisplay";
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 300;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 400;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
   font-style: normal;
   font-weight: 700;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
-  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 400;
+  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Regular.woff") format("woff");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
-  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 700;
+  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Medium.woff") format("woff");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplayUpdated";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 300;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplayUpdated";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplayUpdated";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatTextUpdated";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatTextUpdated";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatMono";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
   font-display: fallback;
 }
 @font-face {
   font-family: "RedHatDisplayVF";
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
   font-style: normal;
   font-weight: 300 900;
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
   font-family: "RedHatDisplayVF";
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-style: italic;
   font-weight: 300 900;
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
   font-family: "RedHatTextVF";
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
   font-style: normal;
   font-weight: 400 500;
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
   font-family: "RedHatTextVF";
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-style: italic;
   font-weight: 400 500;
+  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
   font-family: "RedHatMonoVF";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
   font-style: normal;
   font-weight: 300 700;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
   font-family: "RedHatMonoVF";
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
   font-style: italic;
   font-weight: 300 700;
+  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 .pf-screen-reader {