@patternfly/patternfly 6.0.0-alpha.132 → 6.0.0-alpha.133

package/docs/components/OverflowMenu/examples/overflow-menu.css

@@ -1,35 +1,11 @@
-#ws-core-c-overflow-menu-simple-collapsed {
-  min-height: 18rem;
-}
-
-#ws-core-c-overflow-menu-additional-options-in-dropdown-hidden {
-  min-height: 24rem;
-}
-
-#ws-core-c-overflow-menu-additional-options-in-dropdown-visible {
-  min-height: 7rem;
-}
-
-#ws-core-c-overflow-menu-persistent-additional-options-hidden {
-  min-height: 14rem;
-}
-
-#ws-core-c-overflow-menu-persistent-additional-options-visible {
-  min-height: 8rem;
-}
-
-#ws-core-c-overflow-menu-additional-options-in-dropdown-visible {
-  min-height: 8rem;
-}
-
-#ws-core-c-overflow-menu-simple-expanded .pf-v6-c-overflow-menu__item,
-#ws-core-c-overflow-menu-simple-expanded .pf-v6-c-overflow-menu__group,
+#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__item,
+#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group,
 #ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"]) {
   padding: .5rem;
   border: 2px dashed #393f44;
 }
 
-#ws-core-c-overflow-menu-simple-expanded .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
+#ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
   padding: 0;
   border: none;
 }

package/docs/components/OverflowMenu/examples/overflow-menu.md

@@ -6,53 +6,32 @@ cssPrefix: pf-v6-c-overflow-menu
 
 ## Introduction
 
-The overflow menu component condenses actions inside `.pf-v6-c-overflow-menu__content` container into a single dropdown button wrapped in `.pf-v6-c-overflow-menu__control`.
+The overflow menu component condenses actions inside `.pf-v6-c-overflow-menu__content` container into a single menu button wrapped in `.pf-v6-c-overflow-menu__control`.
 
 The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (`.pf-v6-c-overflow-menu__item`), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to `--pf-v6-c-toolbar--spacer--base`, whose value is `--pf-v6-global--spacer--md` or 16px.
 
-### Simple collapsed
+### Simple condensed
 
 ```html
 <div class="pf-v6-c-overflow-menu" id="overflow-menu-simple">
   <div class="pf-v6-c-overflow-menu__control">
-    <div class="pf-v6-c-dropdown pf-m-expanded">
-      <button
-        class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
-        type="button"
-        id="overflow-menu-simple-dropdown-toggle"
-        aria-label="Generic options"
-        aria-expanded="true"
-      >
+    <button
+      class="pf-v6-c-menu-toggle pf-m-plain"
+      type="button"
+      aria-expanded="false"
+      aria-label="Menu toggle"
+      id="overflow-menu-simpletoggle"
+    >
+      <span class="pf-v6-c-menu-toggle__icon">
         <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-      </button>
-      <ul
-        class="pf-v6-c-dropdown__menu"
-        role="menu"
-        aria-labelledby="overflow-menu-simple-dropdown-toggle"
-      >
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Item 1</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Item 2</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Item 3</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Item 4</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Item 5</button>
-        </li>
-      </ul>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 
 ```
 
-### Simple expanded
+### Simple
 
 ```html
 <div class="pf-v6-c-overflow-menu" id="overflow-menu-simple-expanded">
@@ -141,7 +120,7 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
 
 ```
 
-The action group consists of a primary and secondary action. Any additional actions are part of the overflow control dropdown.
+The action group consists of a primary and secondary action. Any additional actions are part of the overflow control menu.
 
 ### Overflow menu group types
 
@@ -151,7 +130,7 @@ The action group consists of a primary and secondary action. Any additional acti
 | `.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child `.pf-v6-c-button` spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`. |
 | `.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child `.pf-v6-c-button.pf-m-button-plain` spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`. |
 
