Skip to content

Commit 64f8706

Browse files
keithchongkeithchong
authored
Merge pull request #252 from keithchong/10175-PF6-Styles
Migrate missed PF5 styles (and one PF4 style) to PF6 (#10175)
2 parents 4a79605 + 95826be commit 64f8706

14 files changed

Lines changed: 48 additions & 47 deletions

File tree

‎.eslintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"rules": {
3333
"@typescript-eslint/no-explicit-any": "off",
3434
"react/display-name": "off",
35+
"react/react-in-jsx-scope": "off",
3536
"react/prop-types": "off",
3637
"prettier/prettier": [
3738
"error",

‎src/gitops/Statuses/HealthStatus.test.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,33 @@ import HealthStatus, { HealthStatusIcon } from './HealthStatus';
44
describe('HealthStatus', () => {
55
it('renders Healthy', () => {
66
expect(renderToStaticMarkup(<HealthStatus status="Healthy" />)).toMatchInlineSnapshot(
7-
`"<div><div><svg data-icon="HeartIcon" style="color:var(--pf-v5-global--success-color--100)"></svg> Healthy</div></div>"`,
7+
`"<div><div><svg data-icon="HeartIcon" style="color:var(--pf-t--global--icon--color--status--success--default)"></svg> Healthy</div></div>"`,
88
);
99
});
1010

1111
it('renders Degraded', () => {
1212
expect(renderToStaticMarkup(<HealthStatus status="Degraded" />)).toMatchInlineSnapshot(
13-
`"<div><div><svg data-icon="HeartBrokenIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Degraded</div></div>"`,
13+
`"<div><div><svg data-icon="HeartBrokenIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Degraded</div></div>"`,
1414
);
1515
});
1616

1717
it('renders Progressing', () => {
1818
expect(renderToStaticMarkup(<HealthStatus status="Progressing" />)).toMatchInlineSnapshot(
19-
`"<div><div><svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-v5-global--primary-color--200)"></svg> Progressing</div></div>"`,
19+
`"<div><div><svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-t--global--icon--color--brand--default)"></svg> Progressing</div></div>"`,
2020
);
2121
});
2222

2323
it('renders Unknown for unrecognized status', () => {
2424
expect(renderToStaticMarkup(<HealthStatus status="SomethingElse" />)).toMatchInlineSnapshot(
25-
`"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> SomethingElse</div></div>"`,
25+
`"<div><div><svg data-icon="UnknownIcon" style="color:var(--pf-t--global--icon--color--disabled)"></svg> SomethingElse</div></div>"`,
2626
);
2727
});
2828

2929
it('renders popover when message is provided', () => {
3030
expect(
3131
renderToStaticMarkup(<HealthStatus status="Degraded" message="Something broke" />),
3232
).toMatchInlineSnapshot(
33-
`"<div><div><div data-testid="popover"><div data-testid="popover-header"><div>Degraded</div></div><div data-testid="popover-body"><div>Something broke</div></div><button data-variant="link"><svg data-icon="HeartBrokenIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Degraded</button></div></div></div>"`,
33+
`"<div><div><div data-testid="popover"><div data-testid="popover-header"><div>Degraded</div></div><div data-testid="popover-body"><div>Something broke</div></div><button data-variant="link"><svg data-icon="HeartBrokenIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Degraded</button></div></div></div>"`,
3434
);
3535
});
3636
});

‎src/gitops/Statuses/OperationState.test.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,39 +27,39 @@ describe('OperationState', () => {
2727
expect(
2828
renderToStaticMarkup(<OperationState app={makeApp('Running', 'Sync') as any} />),
2929
).toMatchInlineSnapshot(
30-
`"<svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-v5-global--primary-color--200)"></svg> Syncing"`,
30+
`"<svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-t--global--icon--color--brand--default)"></svg> Syncing"`,
3131
);
3232
});
3333

3434
it('renders Sync failed for Failed phase', () => {
3535
expect(
3636
renderToStaticMarkup(<OperationState app={makeApp('Failed', 'Sync') as any} />),
3737
).toMatchInlineSnapshot(
38-
`"<svg data-icon="ExclamationCircleIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Sync failed"`,
38+
`"<svg data-icon="ExclamationCircleIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Sync failed"`,
3939
);
4040
});
4141

4242
it('renders Sync error for Error phase', () => {
4343
expect(
4444
renderToStaticMarkup(<OperationState app={makeApp('Error', 'Sync') as any} />),
4545
).toMatchInlineSnapshot(
46-
`"<svg data-icon="ExclamationCircleIcon" style="color:var(--pf-v5-global--danger-color--100)"></svg> Sync error"`,
46+
`"<svg data-icon="ExclamationCircleIcon" style="color:var(--pf-t--global--icon--color--status--danger--default)"></svg> Sync error"`,
4747
);
4848
});
4949

5050
it('renders Sync OK for Succeeded phase', () => {
5151
expect(
5252
renderToStaticMarkup(<OperationState app={makeApp('Succeeded', 'Sync') as any} />),
5353
).toMatchInlineSnapshot(
54-
`"<svg data-icon="HeartIcon" style="color:var(--pf-v5-global--success-color--100)"></svg> Sync OK"`,
54+
`"<svg data-icon="HeartIcon" style="color:var(--pf-t--global--icon--color--status--success--default)"></svg> Sync OK"`,
5555
);
5656
});
5757

5858
it('renders Terminated for Terminating phase', () => {
5959
expect(
6060
renderToStaticMarkup(<OperationState app={makeApp('Terminating', 'Sync') as any} />),
6161
).toMatchInlineSnapshot(
62-
`"<svg data-icon="BanIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> Terminated"`,
62+
`"<svg data-icon="BanIcon" style="color:var(--pf-t--global--icon--color--disabled)"></svg> Terminated"`,
6363
);
6464
});
6565

@@ -73,7 +73,7 @@ describe('OperationState', () => {
7373
expect(
7474
renderToStaticMarkup(<OperationState app={makeApp('Running', 'Sync') as any} quiet />),
7575
).toMatchInlineSnapshot(
76-
`"<svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-v5-global--primary-color--200)"></svg> Syncing"`,
76+
`"<svg data-icon="CircleNotchIcon" class="undefined fa-spin" style="color:var(--pf-t--global--icon--color--brand--default)"></svg> Syncing"`,
7777
);
7878
});
7979
});

‎src/gitops/Statuses/SyncStatus.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ describe('SyncStatus', () => {
1010

1111
it('renders OutOfSync', () => {
1212
expect(renderToStaticMarkup(<SyncStatus status="OutOfSync" />)).toMatchInlineSnapshot(
13-
`"<span><svg data-icon="ArrowCircleUpIcon" style="color:var(--pf-v5-global--warning-color--100)"></svg> OutOfSync</span>"`,
13+
`"<span><svg data-icon="ArrowCircleUpIcon" style="color:var(--pf-t--global--icon--color--status--warning--default)"></svg> OutOfSync</span>"`,
1414
);
1515
});
1616

1717
it('renders Unknown', () => {
1818
expect(renderToStaticMarkup(<SyncStatus status="Unknown" />)).toMatchInlineSnapshot(
19-
`"<span><svg data-icon="UnknownIcon" style="color:var(--pf-v5-global--disabled-color--100)"></svg> Unknown</span>"`,
19+
`"<span><svg data-icon="UnknownIcon" style="color:var(--pf-t--global--icon--color--disabled)"></svg> Unknown</span>"`,
2020
);
2121
});
2222

‎src/gitops/components/application/graph/ApplicationGraphView.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,10 @@
8181

8282
.step-edge {
8383
&.step-edge-healthy {
84-
stroke: var(--pf-v5-global--success-color--100);
84+
stroke: var(--pf-t--global--icon--color--status--success--default);
8585
}
8686
&.step-edge-warning {
87-
stroke: var(--pf-v5-global--warning-color--100);
87+
stroke: var(--pf-t--global--icon--color--status--warning--default);
8888
}
8989
&.step-edge-progressing {
9090
stroke: lightblue;
@@ -93,12 +93,12 @@
9393

9494
.step-edge-terminal.pf-topology-connector-arrow {
9595
&.step-edge-terminal-healthy {
96-
stroke: var(--pf-v5-global--success-color--100);
97-
fill: var(--pf-v5-global--success-color--100);
96+
stroke: var(--pf-t--global--icon--color--status--success--default);
97+
fill: var(--pf-t--global--icon--color--status--success--default);
9898
}
9999
&.step-edge-terminal-warning {
100-
stroke: var(--pf-v5-global--warning-color--100);
101-
fill: var(--pf-v5-global--warning-color--100);
100+
stroke: var(--pf-t--global--icon--color--status--warning--default);
101+
fill: var(--pf-t--global--icon--color--status--warning--default);
102102
}
103103
&.step-edge-terminal-progressing {
104104
stroke: lightblue;

‎src/gitops/components/appset/generators/ClusterGenerator.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const ClusterGenerator: React.FC<ClusterGeneratorProps> = ({ generator }) => {
2929
whiteSpace: 'pre-wrap',
3030
wordBreak: 'break-word',
3131
padding: '8px',
32-
backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
33-
border: '1px solid var(--pf-v5-global--BorderColor--200)',
32+
backgroundColor: 'var(--pf-t--global--background--color--secondary--default)',
33+
border: '1px solid var(--pf-t--global--border--color--default)',
3434
borderRadius: '4px',
3535
}}
3636
>

‎src/gitops/components/appset/generators/GenericGenerator.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const GenericGenerator: React.FC<GenericGeneratorProps> = ({ gentype, generator
2929
whiteSpace: 'pre-wrap',
3030
wordBreak: 'break-word',
3131
padding: '8px',
32-
backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
33-
border: '1px solid var(--pf-v5-global--BorderColor--200)',
32+
backgroundColor: 'var(--pf-t--global--background--color--secondary--default)',
33+
border: '1px solid var(--pf-t--global--border--color--default)',
3434
borderRadius: '4px',
3535
}}
3636
>

‎src/gitops/components/project/ProjectAllowDenyTab.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -106,18 +106,18 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
106106
<ArgoCDLink href={argoCDUrl} />
107107
</div>
108108
)}
109-
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
109+
<Panel className="pf-v6-u-background-color-200 pf-v6-u-p-md">
110110
<Grid hasGutter>
111111
<GridItem span={12} md={6}>
112-
<Card className="pf-v5-u-h-100">
112+
<Card className="pf-v6-u-h-100">
113113
<CardHeader>
114114
<Title headingLevel="h5">{t('Repositories')}</Title>
115115
</CardHeader>
116116
<CardBody>{renderStringArray(spec.sourceRepos, t)}</CardBody>
117117
</Card>
118118
</GridItem>
119119
<GridItem span={12} md={6}>
120-
<Card className="pf-v5-u-h-100">
120+
<Card className="pf-v6-u-h-100">
121121
<CardHeader>
122122
<Title headingLevel="h5">{t('Namespaces')}</Title>
123123
</CardHeader>
@@ -137,10 +137,10 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
137137
title={t('Allowed Destinations')}
138138
helpText={t('Allowed Destinations help')}
139139
/>
140-
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
140+
<Panel className="pf-v6-u-background-color-200 pf-v6-u-p-md">
141141
<Grid hasGutter>
142142
<GridItem>
143-
<Card className="pf-v5-u-h-100">
143+
<Card className="pf-v6-u-h-100">
144144
<CardBody>
145145
<DestinationsList destinations={spec.destinations} />
146146
</CardBody>
@@ -159,10 +159,10 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
159159
title={t('Resource Allow/Deny Lists')}
160160
helpText={t('Resource Allow/Deny Lists help')}
161161
/>
162-
<Panel className="pf-v5-u-background-color-200 pf-v5-u-p-md">
162+
<Panel className="pf-v6-u-background-color-200 pf-v6-u-p-md">
163163
<Grid hasGutter>
164164
<GridItem span={12} md={6} lg={3}>
165-
<Card className="pf-v5-u-h-100">
165+
<Card className="pf-v6-u-h-100">
166166
<CardHeader>
167167
<Title headingLevel="h5">{t('Cluster Resource Allow List')}</Title>
168168
</CardHeader>
@@ -172,7 +172,7 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
172172
</Card>
173173
</GridItem>
174174
<GridItem span={12} md={6} lg={3}>
175-
<Card className="pf-v5-u-h-100">
175+
<Card className="pf-v6-u-h-100">
176176
<CardHeader>
177177
<Title headingLevel="h5">{t('Cluster Resource Deny List')}</Title>
178178
</CardHeader>
@@ -182,7 +182,7 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
182182
</Card>
183183
</GridItem>
184184
<GridItem span={12} md={6} lg={3}>
185-
<Card className="pf-v5-u-h-100">
185+
<Card className="pf-v6-u-h-100">
186186
<CardHeader>
187187
<Title headingLevel="h5">{t('Namespace Resource Allow List')}</Title>
188188
</CardHeader>
@@ -192,7 +192,7 @@ const ProjectAllowDenyTab: React.FC<ProjectAllowDenyTabProps> = ({ obj }) => {
192192
</Card>
193193
</GridItem>
194194
<GridItem span={12} md={6} lg={3}>
195-
<Card className="pf-v5-u-h-100">
195+
<Card className="pf-v6-u-h-100">
196196
<CardHeader>
197197
<Title headingLevel="h5">{t('Namespace Resource Deny List')}</Title>
198198
</CardHeader>

‎src/gitops/components/project/ProjectRolesTab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@ const formatPolicyDescription = (policy: string, t: (key: string) => string): Re
5656
<>
5757
<i
5858
className="fas fa-check-circle"
59-
style={{ color: 'var(--pf-v5-global--success-color--100)' }}
59+
style={{ color: 'var(--pf-t--global--icon--color--status--success--default)' }}
6060
/>{' '}
6161
{t('Allow')}
6262
</>
6363
) : (
6464
<>
6565
<i
6666
className="fas fa-times-circle"
67-
style={{ color: 'var(--pf-v5-global--danger-color--100)' }}
67+
style={{ color: 'var(--pf-t--global--icon--color--status--danger--default)' }}
6868
/>{' '}
6969
{t('Deny')}
7070
</>

‎src/gitops/components/rollout/strategy/CanaryServices.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const getAnalysisTemplates = (steps, namespace: string, t: TFunction) => {
3939
}}
4040
/>
4141
<Link
42-
className="pf-v5-c-content co-resource-item__resource-name"
42+
className="pf-v6-c-content co-resource-item__resource-name"
4343
rel="noopener noreferrer"
4444
to={
4545
template.clusterScope

0 commit comments

Comments
 (0)