Skip to content

Commit 829fa65

Browse files
shivamG640shivamG640
committed
feat(ui): migrate @patternfly/react-icons to @carbon/icons-react
1 parent ec2df0c commit 829fa65

123 files changed

Lines changed: 1372 additions & 849 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/ui-tests/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"@eslint/js": "^9.10.0",
2828
"@patternfly/patternfly": "^6.6.1",
2929
"@patternfly/react-core": "6.6.1",
30-
"@patternfly/react-icons": "^6.6.1",
3130
"@storybook/addon-docs": "^10.6.1",
3231
"@storybook/addon-links": "^10.6.1",
3332
"@storybook/react": "^10.6.1",

‎packages/ui/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"lint:style:fix": "yarn lint:style --fix"
6363
},
6464
"dependencies": {
65-
"@carbon/icons-react": "^11.67.0",
65+
"@carbon/icons-react": "^11.89.0",
6666
"@carbon/react": "^1.117.0",
6767
"@dnd-kit/core": "^6.1.0",
6868
"@dnd-kit/modifiers": "^9.0.0",
@@ -74,7 +74,6 @@
7474
"@patternfly/react-code-editor": "6.6.1",
7575
"@patternfly/react-core": "6.6.1",
7676
"@patternfly/react-drag-drop": "^6.6.2",
77-
"@patternfly/react-icons": "^6.6.1",
7877
"@patternfly/react-table": "6.6.1",
7978
"@patternfly/react-topology": "^6.6.0",
8079
"@visx/shape": "^4.0.0",

‎packages/ui/src/components/Catalog/CatalogFilter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import './CatalogFilter.scss';
22

3+
import { Misuse } from '@carbon/icons-react';
34
import {
45
Badge,
56
capitalize,
@@ -11,7 +12,6 @@ import {
1112
ToggleGroup,
1213
ToggleGroupItem,
1314
} from '@patternfly/react-core';
14-
import { TimesCircleIcon } from '@patternfly/react-icons';
1515
import { FunctionComponent, useEffect, useRef } from 'react';
1616

1717
import { CatalogLayout } from './Catalog.models';
@@ -144,7 +144,7 @@ export const CatalogFilter: FunctionComponent<CatalogFilterProps> = (props) => {
144144
color="grey"
145145
variant="filled"
146146
onClick={handleClearFilterTags}
147-
icon={<TimesCircleIcon />}
147+
icon={<Misuse />}
148148
>
149149
<b>Clear</b>
150150
</Label>

‎packages/ui/src/components/Catalog/CatalogLayoutIcon.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import { BarsIcon, GripHorizontalIcon, UnknownIcon } from '@patternfly/react-icons';
1+
import { Grid, Menu, Unknown } from '@carbon/icons-react';
22
import * as React from 'react';
33

44
import { CatalogLayout } from './Catalog.models';
55

66
const getCatalogLayoutIcon = (layout: CatalogLayout): React.ReactNode => {
77
switch (layout) {
88
case CatalogLayout.Gallery:
9-
return <GripHorizontalIcon />;
9+
return <Grid />;
1010
case CatalogLayout.List:
11-
return <BarsIcon />;
11+
return <Menu />;
1212
default:
13-
return <UnknownIcon />;
13+
return <Unknown />;
1414
}
1515
};
1616

‎packages/ui/src/components/Catalog/ProviderFilter/ProviderFilter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import './ProviderFilter.scss';
22

3+
import { Filter } from '@carbon/icons-react';
34
import { Badge, Menu, MenuContent, MenuItem, MenuList, MenuToggle, Popper } from '@patternfly/react-core';
4-
import { FilterIcon } from '@patternfly/react-icons';
55
import { FunctionComponent, useCallback, useRef, useState } from 'react';
66

77
interface ProviderFilterProps {
@@ -40,7 +40,7 @@ export const ProviderFilter: FunctionComponent<ProviderFilterProps> = ({
4040
setIsOpen(!isOpen);
4141
}}
4242
isExpanded={isOpen}
43-
icon={<FilterIcon />}
43+
icon={<Filter />}
4444
{...(selectedProviders.length > 0 && { badge: <Badge isRead>{selectedProviders.length}</Badge> })}
4545
>
4646
Provided by

‎packages/ui/src/components/Catalog/__snapshots__/CatalogLayoutIcon.test.tsx.snap‎

Lines changed: 59 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,82 @@
33
exports[`CatalogLayoutIcon > renders gallery icon correctly 1`] = `
44
<div>
55
<svg
6-
data-testid="grip-horizontal-icon"
7-
role="img"
6+
aria-hidden="true"
7+
fill="currentColor"
8+
focusable="false"
9+
height="16"
10+
preserveAspectRatio="xMidYMid meet"
11+
viewBox="0 0 32 32"
12+
width="16"
13+
xmlns="http://www.w3.org/2000/svg"
814
>
9-
<path />
15+
<path
16+
d="M12,4H6A2,2,0,0,0,4,6v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V6A2,2,0,0,0,12,4Zm0,8H6V6h6Z"
17+
/>
18+
<path
19+
d="M26,4H20a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4Zm0,8H20V6h6Z"
20+
/>
21+
<path
22+
d="M12,18H6a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V20A2,2,0,0,0,12,18Zm0,8H6V20h6Z"
23+
/>
24+
<path
25+
d="M26,18H20a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V20A2,2,0,0,0,26,18Zm0,8H20V20h6Z"
26+
/>
1027
</svg>
1128
</div>
1229
`;
1330

1431
exports[`CatalogLayoutIcon > renders list icon correctly 1`] = `
1532
<div>
1633
<svg
17-
data-testid="bars-icon"
18-
role="img"
34+
aria-hidden="true"
35+
fill="currentColor"
36+
focusable="false"
37+
height="16"
38+
preserveAspectRatio="xMidYMid meet"
39+
viewBox="0 0 16 16"
40+
width="16"
41+
xmlns="http://www.w3.org/2000/svg"
1942
>
20-
<path />
43+
<path
44+
d="M2 12H14V13H2z"
45+
/>
46+
<path
47+
d="M2 9H14V10H2z"
48+
/>
49+
<path
50+
d="M2 6H14V7H2z"
51+
/>
52+
<path
53+
d="M2 3H14V4H2z"
54+
/>
2155
</svg>
2256
</div>
2357
`;
2458

2559
exports[`CatalogLayoutIcon > renders unknown icon correctly 1`] = `
2660
<div>
2761
<svg
28-
data-testid="unknown-icon"
29-
role="img"
62+
aria-hidden="true"
63+
fill="currentColor"
64+
focusable="false"
65+
height="16"
66+
preserveAspectRatio="xMidYMid meet"
67+
viewBox="0 0 32 32"
68+
width="16"
69+
xmlns="http://www.w3.org/2000/svg"
3070
>
31-
<path />
71+
<circle
72+
cx="16"
73+
cy="22.5"
74+
r="1.5"
75+
/>
76+
<path
77+
d="M17,19h-2v-4h2c1.103,0,2-0.897,2-2s-0.897-2-2-2h-2c-1.103,0-2,0.897-2,2v0.5h-2V13c0-2.206,1.794-4,4-4h2 c2.206,0,4,1.794,4,4s-1.794,4-4,4V19z"
78+
/>
79+
<path
80+
d="M29.391,14.527L17.473,2.609C17.067,2.203,16.533,2,16,2c-0.533,0-1.067,0.203-1.473,0.609L2.609,14.527 C2.203,14.933,2,15.466,2,16s0.203,1.067,0.609,1.473l11.917,11.917C14.933,29.797,15.467,30,16,30c0.533,0,1.067-0.203,1.473-0.609 l11.917-11.917C29.797,17.067,30,16.534,30,16S29.797,14.933,29.391,14.527z M16,28.036L3.965,16L16,3.964L28.036,16L16,28.036z"
81+
/>
3282
</svg>
3383
</div>
3484
`;

‎packages/ui/src/components/DataMapper/DataMapperLauncher.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
*/
1616
import './DataMapperLauncher.scss';
1717

18+
import { Help, Settings } from '@carbon/icons-react';
1819
import { ProcessorDefinition } from '@kaoto/camel-catalog/types';
1920
import { isDefined } from '@kaoto/forms';
2021
import { Alert, Button, Checkbox, FormGroup, HelperText, HelperTextItem, Popover } from '@patternfly/react-core';
21-
import { HelpIcon, WrenchIcon } from '@patternfly/react-icons';
2222
import { type FormEvent, FunctionComponent, useCallback, useContext, useEffect, useMemo, useState } from 'react';
2323
import { useNavigate } from 'react-router';
2424

@@ -221,7 +221,7 @@ export const DataMapperLauncher: FunctionComponent<{ vizNode?: IVisualizationNod
221221
triggerAction="hover"
222222
withFocusTrap={false}
223223
>
224-
<Button variant="plain" aria-label="More info" icon={<HelpIcon />} />
224+
<Button variant="plain" aria-label="More info" icon={<Help />} />
225225
</Popover>
226226
}
227227
>
@@ -261,7 +261,7 @@ export const DataMapperLauncher: FunctionComponent<{ vizNode?: IVisualizationNod
261261
title="Click to launch the Kaoto DataMapper editor"
262262
aria-label="Launch the Kaoto DataMapper editor"
263263
onClick={onClick}
264-
icon={<WrenchIcon />}
264+
icon={<Settings />}
265265
isDisabled={isSavingFile || isEditingFilename}
266266
>
267267
Configure

‎packages/ui/src/components/DataMapper/XsltDocumentRenameInput.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import './XsltDocumentRenameInput.scss';
22

3+
import { Checkmark, Close, Edit, WarningFilled } from '@carbon/icons-react';
34
import {
45
Button,
56
Form,
@@ -10,7 +11,6 @@ import {
1011
InputGroupItem,
1112
TextInput,
1213
} from '@patternfly/react-core';
13-
import { CheckIcon, ExclamationCircleIcon, PencilAltIcon, TimesIcon } from '@patternfly/react-icons';
1414
import { FunctionComponent, KeyboardEventHandler, MouseEventHandler, useCallback, useEffect, useState } from 'react';
1515

1616
import { IDataTestID, ValidationResult, ValidationStatus } from '../../models';
@@ -215,15 +215,15 @@ export const XsltDocumentRenameInput: FunctionComponent<IXsltDocumentRenameInput
215215
<InputGroupItem>
216216
<div className="xslt-document-rename-action-buttons">
217217
<Button
218-
icon={<CheckIcon />}
218+
icon={<Checkmark />}
219219
variant="plain"
220220
aria-label="Save value"
221221
onClick={onSave}
222222
data-testid={props['data-testid'] + '--save'}
223223
isDisabled={isInvalid || isSaving || isValidating}
224224
/>
225225
<Button
226-
icon={<TimesIcon />}
226+
icon={<Close />}
227227
variant="plain"
228228
aria-label="Cancel editing"
229229
data-testid={props['data-testid'] + '--cancel'}
@@ -235,7 +235,7 @@ export const XsltDocumentRenameInput: FunctionComponent<IXsltDocumentRenameInput
235235
</InputGroup>
236236
{isInvalid && validationResult.errMessages.length > 0 && (
237237
<HelperText>
238-
<HelperTextItem variant="error" icon={<ExclamationCircleIcon />}>
238+
<HelperTextItem variant="error" icon={<WarningFilled />}>
239239
{validationResult.errMessages[0]}
240240
</HelperTextItem>
241241
</HelperText>
@@ -252,7 +252,7 @@ export const XsltDocumentRenameInput: FunctionComponent<IXsltDocumentRenameInput
252252
variant="plain"
253253
data-testid={props['data-testid'] + '--edit'}
254254
onClick={onEdit}
255-
icon={<PencilAltIcon />}
255+
icon={<Edit />}
256256
/>
257257
</div>
258258
)}

‎packages/ui/src/components/DataMapper/debug/ExportMappingFileDropdownItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { Export } from '@carbon/icons-react';
12
import { DropdownItem } from '@patternfly/react-core';
2-
import { ExportIcon } from '@patternfly/react-icons';
33
import { FunctionComponent } from 'react';
44

55
interface ExportMappingFileDropdownItemProps {
@@ -8,7 +8,7 @@ interface ExportMappingFileDropdownItemProps {
88

99
export const ExportMappingFileDropdownItem: FunctionComponent<ExportMappingFileDropdownItemProps> = ({ onClick }) => {
1010
return (
11-
<DropdownItem icon={<ExportIcon />} onClick={onClick} data-testid="dm-debug-export-mappings-button">
11+
<DropdownItem icon={<Export />} onClick={onClick} data-testid="dm-debug-export-mappings-button">
1212
Export current mappings (.xsl)
1313
</DropdownItem>
1414
);

‎packages/ui/src/components/DataMapper/debug/ImportMappingFileDropdownItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { DocumentImport } from '@carbon/icons-react';
12
import { DropdownItem } from '@patternfly/react-core';
2-
import { ImportIcon } from '@patternfly/react-icons';
33
import { ChangeEvent, createRef, FunctionComponent, useCallback } from 'react';
44

55
import { useDataMapper } from '../../../hooks/useDataMapper';
@@ -57,7 +57,7 @@ export const ImportMappingFileDropdownItem: FunctionComponent<ImportMappingFileD
5757

5858
return (
5959
<>
60-
<DropdownItem icon={<ImportIcon />} onClick={onClick} data-testid="dm-debug-import-mappings-button">
60+
<DropdownItem icon={<DocumentImport />} onClick={onClick} data-testid="dm-debug-import-mappings-button">
6161
Import mappings (.xsl)
6262
</DropdownItem>
6363
<input

0 commit comments

Comments
 (0)