majormajor(pf4): Upgrade to PatternFly 6 (#1492)

* feat(pf4): Upgrade to PatternFly 6 * Fix css errors * Fix PF6 select style issues * Fix lint errors
data-driven-forms · Dec 4, 2024 · d79359c · d79359c
1 parent 5dd2a18
commit d79359c
Show file tree

Hide file tree

Showing 31 changed files with 264 additions and 286 deletions.
diff --git a/packages/common/babel.config.js b/packages/common/babel.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 const glob = require('glob');
 
 const mapper = {
-  TextVariants: 'Text',
+  ContentVariants: 'Content',
   ButtonVariant: 'Button',
   TextListVariants: 'TextList',
   TextListItemVariants: 'TextListItem',
@@ -13,7 +13,7 @@ const mapper = {
   FormHelperText: 'Form',
   FormGroup: 'Form',
   GridItem: 'Grid',
-  TextContent: 'Text',
+  Content: 'Content',
   HelperTextItem: 'HelperText',
   ActionGroup: 'Form',
   Tab: 'Tabs',

diff --git a/packages/pf4-component-mapper/package.json b/packages/pf4-component-mapper/package.json
@@ -30,13 +30,13 @@
     "javascript"
   ],
   "devDependencies": {
-    "@patternfly/react-core": "^5.0.0",
-    "@patternfly/react-icons": "^5.0.0"
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0"
   },
   "peerDependencies": {
     "@data-driven-forms/react-form-renderer": "*",
-    "@patternfly/react-core": "^5.0.0",
-    "@patternfly/react-icons": "^5.0.0",
+    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-icons": "^6.0.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },

diff --git a/packages/pf4-component-mapper/src/dual-list-select/dual-list-select.js b/packages/pf4-component-mapper/src/dual-list-select/dual-list-select.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { DualListSelector } from '@patternfly/react-core';
+import { DualListSelector } from '@patternfly/react-core/deprecated';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import isEqual from 'lodash/isEqual';
 

diff --git a/packages/pf4-component-mapper/src/dual-list-sort-button/dual-list-sort-button.js b/packages/pf4-component-mapper/src/dual-list-sort-button/dual-list-sort-button.js
@@ -11,6 +11,7 @@ const DualListSortButton = ({ position, ...rest }) => {
 
   return (
     <Button
+      icon={sortConfig[position] === 'asc' ? <PficonSortCommonAscIcon /> : <PficonSortCommonDescIcon />}
       variant={ButtonVariant.plain}
       onClick={
         sortConfig[position] === 'asc'
@@ -19,9 +20,7 @@ const DualListSortButton = ({ position, ...rest }) => {
       }
       aria-label="Sort"
       {...rest}
-    >
-      {sortConfig[position] === 'asc' ? <PficonSortCommonAscIcon /> : <PficonSortCommonDescIcon />}
-    </Button>
+    />
   );
 };
 

diff --git a/packages/pf4-component-mapper/src/dual-list-tree-select/dual-list-tree-select.js b/packages/pf4-component-mapper/src/dual-list-tree-select/dual-list-tree-select.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { DualListSelector } from '@patternfly/react-core';
+import { DualListSelector } from '@patternfly/react-core/deprecated';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import isEqual from 'lodash/isEqual';
 

diff --git a/packages/pf4-component-mapper/src/field-array/field-array.js b/packages/pf4-component-mapper/src/field-array/field-array.js
@@ -32,13 +32,12 @@ const ArrayItem = memo(
           <FlexItem>
             {editedFields[0].label && <Spacer />}
             <Button
+              icon={<TrashIcon />}
               variant="plain"
               aria-label={buttonLabels.remove}
               disabled={isRemoveDisabled}
               {...(!isRemoveDisabled && { onClick: () => remove(fieldIndex) })}
-            >
-              <TrashIcon />
-            </Button>
+            />
           </FlexItem>
         </Flex>
         {!isLast && editedFields.length > 1 && <hr className="ddf-final-form-hr" />}

diff --git a/packages/pf4-component-mapper/src/form-group/form-group.js b/packages/pf4-component-mapper/src/form-group/form-group.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormGroup as Pf4FormGroup, TextContent, Text, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { FormGroup as Pf4FormGroup, Content, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
 import PropTypes from 'prop-types';
 
 import showError from '../show-error/show-error';
@@ -10,9 +10,9 @@ const FormGroup = ({ label, isRequired, helperText, meta, validateOnMount, descr
   return (
     <Pf4FormGroup isRequired={isRequired} label={!hideLabel && label} fieldId={id} aria-label={meta.error || meta.submitError} {...FormGroupProps}>
       {description && (
-        <TextContent>
-          <Text component="small">{description}</Text>
-        </TextContent>
+        <Content>
+          <Content component="small">{description}</Content>
+        </Content>
       )}
       {children}
       {(helperText || ['error', 'warning'].includes(validated)) && (

diff --git a/packages/pf4-component-mapper/src/form-template/form-template.js b/packages/pf4-component-mapper/src/form-template/form-template.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import FormTemplate from '@data-driven-forms/common/form-template';
 
-import { Button as PF4Button, ActionGroup, Form, TextContent, Text, TextVariants, Alert } from '@patternfly/react-core';
+import { Button as PF4Button, ActionGroup, Form, Content, ContentVariants, Alert } from '@patternfly/react-core';
 
 export const Button = ({ label, bsStyle, children, disabled, buttonType, ...props }) => (
   <PF4Button variant={buttonType === 'cancel' ? 'link' : bsStyle || 'secondary'} isDisabled={disabled} {...props}>
@@ -27,23 +27,23 @@ ButtonGroup.propTypes = {
 };
 
 export const Title = ({ children, ...props }) => (
-  <TextContent>
-    <Text component={TextVariants.h1} {...props}>
+  <Content>
+    <Content component={ContentVariants.h1} {...props}>
       {children}
-    </Text>
-  </TextContent>
+    </Content>
+  </Content>
 );
 
 Title.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
 };
 
 export const Description = ({ children, ...props }) => (
-  <TextContent>
-    <Text component={TextVariants.p} {...props}>
+  <Content>
+    <Content component={ContentVariants.p} {...props}>
       {children}
-    </Text>
-  </TextContent>
+    </Content>
+  </Content>
 );
 
 Description.propTypes = {

diff --git a/packages/pf4-component-mapper/src/plain-text/plain-text.d.ts b/packages/pf4-component-mapper/src/plain-text/plain-text.d.ts
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { TextProps, TextContentProps } from "@patternfly/react-core";
+import { ContentProps, TextContentProps } from "@patternfly/react-core";
 
 interface InternalPlainTextProps {
   label: ReactNode;
@@ -8,7 +8,7 @@ interface InternalPlainTextProps {
   TextContentProps: TextContentProps,
 }
 
-export type PlainTextProps = InternalPlainTextProps & TextProps;
+export type PlainTextProps = InternalPlainTextProps & ContentProps;
 
 declare const PlainText: React.ComponentType<PlainTextProps>;
 

diff --git a/packages/pf4-component-mapper/src/plain-text/plain-text.js b/packages/pf4-component-mapper/src/plain-text/plain-text.js
@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { TextContent, Text } from '@patternfly/react-core';
+import { Content } from '@patternfly/react-core';
 import validTextFields from '@data-driven-forms/common/utils/valid-text-fields';
 
 const PlainText = ({ component, label, name, variant = 'p', TextContentProps, ...rest }) => (
-  <TextContent {...TextContentProps}>
+  <Content {...TextContentProps}>
     {typeof label === 'string'
       ? label.split('\n').map((paragraph, index) => (
-          <Text component={variant} {...rest} key={`${name}-${index}`}>
+          <Content component={variant} {...rest} key={`${name}-${index}`}>
             {paragraph}
-          </Text>
+          </Content>
         ))
       : label}
-  </TextContent>
+  </Content>
 );
 
 PlainText.propTypes = {

diff --git a/packages/pf4-component-mapper/src/select/select/clear-indicator.js b/packages/pf4-component-mapper/src/select/select/clear-indicator.js
@@ -10,7 +10,7 @@ const ClearIndicator = ({ clearSelection }) => (
       clearSelection();
       event.stopPropagation();
     }}
-    className="pf-v5-c-button pf-v5-c-select__toggle-clear pf-v5-u-p-0"
+    className="pf-v6-c-button pf-v6-c-menu-toggle-clear pf-v6-u-p-0"
     type="button"
     aria-label="Clear all"
   >

diff --git a/packages/pf4-component-mapper/src/select/select/empty-options.js b/packages/pf4-component-mapper/src/select/select/empty-options.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 const EmptyOptions = ({ noOptionsMessage, noResultsMessage, getInputProps, isSearchable, isFetching }) => {
   const { value } = getInputProps();
   const message = isFetching ? noOptionsMessage() : isSearchable && value ? noResultsMessage : noOptionsMessage();
-  return <div className="pf-v5-c-select__menu-item pf-m-disabled">{message}</div>;
+  return <div className="pf-v6-c-menu__item pf-m-disabled">{message}</div>;
 };
 
 EmptyOptions.propTypes = {

diff --git a/packages/pf4-component-mapper/src/select/select/input.js b/packages/pf4-component-mapper/src/select/select/input.js
@@ -24,22 +24,26 @@ const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, value, ...pr
   const inputProps = getInputProps({ disabled: isDisabled });
   const initialInputValue = getInputString(inputProps.value, value);
   return (
-    <div className="ddorg__pf4-component-mapper__select-input-wrapper pf-v5-c-text-input-group pf-m-typeahead">
-      <input
-        value=""
-        {...props}
-        className="pf-v5-c-text-input-group__text-input"
-        ref={inputRef}
-        {...{
-          ...inputProps,
-          value: initialInputValue,
-          onKeyDown: (event, ...args) => {
-            event.stopPropagation();
-            inputProps.onKeyDown(event, ...args);
-          },
-          onChange: inputProps.onChange || Function,
-        }}
-      />
+    <div className="ddorg__pf4-component-mapper__select-input-wrapper pf-v6-c-text-input-group pf-m-typeahead pf-m-plain">
+      <div className="pf-v6-c-text-input-group__main">
+        <span className="pf-v6-c-text-input-group__text">
+          <input
+            value=""
+            {...props}
+            className="pf-v6-c-text-input-group__text-input"
+            ref={inputRef}
+            {...{
+              ...inputProps,
+              value: initialInputValue,
+              onKeyDown: (event, ...args) => {
+                event.stopPropagation();
+                inputProps.onKeyDown(event, ...args);
+              },
+              onChange: inputProps.onChange || Function,
+            }}
+          />
+        </span>
+      </div>
     </div>
   );
 };

diff --git a/packages/pf4-component-mapper/src/select/select/menu.css b/packages/pf4-component-mapper/src/select/select/menu.css
@@ -1,4 +1,4 @@
-.pf-v5-c-select__menu.ddorg__pf4-component-mapper__select-menu-portal {
+.pf-v6-c-menu.ddorg__pf4-component-mapper__menu-portal {
   margin-top: 2px;
   position: relative;
   width: calc(100% - 2px);

diff --git a/packages/pf4-component-mapper/src/select/select/menu.js b/packages/pf4-component-mapper/src/select/select/menu.js
@@ -84,7 +84,7 @@ const MenuPortal = ({ selectToggleRef, menuPortalTarget, children }) => {
   const portalDiv = (
     <div
       ref={menuRef}
-      className="pf-v5-c-select ddorg_pf4-component-mapper__select-portal-menu"
+      className="pf-v6-c-menu ddorg_pf4-component-mapper__select-portal-menu"
       style={{
         zIndex: 401,
         position: 'absolute',
@@ -147,7 +147,7 @@ const Menu = ({
   };
 
   const menuItems = (
-    <ul className={`pf-v5-c-select__menu${menuIsPortal ? ' ddorg__pf4-component-mapper__select-menu-portal' : ''}`}>
+    <ul className={`pf-v6-c-menu__list${menuIsPortal ? ' ddorg__pf4-component-mapper__menu-portal' : ''}`}>
       {filteredOptions.length === 0 && (
         <EmptyOption
           isSearchable={isSearchable}
@@ -160,15 +160,15 @@ const Menu = ({
       {filteredOptions.map((item, arrayIndex) => {
         if (item.options) {
           return (
-            <div className="pf-v5-c-select__menu-group" key={`group-${arrayIndex}`}>
-              <div className="pf-v5-c-select__menu-group-title">{item.label}</div>
+            <div className="pf-v6-c-menu__group" key={`group-${arrayIndex}`}>
+              <div className="pf-v6-c-menu__group-title">{item.label}</div>
               {item.options.map((nestedItem) => createOption(nestedItem))}
             </div>
           );
         }
 
         if (item.divider) {
-          return <hr className="pf-v5-c-divider" key={`divider-${index}`} />;
+          return <hr className="pf-v6-c-divider" key={`divider-${index}`} />;
         }
 
         return createOption(item);

diff --git a/packages/pf4-component-mapper/src/select/select/option.js b/packages/pf4-component-mapper/src/select/select/option.js
@@ -4,22 +4,22 @@ import PropTypes from 'prop-types';
 import { CheckIcon } from '@patternfly/react-icons';
 
 const Option = ({ item, isActive, isSelected, ...props }) => (
-  <li>
+  <li className={`pf-v6-c-menu__list-item${item.isDisabled || item.disabled ? ' pf-m-disabled' : ''}`}>
     <button
       {...props}
       disabled={item.isDisabled || item.disabled}
       type="button"
-      className={`pf-v5-c-select__menu-item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}${
-        item.isDisabled || item.disabled ? ' pf-m-disabled' : ''
-      }`}
+      className={`pf-v6-c-menu__item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}`}
     >
-      {item.label}
-      {isSelected && (
-        <span className="pf-v5-c-select__menu-item-icon">
-          <CheckIcon />
-        </span>
-      )}
-      {item.description && <div className="pf-v5-c-select__menu-item-description">{item.description}</div>}
+      <span className="pf-v6-c-menu__item-main">
+        {item.label}
+        {isSelected && (
+          <span className="pf-v6-c-menu__item-icon">
+            <CheckIcon />
+          </span>
+        )}
+        {item.description && <div className="pf-v6-c-menu__item-text">{item.description}</div>}
+      </span>
     </button>
   </li>
 );

diff --git a/packages/pf4-component-mapper/src/select/select/select-styles.css b/packages/pf4-component-mapper/src/select/select/select-styles.css
@@ -7,11 +7,6 @@
   animation: spin 2s linear infinite;
 }
 
-.pf-v5-c-select_toggle-wrapper.ddorg__pf4-component-mapper__select-toggle-wrapper {
-  flex: 1;
-  display: flex;
-}
-
 .ddorg__pf4-component-mapper__select-toggle.pf-m-typeahead {
   padding-left: 0;
 }