chore: adds colors for alert

Author: geotrev

packages/notifications/src/elements/Alert.tsx

@@ -7,22 +7,21 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IAlertProps, TYPE, Type } from '../types';
+import { IAlertProps, TYPE } from '../types';
 import { StyledAlert, StyledIcon } from '../styled';
-import { validationIcons, validationHues } from '../utils/icons';
+import { validationIcons } from '../utils/icons';
 import { NotificationsContext } from '../utils/useNotificationsContext';
 import { Title } from './content/Title';
 import { Paragraph } from './content/Paragraph';
 import { Close } from './content/Close';
 
 export const AlertComponent = React.forwardRef<HTMLDivElement, IAlertProps>(
-  ({ role, ...props }, ref) => {
-    const type = validationHues[props.type];
-    const Icon = validationIcons[props.type] as any;
+  ({ role, type, ...props }, ref) => {
+    const Icon = validationIcons[type] as any;
 
     return (
-      <NotificationsContext.Provider value={type as Type}>
-        <StyledAlert ref={ref} hue={type} role={role === undefined ? 'alert' : role} {...props}>
+      <NotificationsContext.Provider value={type}>
+        <StyledAlert ref={ref} $type={type} role={role === undefined ? 'alert' : role} {...props}>
           <StyledIcon $type={type}>
             <Icon />
           </StyledIcon>

packages/notifications/src/styled/StyledAlert.spec.tsx

@@ -7,28 +7,28 @@
 
 import React from 'react';
 import { css } from 'styled-components';
-import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
-import { render } from 'garden-test-utils';
+import { PALETTE } from '@zendeskgarden/react-theming';
+import { getRenderFn } from 'garden-test-utils';
 import { StyledAlert, StyledTitle } from '../styled';
 import { Type } from '../types';
 
 describe('StyledAlert', () => {
-  it(`should render the styling correctly for a Notification's title`, () => {
-    const validationHues: Record<Type, string> = {
-      success: 'successHue',
-      error: 'dangerHue',
-      warning: 'warningHue',
-      info: 'neutralHue'
-    };
+  it.each<{ mode: 'light' | 'dark'; type: Type; color: string }>([
+    { mode: 'light', type: 'success', color: PALETTE.green[900] },
+    { mode: 'dark', type: 'success', color: PALETTE.green[300] },
+    { mode: 'light', type: 'error', color: PALETTE.red[900] },
+    { mode: 'dark', type: 'error', color: PALETTE.red[300] },
+    { mode: 'light', type: 'warning', color: PALETTE.yellow[900] },
+    { mode: 'dark', type: 'warning', color: PALETTE.yellow[300] },
+    { mode: 'light', type: 'info', color: PALETTE.grey[900] },
+    { mode: 'dark', type: 'info', color: PALETTE.grey[300] }
+  ])('renders correct $mode type $type title color', ({ mode, type, color }) => {
+    const { container } = getRenderFn(mode)(<StyledAlert $type={type} />);
 
-    Object.values(validationHues).forEach(hue => {
-      const { container } = render(<StyledAlert hue={hue} />);
-
-      expect(container.firstChild).toHaveStyleRule('color', getColorV8(hue, 800, DEFAULT_THEME), {
-        modifier: css`
-          ${StyledTitle}
-        ` as any
-      });
+    expect(container.firstChild).toHaveStyleRule('color', color, {
+      modifier: css`
+        ${StyledTitle}
+      ` as any
     });
   });
 });

packages/notifications/src/styled/StyledAlert.ts

@@ -6,21 +6,46 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledTitle } from './content/StyledTitle';
 import { IStyledBaseProps, StyledBase } from './StyledBase';
+import { validationTypes } from '../utils/icons';
+import { Type } from '../types';
 
 const COMPONENT_ID = 'notifications.alert';
 
 export interface IStyledAlertProps extends IStyledBaseProps {
-  hue?: string;
+  $type?: Type;
 }
 
-const colorStyles = (props: IStyledAlertProps & ThemeProps<DefaultTheme>) => css`
-  ${StyledTitle} {
-    color: ${props.hue && getColorV8(props.hue, 800, props.theme)};
+const colorStyles = (props: IStyledAlertProps & ThemeProps<DefaultTheme>) => {
+  const { $type, theme } = props;
+
+  let variable;
+
+  switch ($type) {
+    case validationTypes.success:
+      variable = 'foreground.successEmphasis';
+      break;
+    case validationTypes.error:
+      variable = 'foreground.dangerEmphasis';
+      break;
+    case validationTypes.warning:
+      variable = 'foreground.warningEmphasis';
+      break;
+    case validationTypes.info:
+      variable = 'foreground.default';
+      break;
   }
-`;
+
+  const color = variable ? getColor({ variable, theme }) : undefined;
+
+  return css`
+    ${StyledTitle} {
+      color: ${color};
+    }
+  `;
+};
 
 /**
  * Supports all `<div>` props
@@ -30,6 +55,7 @@ export const StyledAlert = styled(StyledBase).attrs({
   'data-garden-version': PACKAGE_VERSION
 })<IStyledAlertProps>`
   ${colorStyles}
+
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};
 `;
 

packages/notifications/src/styled/StyledBase.ts

@@ -61,7 +61,7 @@ const colorStyles = ({ theme, $type, $isFloating }: IStyledBaseProps) => {
         fgVariable = 'foreground.warning';
         break;
       case validationTypes.info:
-        bgVariable = 'background.raised';
+        bgVariable = 'background.subtle';
         borderVariable = 'border.default';
         fgVariable = 'foreground.subtle';
         break;

packages/notifications/src/styled/content/StyledClose.ts

@@ -17,23 +17,6 @@ interface IStyledCloseProps {
   $type?: Type;
 }
 
-/**
- * 1. IconButton reset
- */
-const sizeStyles = ({ theme: { space } }: ThemeProps<DefaultTheme>) => {
-  return css`
-    padding: 0;
-    width: ${space.base * 7}px;
-    min-width: unset; /* [1] */
-    height: ${space.base * 7}px;
-
-    && > svg {
-      width: unset; /* [1] */
-      height: unset; /* [1] */
-    }
-  `;
-};
-
 /**
  * 1. IconButton reset
  */
@@ -94,8 +77,6 @@ export const StyledClose = styled(IconButton).attrs({
   right: ${p => !p.theme.rtl && `${p.theme.space.base}px`};
   left: ${p => p.theme.rtl && `${p.theme.space.base}px`};
 
-  ${sizeStyles}
-
   ${colorStyles}
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};