diff --git a/package.json b/package.json index 71c6cbf..aca34c0 100644 --- a/package.json +++ b/package.json @@ -28,18 +28,18 @@ "storybook:export": "rimraf storybook-static && build-storybook --docs" }, "peerDependencies": { - "@patternfly/react-core": "^4.276.6", - "@patternfly/react-tokens": "^4.94.6", + "@patternfly/react-core": "5.0.0-prerelease.15", + "@patternfly/react-tokens": "5.0.0-prerelease.7", "axios": "^0.21.2", "react": "^17.0.1", "react-dom": "^17.0.1" }, "devDependencies": { "@babel/core": "^7.13.16", - "@patternfly/react-core": "^4.276.6", - "@patternfly/react-icons": "^4.93.6", - "@patternfly/react-table": "^4.112.39", - "@patternfly/react-tokens": "^4.94.6", + "@patternfly/react-core": "5.0.0-prerelease.15", + "@patternfly/react-icons": "5.0.0-prerelease.7", + "@patternfly/react-table": "5.0.0-prerelease.15", + "@patternfly/react-tokens": "5.0.0-prerelease.5", "@rollup/plugin-commonjs": "^22.0.0", "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.3.0", diff --git a/src/components/LoadingEmptyState.tsx b/src/components/LoadingEmptyState.tsx index 7737545..521072e 100644 --- a/src/components/LoadingEmptyState.tsx +++ b/src/components/LoadingEmptyState.tsx @@ -20,7 +20,7 @@ const LoadingEmptyState: React.FunctionComponent = ({ body = null, }: ILoadingEmptyStateProps) => ( - +
diff --git a/src/components/StatusIcon/StatusIcon.css b/src/components/StatusIcon/StatusIcon.css deleted file mode 100644 index c3ffbd1..0000000 --- a/src/components/StatusIcon/StatusIcon.css +++ /dev/null @@ -1,3 +0,0 @@ -span.pf-c-spinner.status-icon-loading-spinner { - --pf-c-spinner--diameter: 1em; -} diff --git a/src/components/StatusIcon/StatusIcon.test.tsx b/src/components/StatusIcon/StatusIcon.test.tsx index f7bf9f1..2b02fa1 100644 --- a/src/components/StatusIcon/StatusIcon.test.tsx +++ b/src/components/StatusIcon/StatusIcon.test.tsx @@ -13,8 +13,8 @@ import { StatusIcon, IStatusIconProps } from './StatusIcon'; const checkColor = (props: IStatusIconProps, color: string) => { const { container } = render(); - const icon = container.querySelector('svg'); - expect(icon).toHaveAttribute('fill', color); + const icon = container.querySelector('.pf-v5-svg'); + expect(icon).toHaveAttribute('color', color); }; const checkClass = (props: IStatusIconProps, className: string, selector: string) => { @@ -25,7 +25,7 @@ const checkClass = (props: IStatusIconProps, className: string, selector: string const checkText = (props: IStatusIconProps, text: string) => { const { container } = render(); - const icon = container.querySelector('.pf-l-flex'); + const icon = container.querySelector('.pf-v5-l-flex'); expect(icon).toContainHTML(text); }; @@ -41,7 +41,7 @@ describe('StatusIcon', () => { checkColor({ status: 'Ok', isDisabled: true }, disabledColor.value); }); it('should pass down a given className', () => { - checkClass({ status: 'Ok', className: 'foo' }, 'foo', 'svg'); + checkClass({ status: 'Ok', className: 'foo' }, 'foo', '.pf-v5-svg'); }); }); @@ -56,7 +56,7 @@ describe('StatusIcon', () => { checkColor({ status: 'Warning', isDisabled: true }, disabledColor.value); }); it('should pass down a given className', () => { - checkClass({ status: 'Warning', className: 'foo' }, 'foo', 'svg'); + checkClass({ status: 'Warning', className: 'foo' }, 'foo', '.pf-v5-svg'); }); }); @@ -71,7 +71,7 @@ describe('StatusIcon', () => { checkColor({ status: 'Error', isDisabled: true }, disabledColor.value); }); it('should pass down a given className', () => { - checkClass({ status: 'Error', className: 'foo' }, 'foo', 'svg'); + checkClass({ status: 'Error', className: 'foo' }, 'foo', '.pf-v5-svg'); }); }); @@ -86,7 +86,7 @@ describe('StatusIcon', () => { checkColor({ status: 'Info', isDisabled: true }, disabledColor.value); }); it('should pass down a given className', () => { - checkClass({ status: 'Info', className: 'foo' }, 'foo', 'svg'); + checkClass({ status: 'Info', className: 'foo' }, 'foo', '.pf-v5-svg'); }); }); @@ -95,7 +95,7 @@ describe('StatusIcon', () => { checkText({ status: 'Loading', label: 'Loading' }, 'Loading'); }); it('should pass down a given className', () => { - checkClass({ status: 'Loading', className: 'foo' }, 'foo', 'span'); + checkClass({ status: 'Loading', className: 'foo' }, 'foo', '.pf-v5-c-spinner'); }); }); @@ -110,7 +110,7 @@ describe('StatusIcon', () => { checkColor({ status: 'Paused', isDisabled: true }, disabledColor.value); }); it('should pass down a given className', () => { - checkClass({ status: 'Paused', className: 'foo' }, 'foo', 'svg'); + checkClass({ status: 'Paused', className: 'foo' }, 'foo', '.pf-v5-svg'); }); }); @@ -125,7 +125,7 @@ describe('StatusIcon', () => { checkColor({ status: 'Unknown', isDisabled: true }, disabledColor.value); }); it('should pass down a given className', () => { - checkClass({ status: 'Unknown', className: 'foo' }, 'foo', 'svg'); + checkClass({ status: 'Unknown', className: 'foo' }, 'foo', '.pf-v5-svg'); }); }); }); diff --git a/src/components/StatusIcon/StatusIcon.tsx b/src/components/StatusIcon/StatusIcon.tsx index bf1badb..6cf8eea 100644 --- a/src/components/StatusIcon/StatusIcon.tsx +++ b/src/components/StatusIcon/StatusIcon.tsx @@ -16,19 +16,20 @@ import { global_Color_dark_200 as unknownColor, global_danger_color_100 as errorColor, global_info_color_100 as infoColor, - global_info_color_200 as loadingColor, } from '@patternfly/react-tokens'; -import './StatusIcon.css'; - export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Paused' | 'Unknown'; -type IconListType = { - [key in StatusType]: { - Icon: React.ComponentClass | React.FunctionComponent; - color?: { name: string; value: string; var: string }; - }; -}; +type IconListType = Partial< + Record< + StatusType, + { + Icon: React.ComponentClass; + color?: { name: string; value: string; var: string }; + } + > +>; + const iconList: IconListType = { Ok: { Icon: CheckCircleIcon, @@ -46,10 +47,6 @@ const iconList: IconListType = { Icon: InfoCircleIcon, color: infoColor, }, - Loading: { - Icon: Spinner, - color: loadingColor, - }, Paused: { Icon: PauseCircleIcon, }, @@ -72,13 +69,20 @@ export const StatusIcon: React.FunctionComponent = ({ isDisabled = false, className = '', }: IStatusIconProps) => { - const Icon = iconList[status].Icon; - const icon = ( - - ); + let icon: JSX.Element | null = null; + if (status === 'Loading') { + icon = ; + } else { + const IconComponent = iconList[status]?.Icon; + if (IconComponent) { + icon = ( + + ); + } + } if (label) { return ( diff --git a/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx b/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx index faee3ca..c9d16a2 100644 --- a/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx +++ b/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx @@ -8,12 +8,7 @@ import { TextInputProps, } from '@patternfly/react-core'; import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'; -import { - IValidatedFormField, - getFormGroupProps, - getTextInputProps, - TextFieldOptions, -} from '../../hooks/useFormState'; +import { IValidatedFormField, getTextInputProps, TextFieldOptions } from '../../hooks/useFormState'; interface IValidatedPasswordInputProps extends Pick { @@ -49,13 +44,7 @@ export const ValidatedPasswordInput: React.FunctionComponent !isVisible, false); const options: TextFieldOptions = { greenWhenValid, onBlur, onChange }; return ( - , options)} - {...formGroupProps} - > + { const options: TextFieldOptions = { greenWhenValid, onBlur, onChange }; return ( - , options)} - {...formGroupProps} - > + {component === TextInput ? ( { return (
- + form.fields.name.setValue(value)} onBlur={() => form.fields.name.setIsTouched(true)} validated={form.fields.name.shouldShowError ? 'error' : 'default'} /> + {form.fields.name.shouldShowError && ( + + + {form.fields.name.error?.message} + + + )} - +