Skip to content

Commit 3c90502

Browse files
ammont82ammont82
authored
MGMT-17013: Solving problems with icon's color that are incorrect in Review&Create page (#2508)
* Solving problems with icons color * Create our own Icon component * Using color property inside icon prop in UiIcon
1 parent 7c9bea1 commit 3c90502

22 files changed

+105
-168
lines changed

‎libs/ui-lib-tests/cypress/views/storagePage.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ export const storagePage = {
5252
//If a disk is skip formatting validate that warning icon is shown
5353
cy.get(`[data-testid="disk-row-${diskId}"] [data-testid="disk-name"]`).within(
5454
(/* $diskRow */) => {
55-
cy.get('[role="img"]').should('have.attr', 'color', '#f0ab00');
55+
cy.get('[role="img"]')
56+
.parent()
57+
.should('have.attr', 'class', 'pf-v5-c-icon__content pf-m-warning');
5658
},
5759
);
5860
},

‎libs/ui-lib/lib/cim/components/Agent/MinimalHWRequirements.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import * as React from 'react';
2-
import { Button, ButtonVariant, Icon, Modal, ModalVariant } from '@patternfly/react-core';
2+
import { Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
33
import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
44

55
import { ConfigMapK8sResource } from '../../types';
66
import HostRequirements, {
77
HostRequirementsListProps,
88
} from '../../../common/components/hosts/HostRequirements';
99
import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
10+
import { UiIcon } from '../../../common';
1011

1112
type HostData = {
1213
cpu_cores: number;
@@ -77,9 +78,7 @@ const MinimalHWRequirements: React.FC<MinimalHWRequirementsProps> = ({
7778
isInline
7879
className="host-requirements-link"
7980
>
80-
<Icon size="sm" status="warning">
81-
<InfoCircleIcon />
82-
</Icon>
81+
<UiIcon size="sm" status="warning" icon={<InfoCircleIcon />} />
8382
&nbsp;{t('ai:Minimum hardware requirements')}
8483
</Button>
8584
<MinimalHWRequirementsModal

‎libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/ConditionsTable.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, FlexItem, Icon } from '@patternfly/react-core';
1+
import { Flex, FlexItem } from '@patternfly/react-core';
22
import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
33
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
44
import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
@@ -10,6 +10,7 @@ import * as React from 'react';
1010
import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
1111

1212
import './ConditionsTable.css';
13+
import { UiIcon } from '../../../../common';
1314

1415
const ignoredConditions = ['Progressing'];
1516
const reversedConditions = ['Degraded'];
@@ -56,9 +57,7 @@ const ConditionsTable = ({ conditions, isDone }: ConditionsTableProps) => {
5657
icon = <CheckCircleIcon color={okColor.value} />;
5758
} else if (c.status === nokStatus) {
5859
icon = isDone ? (
59-
<Icon size="sm" status="danger">
60-
<ExclamationCircleIcon />
61-
</Icon>
60+
<UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
6261
) : (
6362
<InProgressIcon />
6463
);

‎libs/ui-lib/lib/cim/components/Hypershift/DetailsPage/HostedClusterProgress.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import {
33
ExpandableSectionToggle,
4-
Icon,
54
ProgressStep,
65
Spinner,
76
Stack,
@@ -13,7 +12,7 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
1312
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
1413
import { HostedClusterK8sResource } from '../types';
1514
import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
16-
import { ExternalLink } from '../../../../common';
15+
import { ExternalLink, UiIcon } from '../../../../common';
1716
import ConditionsTable from './ConditionsTable';
1817

1918
type HostedClusterProgressProps = {
@@ -37,9 +36,7 @@ const HostedClusterProgress = ({ hostedCluster, launchToOCP }: HostedClusterProg
3736
availableCondtion?.status === 'True' ? (
3837
<CheckCircleIcon color={okColor.value} />
3938
) : (
40-
<Icon size="sm" status="danger">
41-
<ExclamationCircleIcon />
42-
</Icon>
39+
<UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
4340
);
4441
}
4542

‎libs/ui-lib/lib/common/components/clusterConfiguration/DiscoveryTroubleshootingModal.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@ import {
1212
OrderType,
1313
HelperText,
1414
HelperTextItem,
15-
Icon,
1615
} from '@patternfly/react-core';
1716
import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
18-
import { PrismCode, SimpleAIPrismTheme } from '../ui';
17+
import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
1918
import { useTranslation } from '../../hooks/use-translation-wrapper';
2019
import { Trans } from 'react-i18next';
2120
import { saveAs } from 'file-saver';
@@ -209,9 +208,7 @@ export const HostsNotShowingLink = ({
209208
<Button variant={ButtonVariant.link} onClick={() => setDiscoveryHintModalOpen(true)} isInline>
210209
{!isInline && (
211210
<>
212-
<Icon size="sm">
213-
<InfoCircleIcon />
214-
</Icon>
211+
<UiIcon size="sm" icon={<InfoCircleIcon />} />
215212
&nbsp;
216213
</>
217214
)}

‎libs/ui-lib/lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/exter
55

66
import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
77
import { OpenshiftVersionOptionType } from '../../types';
8-
import { SelectField } from '../ui';
8+
import { SelectField, UiIcon } from '../ui';
99
import { useTranslation } from '../../hooks/use-translation-wrapper';
1010
import { SelectFieldProps } from '../ui/formik/types';
11-
import { Icon } from '@patternfly/react-core';
1211

1312
const OpenShiftLifeCycleDatesLink = () => {
1413
const { t } = useTranslation();
@@ -26,9 +25,7 @@ const getOpenshiftVersionHelperText =
2625
if (!versions.length) {
2726
return (
2827
<>
29-
<Icon size="sm" status="danger">
30-
<ExclamationCircleIcon />
31-
</Icon>
28+
<UiIcon size="sm" status="danger" icon={<ExclamationCircleIcon />} />
3229
&nbsp; {t('ai:No release image is available.')}
3330
</>
3431
);
@@ -41,9 +38,7 @@ const getOpenshiftVersionHelperText =
4138
if (selectedVersion.supportLevel !== 'production') {
4239
return (
4340
<>
44-
<Icon size="sm" status="warning">
45-
<ExclamationTriangleIcon />
46-
</Icon>
41+
<UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
4742
&nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
4843
<OpenShiftLifeCycleDatesLink />
4944
</>

‎libs/ui-lib/lib/common/components/clusterWizard/ReviewValidations.tsx

+4-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import lodashValues from 'lodash-es/values.js';
3-
import { Button, ButtonVariant, Icon } from '@patternfly/react-core';
3+
import { Button, ButtonVariant } from '@patternfly/react-core';
44
import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
55
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
66
import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
@@ -30,6 +30,7 @@ import {
3030
import { useTranslation } from '../../hooks/use-translation-wrapper';
3131
import { Trans } from 'react-i18next';
3232
import { getKeys, stringToJSON } from '../../utils';
33+
import { UiIcon } from '../ui';
3334

3435
const AllValidationsPassed = () => {
3536
const { t } = useTranslation();
@@ -120,17 +121,9 @@ const FailingValidation = <S extends string>({
120121

121122
let icon;
122123
if (severity === 'warning') {
123-
icon = (
124-
<Icon status="warning">
125-
<ExclamationTriangleIcon />
126-
</Icon>
127-
);
124+
icon = <UiIcon status="warning" icon={<ExclamationTriangleIcon />} />;
128125
} else {
129-
icon = (
130-
<Icon size="sm" status="danger">
131-
<ExclamationCircleIcon />
132-
</Icon>
133-
);
126+
icon = <UiIcon status="danger" icon={<ExclamationCircleIcon />} />;
134127
}
135128

136129
return (

‎libs/ui-lib/lib/common/components/hosts/VMRebootConfigurationInfo.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@ import React from 'react';
22
import {
33
Button,
44
ButtonVariant,
5-
Icon,
65
Popover,
76
Text,
87
TextContent,
98
TextVariants,
109
} from '@patternfly/react-core';
1110
import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
1211
import { Trans } from 'react-i18next';
13-
import { PrismCode } from '../../../common/components/ui';
12+
import { PrismCode, UiIcon } from '../../../common/components/ui';
1413
import { useTranslation } from '../../hooks/use-translation-wrapper';
1514

1615
export const VMRebootConfigurationContent = () => {
@@ -51,9 +50,7 @@ const VMRebootConfigurationInfo = () => {
5150
<Popover bodyContent={<VMRebootConfigurationContent />} minWidth="35rem">
5251
<Button variant={ButtonVariant.link} isInline>
5352
<>
54-
<Icon size="sm">
55-
<InfoCircleIcon />
56-
</Icon>
53+
<UiIcon size="sm" icon={<InfoCircleIcon />} />
5754
&nbsp;
5855
</>
5956
{t('ai:Check your VM reboot configuration')}

‎libs/ui-lib/lib/common/components/storage/DisksTable.tsx

+3-9
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
Popover,
77
Alert,
88
AlertVariant,
9-
Icon,
109
} from '@patternfly/react-core';
1110
import { TableVariant, RowWrapperProps, RowWrapper, IRow } from '@patternfly/react-table';
1211
import { Table, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
@@ -22,10 +21,9 @@ import FormatDiskCheckbox, {
2221
isInDiskSkipFormattingList,
2322
} from '../hosts/FormatDiskCheckbox';
2423
import { fileSize } from '../../utils';
25-
import { PopoverIcon } from '../ui';
24+
import { PopoverIcon, UiIcon } from '../ui';
2625
import { useTranslation } from '../../hooks/use-translation-wrapper';
2726
import { TFunction } from 'i18next';
28-
import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
2927

3028
interface DisksTableProps extends WithTestID {
3129
canEditDisks?: (host: Host) => boolean;
@@ -117,9 +115,7 @@ const DiskName = ({
117115
{isIndented && <span style={{ width: '1rem', display: 'inline-block' }} />}
118116
{isInDiskSkipFormattingList(host, disk.id) && (
119117
<Popover bodyContent={<SkipFormattingDisk />} minWidth="20rem" maxWidth="30rem">
120-
<Icon size="sm" status="warning">
121-
<ExclamationTriangleIcon color={warningColor.value} />
122-
</Icon>
118+
<UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
123119
</Popover>
124120
)}
125121
{' '}
@@ -134,9 +130,7 @@ const DiskName = ({
134130
maxWidth="30rem"
135131
data-testid="disk-limitations-popover"
136132
>
137-
<Icon size="sm" status="warning">
138-
<ExclamationTriangleIcon color={warningColor.value} />
139-
</Icon>
133+
<UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
140134
</Popover>
141135
</>
142136
)}

‎libs/ui-lib/lib/common/components/storage/StorageUtils.tsx

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import * as React from 'react';
22
import { sortable } from '@patternfly/react-table';
33
import { TFunction } from 'i18next';
4-
import { getHostRole, getInventory, RoleCell } from '../../index';
4+
import { getHostRole, getInventory, RoleCell, UiIcon } from '../../index';
55
import { TableRow } from '../hosts/AITable';
6-
import { Icon, Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
6+
import { Popover, Text, TextContent, TextVariants } from '@patternfly/react-core';
77
import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
8-
import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
9-
108
import { Host } from '@openshift-assisted/types/assisted-installer-service';
119

1210
const SkipFormattingDisks = () => (
@@ -54,9 +52,7 @@ export const numberOfDisksColumn: TableRow<Host> = {
5452
{' '}
5553
{host.skipFormattingDisks && (
5654
<Popover bodyContent={<SkipFormattingDisks />} minWidth="20rem" maxWidth="30rem">
57-
<Icon size="sm" status="warning">
58-
<ExclamationTriangleIcon color={warningColor.value} />
59-
</Icon>
55+
<UiIcon size="sm" status="warning" icon={<ExclamationTriangleIcon />} />
6056
</Popover>
6157
)}
6258
</>

‎libs/ui-lib/lib/common/components/ui/UiIcon.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { ReactElement } from 'react';
2+
import { Icon, IconComponentProps } from '@patternfly/react-core';
3+
4+
export type UiIconProps = {
5+
size?: IconComponentProps['size'];
6+
status?: IconComponentProps['status'] | undefined;
7+
icon?: ReactElement;
8+
className?: string;
9+
};
10+
11+
const UiIcon: React.FC<UiIconProps> = (props) => {
12+
return (
13+
<>
14+
<Icon size={props.size ? props.size : 'md'} status={props.status} className={props.className}>
15+
{props.icon}
16+
</Icon>
17+
</>
18+
);
19+
};
20+
21+
export default UiIcon;

‎libs/ui-lib/lib/common/components/ui/WizardNavItem.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { PropsWithChildren, ReactNode } from 'react';
22
import { WizardNavItem, WizardNavItemProps } from '@patternfly/react-core/deprecated';
33
import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
4-
5-
import { Icon } from '@patternfly/react-core';
4+
import UiIcon from './UiIcon';
65

76
const getNavItemContent = (
87
content: ReactNode,
@@ -14,9 +13,11 @@ const getNavItemContent = (
1413
return (
1514
<>
1615
{content}
17-
<Icon size="sm" status="danger" className="wizard-nav-item-warning-icon">
18-
<ExclamationCircleIcon />
19-
</Icon>
16+
<UiIcon
17+
status="danger"
18+
className="wizard-nav-item-warning-icon"
19+
icon={<ExclamationCircleIcon />}
20+
/>
2021
</>
2122
);
2223
}

‎libs/ui-lib/lib/common/components/ui/formik/RemovableField.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2-
import { Button, ButtonVariant, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
2+
import { Button, ButtonVariant, Tooltip, TooltipProps } from '@patternfly/react-core';
33
import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
44
import './RemovableField.css';
55
import classnames from 'classnames';
6+
import UiIcon from '../UiIcon';
67

78
interface RemovableFieldProps {
89
onRemove: VoidFunction;
@@ -33,9 +34,7 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
3334
onClick={onRemove}
3435
data-testid={removeButtonDataTestId}
3536
>
36-
<Icon size="sm">
37-
<MinusCircleIcon />
38-
</Icon>
37+
<UiIcon size="sm" icon={<MinusCircleIcon />} />
3938
</Button>
4039
}
4140
className={classnames('ai-remove-button__tooltip ', className)}

‎libs/ui-lib/lib/common/components/ui/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ export { default as ClusterEventsToolbar } from './ClusterEventsToolbar';
2525
export { default as ModalProgress } from './ModalProgress';
2626
export { default as ConfirmationModal } from './ConfirmationModal';
2727
export { default as NoPermissionsError } from './NoPermissionsError';
28+
29+
export { default as UiIcon } from './UiIcon';

‎libs/ui-lib/lib/ocm/components/clusterConfiguration/OcmOpenShiftVersionSelect.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/exter
55
import { TFunction } from 'i18next';
66
import { OpenShiftVersionDropdown } from '../../../common/components/ui/OpenShiftVersionDropdown';
77
import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
8-
import { OPENSHIFT_LIFE_CYCLE_DATES_LINK, OpenshiftVersionOptionType } from '../../../common';
8+
import {
9+
OPENSHIFT_LIFE_CYCLE_DATES_LINK,
10+
UiIcon,
11+
OpenshiftVersionOptionType,
12+
} from '../../../common';
913
import { isInOcm } from '../../../common/api';
10-
import { Icon } from '@patternfly/react-core';
1114

1215
const OpenShiftLifeCycleDatesLink = () => {
1316
const { t } = useTranslation();
@@ -26,10 +29,8 @@ const getOpenshiftVersionHelperText = (
2629
if (!versions.length) {
2730
return (
2831
<>
29-
<Icon size="sm" status="danger">
30-
<ExclamationCircleIcon />
31-
</Icon>
32-
&nbsp; {t('ai:No release image is available.')}
32+
<UiIcon status="danger" size="sm" icon={<ExclamationCircleIcon />} />; &nbsp;{' '}
33+
{t('ai:No release image is available.')}
3334
</>
3435
);
3536
}
@@ -42,10 +43,8 @@ const getOpenshiftVersionHelperText = (
4243
if (selectedVersion.supportLevel !== 'production') {
4344
return (
4445
<>
45-
<Icon size="sm" status="warning">
46-
<ExclamationTriangleIcon />
47-
</Icon>
48-
&nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
46+
<UiIcon status="warning" icon={<ExclamationTriangleIcon />} />; &nbsp;
47+
{t('ai:Please note that this version is not production-ready.')}&nbsp;
4948
<OpenShiftLifeCycleDatesLink />
5049
</>
5150
);

0 commit comments

Comments
 (0)