@patternfly/patternfly 5.1.0-prerelease.3 → 5.1.0-prerelease.31

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
 
@@ -133,8 +135,8 @@ A tooltip is used to provide contextual information for another component on hov
 | `.pf-v5-c-tooltip` | `<div>` |  Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
 | `.pf-v5-c-tooltip__arrow` | `<div>` |  Creates an arrow pointing towards the element the tooltip describes. **Required** |
 | `.pf-v5-c-tooltip__content` | `<div>` |  Creates the body of the tooltip. **Required** |
-| `.pf-m-left{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
-| `.pf-m-right{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
-| `.pf-m-top{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
-| `.pf-m-bottom{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
-| `.pf-m-text-align-left` | `.pf-v5-c-tooltip__content` | Modifies tooltip content to text align left. |
+| `.pf-m-left{-top/bottom}`, `.pf-m-inline-start{-block-start/block-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
+| `.pf-m-right{-top/bottom}`, `.pf-m-inline-end{-block-start/block-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
+| `.pf-m-top{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
+| `.pf-m-bottom{-left/right}`, `.pf-m-block-start{-inline-start/inline-end}` | `.pf-v5-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
+| `.pf-m-text-align-left`, `.pf-m-text-align-start` | `.pf-v5-c-tooltip__content` | Modifies tooltip content to text align left. |

package/docs/components/TreeView/examples/TreeView.md

@@ -1974,31 +1974,46 @@ cssPrefix: pf-v5-c-tree-view
               class="pf-v5-c-dropdown__menu pf-m-align-right"
               aria-labelledby="dropdown-kebab-button"
               hidden
+              role="menu"
             >
-              <li>
-                <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+              <li role="none">
+                <a
+                  class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
+                  href="#"
+                >Link</a>
               </li>
-              <li>
-                <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+              <li role="none">
+                <button
+                  class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
+                  type="button"
+                >Action</button>
               </li>
-              <li>
+              <li role="none">
                 <a
                   class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+                  role="menuitem"
                   href="#"
                   aria-disabled="true"
                   tabindex="-1"
                 >Disabled link</a>
               </li>
-              <li>
+              <li role="none">
                 <button
                   class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
                   type="button"
                   disabled
                 >Disabled action</button>
               </li>
               <li class="pf-v5-c-divider" role="separator"></li>
-              <li>
-                <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+              <li role="none">
+                <a
+                  class="pf-v5-c-dropdown__menu-item"
+                  role="menuitem"
+                  href="#"
+                >Separated link</a>
               </li>
             </ul>
           </div>

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

@@ -39,31 +39,42 @@ wrapperTag: div
           class="pf-v5-c-dropdown__menu"
           aria-labelledby="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -169,31 +180,42 @@ wrapperTag: div
           class="pf-v5-c-dropdown__menu"
           aria-labelledby="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned-button"
           hidden
+          role="menu"
         >
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Link</a>
+          <li role="none">
+            <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
           </li>
-          <li>
-            <button class="pf-v5-c-dropdown__menu-item" type="button">Action</button>
+          <li role="none">
+            <button
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              type="button"
+            >Action</button>
           </li>
-          <li>
+          <li role="none">
             <a
               class="pf-v5-c-dropdown__menu-item pf-m-disabled"
+              role="menuitem"
               href="#"
               aria-disabled="true"
               tabindex="-1"
             >Disabled link</a>
           </li>
-          <li>
+          <li role="none">
             <button
               class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
               type="button"
               disabled
             >Disabled action</button>
           </li>
           <li class="pf-v5-c-divider" role="separator"></li>
-          <li>
-            <a class="pf-v5-c-dropdown__menu-item" href="#">Separated link</a>
+          <li role="none">
+            <a
+              class="pf-v5-c-dropdown__menu-item"
+              role="menuitem"
+              href="#"
+            >Separated link</a>
           </li>
         </ul>
       </div>
@@ -226,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>
@@ -244,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>
@@ -275,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>
@@ -309,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>
@@ -348,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>
@@ -365,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">
@@ -765,30 +803,33 @@ wrapperTag: div
     </div>
   </div>
   <div class="pf-v5-c-card__body">
-    <div class="pf-v5-c-tabs pf-m-fill" id="status-tabs">
-      <ul class="pf-v5-c-tabs__list">
-        <li class="pf-v5-c-tabs__item pf-m-current">
+    <div class="pf-v5-c-tabs pf-m-fill" role="region" id="status-tabs">
+      <ul class="pf-v5-c-tabs__list" role="tablist">
+        <li class="pf-v5-c-tabs__item pf-m-current" role="presentation">
           <button
             type="button"
             class="pf-v5-c-tabs__link"
+            role="tab"
             id="status-tabs-object-1-link"
           >
             <span class="pf-v5-c-tabs__item-text">Object 1</span>
           </button>
         </li>
-        <li class="pf-v5-c-tabs__item">
+        <li class="pf-v5-c-tabs__item" role="presentation">
           <button
             type="button"
             class="pf-v5-c-tabs__link"
+            role="tab"
             id="status-tabs-object-2-link"
           >
             <span class="pf-v5-c-tabs__item-text">Object 2</span>
           </button>
         </li>
-        <li class="pf-v5-c-tabs__item">
+        <li class="pf-v5-c-tabs__item" role="presentation">
           <button
             type="button"
             class="pf-v5-c-tabs__link"
+            role="tab"
             id="status-tabs-object-3-link"
           >
             <span class="pf-v5-c-tabs__item-text">Object 3</span>
@@ -2731,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
@@ -2916,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>
@@ -3071,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>