build(package.json): PF prerelease V5 migration (#130)

* PF prerelease V5 migration Signed-off-by: Gilles Dubreuil <[email protected]> * bump to latest * Adjust StatusIcon test * Removed getFormGroupPropsA from UseFormState storie example * cleanup * Fix spinner size in StatusIcon Loading type Signed-off-by: Mike Turley <[email protected]> * Fix type Signed-off-by: Mike Turley <[email protected]> --------- Signed-off-by: Gilles Dubreuil <[email protected]> Signed-off-by: Mike Turley <[email protected]> Co-authored-by: Mike Turley <[email protected]> Signed-off-by: Mike Turley <[email protected]>
migtools · Jul 5, 2023 · c953ae7 · c953ae7
1 parent 2629913
commit c953ae7
Show file tree

Hide file tree

Showing 14 changed files with 4,045 additions and 3,731 deletions.
diff --git 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
@@ -20,7 +20,7 @@ const LoadingEmptyState: React.FunctionComponent<ILoadingEmptyStateProps> = ({
   body = null,
 }: ILoadingEmptyStateProps) => (
   <Bullseye className={className}>
-    <EmptyState variant="large">
+    <EmptyState variant="lg">
       <div className="pf-c-empty-state__icon">
         <Spinner aria-labelledby="loadingPrefLabel" size="xl" {...spinnerProps} />
       </div>

diff --git a/src/components/StatusIcon/StatusIcon.css b/src/components/StatusIcon/StatusIcon.css
diff --git 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(<StatusIcon {...props} />);
-  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(<StatusIcon {...props} />);
-  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
@@ -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<SVGIconProps> | React.FunctionComponent<SpinnerProps>;
-    color?: { name: string; value: string; var: string };
-  };
-};
+type IconListType = Partial<
+  Record<
+    StatusType,
+    {
+      Icon: React.ComponentClass<SVGIconProps>;
+      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<IStatusIconProps> = ({
   isDisabled = false,
   className = '',
 }: IStatusIconProps) => {
-  const Icon = iconList[status].Icon;
-  const icon = (
-    <Icon
-      color={isDisabled ? disabledColor.value : iconList[status].color?.value || '#151515'} // TODO use --pf-global--Color--100 after upgrading PF, for some reason that is resolving to #000 in this version
-      className={status === 'Loading' ? `${className} status-icon-loading-spinner` : className}
-    />
-  );
+  let icon: JSX.Element | null = null;
+  if (status === 'Loading') {
+    icon = <Spinner isInline className={className} />;
+  } else {
+    const IconComponent = iconList[status]?.Icon;
+    if (IconComponent) {
+      icon = (
+        <IconComponent
+          color={isDisabled ? disabledColor.value : iconList[status]?.color?.value || '#151515'} // TODO use --pf-global--Color--100 after upgrading PF, for some reason that is resolving to #000 in this version
+          className={className}
+        />
+      );
+    }
+  }
 
   if (label) {
     return (

diff --git 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<FormGroupProps, 'label' | 'fieldId' | 'isRequired'> {
@@ -49,13 +44,7 @@ export const ValidatedPasswordInput: React.FunctionComponent<IValidatedPasswordI
   const [isValueVisible, toggleValueVisible] = React.useReducer((isVisible) => !isVisible, false);
   const options: TextFieldOptions = { greenWhenValid, onBlur, onChange };
   return (
-    <FormGroup
-      label={label}
-      isRequired={isRequired}
-      fieldId={fieldId}
-      {...getFormGroupProps(field as IValidatedFormField<string | undefined>, options)}
-      {...formGroupProps}
-    >
+    <FormGroup label={label} isRequired={isRequired} fieldId={fieldId} {...formGroupProps}>
       <InputGroup>
         <TextInput
           id={fieldId}

diff --git a/src/components/ValidatedTextInput/ValidatedTextInput.tsx b/src/components/ValidatedTextInput/ValidatedTextInput.tsx
@@ -9,7 +9,6 @@ import {
 } from '@patternfly/react-core';
 import {
   IValidatedFormField,
-  getFormGroupProps,
   getTextAreaProps,
   getTextInputProps,
   TextFieldOptions,
@@ -49,13 +48,7 @@ export const ValidatedTextInput: React.FunctionComponent<IValidatedTextInputProp
 }: IValidatedTextInputProps) => {
   const options: TextFieldOptions = { greenWhenValid, onBlur, onChange };
   return (
-    <FormGroup
-      label={label}
-      isRequired={isRequired}
-      fieldId={fieldId}
-      {...getFormGroupProps(field as IValidatedFormField<string | undefined>, options)}
-      {...formGroupProps}
-    >
+    <FormGroup label={label} isRequired={isRequired} fieldId={fieldId} {...formGroupProps}>
       {component === TextInput ? (
         <TextInput
           id={fieldId}

diff --git a/src/hooks/useFormState/useFormState.stories.mdx b/src/hooks/useFormState/useFormState.stories.mdx
@@ -119,7 +119,7 @@ The below example shows how to render these fields even more simply using helper
 
 ### PatternFly text fields with prop helpers
 
-This package also provides `getFormGroupProps`, `getTextInputProps` and `getTextAreaProps` helpers which can take a form field object
+This package also provides `getTextInputProps` and `getTextAreaProps` helpers which can take a form field object
 and return the necessary props to render PatternFly's FormGroup, TextInput and TextArea components.
 
 Note: These helpers are provided for convenience if you need to build a custom field, you can reduce boilerplate even further by

diff --git a/src/hooks/useFormState/useFormState.stories.tsx b/src/hooks/useFormState/useFormState.stories.tsx
@@ -1,11 +1,20 @@
 import * as React from 'react';
 import * as yup from 'yup';
-import { Form, FormGroup, TextInput, TextArea, Flex, Button } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  TextArea,
+  Flex,
+  Button,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
 
 import {
   useFormState,
   useFormField,
-  getFormGroupProps,
   getTextInputProps,
   getTextAreaProps,
   useSelectionState,
@@ -67,35 +76,40 @@ export const PatternFlyTextFields: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Name"
-        isRequired
-        fieldId="example-2-name"
-        validated={form.fields.name.shouldShowError ? 'error' : 'default'}
-        helperTextInvalid={form.fields.name.error?.message}
-      >
+      <FormGroup label="Name" isRequired fieldId="example-2-name">
         <TextInput
           id="example-2-name"
           type="text"
           value={form.fields.name.value}
-          onChange={form.fields.name.setValue}
+          onChange={(_, value) => form.fields.name.setValue(value)}
           onBlur={() => form.fields.name.setIsTouched(true)}
           validated={form.fields.name.shouldShowError ? 'error' : 'default'}
         />
+        {form.fields.name.shouldShowError && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem variant="error">{form.fields.name.error?.message}</HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
-      <FormGroup
-        label="Description"
-        fieldId="example-2-desc"
-        validated={form.fields.description.shouldShowError ? 'error' : 'default'}
-        helperTextInvalid={form.fields.description.error?.message}
-      >
+      <FormGroup label="Description" fieldId="example-2-desc">
         <TextArea
           id="example-2-desc"
           value={form.fields.description.value}
-          onChange={form.fields.description.setValue}
+          onChange={(_, value) => form.fields.description.setValue(value)}
           onBlur={() => form.fields.description.setIsTouched(true)}
           validated={form.fields.description.shouldShowError ? 'error' : 'default'}
-        />
+        />{' '}
+        {form.fields.name.shouldShowError && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem variant="error">
+                {form.fields.description.error?.message}
+              </HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
       </FormGroup>
       <Flex>
         <Button
@@ -121,19 +135,10 @@ export const PatternFlyTextFieldsWithHelpers: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Name"
-        isRequired
-        fieldId="example-3-name"
-        {...getFormGroupProps(form.fields.name)}
-      >
+      <FormGroup label="Name" isRequired fieldId="example-3-name">
         <TextInput id="example-3-name" type="text" {...getTextInputProps(form.fields.name)} />
       </FormGroup>
-      <FormGroup
-        label="Description"
-        fieldId="example-3-desc"
-        {...getFormGroupProps(form.fields.description)}
-      >
+      <FormGroup label="Description" fieldId="example-3-desc">
         <TextArea id="example-3-desc" {...getTextAreaProps(form.fields.description)} ref={null} />
       </FormGroup>
       <Flex>
@@ -175,19 +180,10 @@ export const AsyncPrefilling: React.FunctionComponent = () => {
 
   return (
     <Form>
-      <FormGroup
-        label="Name"
-        isRequired
-        fieldId="example-3-name"
-        {...getFormGroupProps(form.fields.name)}
-      >
+      <FormGroup label="Name" isRequired fieldId="example-3-name">
         <TextInput id="example-3-name" type="text" {...getTextInputProps(form.fields.name)} />
       </FormGroup>
-      <FormGroup
-        label="Description"
-        fieldId="example-3-desc"
-        {...getFormGroupProps(form.fields.description)}
-      >
+      <FormGroup label="Description" fieldId="example-3-desc">
         <TextArea id="example-3-desc" {...getTextAreaProps(form.fields.description)} ref={null} />
       </FormGroup>
       <Flex>