Skip to content

Commit 6d449be

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

File tree

12 files changed

+310
-143
lines changed

12 files changed

+310
-143
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/PageHeader/PageHeader.tsx‎

Lines changed: 8 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 {
@@ -43,11 +43,12 @@ export interface PageHeaderProps extends React.PropsWithChildren {
4343
children?: React.ReactNode;
4444
}
4545

46-
const useStyles = createUseStyles({
47-
iconMinWidth: {
48-
minWidth: '48px',
49-
}
50-
});
46+
const styles = {
47+
iconMinWidth: css`
48+
min-width: 48px;
49+
`
50+
};
51+
5152

5253
export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
5354
title,
@@ -60,7 +61,6 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
6061
ouiaId = 'PageHeader',
6162
children = null
6263
}: PageHeaderProps) => {
63-
const classes = useStyles();
6464
const { isExternal = false, ...linkRestProps } = linkProps ?? {};
6565

6666
return (
@@ -73,7 +73,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
7373
<Flex>
7474
{icon && (
7575
<>
76-
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} className={`${classes.iconMinWidth}`}>
76+
<FlexItem alignSelf={{ default: 'alignSelfCenter' }} css={styles.iconMinWidth}>
7777
{icon}
7878
</FlexItem>
7979
<Divider orientation={{

‎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

‎packages/module/src/Status/Status.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { css } from '@emotion/react';
12
import * as React from 'react';
23
import { Button, ButtonVariant, Flex, FlexItem, Icon, Popover, PopoverPosition, PopoverProps, Content, ContentVariants, } from '@patternfly/react-core';
3-
import { createUseStyles } from 'react-jss';
44

55
export const StatusVariant = {
66
link: 'link',
@@ -43,21 +43,20 @@ export interface StatusProps extends React.PropsWithChildren {
4343
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
4444
}
4545

46-
const useStyles = createUseStyles({
47-
icon: {
48-
margin: "0",
49-
alignSelf: "flex-start",
50-
},
51-
statusLabel: {
52-
lineHeight: 'var(--pf-t--global--font--line-height--body)',
53-
},
54-
statusDescription: {
55-
color: 'var(--pf-t--color--gray--50)',
56-
}
57-
})
46+
const styles = {
47+
icon: css`
48+
margin: 0;
49+
align-self: flex-start;
50+
`,
51+
statusLabel: css`
52+
line-height: var(--pf-t--global--spacer--md);
53+
`,
54+
statusDescription: css`
55+
color: var(--pf-t--color--gray--50);
56+
`
57+
};
5858

5959
export const Status: React.FC<StatusProps> = ({ variant = StatusVariant.plain, label, children, iconOnly, icon, status, iconTitle, ouiaId = 'Status', popoverProps, onClick, description, ...props }: StatusProps) => {
60-
const classes = useStyles();
6160

6261
if (iconOnly && !iconTitle) {
6362
// eslint-disable-next-line no-console
@@ -67,16 +66,17 @@ export const Status: React.FC<StatusProps> = ({ variant = StatusVariant.plain, l
6766
const statusBody = (
6867
<Flex title={label} alignItems={{ default: 'alignItemsCenter' }} {...props}>
6968
{icon && (
70-
<FlexItem className={classes.icon}>
69+
<FlexItem css={styles.icon}>
7170
<Icon className='pf-v6-u-mr-sm' status={status} title={iconTitle ?? status} data-ouia-component-id={`${ouiaId}-icon`}>
7271
{icon}
7372
</Icon>
7473
</FlexItem>
7574
)}
7675
{!iconOnly && (
7776
<FlexItem>
78-
<Content ouiaId={`${ouiaId}-label`} className={classes.statusLabel} style={{ marginBlockEnd: 0 }}>{label}</Content>
79-
{description && <Content component={ContentVariants.small} ouiaId={`${ouiaId}-description`} className={classes.statusDescription}>{description}</Content>}
77+
<Content ouiaId={`${ouiaId}-label`}
78+
css={styles.statusLabel} style={{ marginBlockEnd: 0 }}>{label}</Content>
79+
{description && <Content component={ContentVariants.small} ouiaId={`${ouiaId}-description`} css={styles.statusDescription}>{description}</Content>}
8080
</FlexItem>
8181
)}
8282
</Flex>

0 commit comments

Comments
 (0)