-### Additional options in dropdown (hidden)
+### Additional options in menu (hidden)
 
 ```html
 <div
@@ -159,56 +138,23 @@ The action group consists of a primary and secondary action. Any additional acti
   id="overflow-menu-simple-additional-options-hidden"
 >
   <div class="pf-v6-c-overflow-menu__control">
-    <div class="pf-v6-c-dropdown pf-m-expanded">
-      <button
-        class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
-        type="button"
-        id="overflow-menu-simple-additional-options-hidden-dropdown-toggle"
-        aria-label="Dropdown with additional options"
-        aria-expanded="true"
-      >
+    <button
+      class="pf-v6-c-menu-toggle pf-m-plain"
+      type="button"
+      aria-expanded="false"
+      aria-label="Menu toggle"
+      id="overflow-menu-simple-additional-options-hiddentoggle"
+    >
+      <span class="pf-v6-c-menu-toggle__icon">
         <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-      </button>
-      <ul
-        class="pf-v6-c-dropdown__menu"
-        role="menu"
-        aria-labelledby="overflow-menu-simple-additional-options-hidden-dropdown-toggle"
-      >
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Primary</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Secondary</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Tertiary</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Align left</button>
-        </li>
-        <li role="none">
-          <button
-            role="menuitem"
-            class="pf-v6-c-dropdown__menu-item"
-          >Align center</button>
-        </li>
-        <li role="none">
-          <button
-            role="menuitem"
-            class="pf-v6-c-dropdown__menu-item"
-          >Align right</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Action 7</button>
-        </li>
-      </ul>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 
 ```
 
-### Additional options in dropdown (visible)
+### Additional options in menu
 
 ```html
 <div
@@ -258,26 +204,17 @@ The action group consists of a primary and secondary action. Any additional acti
     </div>
   </div>
   <div class="pf-v6-c-overflow-menu__control">
-    <div class="pf-v6-c-dropdown pf-m-expanded">
-      <button
-        class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
-        type="button"
-        id="overflow-menu-simple-additional-options-visible-dropdown-toggle"
-        aria-label="Dropdown with additional options"
-        aria-expanded="true"
-      >
+    <button
+      class="pf-v6-c-menu-toggle pf-m-plain"
+      type="button"
+      aria-expanded="false"
+      aria-label="Menu toggle"
+      id="overflow-menu-simple-additional-options-visibletoggle"
+    >
+      <span class="pf-v6-c-menu-toggle__icon">
         <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-      </button>
-      <ul
-        class="pf-v6-c-dropdown__menu"
-        role="menu"
-        aria-labelledby="overflow-menu-simple-additional-options-visible-dropdown-toggle"
-      >
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Action 7</button>
-        </li>
-      </ul>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 
@@ -297,32 +234,17 @@ The action group consists of a primary and secondary action. Any additional acti
     </div>
   </div>
   <div class="pf-v6-c-overflow-menu__control">
-    <div class="pf-v6-c-dropdown pf-m-expanded">
-      <button
-        class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
-        type="button"
-        id="overflow-menu-persistent-hidden-dropdown-toggle"
-        aria-label="Dropdown for persistent example"
-        aria-expanded="true"
-      >
+    <button
+      class="pf-v6-c-menu-toggle pf-m-plain"
+      type="button"
+      aria-expanded="false"
+      aria-label="Menu toggle"
+      id="overflow-menu-persistent-hiddentoggle"
+    >
+      <span class="pf-v6-c-menu-toggle__icon">
         <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-      </button>
-      <ul
-        class="pf-v6-c-dropdown__menu"
-        role="menu"
-        aria-labelledby="overflow-menu-persistent-hidden-dropdown-toggle"
-      >
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Secondary</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Tertiary</button>
-        </li>
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Action 4</button>
-        </li>
-      </ul>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 
@@ -349,26 +271,17 @@ The action group consists of a primary and secondary action. Any additional acti
     </div>
   </div>
   <div class="pf-v6-c-overflow-menu__control">
-    <div class="pf-v6-c-dropdown pf-m-expanded">
-      <button
-        class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
-        type="button"
-        id="overflow-menu-persistent-visible-example-dropdown-toggle"
-        aria-label="Dropdown for persistent example"
-        aria-expanded="true"
-      >
+    <button
+      class="pf-v6-c-menu-toggle pf-m-plain"
+      type="button"
+      aria-expanded="false"
+      aria-label="Menu toggle"
+      id="overflow-menu-persistent-visible-exampletoggle"
+    >
+      <span class="pf-v6-c-menu-toggle__icon">
         <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-      </button>
-      <ul
-        class="pf-v6-c-dropdown__menu"
-        role="menu"
-        aria-labelledby="overflow-menu-persistent-visible-example-dropdown-toggle"
-      >
-        <li role="none">
-          <button role="menuitem" class="pf-v6-c-dropdown__menu-item">Action 4</button>
-        </li>
-      </ul>
-    </div>
+      </span>
+    </button>
   </div>
 </div>
 

package/docs/components/Table/examples/Table.css

@@ -14,3 +14,10 @@
 #ws-core-c-table-sticky-header .ws-preview-html {
   height: 400px;
 }
+
+.pf-v6-c-overflow-menu .pf-v6-c-menu {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: 999;
+  min-width: max-content;
+}