@patternfly/react-core 6.0.0-alpha.5 → 6.0.0-alpha.50

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -3,20 +3,6 @@ import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
-  it('should map width breakpoints', () => {
-    const widths = {
-      default: '100px',
-      sm: '80px',
-      md: '150px',
-      lg: '200px',
-      xl: '250px',
-      '2xl': '300px'
-    };
-
-    const { asFragment } = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
     render(
       <ToolbarItem data-testid="toolbaritem" isOverflowContainer>

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,73 +92,64 @@ 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
-            aria-labelledby="pf-random-id-0"
-            class="pf-v5-c-chip-group pf-m-category"
-            data-ouia-component-type="PF5/ChipGroup"
-            data-ouia-safe="true"
-            role="group"
+            class="pf-v6-c-label-group pf-m-category"
           >
             <div
-              class="pf-v5-c-chip-group__main"
+              class="pf-v6-c-label-group__main"
             >
               <span
-                class="pf-v5-c-chip-group__label"
+                aria-hidden="true"
+                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-chip-group__list"
+                class="pf-v6-c-label-group__list"
                 role="list"
               >
                 <li
-                  class="pf-v5-c-chip-group__list-item"
+                  class="pf-v6-c-label-group__list-item"
                 >
-                  <div
-                    class="pf-v5-c-chip"
-                    data-ouia-component-id="OUIA-Generated-Chip-1"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
+                  <span
+                    class="pf-v6-c-label pf-m-outline"
                   >
                     <span
-                      class="pf-v5-c-chip__content"
+                      class="pf-v6-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-chip__text"
-                        id="pf-random-id-1"
+                        class="pf-v6-c-label__text"
                       >
                         New
                       </span>
                     </span>
                     <span
-                      class="pf-v5-c-chip__actions"
+                      class="pf-v6-c-label__actions"
                     >
                       <button
                         aria-disabled="false"
-                        aria-label="close"
-                        aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
-                        class="pf-v5-c-button pf-m-plain"
-                        data-ouia-component-id="close"
+                        aria-label="Close New"
+                        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"
-                        id="remove_pf-random-id-1"
                         type="button"
                       >
                         <svg
                           aria-hidden="true"
-                          class="pf-v5-svg"
+                          class="pf-v6-svg"
                           fill="currentColor"
                           height="1em"
                           role="img"
@@ -171,44 +162,38 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         </svg>
                       </button>
                     </span>
-                  </div>
+                  </span>
                 </li>
                 <li
-                  class="pf-v5-c-chip-group__list-item"
+                  class="pf-v6-c-label-group__list-item"
                 >
-                  <div
-                    class="pf-v5-c-chip"
-                    data-ouia-component-id="OUIA-Generated-Chip-2"
-                    data-ouia-component-type="PF5/Chip"
-                    data-ouia-safe="true"
+                  <span
+                    class="pf-v6-c-label pf-m-outline"
                   >
                     <span
-                      class="pf-v5-c-chip__content"
+                      class="pf-v6-c-label__content"
                     >
                       <span
-                        class="pf-v5-c-chip__text"
-                        id="pf-random-id-2"
+                        class="pf-v6-c-label__text"
                       >
                         Pending
                       </span>
                     </span>
                     <span
-                      class="pf-v5-c-chip__actions"
+                      class="pf-v6-c-label__actions"
                     >
                       <button
                         aria-disabled="false"
-                        aria-label="close"
-                        aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
-                        class="pf-v5-c-button pf-m-plain"
-                        data-ouia-component-id="close"
+                        aria-label="Close Pending"
+                        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"
-                        id="remove_pf-random-id-2"
                         type="button"
                       >
                         <svg
                           aria-hidden="true"
-                          class="pf-v5-svg"
+                          class="pf-v6-svg"
                           fill="currentColor"
                           height="1em"
                           role="img"
@@ -221,19 +206,19 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         </svg>
                       </button>
                     </span>
-                  </div>
+                  </span>
                 </li>
               </ul>
             </div>
             <div
-              class="pf-v5-c-chip-group__close"
+              class="pf-v6-c-label-group__close"
             >
               <button
                 aria-disabled="false"
-                aria-label="Close chip group"
+                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"
-                data-ouia-component-id="Close chip group"
+                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"
                 id="remove_group_pf-random-id-0"
@@ -241,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"
@@ -258,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"
@@ -281,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"
@@ -302,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/Toolbar/examples/Toolbar.md

@@ -34,16 +34,6 @@ Items are spaced “16px” apart by default. To adjust the size of the space be
 
 ```
 
-### Toolbar items with adjusted widths
-
-You can adjust the width of toolbar items so that they better fit the size of their container.
-
-The default width of a toolbar item is “100px”. To adjust an item’s width, use the `widths` property of the `<ToolbarItem>`. You can set the “px” value at multiple breakpoints, including "default", "sm", "md", "lg, "xl", and "2xl".
-
-```ts file="./ToolbarWidths.tsx"
-
-```
-
 ### With adjusted inset
 
 To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -48,7 +48,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="Component toggle groups example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -53,7 +53,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="Consumer toggle groups example search input"
           onChange={(_event, value) => onInputChange(value)}

package/src/components/Toolbar/examples/ToolbarGroups.tsx

@@ -189,7 +189,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
     <React.Fragment>
       <ToolbarGroup variant="filter-group">{filterGroupItems}</ToolbarGroup>
       <ToolbarGroup variant="icon-button-group">{iconButtonGroupItems}</ToolbarGroup>
-      <ToolbarGroup variant="button-group">{buttonGroupItems}</ToolbarGroup>
+      <ToolbarGroup>{buttonGroupItems}</ToolbarGroup>
     </React.Fragment>
   );
 

package/src/components/Toolbar/examples/ToolbarItems.tsx

@@ -5,7 +5,7 @@ import { Button, SearchInput } from '@patternfly/react-core';
 export const ToolbarItems: React.FunctionComponent = () => {
   const items = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput aria-label="Items example search input" />
       </ToolbarItem>
       <ToolbarItem>

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -206,7 +206,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
           <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
-          <ToolbarItem variant="overflow-menu">
+          <ToolbarItem>
             <OverflowMenu breakpoint="2xl">
               <OverflowMenuContent>
                 <OverflowMenuGroup groupType="button">
@@ -249,7 +249,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <React.Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarItem variant="bulk-select">
+          <ToolbarItem>
             <Dropdown
               onSelect={onSplitButtonSelect}
               isOpen={isSplitButtonDropdownOpen}

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -125,7 +125,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const toggleGroupItems = (
     <React.Fragment>
-      <ToolbarItem variant="search-filter">
+      <ToolbarItem>
         <SearchInput
           aria-label="With filters example search input"
           onChange={(_event, value) => onInputChange(value)}

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) && styles.modifiers.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 ${styles.modifiers.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(styles.modifiers.selectable);
-});
-
-test(`Renders ${styles.treeViewNode} element with ${styles.modifiers.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(styles.modifiers.selectable);
-});
-
-test(`Does not render ${styles.treeViewNode} element with ${styles.modifiers.selectable} if children are not passed`, () => {
-  render(<TreeViewListItem hasCheckbox isSelectable {...requiredProps} />);
-
-  const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
-
-  expect(treeViewNode).not.toHaveClass(styles.modifiers.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