Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(pf4): Upgrade to PatternFly 6 #1492

Merged
merged 4 commits into from
Dec 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/common/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const path = require('path');
const glob = require('glob');

const mapper = {
TextVariants: 'Text',
ContentVariants: 'Content',
ButtonVariant: 'Button',
TextListVariants: 'TextList',
TextListItemVariants: 'TextListItem',
Expand All @@ -13,7 +13,7 @@ const mapper = {
FormHelperText: 'Form',
FormGroup: 'Form',
GridItem: 'Grid',
TextContent: 'Text',
Content: 'Content',
HelperTextItem: 'HelperText',
ActionGroup: 'Form',
Tab: 'Tabs',
Expand Down
8 changes: 4 additions & 4 deletions packages/pf4-component-mapper/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const DualListSortButton = ({ position, ...rest }) => {

return (
<Button
icon={sortConfig[position] === 'asc' ? <PficonSortCommonAscIcon /> : <PficonSortCommonDescIcon />}
variant={ButtonVariant.plain}
onClick={
sortConfig[position] === 'asc'
Expand All @@ -19,9 +20,7 @@ const DualListSortButton = ({ position, ...rest }) => {
}
aria-label="Sort"
{...rest}
>
{sortConfig[position] === 'asc' ? <PficonSortCommonAscIcon /> : <PficonSortCommonDescIcon />}
</Button>
/>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
5 changes: 2 additions & 3 deletions packages/pf4-component-mapper/src/field-array/field-array.js
Original file line number Diff line number Diff line change
Expand Up @@ -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" />}
Expand Down
8 changes: 4 additions & 4 deletions packages/pf4-component-mapper/src/form-group/form-group.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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)) && (
Expand Down
18 changes: 9 additions & 9 deletions packages/pf4-component-mapper/src/form-template/form-template.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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 = {
Expand Down
4 changes: 2 additions & 2 deletions packages/pf4-component-mapper/src/plain-text/plain-text.d.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -8,7 +8,7 @@ interface InternalPlainTextProps {
TextContentProps: TextContentProps,
}

export type PlainTextProps = InternalPlainTextProps & TextProps;
export type PlainTextProps = InternalPlainTextProps & ContentProps;

declare const PlainText: React.ComponentType<PlainTextProps>;

Expand Down
10 changes: 5 additions & 5 deletions packages/pf4-component-mapper/src/plain-text/plain-text.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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-menu__item pf-m-disabled">{message}</div>;
};

EmptyOptions.propTypes = {
Expand Down
36 changes: 20 additions & 16 deletions packages/pf4-component-mapper/src/select/select/input.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,26 @@ 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">
<input
value=""
{...props}
className="pf-v5-c-text-input-group__text-input"
ref={inputRef}
{...{
...inputProps,
value: initialInputValue,
onKeyDown: (event, ...args) => {
event.stopPropagation();
inputProps.onKeyDown(event, ...args);
},
onChange: inputProps.onChange || Function,
}}
/>
<div className="ddorg__pf4-component-mapper__select-input-wrapper pf-v6-c-text-input-group pf-m-typeahead pf-m-plain">
<div className="pf-v6-c-text-input-group__main">
<span className="pf-v6-c-text-input-group__text">
<input
value=""
{...props}
className="pf-v6-c-text-input-group__text-input"
ref={inputRef}
{...{
...inputProps,
value: initialInputValue,
onKeyDown: (event, ...args) => {
event.stopPropagation();
inputProps.onKeyDown(event, ...args);
},
onChange: inputProps.onChange || Function,
}}
/>
</span>
</div>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/pf4-component-mapper/src/select/select/menu.css
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
10 changes: 5 additions & 5 deletions packages/pf4-component-mapper/src/select/select/menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -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-menu ddorg_pf4-component-mapper__select-portal-menu"
style={{
zIndex: 401,
position: 'absolute',
Expand Down Expand Up @@ -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-menu__list${menuIsPortal ? ' ddorg__pf4-component-mapper__menu-portal' : ''}`}>
{filteredOptions.length === 0 && (
<EmptyOption
isSearchable={isSearchable}
Expand All @@ -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-menu__group" key={`group-${arrayIndex}`}>
<div className="pf-v6-c-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);
Expand Down
22 changes: 11 additions & 11 deletions packages/pf4-component-mapper/src/select/select/option.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@ import PropTypes from 'prop-types';
import { CheckIcon } from '@patternfly/react-icons';

const Option = ({ item, isActive, isSelected, ...props }) => (
<li>
<li className={`pf-v6-c-menu__list-item${item.isDisabled || item.disabled ? ' pf-m-disabled' : ''}`}>
<button
{...props}
disabled={item.isDisabled || item.disabled}
type="button"
className={`pf-v5-c-select__menu-item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}${
item.isDisabled || item.disabled ? ' pf-m-disabled' : ''
}`}
className={`pf-v6-c-menu__item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}`}
>
{item.label}
{isSelected && (
<span className="pf-v5-c-select__menu-item-icon">
<CheckIcon />
</span>
)}
{item.description && <div className="pf-v5-c-select__menu-item-description">{item.description}</div>}
<span className="pf-v6-c-menu__item-main">
{item.label}
{isSelected && (
<span className="pf-v6-c-menu__item-icon">
<CheckIcon />
</span>
)}
{item.description && <div className="pf-v6-c-menu__item-text">{item.description}</div>}
</span>
</button>
</li>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@
animation: spin 2s linear infinite;
}

.pf-v5-c-select_toggle-wrapper.ddorg__pf4-component-mapper__select-toggle-wrapper {
flex: 1;
display: flex;
}

.ddorg__pf4-component-mapper__select-toggle.pf-m-typeahead {
padding-left: 0;
}
Loading
Loading