@patternfly/react-core 5.0.0-alpha.112 → 5.0.0-alpha.114

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

@@ -6,7 +6,7 @@ exports[`renders compact no background successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-compact pf-m-no-background"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -59,7 +59,7 @@ exports[`renders compact no background successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -315,7 +315,7 @@ exports[`renders compact successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-compact"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -368,7 +368,7 @@ exports[`renders compact successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -624,7 +624,7 @@ exports[`renders guides successfully 1`] = `
     class="pf-v5-c-tree-view pf-m-guides"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -673,7 +673,7 @@ exports[`renders guides successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -909,7 +909,7 @@ exports[`tree view renders active successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -958,7 +958,7 @@ exports[`tree view renders active successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1194,7 +1194,7 @@ exports[`tree view renders badges successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1252,7 +1252,7 @@ exports[`tree view renders badges successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1533,7 +1533,7 @@ exports[`tree view renders basic successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1582,7 +1582,7 @@ exports[`tree view renders basic successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -1818,7 +1818,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -1878,7 +1878,7 @@ exports[`tree view renders checkboxes successfully 1`] = `
           </label>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2174,7 +2174,7 @@ exports[`tree view renders icons successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2238,7 +2238,7 @@ exports[`tree view renders icons successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2549,7 +2549,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
     class="pf-v5-c-tree-view"
   >
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2625,7 +2625,7 @@ exports[`tree view renders individual flag options successfully 1`] = `
           </label>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li
@@ -2948,7 +2948,7 @@ exports[`tree view renders toolbar successfully 1`] = `
       class="pf-v5-c-divider"
     />
     <ul
-      class="pf-c-tree-view__list"
+      class="pf-v5-c-tree-view__list"
       role="tree"
     >
       <li
@@ -2997,7 +2997,7 @@ exports[`tree view renders toolbar successfully 1`] = `
           </button>
         </div>
         <ul
-          class="pf-c-tree-view__list"
+          class="pf-v5-c-tree-view__list"
           role="group"
         >
           <li

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

@@ -12,7 +12,7 @@ jest.mock('../../Tooltip', () => ({
   )
 }));
 
-test('renders with class pf-c-truncate', () => {
+test('renders with class pf-v5-c-truncate', () => {
   render(<Truncate content={''} aria-label="test-id" />);
 
   const test = screen.getByLabelText('test-id');
@@ -44,7 +44,7 @@ test('renders truncate with content', () => {
   expect(test).toHaveTextContent('Test');
 });
 
-test('only renders pf-c-truncate__start with default position', () => {
+test('only renders pf-v5-c-truncate__start with default position', () => {
   render(<Truncate content={'Testing truncate content'} />);
 
   const start = screen.getByText('Testing truncate content');

package/src/deprecated/components/ApplicationLauncher/ApplicationLauncherText.tsx

@@ -13,7 +13,7 @@ export const ApplicationLauncherText: React.FunctionComponent<ApplicationLaunche
   children,
   ...props
 }: ApplicationLauncherTextProps) => (
-  <span className={css('pf-c-app-launcher__menu-item-text', className)} {...props}>
+  <span className={css('pf-v5-c-app-launcher__menu-item-text', className)} {...props}>
     {children}
   </span>
 );

package/src/deprecated/components/ApplicationLauncher/__tests__/Generated/__snapshots__/ApplicationLauncherText.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ApplicationLauncherText should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-app-launcher__menu-item-text ''"
+    class="pf-v5-c-app-launcher__menu-item-text ''"
   >
     <div>
       ReactNode

package/src/deprecated/components/Select/SelectMenu.tsx

@@ -214,7 +214,7 @@ class SelectMenuWithRef extends React.Component<SelectMenuProps> {
     const variantProps = {
       ref: innerRef,
       className: css(
-        !footer ? styles.selectMenu : 'pf-c-select__menu-list',
+        !footer ? styles.selectMenu : 'pf-v5-c-select__menu-list',
         position === SelectPosition.right && styles.modifiers.alignRight,
         className
       ),

package/src/layouts/Flex/Flex.tsx

@@ -138,16 +138,17 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
   };
   /** Gap between items at various breakpoints. This will override spacers for the main axis. */
   gap?: {
-    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
-    sm?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
-    md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
-    lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
-    xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
-    '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    default?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    sm?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    md?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    lg?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    xl?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
+    '2xl'?: 'gap' | 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap3xl' | 'gap4xl';
   };
   /** Gap between rows at various breakpoints. This will override spacers for the main axis. */
   rowGap?: {
     default?:
+      | 'rowGap'
       | 'rowGapNone'
       | 'rowGapXs'
       | 'rowGapSm'
@@ -158,6 +159,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGap3xl'
       | 'rowGap4xl';
     sm?:
+      | 'rowGap'
       | 'rowGapNone'
       | 'rowGapXs'
       | 'rowGapSm'
@@ -168,6 +170,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGap3xl'
       | 'rowGap4xl';
     md?:
+      | 'rowGap'
       | 'rowGapNone'
       | 'rowGapXs'
       | 'rowGapSm'
@@ -178,6 +181,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGap3xl'
       | 'rowGap4xl';
     lg?:
+      | 'rowGap'
       | 'rowGapNone'
       | 'rowGapXs'
       | 'rowGapSm'
@@ -188,6 +192,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGap3xl'
       | 'rowGap4xl';
     xl?:
+      | 'rowGap'
       | 'rowGapNone'
       | 'rowGapXs'
       | 'rowGapSm'
@@ -198,6 +203,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGap3xl'
       | 'rowGap4xl';
     '2xl'?:
+      | 'rowGap'
       | 'rowGapNone'
       | 'rowGapXs'
       | 'rowGapSm'
@@ -211,6 +217,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
   /** Gap beween columns at various breakpoints. This will override spacers for the main axis. */
   columnGap?: {
     default?:
+      | 'columnGap'
       | 'columnGapNone'
       | 'columnGapXs'
       | 'columnGapSm'
@@ -221,6 +228,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'columnGap3xl'
       | 'columnGap4xl';
     sm?:
+      | 'columnGap'
       | 'columnGapNone'
       | 'columnGapXs'
       | 'columnGapSm'
@@ -231,6 +239,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'columnGap3xl'
       | 'columnGap4xl';
     md?:
+      | 'columnGap'
       | 'columnGapNone'
       | 'columnGapXs'
       | 'columnGapSm'
@@ -241,6 +250,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'columnGap3xl'
       | 'columnGap4xl';
     lg?:
+      | 'columnGap'
       | 'columnGapNone'
       | 'columnGapXs'
       | 'columnGapSm'
@@ -251,6 +261,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'columnGap3xl'
       | 'columnGap4xl';
     xl?:
+      | 'columnGap'
       | 'columnGapNone'
       | 'columnGapXs'
       | 'columnGapSm'
@@ -261,6 +272,7 @@ export interface FlexProps extends React.HTMLProps<HTMLDivElement> {
       | 'columnGap3xl'
       | 'columnGap4xl';
     '2xl'?:
+      | 'columnGap'
       | 'columnGapNone'
       | 'columnGapXs'
       | 'columnGapSm'