@patternfly/react-core 6.0.0-alpha.34 → 6.0.0-alpha.36

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/__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" />

package/src/demos/RTL/examples/PaginatedTable.css

@@ -1,7 +1,7 @@
 .brand-language {
-  font-weight: var(--pf-v5-global--FontWeight--bold);
-  font-family: var(--pf-v5-global--FontFamily--heading);
-  font-size: var(--pf-v5-global--FontSize--xl);
+  font-weight: var(--pf-v6-global--FontWeight--bold);
+  font-family: var(--pf-v6-global--FontFamily--heading);
+  font-size: var(--pf-v6-global--FontSize--xl);
   align-self: center;
-  margin-inline-start: var(--pf-v5-global--spacer--md);
+  margin-inline-start: var(--pf-v6-global--spacer--md);
 }

package/src/demos/examples/Card/CardNested.tsx

@@ -55,7 +55,7 @@ export const CardNested: React.FunctionComponent = () => {
             }}
           >
             <CardTitle id="nested-cards-toggle-group-1-title">
-              <span className="pf-v5-u-font-weight-light">CPU 1</span>
+              <span className="pf-v6-u-font-weight-light">CPU 1</span>
             </CardTitle>
           </CardHeader>
           <CardExpandableContent>
@@ -216,7 +216,7 @@ export const CardNested: React.FunctionComponent = () => {
             }}
           >
             <CardTitle id="nested-cards-toggle-group-2-title">
-              <span className="pf-v5-u-font-weight-light">CPU 2</span>
+              <span className="pf-v6-u-font-weight-light">CPU 2</span>
             </CardTitle>
           </CardHeader>
           <CardExpandableContent>
@@ -377,7 +377,7 @@ export const CardNested: React.FunctionComponent = () => {
             }}
           >
             <CardTitle id="nested-cards-toggle-group-3-title">
-              <span className="pf-v5-u-font-weight-light">CPU 3</span>
+              <span className="pf-v6-u-font-weight-light">CPU 3</span>
             </CardTitle>
           </CardHeader>
           <CardExpandableContent>

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -96,7 +96,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
         aria-label="More info for name field"
         onClick={(e) => e.preventDefault()}
         aria-describedby="password-field"
-        className="pf-v5-c-form__group-label-help"
+        className="pf-v6-c-form__group-label-help"
       >
         <HelpIcon />
       </button>