Skip to content

Commit 8cb5762

Browse files
shivamG640shivamG640
committed
feat(ui): migrate PatternFly icons to Carbon icons
Migrate icon usages across Catalog, Canvas, Visualization toolbar, context menus, and common UI components from PatternFly icons to @carbon/icons-react add styling overrides for Carbon icon alignment.
1 parent 978c5c7 commit 8cb5762

83 files changed

Lines changed: 1144 additions & 563 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/package.json‎

Lines changed: 1 addition & 1 deletion
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",

‎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/Document/__snapshots__/FieldIcon.test.tsx.snap‎

Lines changed: 77 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ exports[`FieldIcon > date and time types > should render EventSchedule icon for
5151
d="M21,30a8,8,0,1,1,8-8A8,8,0,0,1,21,30Zm0-14a6,6,0,1,0,6,6A6,6,0,0,0,21,16Z"
5252
/>
5353
<path
54-
d="M22.59 25L20 22.41 20 18 22 18 22 21.59 24 23.59 22.59 25z"
54+
d="M22.59 25 20 22.41 20 18 22 18 22 21.59 24 23.59 22.59 25z"
5555
/>
5656
<path
5757
d="M28,6a2,2,0,0,0-2-2H22V2H20V4H12V2H10V4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2h4V26H6V6h4V8h2V6h8V8h2V6h4v6h2Z"
@@ -82,7 +82,10 @@ exports[`FieldIcon > date and time types > should render Hourglass icon for dayT
8282
xmlns="http://www.w3.org/2000/svg"
8383
>
8484
<path
85-
d="M15 19H17V21H15zM15 23H17V25H15z"
85+
d="M15 19H17V21H15z"
86+
/>
87+
<path
88+
d="M15 23H17V25H15z"
8689
/>
8790
<path
8891
d="M23,11.67V4h3V2H6V4H9v7.67a2,2,0,0,0,.4,1.2L11.75,16,9.4,19.13a2,2,0,0,0-.4,1.2V28H6v2H26V28H23V20.33a2,2,0,0,0-.4-1.2L20.25,16l2.35-3.13A2,2,0,0,0,23,11.67ZM21,4v7H11V4Zm0,16.33V28H11V20.33L14.25,16,12,13h8l-2.25,3Z"
@@ -113,7 +116,10 @@ exports[`FieldIcon > date and time types > should render Hourglass icon for dura
113116
xmlns="http://www.w3.org/2000/svg"
114117
>
115118
<path
116-
d="M15 19H17V21H15zM15 23H17V25H15z"
119+
d="M15 19H17V21H15z"
120+
/>
121+
<path
122+
d="M15 23H17V25H15z"
117123
/>
118124
<path
119125
d="M23,11.67V4h3V2H6V4H9v7.67a2,2,0,0,0,.4,1.2L11.75,16,9.4,19.13a2,2,0,0,0-.4,1.2V28H6v2H26V28H23V20.33a2,2,0,0,0-.4-1.2L20.25,16l2.35-3.13A2,2,0,0,0,23,11.67ZM21,4v7H11V4Zm0,16.33V28H11V20.33L14.25,16,12,13h8l-2.25,3Z"
@@ -147,7 +153,7 @@ exports[`FieldIcon > date and time types > should render Time icon for Time type
147153
d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"
148154
/>
149155
<path
150-
d="M20.59 22L15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22z"
156+
d="M20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22z"
151157
/>
152158
</svg>
153159
</span>
@@ -178,10 +184,16 @@ exports[`FieldIcon > numeric types > should render CharacterDecimal icon for dec
178184
d="M21 15H23V17H21z"
179185
/>
180186
<path
181-
d="M24 23H20a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0124 23zM20 11h0V21h4V11zM11 15H13V17H11z"
187+
d="M24,23H20a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,24,23ZM20,11h0V21h4V11Z"
188+
/>
189+
<path
190+
d="M11 15H13V17H11z"
191+
/>
192+
<path
193+
d="M14,23H10a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,14,23ZM10,11h0V21h4V11Z"
182194
/>
183195
<path
184-
d="M14 23H10a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0114 23zM10 11h0V21h4V11zM4 21H6V23H4z"
196+
d="M4 21H6V23H4z"
185197
/>
186198
</svg>
187199
</span>
@@ -212,10 +224,16 @@ exports[`FieldIcon > numeric types > should render CharacterDecimal icon for dou
212224
d="M21 15H23V17H21z"
213225
/>
214226
<path
215-
d="M24 23H20a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0124 23zM20 11h0V21h4V11zM11 15H13V17H11z"
227+
d="M24,23H20a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,24,23ZM20,11h0V21h4V11Z"
228+
/>
229+
<path
230+
d="M11 15H13V17H11z"
216231
/>
217232
<path
218-
d="M14 23H10a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0114 23zM10 11h0V21h4V11zM4 21H6V23H4z"
233+
d="M14,23H10a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,14,23ZM10,11h0V21h4V11Z"
234+
/>
235+
<path
236+
d="M4 21H6V23H4z"
219237
/>
220238
</svg>
221239
</span>
@@ -246,10 +264,16 @@ exports[`FieldIcon > numeric types > should render CharacterDecimal icon for flo
246264
d="M21 15H23V17H21z"
247265
/>
248266
<path
249-
d="M24 23H20a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0124 23zM20 11h0V21h4V11zM11 15H13V17H11z"
267+
d="M24,23H20a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,24,23ZM20,11h0V21h4V11Z"
268+
/>
269+
<path
270+
d="M11 15H13V17H11z"
271+
/>
272+
<path
273+
d="M14,23H10a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,14,23ZM10,11h0V21h4V11Z"
250274
/>
251275
<path
252-
d="M14 23H10a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0114 23zM10 11h0V21h4V11zM4 21H6V23H4z"
276+
d="M4 21H6V23H4z"
253277
/>
254278
</svg>
255279
</span>
@@ -280,10 +304,16 @@ exports[`FieldIcon > numeric types > should render CharacterDecimal icon for num
280304
d="M21 15H23V17H21z"
281305
/>
282306
<path
283-
d="M24 23H20a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0124 23zM20 11h0V21h4V11zM11 15H13V17H11z"
307+
d="M24,23H20a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,24,23ZM20,11h0V21h4V11Z"
308+
/>
309+
<path
310+
d="M11 15H13V17H11z"
311+
/>
312+
<path
313+
d="M14,23H10a2.0023,2.0023,0,0,1-2-2V11a2.002,2.002,0,0,1,2-2h4a2.0023,2.0023,0,0,1,2,2V21A2.0027,2.0027,0,0,1,14,23ZM10,11h0V21h4V11Z"
284314
/>
285315
<path
286-
d="M14 23H10a2.0023 2.0023 0 01-2-2V11a2.002 2.002 0 012-2h4a2.0023 2.0023 0 012 2V21A2.0027 2.0027 0 0114 23zM10 11h0V21h4V11zM4 21H6V23H4z"
316+
d="M4 21H6V23H4z"
287317
/>
288318
</svg>
289319
</span>
@@ -311,7 +341,13 @@ exports[`FieldIcon > numeric types > should render StringInteger icon for intege
311341
xmlns="http://www.w3.org/2000/svg"
312342
>
313343
<path
314-
d="M26 12H22v2h4v2H23v2h3v2H22v2h4a2.0027 2.0027 0 002-2V14A2.0023 2.0023 0 0026 12zM19 22H13V18a2.002 2.002 0 012-2h2V14H13V12h4a2.0023 2.0023 0 012 2v2a2.0023 2.0023 0 01-2 2H15v2h4zM8 20L8 12 6 12 6 13 4 13 4 15 6 15 6 20 4 20 4 22 10 22 10 20 8 20z"
344+
d="M26,12H22v2h4v2H23v2h3v2H22v2h4a2.0027,2.0027,0,0,0,2-2V14A2.0023,2.0023,0,0,0,26,12Z"
345+
/>
346+
<path
347+
d="M19,22H13V18a2.002,2.002,0,0,1,2-2h2V14H13V12h4a2.0023,2.0023,0,0,1,2,2v2a2.0023,2.0023,0,0,1-2,2H15v2h4Z"
348+
/>
349+
<path
350+
d="M8 20 8 12 6 12 6 13 4 13 4 15 6 15 6 20 4 20 4 22 10 22 10 20 8 20z"
315351
/>
316352
</svg>
317353
</span>
@@ -339,7 +375,13 @@ exports[`FieldIcon > numeric types > should render StringInteger icon for positi
339375
xmlns="http://www.w3.org/2000/svg"
340376
>
341377
<path
342-
d="M26 12H22v2h4v2H23v2h3v2H22v2h4a2.0027 2.0027 0 002-2V14A2.0023 2.0023 0 0026 12zM19 22H13V18a2.002 2.002 0 012-2h2V14H13V12h4a2.0023 2.0023 0 012 2v2a2.0023 2.0023 0 01-2 2H15v2h4zM8 20L8 12 6 12 6 13 4 13 4 15 6 15 6 20 4 20 4 22 10 22 10 20 8 20z"
378+
d="M26,12H22v2h4v2H23v2h3v2H22v2h4a2.0027,2.0027,0,0,0,2-2V14A2.0023,2.0023,0,0,0,26,12Z"
379+
/>
380+
<path
381+
d="M19,22H13V18a2.002,2.002,0,0,1,2-2h2V14H13V12h4a2.0023,2.0023,0,0,1,2,2v2a2.0023,2.0023,0,0,1-2,2H15v2h4Z"
382+
/>
383+
<path
384+
d="M8 20 8 12 6 12 6 13 4 13 4 15 6 15 6 20 4 20 4 22 10 22 10 20 8 20z"
343385
/>
344386
</svg>
345387
</span>
@@ -431,7 +473,10 @@ exports[`FieldIcon > other types > should render Document icon for DocumentNode
431473
d="M25.7,9.3l-7-7C18.5,2.1,18.3,2,18,2H8C6.9,2,6,2.9,6,4v24c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V10C26,9.7,25.9,9.5,25.7,9.3 z M18,4.4l5.6,5.6H18V4.4z M24,28H8V4h8v6c0,1.1,0.9,2,2,2h6V28z"
432474
/>
433475
<path
434-
d="M10 22H22V24H10zM10 16H22V18H10z"
476+
d="M10 22H22V24H10z"
477+
/>
478+
<path
479+
d="M10 16H22V18H10z"
435480
/>
436481
</svg>
437482
</span>
@@ -531,7 +576,16 @@ exports[`FieldIcon > other types > should render Http icon for AnyURI type 1`] =
531576
xmlns="http://www.w3.org/2000/svg"
532577
>
533578
<path
534-
d="M30 11H25V21h2V18h3a2.0027 2.0027 0 002-2V13A2.0023 2.0023 0 0030 11zm-3 5V13h3l.001 3zM10 13L12 13 12 21 14 21 14 13 16 13 16 11 10 11 10 13zM23 11L17 11 17 13 19 13 19 21 21 21 21 13 23 13 23 11zM6 11L6 15 3 15 3 11 1 11 1 21 3 21 3 17 6 17 6 21 8 21 8 11 6 11z"
579+
d="M30,11H25V21h2V18h3a2.0027,2.0027,0,0,0,2-2V13A2.0023,2.0023,0,0,0,30,11Zm-3,5V13h3l.001,3Z"
580+
/>
581+
<path
582+
d="M10 13 12 13 12 21 14 21 14 13 16 13 16 11 10 11 10 13z"
583+
/>
584+
<path
585+
d="M23 11 17 11 17 13 19 13 19 21 21 21 21 13 23 13 23 11z"
586+
/>
587+
<path
588+
d="M6 11 6 15 3 15 3 11 1 11 1 21 3 21 3 17 6 17 6 21 8 21 8 11 6 11z"
535589
/>
536590
</svg>
537591
</span>
@@ -664,7 +718,13 @@ exports[`FieldIcon > should render an icon for known types 1`] = `
664718
xmlns="http://www.w3.org/2000/svg"
665719
>
666720
<path
667-
d="M29 22H24a2.0027 2.0027 0 01-2-2V14a2.0023 2.0023 0 012-2h5v2H24v6h5zM18 12H14V8H12V22h6a2.0027 2.0027 0 002-2V14A2.0023 2.0023 0 0018 12zm-4 8V14h4v6zM8 12H3v2H8v2H4a2 2 0 00-2 2v2a2 2 0 002 2h6V14A2.0023 2.0023 0 008 12zm0 8H4V18H8z"
721+
d="M29,22H24a2.0027,2.0027,0,0,1-2-2V14a2.0023,2.0023,0,0,1,2-2h5v2H24v6h5Z"
722+
/>
723+
<path
724+
d="M18,12H14V8H12V22h6a2.0027,2.0027,0,0,0,2-2V14A2.0023,2.0023,0,0,0,18,12Zm-4,8V14h4v6Z"
725+
/>
726+
<path
727+
d="M8,12H3v2H8v2H4a2,2,0,0,0-2,2v2a2,2,0,0,0,2,2h6V14A2.0023,2.0023,0,0,0,8,12Zm0,8H4V18H8Z"
668728
/>
669729
</svg>
670730
</span>

‎packages/ui/src/components/Icons/HorizontalLayout.tsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎packages/ui/src/components/Icons/VerticalLayout.tsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)