feat: adds StyledBaseIcon to notifications

Author: geotrev

packages/notifications/src/elements/Alert.tsx

@@ -23,7 +23,7 @@ export const AlertComponent = React.forwardRef<HTMLDivElement, IAlertProps>(
     return (
       <NotificationsContext.Provider value={hue as Hue}>
         <StyledAlert ref={ref} hue={hue} role={role === undefined ? 'alert' : role} {...props}>
-          <StyledIcon hue={hue}>
+          <StyledIcon $hue={hue}>
             <Icon />
           </StyledIcon>
           {props.children}

packages/notifications/src/elements/Notification.tsx

@@ -29,7 +29,7 @@ export const NotificationComponent = forwardRef<HTMLDivElement, INotificationPro
         role={role === undefined ? 'status' : role}
       >
         {props.type && (
-          <StyledIcon hue={hue}>
+          <StyledIcon $hue={hue}>
             <Icon />
           </StyledIcon>
         )}

packages/notifications/src/styled/StyledIcon.ts

@@ -5,19 +5,16 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { Children } from 'react';
 import styled from 'styled-components';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColorV8, DEFAULT_THEME, StyledBaseIcon } from '@zendeskgarden/react-theming';
 
-export const StyledIcon = styled(({ children, ...props }) =>
-  React.cloneElement(Children.only(children), props)
-)`
+export const StyledIcon = styled(StyledBaseIcon)`
   position: absolute;
   right: ${props => props.theme.rtl && `${props.theme.space.base * 4}px`};
   left: ${props => !props.theme.rtl && `${props.theme.space.base * 4}px`};
   margin-top: ${props => props.theme.space.base / 2}px;
   color: ${props =>
-    props.hue && getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme)};
+    props.$hue && getColorV8(props.$hue, props.$hue === 'warningHue' ? 700 : 600, props.theme)};
 `;
 
 StyledIcon.defaultProps = {