fix(pf5): Migrate classNames to PF v5 ones

fhlavac · fhlavac · commit 2385c7d21e5d · 2023-08-29T16:52:37.000+02:00
diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx
@@ -9,31 +9,31 @@ import { createUseStyles } from 'react-jss'
 
 const batteryDefault = {
   '& svg': {
-    '& path': { fill: 'var(--pf-global--disabled-color--200)' }
+    '& path': { fill: 'var(--pf-v5-global--disabled-color--200)' }
   }
 };
 
 const batteryLow = {
   '& svg': {
-    '& path': { fill: 'var(--pf-global--success-color--100)' }
+    '& path': { fill: 'var(--pf-v5-global--success-color--100)' }
   }
 };
 
 const batteryMedium = {
   '& svg': {
-    '& path': { fill: 'var(--pf-global--warning-color--100)' }
+    '& path': { fill: 'var(--pf-v5-global--warning-color--100)' }
   }
 };
 
 const batteryHigh = {
   '& svg': {
-    '& path': { fill: 'var(--pf-global--palette--orange-300)' }
+    '& path': { fill: 'var(--pf-v5-global--palette--orange-300)' }
   }
 };
 
 const batteryCritical = {
   '& svg': {
-    '& path': { fill: 'var(--pf-global--danger-color--100)' }
+    '& path': { fill: 'var(--pf-v5-global--danger-color--100)' }
   }
 };
 
