@patternfly/react-core 6.0.0-alpha.35 → 6.0.0-alpha.37

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -3,44 +3,44 @@
 exports[`Toolbar should render inset 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
+    class="pf-v6-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
     data-ouia-component-id="OUIA-Generated-Toolbar-1"
     data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >
     <div
-      class="pf-v5-c-toolbar__content"
+      class="pf-v6-c-toolbar__content"
     >
       <div
-        class="pf-v5-c-toolbar__content-section"
+        class="pf-v6-c-toolbar__content-section"
       >
         <div
-          class="pf-v5-c-toolbar__item"
+          class="pf-v6-c-toolbar__item"
         >
           Test
         </div>
         <div
-          class="pf-v5-c-toolbar__item"
+          class="pf-v6-c-toolbar__item"
         >
           Test 2
         </div>
         <hr
-          class="pf-v5-c-divider pf-m-vertical"
+          class="pf-v6-c-divider pf-m-vertical"
         />
         <div
-          class="pf-v5-c-toolbar__item"
+          class="pf-v6-c-toolbar__item"
         >
           Test 3 
         </div>
       </div>
     </div>
     <div
-      class="pf-v5-c-toolbar__content pf-m-hidden"
+      class="pf-v6-c-toolbar__content pf-m-hidden"
       hidden=""
     >
       <div
-        class="pf-v5-c-toolbar__group"
+        class="pf-v6-c-toolbar__group"
       />
     </div>
   </div>
@@ -50,29 +50,29 @@ exports[`Toolbar should render inset 1`] = `
 exports[`Toolbar should render with custom chip content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-toolbar pf-m-toggle-group-container"
+    class="pf-v6-c-toolbar pf-m-toggle-group-container"
     data-ouia-component-id="OUIA-Generated-Toolbar-3"
     data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
   >
     <div
-      class="pf-v5-c-toolbar__content"
+      class="pf-v6-c-toolbar__content"
     >
       <div
-        class="pf-v5-c-toolbar__content-section"
+        class="pf-v6-c-toolbar__content-section"
       >
         <div
-          class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
+          class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
         >
           <div
-            class="pf-v5-c-toolbar__toggle"
+            class="pf-v6-c-toolbar__toggle"
           >
             <button
               aria-disabled="false"
               aria-haspopup="false"
               aria-label="Show Filters"
-              class="pf-v5-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-plain"
               data-ouia-component-id="OUIA-Generated-Button-plain-1"
               data-ouia-component-type="PF5/Button"
               data-ouia-safe="true"
@@ -80,10 +80,10 @@ exports[`Toolbar should render with custom chip content 1`] = `
             />
           </div>
           <div
-            class="pf-v5-c-toolbar__group pf-m-filter-group"
+            class="pf-v6-c-toolbar__group pf-m-filter-group"
           >
             <div
-              class="pf-v5-c-toolbar__item"
+              class="pf-v6-c-toolbar__item"
             >
               test content
             </div>
@@ -92,56 +92,56 @@ exports[`Toolbar should render with custom chip content 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-toolbar__content"
+      class="pf-v6-c-toolbar__content"
     >
       <div
         aria-hidden="true"
-        class="pf-v5-c-toolbar__group pf-m-hidden"
+        class="pf-v6-c-toolbar__group pf-m-hidden"
         hidden=""
       >
         <div
-          class="pf-v5-c-toolbar__item pf-m-chip-group"
+          class="pf-v6-c-toolbar__item pf-m-chip-group"
         >
           <div
-            class="pf-v5-c-label-group pf-m-category"
+            class="pf-v6-c-label-group pf-m-category"
           >
             <div
-              class="pf-v5-c-label-group__main"
+              class="pf-v6-c-label-group__main"
             >
               <span
                 aria-hidden="true"
-                class="pf-v5-c-label-group__label"
+                class="pf-v6-c-label-group__label"
                 id="pf-random-id-0"
               >
                 Status
               </span>
               <ul
                 aria-labelledby="pf-random-id-0"
-                class="pf-v5-c-label-group__list"
+                class="pf-v6-c-label-group__list"
                 role="list"
               >
                 <li
-                  class="pf-v5-c-label-group__list-item"
+                  class="pf-v6-c-label-group__list-item"
                 >
                   <span
-                    class="pf-v5-c-label pf-m-outline"
+                    class="pf-v6-c-label pf-m-outline"
                   >
                     <span
-                      class="pf-v5-c-label__content"
+                      class="pf-v6-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-label__text"
+                        class="pf-v6-c-label__text"
                       >
                         New
                       </span>
                     </span>
                     <span
-                      class="pf-v5-c-label__actions"
+                      class="pf-v6-c-label__actions"
                     >
                       <button
                         aria-disabled="false"
                         aria-label="Close New"
-                        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-2"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
@@ -149,7 +149,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="pf-v5-svg"
+                          class="pf-v6-svg"
                           fill="currentColor"
                           height="1em"
                           role="img"
@@ -165,27 +165,27 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   </span>
                 </li>
                 <li
-                  class="pf-v5-c-label-group__list-item"
+                  class="pf-v6-c-label-group__list-item"
                 >
                   <span
-                    class="pf-v5-c-label pf-m-outline"
+                    class="pf-v6-c-label pf-m-outline"
                   >
                     <span
-                      class="pf-v5-c-label__content"
+                      class="pf-v6-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-label__text"
+                        class="pf-v6-c-label__text"
                       >
                         Pending
                       </span>
                     </span>
                     <span
-                      class="pf-v5-c-label__actions"
+                      class="pf-v6-c-label__actions"
                     >
                       <button
                         aria-disabled="false"
                         aria-label="Close Pending"
-                        class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                         data-ouia-component-id="OUIA-Generated-Button-plain-3"
                         data-ouia-component-type="PF5/Button"
                         data-ouia-safe="true"
@@ -193,7 +193,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class="pf-v5-svg"
+                          class="pf-v6-svg"
                           fill="currentColor"
                           height="1em"
                           role="img"
@@ -211,13 +211,13 @@ exports[`Toolbar should render with custom chip content 1`] = `
               </ul>
             </div>
             <div
-              class="pf-v5-c-label-group__close"
+              class="pf-v6-c-label-group__close"
             >
               <button
                 aria-disabled="false"
                 aria-label="Close label group"
                 aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
-                class="pf-v5-c-button pf-m-plain pf-m-no-padding"
+                class="pf-v6-c-button pf-m-plain pf-m-no-padding"
                 data-ouia-component-id="OUIA-Generated-Button-plain-4"
                 data-ouia-component-type="PF5/Button"
                 data-ouia-safe="true"
@@ -226,7 +226,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="pf-v5-svg"
+                  class="pf-v6-svg"
                   fill="currentColor"
                   height="1em"
                   role="img"
@@ -243,20 +243,20 @@ exports[`Toolbar should render with custom chip content 1`] = `
         </div>
       </div>
       <div
-        class="pf-v5-c-toolbar__group"
+        class="pf-v6-c-toolbar__group"
       >
         <div
-          class="pf-v5-c-toolbar__item"
+          class="pf-v6-c-toolbar__item"
         >
           2 filters applied
         </div>
       </div>
       <div
-        class="pf-v5-c-toolbar__item"
+        class="pf-v6-c-toolbar__item"
       >
         <button
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-link pf-m-inline"
+          class="pf-v6-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-1"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
@@ -266,11 +266,11 @@ exports[`Toolbar should render with custom chip content 1`] = `
         </button>
       </div>
       <div
-        class="pf-v5-c-toolbar__item"
+        class="pf-v6-c-toolbar__item"
       >
         <button
           aria-disabled="false"
-          class="pf-v5-c-button pf-m-link pf-m-inline"
+          class="pf-v6-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="OUIA-Generated-Button-link-2"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
@@ -287,44 +287,44 @@ exports[`Toolbar should render with custom chip content 1`] = `
 exports[`Toolbar should render with page inset flag 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-toolbar pf-m-page-insets"
+    class="pf-v6-c-toolbar pf-m-page-insets"
     data-ouia-component-id="OUIA-Generated-Toolbar-2"
     data-ouia-component-type="PF5/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
   >
     <div
-      class="pf-v5-c-toolbar__content"
+      class="pf-v6-c-toolbar__content"
     >
       <div
-        class="pf-v5-c-toolbar__content-section"
+        class="pf-v6-c-toolbar__content-section"
       >
         <div
-          class="pf-v5-c-toolbar__item"
+          class="pf-v6-c-toolbar__item"
         >
           Test
         </div>
         <div
-          class="pf-v5-c-toolbar__item"
+          class="pf-v6-c-toolbar__item"
         >
           Test 2
         </div>
         <hr
-          class="pf-v5-c-divider pf-m-vertical"
+          class="pf-v6-c-divider pf-m-vertical"
         />
         <div
-          class="pf-v5-c-toolbar__item"
+          class="pf-v6-c-toolbar__item"
         >
           Test 3 
         </div>
       </div>
     </div>
     <div
-      class="pf-v5-c-toolbar__content pf-m-hidden"
+      class="pf-v6-c-toolbar__content pf-m-hidden"
       hidden=""
     >
       <div
-        class="pf-v5-c-toolbar__group"
+        class="pf-v6-c-toolbar__group"
       />
     </div>
   </div>

package/src/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -6,7 +6,7 @@ import styles from '@patternfly/react-styles/css/components/Tooltip/tooltip';
 
 jest.mock('../../../helpers/Popper/Popper');
 
-test('Renders with class name pf-v5-c-tooltip by default', async () => {
+test('Renders with class name pf-v6-c-tooltip by default', async () => {
   render(<Tooltip isVisible content="Test content" />);
 
   const tooltip = await screen.findByRole('tooltip');

package/src/components/Tooltip/__tests__/TooltipArrow.test.tsx

@@ -9,7 +9,7 @@ test('Renders without children', () => {
   expect(screen.getByTestId('tooltipArrow')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-tooltip__arrow by default', () => {
+test('Renders with class name pf-v6-c-tooltip__arrow by default', () => {
   render(<TooltipArrow data-testid="tooltipArrow" />);
 
   expect(screen.getByTestId('tooltipArrow')).toHaveClass(styles.tooltipArrow);

package/src/components/Tooltip/__tests__/TooltipContent.test.tsx

@@ -9,7 +9,7 @@ test('Renders with children', () => {
   expect(screen.getByText('Test content')).toBeVisible();
 });
 
-test('Renders with class name pf-v5-c-tooltip__content by default', () => {
+test('Renders with class name pf-v6-c-tooltip__content by default', () => {
   render(<TooltipContent>Test content</TooltipContent>);
 
   expect(screen.getByText('Test content')).toHaveClass(styles.tooltipContent);

package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -3,15 +3,15 @@
 exports[`Matches snapshot 1`] = `
 <div
   aria-live="off"
-  class="pf-v5-c-tooltip"
+  class="pf-v6-c-tooltip"
   id="custom-id"
   role="tooltip"
 >
   <div
-    class="pf-v5-c-tooltip__arrow"
+    class="pf-v6-c-tooltip__arrow"
   />
   <div
-    class="pf-v5-c-tooltip__content pf-m-text-align-left"
+    class="pf-v6-c-tooltip__content pf-m-text-align-left"
   >
     Test content
   </div>

package/src/components/Tooltip/__tests__/__snapshots__/TooltipArrow.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-tooltip__arrow"
+    class="pf-v6-c-tooltip__arrow"
     data-testid="tooltipArrow"
   />
 </DocumentFragment>

package/src/components/Tooltip/__tests__/__snapshots__/TooltipContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-tooltip__content"
+    class="pf-v6-c-tooltip__content"
   >
     Test content
   </div>

package/src/components/TreeView/TreeViewListItem.tsx

@@ -208,7 +208,6 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
             <Component
               className={css(
                 styles.treeViewNode,
-                children && (isSelectable || hasCheckbox) && 'pf-m-selectable',
                 (!children || isSelectable) &&
                   activeItems &&
                   activeItems.length > 0 &&

package/src/components/TreeView/__tests__/TreeViewListItem.test.tsx

@@ -371,38 +371,6 @@ test(`Does not render ${styles.treeViewNode} element with additional classes by
   expect(treeViewNode).toHaveClass(styles.treeViewNode, { exact: true });
 });
 
-test(`Renders ${styles.treeViewNode} element with pf-m-selectable class when hasCheckbox and children are passed`, () => {
-  render(
-    <TreeViewListItem hasCheckbox {...requiredProps}>
-      Content
-    </TreeViewListItem>
-  );
-
-  const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
-
-  expect(treeViewNode).toHaveClass('pf-m-selectable');
-});
-
-test(`Renders ${styles.treeViewNode} element with pf-m-selectable class when isSelectable and children are passed`, () => {
-  render(
-    <TreeViewListItem isSelectable {...requiredProps}>
-      Content
-    </TreeViewListItem>
-  );
-
-  const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
-
-  expect(treeViewNode).toHaveClass('pf-m-selectable');
-});
-
-test(`Does not render ${styles.treeViewNode} element with pf-m-selectable if children are not passed`, () => {
-  render(<TreeViewListItem hasCheckbox isSelectable {...requiredProps} />);
-
-  const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
-
-  expect(treeViewNode).not.toHaveClass('pf-m-selectable');
-});
-
 test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.current} class when isSelectable and activeItems are passed`, () => {
   render(
     <TreeViewListItem compareItems={() => true} isSelectable activeItems={[{ name: 'Active item' }]} {...requiredProps}>

package/src/components/TreeView/__tests__/__snapshots__/TreeViewList.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches snapshot by default 1`] = `
 <DocumentFragment>
   <ul
-    class="pf-v5-c-tree-view__list"
+    class="pf-v6-c-tree-view__list"
     role="tree"
   >
     Content
@@ -17,10 +17,10 @@ exports[`Matches snapshot when toolbar is passed 1`] = `
     Toolbar content
   </div>
   <hr
-    class="pf-v5-c-divider"
+    class="pf-v6-c-divider"
   />
   <ul
-    class="pf-v5-c-tree-view__list"
+    class="pf-v6-c-tree-view__list"
     role="tree"
   >
     Content

package/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap

@@ -4,30 +4,30 @@ exports[`Matches snapshot with children 1`] = `
 <DocumentFragment>
   <li
     aria-expanded="false"
-    class="pf-v5-c-tree-view__list-item"
+    class="pf-v6-c-tree-view__list-item"
     role="treeitem"
     tabindex="-1"
   >
     <div
-      class="pf-v5-c-tree-view__content"
+      class="pf-v6-c-tree-view__content"
     >
       <button
-        class="pf-v5-c-tree-view__node"
+        class="pf-v6-c-tree-view__node"
         type="button"
       >
         <span
-          class="pf-v5-c-tree-view__node-container"
+          class="pf-v6-c-tree-view__node-container"
         >
           <span
-            class="pf-v5-c-tree-view__node-toggle"
+            class="pf-v6-c-tree-view__node-toggle"
             tabindex="-1"
           >
             <span
-              class="pf-v5-c-tree-view__node-toggle-icon"
+              class="pf-v6-c-tree-view__node-toggle-icon"
             >
               <svg
                 aria-hidden="true"
-                class="pf-v5-svg"
+                class="pf-v6-svg"
                 fill="currentColor"
                 height="1em"
                 role="img"
@@ -41,7 +41,7 @@ exports[`Matches snapshot with children 1`] = `
             </span>
           </span>
           <span
-            class="pf-v5-c-tree-view__node-text"
+            class="pf-v6-c-tree-view__node-text"
           >
             Item name
           </span>
@@ -56,22 +56,22 @@ exports[`Matches snapshot without children 1`] = `
 <DocumentFragment>
   <li
     aria-expanded="false"
-    class="pf-v5-c-tree-view__list-item"
+    class="pf-v6-c-tree-view__list-item"
     role="treeitem"
     tabindex="-1"
   >
     <div
-      class="pf-v5-c-tree-view__content"
+      class="pf-v6-c-tree-view__content"
     >
       <button
-        class="pf-v5-c-tree-view__node"
+        class="pf-v6-c-tree-view__node"
         type="button"
       >
         <span
-          class="pf-v5-c-tree-view__node-container"
+          class="pf-v6-c-tree-view__node-container"
         >
           <span
-            class="pf-v5-c-tree-view__node-text"
+            class="pf-v6-c-tree-view__node-text"
           >
             Item name
           </span>

package/src/components/TreeView/__tests__/__snapshots__/TreeViewRoot.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-tree-view"
+    class="pf-v6-c-tree-view"
   >
     <div
-      class="pf-v5-c-tree-view__node"
+      class="pf-v6-c-tree-view__node"
       tabindex="0"
     >
       Content

package/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap

@@ -3,23 +3,23 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-tree-view__search"
+    class="pf-v6-c-tree-view__search"
   >
     <div
-      class="pf-v5-c-form-control pf-m-icon"
+      class="pf-v6-c-form-control pf-m-icon"
     >
       <input
         type="search"
       />
       <div
-        class="pf-v5-c-form-control__utilities"
+        class="pf-v6-c-form-control__utilities"
       >
         <div
-          class="pf-v5-c-form-control__icon"
+          class="pf-v6-c-form-control__icon"
         >
           <svg
             aria-hidden="true"
-            class="pf-v5-svg"
+            class="pf-v6-svg"
             fill="currentColor"
             height="1em"
             role="img"

package/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap

@@ -14,10 +14,10 @@ exports[`renders default truncation 1`] = `
       position: top
     </p>
     <span
-      class="pf-v5-c-truncate"
+      class="pf-v6-c-truncate"
     >
       <span
-        class="pf-v5-c-truncate__start"
+        class="pf-v6-c-truncate__start"
       >
         Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
       </span>
@@ -40,10 +40,10 @@ exports[`renders start truncation with &lrm; at end 1`] = `
       position: top
     </p>
     <span
-      class="pf-v5-c-truncate"
+      class="pf-v6-c-truncate"
     >
       <span
-        class="pf-v5-c-truncate__end"
+        class="pf-v6-c-truncate__end"
       >
         Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
       </span>

package/src/components/Truncate/examples/TruncateExamples.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v5-global--spacer--md);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  padding: var(--pf-v6-global--spacer--md);
+  border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--100);
 }

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -119,14 +119,14 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
                 placeholder="Search"
                 onChange={(_event, value) => onSearchInputChange(value)}
                 onKeyPress={onEnterPressed}
-                aria-labelledby="pf-v5-context-selector-search-button-id-1"
+                aria-labelledby="pf-v6-context-selector-search-button-id-1"
               />
             </InputGroupItem>
             <InputGroupItem>
               <Button
                 variant={ButtonVariant.control}
                 aria-label="Search menu items"
-                id="pf-v5-context-selector-search-button-id-1"
+                id="pf-v6-context-selector-search-button-id-1"
                 onClick={onSearchButtonClick}
               >
                 <SearchIcon aria-hidden="true" />