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

package/docs/components/Tooltip/examples/Tooltip.css

@@ -0,0 +1,4 @@
+/* adds padding to full page examples so arrows are visible */
+.ws-core-c-tooltip:not(.ws-preview) {
+  padding: var(--pf-v5-global--spacer--md);
+}

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

@@ -2,7 +2,9 @@
 id: Tooltip
 section: components
 cssPrefix: pf-v5-c-tooltip
----## Examples
+---import "./Tooltip.css"
+
+## Examples
 
 ### Top
 

package/docs/components/Truncate/examples/Truncate.md

@@ -30,8 +30,8 @@ The truncate component contains two child elements, `.pf-v5-c-truncate__start` a
   <span class="pf-v5-c-truncate">
     <span
       class="pf-v5-c-truncate__start"
-    >redhat_logo_black_and_white_reversed_simple_with_fedora_con</span>
-    <span class="pf-v5-c-truncate__end">tainer.zip</span>
+    >Vestibulum interdum risus et enim faucibus,&nbsp;</span>
+    <span class="pf-v5-c-truncate__end">sit amet molestie est accumsan.</span>
   </span>
 </div>
 

package/docs/demos/Card/examples/Card.css

@@ -1,5 +1,5 @@
 #ws-html-demos-c-card-status-card-expanded-with-popover {
-  padding-top: 180px;
+  padding-block-start: 180px;
 }
 
 #ws-html-demos-c-card-status-card-expanded-with-popover #carview-demo--popover-parent,
@@ -9,10 +9,10 @@
 
 #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-popover {
   position: absolute;
-  margin-top: -12px;
+  margin-block-start: -12px;
   z-index: 1000;
   transform: translateY(-50%);
-  left: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
+ inset-inline-start: calc(100% + var(--pf-v5-c-popover__arrow--Width) + var(--pf-v5-global--spacer--sm));
 }
 
 #ws-html-demos-c-card-status-card-expanded-with-popover .pf-v5-c-table {

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">
@@ -2756,7 +2772,7 @@ wrapperTag: div
       </div>
       <div
         class="pf-v5-c-card__actions pf-m-no-offset"
-        style="padding-top: 1px;"
+        style="padding-block-start: 1px;"
       >
         <div class="pf-v5-c-select">
           <span
@@ -2941,7 +2957,7 @@ wrapperTag: div
         <div
           class="pf-v5-c-card__title"
           id="card-log-view-example-title1"
-          style="padding-top: 3px;"
+          style="padding-block-start: 3px;"
         >
           <h2 class="pf-v5-c-title pf-m-lg">Activity</h2>
         </div>
@@ -3096,7 +3112,7 @@ wrapperTag: div
         <div
           class="pf-v5-c-card__title"
           id="card-events-view-example-title1"
-          style="padding-top: 3px;"
+          style="padding-block-start: 3px;"
         >
           <h2 class="pf-v5-c-title pf-m-lg">Events</h2>
         </div>

package/docs/demos/CardView/examples/CardView.md

@@ -382,73 +382,77 @@ section: patterns
                     >
                       <label
                         class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
-                        for="card-view-basic-example-toolbar-select-checkbox-status-active"
+                        id="card-view-basic-example-toolbar-select-checkbox-status-active"
+                        for="card-view-basic-example-toolbar-select-checkbox-status-active-input"
                       >
                         <input
                           class="pf-v5-c-check__input"
                           type="checkbox"
-                          id="card-view-basic-example-toolbar-select-checkbox-status-active"
-                          name="card-view-basic-example-toolbar-select-checkbox-status-active"
+                          aria-describedby="card-view-basic-example-toolbar-select-checkbox-status-active-description"
+                          id="card-view-basic-example-toolbar-select-checkbox-status-active-input"
+                          name="card-view-basic-example-toolbar-select-checkbox-status-active-input"
                         />
-
                         <span class="pf-v5-c-check__label">Active</span>
                         <span
                           class="pf-v5-c-check__description"
+                          id="card-view-basic-example-toolbar-select-checkbox-status-active-description"
                         >This is a description</span>
                       </label>
                       <label
                         class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
-                        for="card-view-basic-example-toolbar-select-checkbox-status-canceled"
+                        id="card-view-basic-example-toolbar-select-checkbox-status-canceled"
+                        for="card-view-basic-example-toolbar-select-checkbox-status-canceled-input"
                       >
                         <input
                           class="pf-v5-c-check__input"
                           type="checkbox"
-                          id="card-view-basic-example-toolbar-select-checkbox-status-canceled"
-                          name="card-view-basic-example-toolbar-select-checkbox-status-canceled"
+                          aria-describedby="card-view-basic-example-toolbar-select-checkbox-status-canceled-description"
+                          id="card-view-basic-example-toolbar-select-checkbox-status-canceled-input"
+                          name="card-view-basic-example-toolbar-select-checkbox-status-canceled-input"
                         />
