From f4fc03471a425630507fcedb43a4e84a31e4eb0c Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 14 Jun 2024 15:12:56 -0400 Subject: [PATCH 1/4] feat(pf4): Upgrade to PatternFly 6 --- packages/common/babel.config.js | 4 +- packages/pf4-component-mapper/package.json | 8 +- .../src/dual-list-select/dual-list-select.js | 2 +- .../dual-list-sort-button.js | 5 +- .../dual-list-tree-select.js | 2 +- .../src/field-array/field-array.js | 5 +- .../src/form-group/form-group.js | 8 +- .../src/form-template/form-template.js | 18 +-- .../src/plain-text/plain-text.d.ts | 4 +- .../src/plain-text/plain-text.js | 10 +- .../src/select/select/clear-indicator.js | 2 +- .../src/select/select/empty-options.js | 2 +- .../src/select/select/input.js | 4 +- .../src/select/select/menu.js | 10 +- .../src/select/select/option.js | 6 +- .../src/select/select/select-styles.css | 2 +- .../src/select/select/select.js | 26 ++-- .../src/select/select/value-container.js | 2 +- .../src/sub-form/sub-form.js | 10 +- .../pf4-component-mapper/src/switch/switch.js | 26 +--- .../src/tests/dual-list-select.test.js | 12 +- .../src/tests/form-fields.test.js | 7 +- .../src/tests/form-template.test.js | 8 +- .../src/tests/select/select.test.js | 48 +++---- .../src/tests/tabs.test.js | 4 +- .../src/tests/wizard/wizard.test.js | 132 +++++++++--------- .../wizard/wizard-components/step-buttons.js | 4 +- .../wizard/wizard-components/wizard-toggle.js | 14 +- .../pf4-component-mapper/src/wizard/wizard.js | 11 +- yarn.lock | 62 ++++---- 30 files changed, 221 insertions(+), 237 deletions(-) diff --git a/packages/common/babel.config.js b/packages/common/babel.config.js index d1e3dc596..8c45abc5f 100644 --- 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 index 66b0a3992..488281e3e 100644 --- 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 index 70fbe8521..b8bbd9ac4 100644 --- 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 index 30b92de7f..a3c978efa 100644 --- 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 ( + /> ); }; 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 index 33deaced0..390f74ea9 100644 --- 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 index f5dd1bdda..974aba937 100644 --- 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( {editedFields[0].label && } + /> {!isLast && editedFields.length > 1 &&
} diff --git a/packages/pf4-component-mapper/src/form-group/form-group.js b/packages/pf4-component-mapper/src/form-group/form-group.js index cced08451..4ca0dfe52 100644 --- 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 ( {description && ( - - {description} - + + {description} + )} {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 index c7514bdd0..da064e7ba 100644 --- 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 }) => ( @@ -27,11 +27,11 @@ ButtonGroup.propTypes = { }; export const Title = ({ children, ...props }) => ( - - + + {children} - - + + ); Title.propTypes = { @@ -39,11 +39,11 @@ Title.propTypes = { }; export const Description = ({ children, ...props }) => ( - - + + {children} - - + + ); 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 index d4c87cb4e..2a88cd681 100644 --- 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; diff --git a/packages/pf4-component-mapper/src/plain-text/plain-text.js b/packages/pf4-component-mapper/src/plain-text/plain-text.js index fea25b440..b36cfd8da 100644 --- 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 }) => ( - + {typeof label === 'string' ? label.split('\n').map((paragraph, index) => ( - + {paragraph} - + )) : label} - + ); 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 index 24e51d585..c5926e0a7 100644 --- 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 index e5c74da09..6804e2d8b 100644 --- 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
{message}
; + return
{message}
; }; EmptyOptions.propTypes = { diff --git a/packages/pf4-component-mapper/src/select/select/input.js b/packages/pf4-component-mapper/src/select/select/input.js index 6371be2cd..7df6fbd0f 100644 --- 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 ( -
+
{ const portalDiv = (
+