@patternfly/patternfly 5.1.0-prerelease.2 → 5.1.0-prerelease.21

package/docs/components/Menu/examples/Menu.md

@@ -4795,9 +4795,14 @@ cssPrefix: pf-v5-c-menu
               <ul
                 class="pf-v5-c-dropdown__menu"
                 aria-labelledby="drilldown-with-breadcrumbs-level-3-breadcrumb-breadcrumb-dropdown-button"
+                role="menu"
               >
-                <li>
-                  <button class="pf-v5-c-dropdown__menu-item" type="button">
+                <li role="none">
+                  <button
+                    class="pf-v5-c-dropdown__menu-item"
+                    role="menuitem"
+                    type="button"
+                  >
                     <span class="pf-v5-c-dropdown__menu-item-icon">
                       <i class="fas fa-angle-left" aria-hidden="true"></i>
                     </span>Edit
@@ -5039,16 +5044,25 @@ cssPrefix: pf-v5-c-menu
               <ul
                 class="pf-v5-c-dropdown__menu"
                 aria-labelledby="drilldown-with-breadcrumbs-level-4-breadcrumb-breadcrumb-dropdown-button"
+                role="menu"
               >
-                <li>
-                  <button class="pf-v5-c-dropdown__menu-item" type="button">
+                <li role="none">
+                  <button
+                    class="pf-v5-c-dropdown__menu-item"
+                    role="menuitem"
+                    type="button"
+                  >
                     <span class="pf-v5-c-dropdown__menu-item-icon">
                       <i class="fas fa-angle-left" aria-hidden="true"></i>
                     </span>Edit
                   </button>
                 </li>
-                <li>
-                  <button class="pf-v5-c-dropdown__menu-item" type="button">
+                <li role="none">
+                  <button
+                    class="pf-v5-c-dropdown__menu-item"
+                    role="menuitem"
+                    type="button"
+                  >
                     <span class="pf-v5-c-dropdown__menu-item-icon">
                       <i class="fas fa-angle-left" aria-hidden="true"></i>
                     </span>Deployment
@@ -6222,20 +6236,26 @@ cssPrefix: pf-v5-c-menu
         </a>
       </li>
       <li class="pf-v5-c-menu__list-item pf-m-loading" role="none">
-        <svg
-          class="pf-v5-c-spinner pf-m-lg"
-          role="progressbar"
-          viewBox="0 0 100 100"
-          aria-label="Loading items"
-        >
-          <circle
-            class="pf-v5-c-spinner__path"
-            cx="50"
-            cy="50"
-            r="45"
-            fill="none"
-          />
-        </svg>
+        <button class="pf-v5-c-menu__item" type="button" role="menuitem">
+          <span class="pf-v5-c-menu__item-main">
+            <span class="pf-v5-c-menu__item-text">
+              <svg
+                class="pf-v5-c-spinner pf-m-lg"
+                role="progressbar"
+                viewBox="0 0 100 100"
+                aria-label="Loading items"
+              >
+                <circle
+                  class="pf-v5-c-spinner__path"
+                  cx="50"
+                  cy="50"
+                  r="45"
+                  fill="none"
+                />
+              </svg>
+            </span>
+          </span>
+        </button>
       </li>
     </ul>
   </div>