@@ -43,7 +43,7 @@ const useStyles = createUseStyles({
     'line-height': 0,
     '& svg': {
       position: 'relative',
-      top: 'var(--pf-global--spacer--sm)',
+      top: 'var(--pf-v5-global--spacer--sm)',
       height: '1.75rem'
     }
   },
diff --git a/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx b/packages/module/src/DetailsPageHeader/utils/ActionMenu.tsx
@@ -76,7 +76,7 @@ const useStyles = createUseStyles({
       justifyContent: 'left'
     },
     '.pf-c-dropdown__menu-item-icon': {
-      marginLeft: 'var(--pf-c-dropdown__menu-item-icon--MarginRight)'
+      marginLeft: 'var(--pf-v5-c-dropdown__menu-item-icon--MarginRight)'
     },
     '.pf-c-dropdown__menu-item-main': {
       flexDirection: 'row-reverse',
diff --git a/packages/module/src/ErrorBoundary/ErrorBoundary.tsx b/packages/module/src/ErrorBoundary/ErrorBoundary.tsx
@@ -28,7 +28,7 @@ interface ErrorPageState {
 }
 
 // As of time of writing, React only supports error boundaries in class components
-class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {
+class ErrorBoundary extends React.Component<React.PropsWithChildren<ErrorPageProps>, ErrorPageState> {
   constructor(props: Readonly<ErrorPageProps>) {
     super(props);
     this.state = {
diff --git a/packages/module/src/ErrorBoundary/ErrorStack.tsx b/packages/module/src/ErrorBoundary/ErrorStack.tsx
@@ -9,13 +9,13 @@ interface ErrorStackProps {
 const useStyles = createUseStyles({
   errorStack: {
     fontFamily: 'monospace',
-    fontSize: 'var(--pf-global--icon--FontSize--md)',
+    fontSize: 'var(--pf-v5-global--icon--FontSize--md)',
     textAlign: 'left',
     backgroundColor: 'white',
     borderStyle: 'solid',
-    borderColor: 'var(--pf-global--BackgroundColor--dark-300)',
+    borderColor: 'var(--pf-v5-global--BackgroundColor--dark-300)',
     overflowWrap: 'break-word',
-    padding: 'var(--pf-global--spacer--sm)'
+    padding: 'var(--pf-v5-global--spacer--sm)'
   },
 })
 
diff --git a/packages/module/src/ErrorState/ErrorState.tsx b/packages/module/src/ErrorState/ErrorState.tsx
@@ -3,18 +3,20 @@ import {
   Button,
   EmptyState,
   EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
   EmptyStateIcon,
   EmptyStateProps,
   EmptyStateVariant,
   Stack,
-  StackItem, EmptyStateHeader, EmptyStateFooter,
+  StackItem, 
 } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss'
 import React from 'react';
 
 const useStyles = createUseStyles({
   errorIcon: {
-    fill: 'var(--pf-global--danger-color--100)',
+    fill: 'var(--pf-v5-global--danger-color--100)',
   },
 })
 
@@ -36,7 +38,8 @@ const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'So
         <Stack>
           {errorDescription ? <StackItem>{errorDescription}</StackItem> : defaultErrorDescription}
         </Stack>
-      </EmptyStateBody><EmptyStateFooter>
+      </EmptyStateBody>
+      <EmptyStateFooter>
         {document.referrer ? (
           <Button variant="primary" onClick={() => history.back()}>
             Return to last page
@@ -46,7 +49,8 @@ const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'So
             Go to home page
           </Button>
         )}
-      </EmptyStateFooter></EmptyState>
+      </EmptyStateFooter>
+    </EmptyState>
   );
 }
 
diff --git a/packages/module/src/NotAuthorized/NotAuthorized.tsx b/packages/module/src/NotAuthorized/NotAuthorized.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateProps, EmptyStateVariant, EmptyStateHeader, EmptyStateFooter, } from '@patternfly/react-core';
+import { Button, EmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateProps, EmptyStateVariant, EmptyStateHeader, EmptyStateFooter, EmptyStateActions, } from '@patternfly/react-core';
 import { LockIcon } from '@patternfly/react-icons';
 
 export interface NotAuthorizedProps extends Omit<EmptyStateProps, 'children' | 'title'> {
@@ -40,19 +40,23 @@ export const NotAuthorized: React.FunctionComponent<NotAuthorizedProps> = ({
 }: NotAuthorizedProps) => (
   <EmptyState variant={EmptyStateVariant.full} className={className} {...props}>
     <EmptyStateHeader titleText={<>{title}</>} icon={<EmptyStateIcon icon={Icon} />} headingLevel="h5" />
-    <EmptyStateBody>{description}</EmptyStateBody><EmptyStateFooter>
-      {actions}
-      {showReturnButton &&
-        (document.referrer ? (
-          <Button variant="primary" onClick={() => history.back()}>
-            {prevPageButtonText}
-          </Button>
-        ) : (
-          <Button variant="primary" component="a" href={toLandingPageUrl}>
-            {toLandingPageText}
-          </Button>
-        ))}
-    </EmptyStateFooter></EmptyState>
+    <EmptyStateBody>{description}</EmptyStateBody>
+    <EmptyStateFooter>
+      {actions && <EmptyStateActions>{actions}</EmptyStateActions>}
+      <EmptyStateActions>
+        {showReturnButton &&
+            (document.referrer ? (
+              <Button variant="primary" onClick={() => history.back()}>
+                {prevPageButtonText}
+              </Button>
+            ) : (
+              <Button variant="primary" component="a" href={toLandingPageUrl}>
+                {toLandingPageText}
+              </Button>
+            ))}
+      </EmptyStateActions>
+    </EmptyStateFooter>
+  </EmptyState>
 );
 
 
diff --git a/packages/module/src/NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap b/packages/module/src/NotAuthorized/__snapshots__/NotAuthorized.test.tsx.snap
@@ -45,16 +45,20 @@ exports[`NotAuthorized component should apply custom styles 1`] = `
     <div
       class="pf-v5-c-empty-state__footer"
     >
-      <a
-        aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-2"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        href="."
+      <div
+        class="pf-v5-c-empty-state__actions"
       >
-        Go to landing page
-      </a>
+        <a
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          href="."
+        >
+          Go to landing page
+        </a>
+      </div>
     </div>
   </div>
 </div>
@@ -104,7 +108,11 @@ exports[`NotAuthorized component should not show buttons 1`] = `
     </div>
     <div
       class="pf-v5-c-empty-state__footer"
-    />
+    >
+      <div
+        class="pf-v5-c-empty-state__actions"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -154,16 +162,20 @@ exports[`NotAuthorized component should render 1`] = `
     <div
       class="pf-v5-c-empty-state__footer"
     >
-      <a
-        aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-1"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        href="."
+      <div
+        class="pf-v5-c-empty-state__actions"
       >
-        Go to landing page
-      </a>
+        <a
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-1"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          href="."
+        >
+          Go to landing page
+        </a>
+      </div>
     </div>
   </div>
 </div>
@@ -214,26 +226,34 @@ exports[`NotAuthorized component should show custom actions 1`] = `
     <div
       class="pf-v5-c-empty-state__footer"
     >
-      <button
-        id="action-one"
-      >
-        1
-      </button>
-      <button
-        id="action-one"
+      <div
+        class="pf-v5-c-empty-state__actions"
       >
-        2
-      </button>
-      <a
-        aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-6"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        href="."
+        <button
+          id="action-one"
+        >
+          1
+        </button>
+        <button
+          id="action-one"
+        >
+          2
+        </button>
+      </div>
+      <div
+        class="pf-v5-c-empty-state__actions"
       >
-        Go to landing page
-      </a>
+        <a
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-6"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          href="."
+        >
+          Go to landing page
+        </a>
+      </div>
     </div>
   </div>
 </div>
@@ -284,16 +304,20 @@ exports[`NotAuthorized component should show custom description 1`] = `
     <div
       class="pf-v5-c-empty-state__footer"
     >
-      <a
-        aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-4"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        href="."
+      <div
+        class="pf-v5-c-empty-state__actions"
       >
-        Go to landing page
-      </a>
+        <a
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-4"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          href="."
+        >
+          Go to landing page
+        </a>
+      </div>
     </div>
   </div>
 </div>
@@ -344,16 +368,20 @@ exports[`NotAuthorized component should show custom title 1`] = `
     <div
       class="pf-v5-c-empty-state__footer"
     >
-      <a
-        aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-5"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        href="."
+      <div
+        class="pf-v5-c-empty-state__actions"
       >
-        Go to landing page
-      </a>
+        <a
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-5"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          href="."
+        >
+          Go to landing page
+        </a>
+      </div>
     </div>
   </div>
 </div>
@@ -404,16 +432,20 @@ exports[`NotAuthorized component should use custom icon 1`] = `
     <div
       class="pf-v5-c-empty-state__footer"
     >
-      <a
-        aria-disabled="false"
-        class="pf-v5-c-button pf-m-primary"
-        data-ouia-component-id="OUIA-Generated-Button-primary-3"
-        data-ouia-component-type="PF5/Button"
-        data-ouia-safe="true"
-        href="."
+      <div
+        class="pf-v5-c-empty-state__actions"
       >
-        Go to landing page
-      </a>
+        <a
+          aria-disabled="false"
+          class="pf-v5-c-button pf-m-primary"
+          data-ouia-component-id="OUIA-Generated-Button-primary-3"
+          data-ouia-component-type="PF5/Button"
+          data-ouia-safe="true"
+          href="."
+        >
+          Go to landing page
+        </a>
+      </div>
     </div>
   </div>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ interface ErrorPageState {`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`// As of time of writing, React only supports error boundaries in class components`
`31`		`-class ErrorBoundary extends React.Component<ErrorPageProps, ErrorPageState> {`
	`31`	`+class ErrorBoundary extends React.Component<React.PropsWithChildren<ErrorPageProps>, ErrorPageState> {`
`32`	`32`	`constructor(props: Readonly<ErrorPageProps>) {`
`33`	`33`	`super(props);`
`34`	`34`	`this.state = {`