feat: Add support for the color of icon in the Alert Style API (#3882)

Author: teodoranemes

build-tools/utils/custom-css-properties.js

@@ -99,5 +99,6 @@ const customCssPropertiesList = [
   'alertFocusRingBorderRadius',
   'alertFocusRingBorderWidth',
   'alertFocusRingBoxShadow',
+  'alertIconColor',
 ];
 module.exports = customCssPropertiesList;

pages/alert/style-custom-types.page.tsx

@@ -73,6 +73,7 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
   const borderColor = borderColors[mode][type];
   const borderWidth = borderWidths[type];
   const color = colors[mode];
+  const iconColor = iconColors[mode][type];
   return (
     <CloudscapeAlert
       dismissible={dismissible}
@@ -92,6 +93,9 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
             borderWidth: '2px',
           },
         },
+        icon: {
+          color: iconColor,
+        },
         dismissButton: {
           color: {
             default: dismissButtonColors[mode][type].default,
@@ -153,6 +157,21 @@ const borderWidths = {
   warning: '0px',
 };
 
+const iconColors = {
+  light: {
+    info: palette.orange80,
+    success: palette.red60,
+    error: palette.blue80,
+    warning: palette.neutral10,
+  },
+  dark: {
+    info: palette.red30,
+    success: palette.red60,
+    error: palette.blue40,
+    warning: palette.neutral90,
+  },
+};
+
 const dismissButtonColors = {
   light: {
     info: {

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -247,6 +247,22 @@ If the label is assigned via the \`i18nStrings\` property, this label will be ig
             "optional": true,
             "type": "{ color?: { active?: string | undefined; default?: string | undefined; hover?: string | undefined; } | undefined; focusRing?: { borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; } | undefined; }",
           },
+          {
+            "inlineType": {
+              "name": "{ color?: string | undefined; }",
+              "properties": [
+                {
+                  "name": "color",
+                  "optional": true,
+                  "type": "string",
+                },
+              ],
+              "type": "object",
+            },
+            "name": "icon",
+            "optional": true,
+            "type": "{ color?: string | undefined; }",
+          },
           {
             "inlineType": {
               "name": "object",

src/alert/__tests__/alert.test.tsx

@@ -287,6 +287,9 @@ describe('Style API', () => {
             borderWidth: '4px',
           },
         },
+        icon: {
+          color: 'rgb(255, 0, 0)',
+        },
         dismissButton: {
           color: {
             active: 'rgb(12, 136, 22)',
@@ -336,5 +339,8 @@ describe('Style API', () => {
     );
     expect(getComputedStyle(dismissButton).getPropertyValue(customCssProps.styleFocusRingBorderRadius)).toBe('6px');
     expect(getComputedStyle(dismissButton).getPropertyValue(customCssProps.styleFocusRingBorderWidth)).toBe('4px');
+
+    const iconElement = wrapper.findByClassName(styles.icon)!.getElement();
+    expect(getComputedStyle(iconElement).getPropertyValue(customCssProps.alertIconColor)).toBe('rgb(255, 0, 0)');
   });
 });

src/alert/interfaces.ts

@@ -61,6 +61,9 @@ export namespace AlertProps {
         borderWidth?: string;
       };
     };
+    icon?: {
+      color?: string;
+    };
     dismissButton?: {
       color?: {
         active?: string;

src/alert/internal.tsx

@@ -25,7 +25,7 @@ import useContainerWidth from '../internal/utils/use-container-width';
 import { ActionsWrapper } from './actions-wrapper';
 import { GeneratedAnalyticsMetadataAlertDismiss } from './analytics-metadata/interfaces';
 import { AlertProps } from './interfaces';
-import { getAlertStyles, getDismissButtonStyles } from './style';
+import { getAlertStyles, getDismissButtonStyles, getIconStyles } from './style';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -139,7 +139,7 @@ const InternalAlert = React.forwardRef(
             >
               <div className={styles['alert-wrapper']}>
                 <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef} role="group">
-                  <div className={clsx(styles.icon, styles.text)}>
+                  <div className={clsx(styles.icon, styles.text)} style={getIconStyles(style)}>
                     <InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />
                   </div>
                   <div className={clsx(styles.message, styles.text)} id={messageSlotId}>

src/alert/style.tsx

@@ -23,6 +23,16 @@ export function getAlertStyles(style: AlertProps['style']) {
   };
 }
 
+export function getIconStyles(style: AlertProps['style']) {
+  if (SYSTEM !== 'core' || !style?.icon?.color) {
+    return undefined;
+  }
+
+  return {
+    [customCssProps.alertIconColor]: style.icon.color,
+  };
+}
+
 export function getDismissButtonStyles(style: AlertProps['style']) {
   if (SYSTEM !== 'core' || !style?.dismissButton) {
     return undefined;

src/alert/styles.scss

@@ -160,7 +160,7 @@ $_text-colors: (
     border-color: #{map.get($_border-colors, $type)};
     background-color: #{map.get($_background-colors, $type)};
     > .alert-wrapper > .alert-focus-wrapper > .icon {
-      color: #{map.get($_text-colors, $type)};
+      color: var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)});
     }
   }
 }