@@ -6601,6 +6621,7 @@ cssPrefix: pf-v5-c-menu
 | `aria-disabled="true"` | `.pf-v5-c-menu__item` | Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required. |
 | `tabindex="-1"` | `a.pf-v5-c-menu__item` | When the menu item uses a link element and has `aria-disabled="true"` passed in, removes it from keyboard focus. This is similar to passing `disabled` to a menu item that uses a button element. |
 | `aria-hidden="true"` | `.pf-v5-c-menu__item-icon`, `.pf-v5-c-menu__item-action-icon`, `.pf-v5-c-menu__item-external-icon`, `.pf-v5-c-menu__item-toggle-icon`, `.pf-v5-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
+| `aria-label="Descriptive text"` | `.pf-v5-c-menu__item-action-icon` | There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon. |
 | `aria-label="Not starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
 | `aria-label="Starred"` | `.pf-v5-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
 

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -974,7 +974,7 @@ cssPrefix: pf-v5-c-menu-toggle
 | -- | -- | -- |
 | `aria-expanded="true"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
 | `aria-expanded="false"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
-| `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
+| `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. |
 | `disabled` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
 
 ### Usage

package/docs/components/ModalBox/examples/ModalBox.css

@@ -1,10 +1,5 @@
 .ws-core-c-modal .ws-preview-html {
-  position: relative;
-}
-
-.ws-core-c-modal .pf-v5-c-modal-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

package/docs/components/Nav/examples/Navigation.css

@@ -1,32 +1,9 @@
-#ws-core-c-navigation-default,
-#ws-core-c-navigation-basic,
-#ws-core-c-navigation-grouped,
-#ws-core-c-navigation-grouped-nav,
-#ws-core-c-navigation-grouped-nav-no-titles,
-#ws-core-c-navigation-expanded,
-#ws-core-c-navigation-expanded-with-subnav-titles,
-#ws-core-c-navigation-mixed,
-#ws-core-c-navigation-horizontal,
-#ws-core-c-navigation-horizontal-overflow,
-#ws-core-c-navigation-horizontal-subnav,
-#ws-core-c-navigation-horizontal-subnav-overflow,
-#ws-core-c-navigation-drilldown,
-#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
-#ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
-#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
-  padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
-}
-
-#ws-core-c-navigation-expandable-third-level .pf-v5-c-nav {
+.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .ws-preview-html {
   background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,
 #ws-core-c-navigation-horizontal-in-masthead-overflow {
-  padding: 0;
   grid-template-rows: auto;
 }
 
@@ -58,6 +35,6 @@
 
 #ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
-  top: 168px;
-  left: 256px;
+  inset-block-start: 168px;
+  inset-inline-start: 256px;
 }

package/docs/components/Nav/examples/Navigation.md

@@ -2483,6 +2483,104 @@ cssPrefix: pf-v5-c-nav
 
 ```
 
+### Nav link text
+
+When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v5-c-nav__link-text`.
+
+```html isBeta
+<nav class="pf-v5-c-nav" aria-label="Global">
+  <ul class="pf-v5-c-nav__list" role="list">
+    <li class="pf-v5-c-nav__item">
+      <a href="#" class="pf-v5-c-nav__link">
+        <span class="pf-v5-c-nav__link-text">
+          Link 1
+          <i class="fas fa-arrow-right" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
+      <button
+        class="pf-v5-c-nav__link"
+        id="nav-link-text-link2"
+        aria-expanded="true"
+      >
+        <span class="pf-v5-c-nav__link-text">
+          Link 2
+          <small>(small text)</small>
+        </span>
+        <span class="pf-v5-c-nav__toggle">
+          <span class="pf-v5-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-v5-c-nav__subnav"
+        aria-labelledby="nav-link-text-link2"
+      >
+        <ul class="pf-v5-c-nav__list" role="list">
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">
+              <span class="pf-v5-c-nav__link-text">
+                <i class="fas fa-user" aria-hidden="true"></i>
+                Subnav link 1
+              </span>
+            </a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">
+              <span class="pf-v5-c-nav__link-text">
+                <i class="fas fa-user" aria-hidden="true"></i>
+                Subnav link 2
+              </span>
+            </a>
+          </li>
+        </ul>
+      </section>
+    </li>
+    <li class="pf-v5-c-nav__item pf-m-expandable pf-m-current">
+      <button
+        class="pf-v5-c-nav__link"
+        id="nav-link-text-link4"
+        aria-expanded="false"
+      >
+        <span class="pf-v5-c-nav__link-text">
+          Link 3
+          <strong>(strong text)</strong>
+        </span>
+        <span class="pf-v5-c-nav__toggle">
+          <span class="pf-v5-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-v5-c-nav__subnav"
+        aria-labelledby="nav-link-text-link4"
+        hidden
+      >
+        <ul class="pf-v5-c-nav__list" role="list">
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a
+              href="#"
+              class="pf-v5-c-nav__link pf-m-current"
+              aria-current="page"
+            >Subnav link 2</a>
+          </li>
+          <li class="pf-v5-c-nav__item">
+            <a href="#" class="pf-v5-c-nav__link">Subnav link 3</a>
+          </li>
+        </ul>
+      </section>
+    </li>
+  </ul>
+</nav>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2514,6 +2612,7 @@ The navigation system relies on several different sub-components:
 | `.pf-v5-c-nav__list` | `<ul>` | Initiates nav list. |
 | `.pf-v5-c-nav__item` | `<li>` | Initiates nav list item. |
 | `.pf-v5-c-nav__link` | `<a>` | Initiates nav list link. |
+| `.pf-v5-c-nav__link-text` | `<span>` | Initiates nav list link text. |
 | `.pf-v5-c-nav__section` | `<section>` | Initiates a nav section element. |
 | `.pf-v5-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
 | `.pf-v5-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |