Merge pull request #13460 from nicolethoen/update_icons

OCPBUGS-25934: clean up icon color and sizes

Author: openshift-merge-bot[bot]

frontend/packages/console-dynamic-plugin-sdk/src/app/components/status/icons.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Icon } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
@@ -10,7 +11,7 @@ import './icons.scss';
 export type ColoredIconProps = {
   className?: string;
   title?: string;
-  size?: number;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
 };
 
 /**
@@ -24,12 +25,13 @@ export type ColoredIconProps = {
  * ```
  */
 export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
-  <CheckCircleIcon
-    data-test="success-icon"
-    size={size}
-    className={classNames('dps-icons__green-check-icon', className)}
-    title={title}
-  />
+  <Icon size={size}>
+    <CheckCircleIcon
+      data-test="success-icon"
+      className={classNames('dps-icons__green-check-icon', className)}
+      title={title}
+    />
+  </Icon>
 );
 
 /**
@@ -47,11 +49,12 @@ export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
   title,
   size,
 }) => (
-  <ExclamationCircleIcon
-    size={size}
-    className={classNames('dps-icons__red-exclamation-icon', className)}
-    title={title}
-  />
+  <Icon size={size}>
+    <ExclamationCircleIcon
+      className={classNames('dps-icons__red-exclamation-icon', className)}
+      title={title}
+    />
+  </Icon>
 );
 
 /**
@@ -69,11 +72,12 @@ export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({
   title,
   size,
 }) => (
-  <ExclamationTriangleIcon
-    size={size}
-    className={classNames('dps-icons__yellow-exclamation-icon', className)}
-    title={title}
-  />
+  <Icon size={size}>
+    <ExclamationTriangleIcon
+      className={classNames('dps-icons__yellow-exclamation-icon', className)}
+      title={title}
+    />
+  </Icon>
 );
 
 /**
@@ -86,6 +90,8 @@ export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({
  * <BlueInfoCircleIcon title="Info" />
  * ```
  */
-export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-  <InfoCircleIcon className={classNames('dps-icons__blue-info-icon', className)} title={title} />
+export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <Icon size={size}>
+    <InfoCircleIcon className={classNames('dps-icons__blue-info-icon', className)} title={title} />
+  </Icon>
 );

frontend/packages/console-shared/src/components/status/icons.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { Icon } from '@patternfly/react-core';
 import { ArrowCircleUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-circle-up-icon';
 import { ResourcesAlmostFullIcon } from '@patternfly/react-icons/dist/esm/icons/resources-almost-full-icon';
 import { ResourcesFullIcon } from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
 import { SyncAltIcon } from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
 import { UnknownIcon } from '@patternfly/react-icons/dist/esm/icons/unknown-icon';
-import * as ReactTokens from '@patternfly/react-tokens';
 import { ColoredIconProps } from '@console/dynamic-plugin-sdk';
 
 export {
@@ -14,42 +14,36 @@ export {
   BlueInfoCircleIcon,
 } from '@console/dynamic-plugin-sdk';
 
-export const GrayUnknownIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-  <UnknownIcon
-    color={ReactTokens.global_disabled_color_100.value}
-    className={className}
-    title={title}
-  />
+export const GrayUnknownIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <Icon size={size}>
+    <UnknownIcon className={className} title={title} />
+  </Icon>
 );
 
-export const BlueSyncIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-  <SyncAltIcon
-    color={ReactTokens.global_palette_blue_300.value}
-    className={className}
-    title={title}
-  />
+export const BlueSyncIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <Icon status="info" size={size}>
+    <SyncAltIcon className={className} title={title} />
+  </Icon>
 );
 
-export const RedResourcesFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-  <ResourcesFullIcon
-    color={ReactTokens.global_danger_color_100.value}
-    className={className}
-    title={title}
-  />
+export const RedResourcesFullIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <Icon status="danger" size={size}>
+    <ResourcesFullIcon className={className} title={title} />
+  </Icon>
 );
 
-export const YellowResourcesAlmostFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-  <ResourcesAlmostFullIcon
-    color={ReactTokens.global_warning_color_100.value}
-    className={className}
-    title={title}
-  />
+export const YellowResourcesAlmostFullIcon: React.FC<ColoredIconProps> = ({
+  className,
+  title,
+  size,
+}) => (
+  <Icon status="warning" size={size}>
+    <ResourcesAlmostFullIcon className={className} title={title} />
+  </Icon>
 );
 
-export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-  <ArrowCircleUpIcon
-    color={ReactTokens.global_Color_200.value}
-    className={className}
-    title={title}
-  />
+export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
+  <Icon status="info" size={size}>
+    <ArrowCircleUpIcon className={className} title={title} />
+  </Icon>
 );