feat(pf4): Upgrade to PatternFly 6

data-driven-forms · Nov 7, 2024 · f4fc034 · f4fc034
1 parent 31d5e90
commit f4fc034
Show file tree

Hide file tree

Showing 30 changed files with 221 additions and 237 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-select__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-select__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,11 +24,11 @@ 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">
+    <div className="ddorg__pf4-component-mapper__select-input-wrapper pf-v6-c-text-input-group pf-m-typeahead">
       <input
         value=""
         {...props}
-        className="pf-v5-c-text-input-group__text-input"
+        className="pf-v6-c-text-input-group__text-input"
         ref={inputRef}
         {...{
           ...inputProps,

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-select 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-select__menu${menuIsPortal ? ' ddorg__pf4-component-mapper__select-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-select__menu-group" key={`group-${arrayIndex}`}>
+              <div className="pf-v6-c-select__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
@@ -9,17 +9,17 @@ const Option = ({ item, isActive, isSelected, ...props }) => (
       {...props}
       disabled={item.isDisabled || item.disabled}
       type="button"
-      className={`pf-v5-c-select__menu-item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}${
+      className={`pf-v6-c-select__menu-item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}${
         item.isDisabled || item.disabled ? ' pf-m-disabled' : ''
       }`}
     >
       {item.label}
       {isSelected && (
-        <span className="pf-v5-c-select__menu-item-icon">
+        <span className="pf-v6-c-select__menu-item-icon">
           <CheckIcon />
         </span>
       )}
-      {item.description && <div className="pf-v5-c-select__menu-item-description">{item.description}</div>}
+      {item.description && <div className="pf-v6-c-select__menu-item-description">{item.description}</div>}
     </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,7 +7,7 @@
   animation: spin 2s linear infinite;
 }
 
-.pf-v5-c-select_toggle-wrapper.ddorg__pf4-component-mapper__select-toggle-wrapper {
+.pf-v6-c-select_toggle-wrapper.ddorg__pf4-component-mapper__select-toggle-wrapper {
   flex: 1;
   display: flex;
 }

diff --git a/packages/pf4-component-mapper/src/select/select/select.js b/packages/pf4-component-mapper/src/select/select/select.js
@@ -30,19 +30,19 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
     if (isMulti) {
       const visibleOptions = showMore ? value : value.slice(0, 3);
       return (
-        <div className="pf-v5-c-chip-group pf-v5-u-ml-sm" onClick={(event) => event.stopPropagation()}>
-          <ul className="pf-v5-c-chip-group__list" aria-label="Chip group category">
+        <div className="pf-v6-c-chip-group pf-v6-u-ml-sm" onClick={(event) => event.stopPropagation()}>
+          <ul className="pf-v6-c-chip-group__list" aria-label="Chip group category">
             {visibleOptions.map((item, index) => {
               const label = typeof item === 'object' ? item.label : item;
               return (
-                <li className="pf-v5-c-chip-group__list-item" onClick={(event) => event.stopPropagation()} key={item.key || item.value || item}>
-                  <div className="pf-v5-c-chip">
-                    <span className="pf-v5-c-chip__text" id={`pf-random-id-${index}-${label}`}>
+                <li className="pf-v6-c-chip-group__list-item" onClick={(event) => event.stopPropagation()} key={item.key || item.value || item}>
+                  <div className="pf-v6-c-chip">
+                    <span className="pf-v6-c-chip__text" id={`pf-random-id-${index}-${label}`}>
                       {label}
                     </span>
                     <button
                       onClick={() => handleChange(item)}
-                      className="pf-v5-c-button pf-u-plain pf-v5-u-pt-0 pf-v5-u-pb-0"
+                      className="pf-v6-c-button pf-u-plain pf-v6-u-pt-0 pf-v6-u-pb-0"
                       type="button"
                       aria-label="remove option"
                     >
@@ -53,9 +53,9 @@ const itemToString = (value, isMulti, showMore, handleShowMore, handleChange) =>
               );
             })}
             {value.length > 3 && (
-              <li className="pf-v5-c-chip-group__list-item">
-                <button type="button" onClick={handleShowMore} className="pf-v5-c-chip pf-m-overflow">
-                  <span className="pf-v5-c-chip__text">{showMore ? 'Show less' : `${value.length - 3} more`}</span>
+              <li className="pf-v6-c-chip-group__list-item">
+                <button type="button" onClick={handleShowMore} className="pf-v6-c-chip pf-m-overflow">
+                  <span className="pf-v6-c-chip__text">{showMore ? 'Show less' : `${value.length - 3} more`}</span>
                 </button>
               </li>
             )}
@@ -213,17 +213,17 @@ const InternalSelect = ({
       {({ isOpen, inputValue, itemToString, selectedItem, clearSelection, getInputProps, getToggleButtonProps, getItemProps, highlightedIndex }) => {
         const toggleButtonProps = getToggleButtonProps();
         return (
-          <div className="pf-v5-c-select">
+          <div className="pf-v6-c-select">
             <div
               ref={selectToggleRef}
               disabled={isDisabled}
-              className={`pf-v5-c-select__toggle${isDisabled ? ' pf-v5-m-disabled' : ''}${
+              className={`pf-v6-c-select__toggle${isDisabled ? ' pf-v5-m-disabled' : ''}${
                 isSearchable ? ' pf-v5-m-typeahead' : ''
               } ddorg__pf4-component-mapper__select-toggle`}
               tabIndex={0}
               {...toggleButtonProps}
             >
-              <div className="pf-v5-c-select_toggle-wrapper ddorg__pf4-component-mapper__select-toggle-wrapper">
+              <div className="pf-v6-c-select_toggle-wrapper ddorg__pf4-component-mapper__select-toggle-wrapper">
                 <ValueContainer
                   isMulti={isMulti}
                   isSearchable={isSearchable}
@@ -234,7 +234,7 @@ const InternalSelect = ({
                 />
               </div>
               {isClearable && parsedValue && <ClearIndicator clearSelection={clearSelection} />}
-              <span className="pf-v5-c-select__toggle-arrow">
+              <span className="pf-v6-c-select__toggle-arrow">
                 <Icon>{isFetching ? <CircleNotchIcon className="ddorg__pf4-component-mapper__select-loading-icon" /> : <CaretDownIcon />}</Icon>
               </span>
             </div>

diff --git a/packages/pf4-component-mapper/src/select/select/value-container.js b/packages/pf4-component-mapper/src/select/select/value-container.js
@@ -16,7 +16,7 @@ const ValueContainer = ({ value, isMulti, placeholder, getInputProps, isSearchab
     return <Input placeholder={placeholder} inputRef={inputRef} getInputProps={getInputProps} value={value} />;
   }
 
-  return <span className="pf-v5-c-select__toggle-text">{value || placeholder}</span>;
+  return <span className="pf-v6-c-select__toggle-text">{value || placeholder}</span>;
 };
 
 ValueContainer.propTypes = {

diff --git a/packages/pf4-component-mapper/src/sub-form/sub-form.js b/packages/pf4-component-mapper/src/sub-form/sub-form.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useFormApi } from '@data-driven-forms/react-form-renderer';
 
-import { Title, Grid, GridItem, TextContent, Text, TextVariants } from '@patternfly/react-core';
+import { Title, Grid, GridItem, Content, ContentVariants } from '@patternfly/react-core';
 
 const SubForm = ({ fields, title, description, validate: _validate, component, ...rest }) => {
   const formOptions = useFormApi();
@@ -18,11 +18,11 @@ const SubForm = ({ fields, title, description, validate: _validate, component, .
       )}
       {description && (
         <GridItem sm={12}>
-          <TextContent>
-            <Text component={TextVariants.small} style={{ marginBottom: 0 }}>
+          <Content>
+            <Content component={ContentVariants.small} style={{ marginBottom: 0 }}>
               {description}
-            </Text>
-          </TextContent>
+            </Content>
+          </Content>
         </GridItem>
       )}
       {formOptions.renderForm(fields, formOptions)}