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..7f8e0981d 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-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 index e5c74da09..6ab042b34 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..c9645515e 100644 --- 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 ( -
- { - event.stopPropagation(); - inputProps.onKeyDown(event, ...args); - }, - onChange: inputProps.onChange || Function, - }} - /> +
+
+ + { + event.stopPropagation(); + inputProps.onKeyDown(event, ...args); + }, + onChange: inputProps.onChange || Function, + }} + /> + +
); }; diff --git a/packages/pf4-component-mapper/src/select/select/menu.css b/packages/pf4-component-mapper/src/select/select/menu.css index 745df6311..5e04aae5b 100644 --- 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 index 7e8f2fea0..4b532a5d7 100644 --- 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 = (
+