Skip to content

Commit e6de4c8

Browse files
epwinchellepwinchell
committed
Emotion conversion: Take #2 
1 parent a1bcfd1 commit e6de4c8

File tree

13 files changed

+344
-182
lines changed

13 files changed

+344
-182
lines changed

‎package-lock.json

Lines changed: 208 additions & 36 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@babel/preset-flow": "^7.25.9",
3939
"@babel/preset-react": "^7.24.7",
4040
"@babel/preset-typescript": "^7.26.0",
41+
"@emotion/babel-plugin": "^11.13.5",
4142
"@octokit/rest": "^21.1.0",
4243
"@swc/core": "1.7.42",
4344
"@testing-library/dom": "^10.3.2",
@@ -83,6 +84,7 @@
8384
"whatwg-fetch": "^3.6.20"
8485
},
8586
"dependencies": {
87+
"@emotion/cache": "^11.14.0",
8688
"@patternfly/react-tokens": "^6.0.0",
8789
"sharp": "^0.33.5"
8890
}

‎packages/module/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@patternfly/react-core": "^6.0.0",
3535
"@patternfly/react-icons": "^6.0.0",
3636
"@patternfly/react-table": "^6.0.0",
37+
"@emotion/react": "^11.14.0",
3738
"react-jss": "^10.10.0",
3839
"clsx": "^2.1.1"
3940
},

‎packages/module/src/CloseButton/CloseButton.tsx

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1+
import { css } from '@emotion/react';
12
import React from 'react';
23
import { Button, ButtonProps, ButtonVariant } from '@patternfly/react-core';
34
import { CloseIcon } from '@patternfly/react-icons';
4-
import { createUseStyles } from 'react-jss';
5-
import clsx from 'clsx';
65

7-
const useStyles = createUseStyles({
8-
closeButton: {
9-
float: 'inline-end',
10-
padding: '10px 14px'
11-
},
12-
});
6+
const styles = {
7+
closeButton: css`
8+
float: inline-end;
9+
padding: 10px 14px;
10+
`
11+
};
1312

1413
/** extends ButtonProps */
1514
export interface CloseButtonProps extends ButtonProps {
@@ -18,24 +17,20 @@ export interface CloseButtonProps extends ButtonProps {
1817
};
1918

2019
export const CloseButton: React.FunctionComponent<CloseButtonProps> = ({
21-
className,
2220
dataTestID,
2321
onClick,
2422
ouiaId="CloseButton",
2523
...props
26-
}: CloseButtonProps) => {
27-
const classes = useStyles();
28-
return (
29-
<Button icon={<CloseIcon />}
30-
aria-label={props['aria-label'] || 'Close'}
31-
className={clsx(classes.closeButton, className)}
32-
data-test-id={dataTestID}
33-
onClick={onClick}
34-
variant={ButtonVariant.plain}
35-
ouiaId={ouiaId}
36-
{...props}
37-
/>
38-
);
39-
};
24+
}: CloseButtonProps) => (
25+
<Button icon={<CloseIcon />}
26+
aria-label={props['aria-label'] || 'Close'}
27+
css={styles.closeButton}
28+
data-test-id={dataTestID}
29+
onClick={onClick}
30+
variant={ButtonVariant.plain}
31+
ouiaId={ouiaId}
32+
{...props}
33+
/>
34+
);
4035

4136
export default CloseButton;

