Emotion conversion: Take #2

Author: epwinchell

package-lock.json

@@ -38,6 +38,7 @@
     "@babel/preset-flow": "^7.25.9",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.26.0",
+    "@emotion/babel-plugin": "^11.13.5",
     "@octokit/rest": "^21.1.0",
     "@swc/core": "1.7.42",
     "@testing-library/dom": "^10.3.2",
@@ -83,6 +84,7 @@
     "whatwg-fetch": "^3.6.20"
   },
   "dependencies": {
+    "@emotion/cache": "^11.14.0",
     "@patternfly/react-tokens": "^6.0.0",
     "sharp": "^0.33.5"
   }

package.json

@@ -34,6 +34,7 @@
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
+    "@emotion/react": "^11.14.0",
     "react-jss": "^10.10.0",
     "clsx": "^2.1.1"
   },

packages/module/package.json

@@ -1,15 +1,15 @@
+import { jsx, css } from '@emotion/react';
 import React from 'react';
 import { Button, ButtonProps, ButtonVariant } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
-import { createUseStyles } from 'react-jss';
 import clsx from 'clsx';
 
-const useStyles = createUseStyles({
-  closeButton: {
-    float: 'inline-end',
-    padding: '10px 14px'
-  },
-});
+const styles = {
+  closeButton: css`
+    float: inline-end;
+    padding: 10px 14px;
+  `
+};
 
 /** extends ButtonProps */
 export interface CloseButtonProps extends ButtonProps {
@@ -24,11 +24,10 @@ export const CloseButton: React.FunctionComponent<CloseButtonProps> = ({
   ouiaId="CloseButton",
   ...props
 }: CloseButtonProps) => {
-  const classes = useStyles();
   return (
     <Button icon={<CloseIcon />}
       aria-label={props['aria-label'] || 'Close'}
-      className={clsx(classes.closeButton, className)}
+      css={styles.closeButton}
       data-test-id={dataTestID}
       onClick={onClick}
       variant={ButtonVariant.plain}

packages/module/src/CloseButton/CloseButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { css } from '@emotion/react';
 import {
   Flex,
   FlexItem,
@@ -12,7 +13,6 @@ import {
   Divider,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { createUseStyles } from 'react-jss';
 
 /** extends ButtonProps */
 export interface PageHeaderLinkProps extends ButtonProps {
@@ -41,11 +41,11 @@ export interface ContentHeaderProps {
   ouiaId?: string | number;
 }
 
-const useStyles = createUseStyles({
-  iconMinWidth: {
-    minWidth: '48px',
-  }
-});
+const styles = {
+  iconMinWidth: css`
+    min-height: 48px;
+  `
+};
 
 export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<ContentHeaderProps>> = ({
   title,
@@ -57,7 +57,6 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
   actionMenu,
   ouiaId = 'ContentHeader',
 }: ContentHeaderProps) => {
-  const classes = useStyles();
   const { isExternal = false, ...linkRestProps } = linkProps ?? {};
 
   return (
@@ -70,7 +69,7 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
       <Flex>
         {icon && (
           <>
-            <FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={`${classes.iconMinWidth}`}>
+            <FlexItem alignSelf={{ default: 'alignSelfCenter' }} css={styles.iconMinWidth} >
               {icon}
             </FlexItem>
             <Divider orientation={{