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

31 files changed

+264
-286
lines changed

‎packages/common/babel.config.js

+2-2
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

+4-4
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

+1-1
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

+2-3
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

+1-1
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

+2-3
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

+4-4
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

+9-9
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

+2-2
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

+5-5
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 = {

‎packages/pf4-component-mapper/src/select/select/clear-indicator.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const ClearIndicator = ({ clearSelection }) => (
1010
clearSelection();
1111
event.stopPropagation();
1212
}}
13-
className="pf-v5-c-button pf-v5-c-select__toggle-clear pf-v5-u-p-0"
13+
className="pf-v6-c-button pf-v6-c-menu-toggle-clear pf-v6-u-p-0"
1414
type="button"
1515
aria-label="Clear all"
1616
>

‎packages/pf4-component-mapper/src/select/select/empty-options.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
44
const EmptyOptions = ({ noOptionsMessage, noResultsMessage, getInputProps, isSearchable, isFetching }) => {
55
const { value } = getInputProps();
66
const message = isFetching ? noOptionsMessage() : isSearchable && value ? noResultsMessage : noOptionsMessage();
7-
return <div className="pf-v5-c-select__menu-item pf-m-disabled">{message}</div>;
7+
return <div className="pf-v6-c-menu__item pf-m-disabled">{message}</div>;
88
};
99

1010
EmptyOptions.propTypes = {

‎packages/pf4-component-mapper/src/select/select/input.js

+20-16
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,26 @@ const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, value, ...pr
2424
const inputProps = getInputProps({ disabled: isDisabled });
2525
const initialInputValue = getInputString(inputProps.value, value);
2626
return (
27-
<div className="ddorg__pf4-component-mapper__select-input-wrapper pf-v5-c-text-input-group pf-m-typeahead">
28-
<input
29-
value=""
30-
{...props}
31-
className="pf-v5-c-text-input-group__text-input"
32-
ref={inputRef}
33-
{...{
34-
...inputProps,
35-
value: initialInputValue,
36-
onKeyDown: (event, ...args) => {
37-
event.stopPropagation();
38-
inputProps.onKeyDown(event, ...args);
39-
},
40-
onChange: inputProps.onChange || Function,
41-
}}
42-
/>
27+
<div className="ddorg__pf4-component-mapper__select-input-wrapper pf-v6-c-text-input-group pf-m-typeahead pf-m-plain">
28+
<div className="pf-v6-c-text-input-group__main">
29+
<span className="pf-v6-c-text-input-group__text">
30+
<input
31+
value=""
32+
{...props}
33+
className="pf-v6-c-text-input-group__text-input"
34+
ref={inputRef}
35+
{...{
36+
...inputProps,
37+
value: initialInputValue,
38+
onKeyDown: (event, ...args) => {
39+
event.stopPropagation();
40+
inputProps.onKeyDown(event, ...args);
41+
},
42+
onChange: inputProps.onChange || Function,
43+
}}
44+
/>
45+
</span>
46+
</div>
4347
</div>
4448
);
4549
};

‎packages/pf4-component-mapper/src/select/select/menu.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.pf-v5-c-select__menu.ddorg__pf4-component-mapper__select-menu-portal {
1+
.pf-v6-c-menu.ddorg__pf4-component-mapper__menu-portal {
22
margin-top: 2px;
33
position: relative;
44
width: calc(100% - 2px);

‎packages/pf4-component-mapper/src/select/select/menu.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const MenuPortal = ({ selectToggleRef, menuPortalTarget, children }) => {
8484
const portalDiv = (
8585
<div
8686
ref={menuRef}
87-
className="pf-v5-c-select ddorg_pf4-component-mapper__select-portal-menu"
87+
className="pf-v6-c-menu ddorg_pf4-component-mapper__select-portal-menu"
8888
style={{
8989
zIndex: 401,
9090
position: 'absolute',
@@ -147,7 +147,7 @@ const Menu = ({
147147
};
148148

149149
const menuItems = (
150-
<ul className={`pf-v5-c-select__menu${menuIsPortal ? ' ddorg__pf4-component-mapper__select-menu-portal' : ''}`}>
150+
<ul className={`pf-v6-c-menu__list${menuIsPortal ? ' ddorg__pf4-component-mapper__menu-portal' : ''}`}>
151151
{filteredOptions.length === 0 && (
152152
<EmptyOption
153153
isSearchable={isSearchable}
@@ -160,15 +160,15 @@ const Menu = ({
160160
{filteredOptions.map((item, arrayIndex) => {
161161
if (item.options) {
162162
return (
163-
<div className="pf-v5-c-select__menu-group" key={`group-${arrayIndex}`}>
164-
<div className="pf-v5-c-select__menu-group-title">{item.label}</div>
163+
<div className="pf-v6-c-menu__group" key={`group-${arrayIndex}`}>
164+
<div className="pf-v6-c-menu__group-title">{item.label}</div>
165165
{item.options.map((nestedItem) => createOption(nestedItem))}
166166
</div>
167167
);
168168
}
169169

170170
if (item.divider) {
171-
return <hr className="pf-v5-c-divider" key={`divider-${index}`} />;
171+
return <hr className="pf-v6-c-divider" key={`divider-${index}`} />;
172172
}
173173

174174
return createOption(item);

‎packages/pf4-component-mapper/src/select/select/option.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ import PropTypes from 'prop-types';
44
import { CheckIcon } from '@patternfly/react-icons';
55

66
const Option = ({ item, isActive, isSelected, ...props }) => (
7-
<li>
7+
<li className={`pf-v6-c-menu__list-item${item.isDisabled || item.disabled ? ' pf-m-disabled' : ''}`}>
88
<button
99
{...props}
1010
disabled={item.isDisabled || item.disabled}
1111
type="button"
12-
className={`pf-v5-c-select__menu-item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}${
13-
item.isDisabled || item.disabled ? ' pf-m-disabled' : ''
14-
}`}
12+
className={`pf-v6-c-menu__item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}`}
1513
>
16-
{item.label}
17-
{isSelected && (
18-
<span className="pf-v5-c-select__menu-item-icon">
19-
<CheckIcon />
20-
</span>
21-
)}
22-
{item.description && <div className="pf-v5-c-select__menu-item-description">{item.description}</div>}
14+
<span className="pf-v6-c-menu__item-main">
15+
{item.label}
16+
{isSelected && (
17+
<span className="pf-v6-c-menu__item-icon">
18+
<CheckIcon />
19+
</span>
20+
)}
21+
{item.description && <div className="pf-v6-c-menu__item-text">{item.description}</div>}
22+
</span>
2323
</button>
2424
</li>
2525
);

‎packages/pf4-component-mapper/src/select/select/select-styles.css

-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
animation: spin 2s linear infinite;
88
}
99

10-
.pf-v5-c-select_toggle-wrapper.ddorg__pf4-component-mapper__select-toggle-wrapper {
11-
flex: 1;
12-
display: flex;
13-
}
14-
1510
.ddorg__pf4-component-mapper__select-toggle.pf-m-typeahead {
1611
padding-left: 0;
1712
}

0 commit comments

Comments
 (0)