Skip to content

Commit d79359c

Browse files
wise-king-sullymanwise-king-sullyman
authored
majormajor(pf4): Upgrade to PatternFly 6 (#1492)
* feat(pf4): Upgrade to PatternFly 6 * Fix css errors * Fix PF6 select style issues * Fix lint errors
1 parent 5dd2a18 commit d79359c

File tree

31 files changed

+264
-286
lines changed

31 files changed

+264
-286
lines changed

‎packages/common/babel.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const path = require('path');
33
const glob = require('glob');
44

55
const mapper = {
6-
TextVariants: 'Text',
6+
ContentVariants: 'Content',
77
ButtonVariant: 'Button',
88
TextListVariants: 'TextList',
99
TextListItemVariants: 'TextListItem',
@@ -13,7 +13,7 @@ const mapper = {
1313
FormHelperText: 'Form',
1414
FormGroup: 'Form',
1515
GridItem: 'Grid',
16-
TextContent: 'Text',
16+
Content: 'Content',
1717
HelperTextItem: 'HelperText',
1818
ActionGroup: 'Form',
1919
Tab: 'Tabs',

‎packages/pf4-component-mapper/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@
3030
"javascript"
3131
],
3232
"devDependencies": {
33-
"@patternfly/react-core": "^5.0.0",
34-
"@patternfly/react-icons": "^5.0.0"
33+
"@patternfly/react-core": "^6.0.0",
34+
"@patternfly/react-icons": "^6.0.0"
3535
},
3636
"peerDependencies": {
3737
"@data-driven-forms/react-form-renderer": "*",
38-
"@patternfly/react-core": "^5.0.0",
39-
"@patternfly/react-icons": "^5.0.0",
38+
"@patternfly/react-core": "^6.0.0",
39+
"@patternfly/react-icons": "^6.0.0",
4040
"react": "^17.0.2 || ^18.0.0",
4141
"react-dom": "^17.0.2 || ^18.0.0"
4242
},

‎packages/pf4-component-mapper/src/dual-list-select/dual-list-select.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { DualListSelector } from '@patternfly/react-core';
3+
import { DualListSelector } from '@patternfly/react-core/deprecated';
44
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import isEqual from 'lodash/isEqual';
66

‎packages/pf4-component-mapper/src/dual-list-sort-button/dual-list-sort-button.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const DualListSortButton = ({ position, ...rest }) => {
1111

1212
return (
1313
<Button
14+
icon={sortConfig[position] === 'asc' ? <PficonSortCommonAscIcon /> : <PficonSortCommonDescIcon />}
1415
variant={ButtonVariant.plain}
1516
onClick={
1617
sortConfig[position] === 'asc'
@@ -19,9 +20,7 @@ const DualListSortButton = ({ position, ...rest }) => {
1920
}
2021
aria-label="Sort"
2122
{...rest}
22-
>
23-
{sortConfig[position] === 'asc' ? <PficonSortCommonAscIcon /> : <PficonSortCommonDescIcon />}
24-
</Button>
23+
/>
2524
);
2625
};
2726

‎packages/pf4-component-mapper/src/dual-list-tree-select/dual-list-tree-select.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { DualListSelector } from '@patternfly/react-core';
3+
import { DualListSelector } from '@patternfly/react-core/deprecated';
44
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
55
import isEqual from 'lodash/isEqual';
66

‎packages/pf4-component-mapper/src/field-array/field-array.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,12 @@ const ArrayItem = memo(
3232
<FlexItem>
3333
{editedFields[0].label && <Spacer />}
3434
<Button
35+
icon={<TrashIcon />}
3536
variant="plain"
3637
aria-label={buttonLabels.remove}
3738
disabled={isRemoveDisabled}
3839
{...(!isRemoveDisabled && { onClick: () => remove(fieldIndex) })}
39-
>
40-
<TrashIcon />
41-
</Button>
40+
/>
4241
</FlexItem>
4342
</Flex>
4443
{!isLast && editedFields.length > 1 && <hr className="ddf-final-form-hr" />}

‎packages/pf4-component-mapper/src/form-group/form-group.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { FormGroup as Pf4FormGroup, TextContent, Text, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
2+
import { FormGroup as Pf4FormGroup, Content, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
33
import PropTypes from 'prop-types';
44

55
import showError from '../show-error/show-error';
@@ -10,9 +10,9 @@ const FormGroup = ({ label, isRequired, helperText, meta, validateOnMount, descr
1010
return (
1111
<Pf4FormGroup isRequired={isRequired} label={!hideLabel && label} fieldId={id} aria-label={meta.error || meta.submitError} {...FormGroupProps}>
1212
{description && (
13-
<TextContent>
14-
<Text component="small">{description}</Text>
15-
</TextContent>
13+
<Content>
14+
<Content component="small">{description}</Content>
15+
</Content>
1616
)}
1717
{children}
1818
{(helperText || ['error', 'warning'].includes(validated)) && (

‎packages/pf4-component-mapper/src/form-template/form-template.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33

44
import FormTemplate from '@data-driven-forms/common/form-template';
55

6-
import { Button as PF4Button, ActionGroup, Form, TextContent, Text, TextVariants, Alert } from '@patternfly/react-core';
6+
import { Button as PF4Button, ActionGroup, Form, Content, ContentVariants, Alert } from '@patternfly/react-core';
77

88
export const Button = ({ label, bsStyle, children, disabled, buttonType, ...props }) => (
99
<PF4Button variant={buttonType === 'cancel' ? 'link' : bsStyle || 'secondary'} isDisabled={disabled} {...props}>
@@ -27,23 +27,23 @@ ButtonGroup.propTypes = {
2727
};
2828

2929
export const Title = ({ children, ...props }) => (
30-
<TextContent>
31-
<Text component={TextVariants.h1} {...props}>
30+
<Content>
31+
<Content component={ContentVariants.h1} {...props}>
3232
{children}
33-
</Text>
34-
</TextContent>
33+
</Content>
34+
</Content>
3535
);
3636

3737
Title.propTypes = {
3838
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
3939
};
4040

4141
export const Description = ({ children, ...props }) => (
42-
<TextContent>
43-
<Text component={TextVariants.p} {...props}>
42+
<Content>
43+
<Content component={ContentVariants.p} {...props}>
4444
{children}
45-
</Text>
46-
</TextContent>
45+
</Content>
46+
</Content>
4747
);
4848

4949
Description.propTypes = {

‎packages/pf4-component-mapper/src/plain-text/plain-text.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactNode } from "react";
2-
import { TextProps, TextContentProps } from "@patternfly/react-core";
2+
import { ContentProps, TextContentProps } from "@patternfly/react-core";
33

44
interface InternalPlainTextProps {
55
label: ReactNode;
@@ -8,7 +8,7 @@ interface InternalPlainTextProps {
88
TextContentProps: TextContentProps,
99
}
1010

11-
export type PlainTextProps = InternalPlainTextProps & TextProps;
11+
export type PlainTextProps = InternalPlainTextProps & ContentProps;
1212

1313
declare const PlainText: React.ComponentType<PlainTextProps>;
1414

‎packages/pf4-component-mapper/src/plain-text/plain-text.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
import { TextContent, Text } from '@patternfly/react-core';
4+
import { Content } from '@patternfly/react-core';
55
import validTextFields from '@data-driven-forms/common/utils/valid-text-fields';
66

77
const PlainText = ({ component, label, name, variant = 'p', TextContentProps, ...rest }) => (
8-
<TextContent {...TextContentProps}>
8+
<Content {...TextContentProps}>
99
{typeof label === 'string'
1010
? label.split('\n').map((paragraph, index) => (
11-
<Text component={variant} {...rest} key={`${name}-${index}`}>
11+
<Content component={variant} {...rest} key={`${name}-${index}`}>
1212
{paragraph}
13-
</Text>
13+
</Content>
1414
))
1515
: label}
16-
</TextContent>
16+
</Content>
1717
);
1818

1919
PlainText.propTypes = {

0 commit comments

Comments
 (0)