‎packages/module/src/ContentHeader/ContentHeader.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { css } from '@emotion/react';
23
import {
34
Flex,
45
FlexItem,
@@ -12,7 +13,6 @@ import {
1213
Divider,
1314
} from '@patternfly/react-core';
1415
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
15-
import { createUseStyles } from 'react-jss';
1616

1717
/** extends ButtonProps */
1818
export interface PageHeaderLinkProps extends ButtonProps {
@@ -41,11 +41,11 @@ export interface ContentHeaderProps {
4141
ouiaId?: string | number;
4242
}
4343

44-
const useStyles = createUseStyles({
45-
iconMinWidth: {
46-
minWidth: '48px',
47-
}
48-
});
44+
const styles = {
45+
iconMinWidth: css`
46+
min-height: 48px;
47+
`
48+
};
4949

5050
export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<ContentHeaderProps>> = ({
5151
title,
@@ -57,7 +57,6 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
5757
actionMenu,
5858
ouiaId = 'ContentHeader',
5959
}: ContentHeaderProps) => {
60-
const classes = useStyles();
6160
const { isExternal = false, ...linkRestProps } = linkProps ?? {};
6261

6362
return (
@@ -70,7 +69,7 @@ export const ContentHeader: React.FunctionComponent<React.PropsWithChildren<Cont
7069
<Flex>
7170
{icon && (
7271
<>
73-
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={`${classes.iconMinWidth}`}>
72+
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} css={styles.iconMinWidth} >
7473
{icon}
7574
</FlexItem>
7675
<Divider orientation={{

‎packages/module/src/NotFoundIcon/NotFoundIcon.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,4 +218,4 @@ export const NotFoundIcon: React.FunctionComponent = (props) => {
218218
)
219219
};
220220

221-
export default NotFoundIcon;
221+
export default NotFoundIcon;

‎packages/module/src/ServiceCard/ServiceCard.tsx

Lines changed: 40 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1+
import { css } from '@emotion/react';
12
import React from 'react';
23
import { Card, CardBody, CardFooter, CardHeader, CardProps, Content, ContentVariants, Flex, FlexItem } from '@patternfly/react-core';
3-
import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
4-
import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
5-
import { createUseStyles } from 'react-jss';
4+
import { HelperText, HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
65
import clsx from 'clsx';
76

87
/** extends CardProps */
@@ -27,15 +26,15 @@ export interface ServiceCardProps extends CardProps {
2726
isFullHeight?: boolean;
2827
}
2928

30-
const useStyles = createUseStyles({
31-
fullHeightCard: {
32-
height: '100%'
33-
},
34-
image: {
35-
marginRight: 'var(--pf-t--global--spacer--md)',
36-
width: 48
37-
}
38-
});
29+
const styles = {
30+
fullHeightCard: css`
31+
height: 100%;
32+
`,
33+
image: css`
34+
margin-right: var(--pf-t--global--spacer--md);
35+
width: 48px;
36+
`
37+
};
3938

4039
const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
4140
title,
@@ -48,38 +47,34 @@ const ServiceCard: React.FunctionComponent<ServiceCardProps> = ({
4847
isStacked = false,
4948
isFullHeight = false,
5049
...props
51-
}: ServiceCardProps) => {
52-
const classes = useStyles();
53-
54-
return (
55-
<Card className={clsx({ [classes.fullHeightCard]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
56-
<CardHeader>
57-
<Flex direction={{ default: isStacked ? 'column' : 'row' }} alignItems={{ default: isStacked ? 'alignItemsFlexStart' : 'alignItemsCenter' }}>
58-
<FlexItem className={classes.image}>
59-
{icon}
60-
</FlexItem>
61-
<FlexItem>
62-
<Content>
63-
<Content component={ContentVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Content>
64-
{subtitle ?? null}
65-
</Content>
66-
</FlexItem>
67-
</Flex>
68-
</CardHeader>
69-
<CardBody data-ouia-component-id={`${ouiaId}-description`}>{description}</CardBody>
70-
{ footer || helperText ? (
71-
<CardFooter data-ouia-component-id={`${ouiaId}-footer`}>
72-
{ helperText ?
73-
( <HelperText data-ouia-component-id={`${ouiaId}-helper-text`}>
74-
<HelperTextItem className="pf-v6-u-mb-lg">
75-
{helperText}
76-
</HelperTextItem>
77-
</HelperText>) : null
78-
}
79-
{ footer }
80-
</CardFooter>) : null}
81-
</Card>
82-
)
83-
}
50+
}: ServiceCardProps) => (
51+
<Card className={clsx({ [styles.fullHeightCard.toString()]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
52+
<CardHeader>
53+
<Flex direction={{ default: isStacked ? 'column' : 'row' }} alignItems={{ default: isStacked ? 'alignItemsFlexStart' : 'alignItemsCenter' }}>
54+
<FlexItem css={styles.image}>
55+
{icon}
56+
</FlexItem>
57+
<FlexItem>
58+
<Content>
59+
<Content component={ContentVariants.h2} ouiaId={`${ouiaId}-title`}>{title}</Content>
60+
{subtitle ?? null}
61+
</Content>
62+
</FlexItem>
63+
</Flex>
64+
</CardHeader>
65+
<CardBody data-ouia-component-id={`${ouiaId}-description`}>{description}</CardBody>
66+
{ footer || helperText ? (
67+
<CardFooter data-ouia-component-id={`${ouiaId}-footer`}>
68+
{ helperText ?
69+
( <HelperText data-ouia-component-id={`${ouiaId}-helper-text`}>
70+
<HelperTextItem className="pf-v6-u-mb-lg">
71+
{helperText}
72+
</HelperTextItem>
73+
</HelperText>) : null
74+
}
75+
{ footer }
76+
</CardFooter>) : null}
77+
</Card>
78+
);
8479

8580
export default ServiceCard;

‎packages/module/src/ServiceCard/__snapshots__/ServiceCard.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = `
2222
class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
2323
>
2424
<div
25-
class="image-0-2-2"
25+
class="css-1g8hpot"
2626
>
2727
/
2828
</div>
@@ -78,7 +78,7 @@ exports[`ServiceCard component should render ServiceCard component 1`] = `
7878
class="pf-v6-l-flex pf-m-row pf-m-align-items-center"
7979
>
8080
<div
81-
class="image-0-2-2"
81+
class="css-1g8hpot"
8282
>
8383
/
8484
</div>

‎packages/module/src/ShortcutGrid/ShortcutGrid.tsx

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { css } from '@emotion/react';
12
import * as React from 'react';
2-
import { createUseStyles } from 'react-jss';
33
import Shortcut, { ShortcutProps } from '../Shortcut/Shortcut';
44
import { Grid, GridItem, GridItemProps, GridProps } from '@patternfly/react-core';
55

@@ -13,28 +13,25 @@ export interface ShortcutGridProps extends GridProps {
1313
ouiaId?: string | number;
1414
}
1515

16-
const useStyles = createUseStyles({
17-
shortcutGridItem: {
18-
textAlign: 'right',
19-
marginRight: 'var(--pf-t--global--spacer--md)'
20-
}
21-
})
16+
const styles = {
17+
shortcutGridItem: css`
18+
test-align: right;
19+
margin-right: var(--pf-t--global--spacer--md);
20+
`
21+
};
2222

23-
const ShortcutGrid: React.FunctionComponent<ShortcutGridProps> = ({ shortcuts, gridItemProps, ouiaId = 'ShortcutGrid', ...props }: ShortcutGridProps) => {
24-
const classes = useStyles();
25-
return (
26-
<Grid span={6} hasGutter key="grid" data-ouia-component-id={ouiaId} {...props}>
27-
{shortcuts.map((shortcut, index) => {
28-
const { description, ...props } = shortcut;
29-
return(
30-
<React.Fragment key={index}>
31-
<GridItem className={classes.shortcutGridItem} data-ouia-component-id={`${ouiaId}-item-${index}`} {...gridItemProps}>
32-
<Shortcut {...props}/>
33-
</GridItem>
34-
<GridItem data-ouia-component-id={`${ouiaId}-item-description-${index}`}>{description}</GridItem>
35-
</React.Fragment>
36-
)})}
37-
</Grid>)
38-
}
23+
const ShortcutGrid: React.FunctionComponent<ShortcutGridProps> = ({ shortcuts, gridItemProps, ouiaId = 'ShortcutGrid', ...props }: ShortcutGridProps) => (
24+
<Grid span={6} hasGutter key="grid" data-ouia-component-id={ouiaId} {...props}>
25+
{shortcuts.map((shortcut, index) => {
26+
const { description, ...props } = shortcut;
27+
return(
28+
<React.Fragment key={index}>
29+
<GridItem css={styles.shortcutGridItem} data-ouia-component-id={`${ouiaId}-item-${index}`} {...gridItemProps}>
30+
<Shortcut {...props}/>
31+
</GridItem>
32+
<GridItem data-ouia-component-id={`${ouiaId}-item-description-${index}`}>{description}</GridItem>
33+
</React.Fragment>
34+
)})}
35+
</Grid>)
3936

4037
export default ShortcutGrid;

‎packages/module/src/ShortcutGrid/__snapshots__/ShortcutGrid.test.tsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ exports[`ShortcutGrid component should render correctly 1`] = `
1010
data-ouia-component-id="ShortcutGrid"
1111
>
1212
<div
13-
class="pf-v6-l-grid__item shortcutGridItem-0-2-1"
13+
class="pf-v6-l-grid__item css-ezi5p7"
1414
data-ouia-component-id="ShortcutGrid-item-0"
1515
>
1616
<span
@@ -76,7 +76,7 @@ exports[`ShortcutGrid component should render correctly 1`] = `
7676
Open in a new tab
7777
</div>
7878
<div
79-
class="pf-v6-l-grid__item shortcutGridItem-0-2-1"
79+
class="pf-v6-l-grid__item css-ezi5p7"
8080
data-ouia-component-id="ShortcutGrid-item-1"
8181
>
8282
<span
@@ -124,7 +124,7 @@ exports[`ShortcutGrid component should render correctly 1`] = `
124124
Open new page
125125
</div>
126126
<div
127-
class="pf-v6-l-grid__item shortcutGridItem-0-2-1"
127+
class="pf-v6-l-grid__item css-ezi5p7"
128128
data-ouia-component-id="ShortcutGrid-item-2"
129129
>
130130
<span
@@ -193,7 +193,7 @@ exports[`ShortcutGrid component should render correctly 1`] = `
193193
data-ouia-component-id="ShortcutGrid"
194194
>
195195
<div
196-
class="pf-v6-l-grid__item shortcutGridItem-0-2-1"
196+
class="pf-v6-l-grid__item css-ezi5p7"
197197
data-ouia-component-id="ShortcutGrid-item-0"
198198
>
199199
<span
@@ -259,7 +259,7 @@ exports[`ShortcutGrid component should render correctly 1`] = `
259259
Open in a new tab
260260
</div>
261261
<div
262-
class="pf-v6-l-grid__item shortcutGridItem-0-2-1"
262+
class="pf-v6-l-grid__item css-ezi5p7"
263263
data-ouia-component-id="ShortcutGrid-item-1"
264264
>
265265
<span
@@ -307,7 +307,7 @@ exports[`ShortcutGrid component should render correctly 1`] = `
307307
Open new page
308308
</div>
309309
<div
310-
class="pf-v6-l-grid__item shortcutGridItem-0-2-1"
310+
class="pf-v6-l-grid__item css-ezi5p7"
311311
data-ouia-component-id="ShortcutGrid-item-2"
312312
>
313313
<span

0 commit comments

Comments
 (0)