-
                         <span class="pf-v5-c-check__label">Canceled</span>
                         <span
                           class="pf-v5-c-check__description"
+                          id="card-view-basic-example-toolbar-select-checkbox-status-canceled-description"
                         >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
                       </label>
                       <label
                         class="pf-v5-c-check pf-v5-c-select__menu-item"
-                        for="card-view-basic-example-toolbar-select-checkbox-status-paused"
+                        id="card-view-basic-example-toolbar-select-checkbox-status-paused"
+                        for="card-view-basic-example-toolbar-select-checkbox-status-paused-input"
                       >
                         <input
                           class="pf-v5-c-check__input"
                           type="checkbox"
-                          id="card-view-basic-example-toolbar-select-checkbox-status-paused"
-                          name="card-view-basic-example-toolbar-select-checkbox-status-paused"
+                          id="card-view-basic-example-toolbar-select-checkbox-status-paused-input"
+                          name="card-view-basic-example-toolbar-select-checkbox-status-paused-input"
                         />
-
                         <span class="pf-v5-c-check__label">Paused</span>
                       </label>
                       <label
                         class="pf-v5-c-check pf-v5-c-select__menu-item"
-                        for="card-view-basic-example-toolbar-select-checkbox-status-warning"
+                        id="card-view-basic-example-toolbar-select-checkbox-status-warning"
+                        for="card-view-basic-example-toolbar-select-checkbox-status-warning-input"
                       >
                         <input
                           class="pf-v5-c-check__input"
                           type="checkbox"
-                          id="card-view-basic-example-toolbar-select-checkbox-status-warning"
-                          name="card-view-basic-example-toolbar-select-checkbox-status-warning"
+                          id="card-view-basic-example-toolbar-select-checkbox-status-warning-input"
+                          name="card-view-basic-example-toolbar-select-checkbox-status-warning-input"
                         />
-
                         <span class="pf-v5-c-check__label">Warning</span>
                       </label>
                       <label
                         class="pf-v5-c-check pf-v5-c-select__menu-item"
-                        for="card-view-basic-example-toolbar-select-checkbox-status-restarted"
+                        id="card-view-basic-example-toolbar-select-checkbox-status-restarted"
+                        for="card-view-basic-example-toolbar-select-checkbox-status-restarted-input"
                       >
                         <input
                           class="pf-v5-c-check__input"
                           type="checkbox"
-                          id="card-view-basic-example-toolbar-select-checkbox-status-restarted"
-                          name="card-view-basic-example-toolbar-select-checkbox-status-restarted"
+                          id="card-view-basic-example-toolbar-select-checkbox-status-restarted-input"
+                          name="card-view-basic-example-toolbar-select-checkbox-status-restarted-input"
                         />
-
                         <span class="pf-v5-c-check__label">Restarted</span>
                       </label>
                     </fieldset>

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -330,7 +330,7 @@ cssPrefix: pf-d-dashboard
                         >
                           <div
                             class="pf-v5-l-flex__item"
-                            style="margin-bottom: -.25em"
+                            style="margin-block-end: -.25em"
                           >
                             <span class="pf-v5-c-label pf-m-red">
                               <span class="pf-v5-c-label__content">
@@ -500,7 +500,7 @@ cssPrefix: pf-d-dashboard
                         >
                           <div
                             class="pf-v5-l-flex__item"
-                            style="margin-bottom: -.25em"
+                            style="margin-block-end: -.25em"
                           >
                             <span class="pf-v5-c-label pf-m-red">
                               <span class="pf-v5-c-label__content">
@@ -1422,7 +1422,7 @@ cssPrefix: pf-d-dashboard
                   <div
                     class="pf-v5-c-card__title"
                     id="dashboard-demo-events-card-1-title1"
-                    style="padding-top: 3px;"
+                    style="padding-block-start: 3px;"
                   >
                     <h2 class="pf-v5-c-title pf-m-xl">Events</h2>
                   </div>

package/docs/demos/DataList/examples/DataList.md

@@ -1940,8 +1940,14 @@ wrapperTag: div
                   type="button"
                   aria-label="Expand all rows"
                 >
-                  <span class="pf-v5-c-toolbar__expand-all-icon">
-                    <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  <span class="pf-v5-c-icon">
+                    <span
+                      class="pf-v5-c-icon__content pf-v5-m-mirror-inline-rtl"
+                    >
+                      <span class="pf-v5-c-toolbar__expand-all-icon">
+                        <i class="fas fa-angle-right" aria-hidden="true"></i>
+                      </span>
+                    </span>
                   </span>
                 </button>
               </div>