chore: code review

Author: geotrev

packages/notifications/src/elements/content/Close.tsx

@@ -9,7 +9,7 @@ import React, { ButtonHTMLAttributes } from 'react';
 import { StyledClose } from '../../styled';
 import { useNotificationsContext } from '../../utils/useNotificationsContext';
 import { useText } from '@zendeskgarden/react-theming';
-import XStrokeIcon from '@zendeskgarden/svg-icons/src/12/x-stroke.svg';
+import XStrokeIcon from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
 
 /**
  * @deprecated use `Alert.Close` or `Notification.Close` instead

packages/notifications/src/elements/global-alert/GlobalAlertButton.tsx

@@ -23,12 +23,6 @@ export const GlobalAlertButton = forwardRef<HTMLButtonElement, IGlobalAlertButto
         ref={ref}
         $alertType={type}
         {...props}
-        focusInset={false}
-        isDanger={false}
-        isLink={false}
-        isNeutral={false}
-        isPill={false}
-        isStretched={false}
         size="small"
         isPrimary={!isBasic}
         isBasic={isBasic}

packages/notifications/src/styled/StyledBase.ts

@@ -22,23 +22,8 @@ export interface IStyledBaseProps extends ThemeProps<DefaultTheme> {
   $type?: Type;
 }
 
-const boxShadow = (props: IStyledBaseProps) => {
-  const { theme } = props;
-  const { space, shadows, opacity } = theme;
-  const offsetY = `${space.base * 5}px`;
-  const blurRadius = `${space.base * 7}px`;
-  const color = getColor({
-    hue: 'neutralHue',
-    shade: 1200,
-    light: { transparency: opacity[200] },
-    dark: { transparency: opacity[1000] },
-    theme
-  });
-
-  return shadows.lg(offsetY, blurRadius, color as string);
-};
-
 const colorStyles = ({ theme, $type, $isFloating }: IStyledBaseProps) => {
+  const { space, shadows, opacity } = theme;
   let bgVariable;
   let borderVariable;
   let fgVariable;
@@ -76,8 +61,21 @@ const colorStyles = ({ theme, $type, $isFloating }: IStyledBaseProps) => {
   const borderColor = getColor({ variable: borderVariable, theme });
   const foregroundColor = getColor({ variable: fgVariable, theme });
 
+  const offsetY = `${space.base * 5}px`;
+  const blurRadius = `${space.base * 7}px`;
+  const color = getColor({
+    hue: 'neutralHue',
+    shade: 1200,
+    light: { transparency: opacity[200] },
+    dark: { transparency: opacity[1000] },
+    theme
+  });
+
+  const boxShadow = shadows.lg(offsetY, blurRadius, color);
+
   return css`
     border-color: ${borderColor};
+    box-shadow: ${$isFloating && boxShadow};
     background-color: ${backgroundColor};
     color: ${foregroundColor};
   `;
@@ -98,7 +96,6 @@ export const StyledBase = styled.div.attrs({
   position: relative;
   border: ${props => props.theme.borders.sm};
   border-radius: ${props => props.theme.borderRadii.md};
-  box-shadow: ${props => props.$isFloating && boxShadow};
   padding: ${padding};
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
   font-size: ${props => props.theme.fontSizes.md};

packages/notifications/src/styled/StyledIcon.ts

@@ -30,23 +30,28 @@ const sizeStyles = ({ theme: { rtl, space } }: IStyledIconProps) => {
 };
 
 const colorStyles = ({ theme, $type }: IStyledIconProps) => {
-  let color;
+  let variable;
 
   switch ($type) {
     case validationTypes.success:
-      color = getColor({ variable: 'foreground.success', theme });
+      variable = 'foreground.success';
       break;
     case validationTypes.error:
-      color = getColor({ variable: 'foreground.danger', theme });
+      variable = 'foreground.danger';
       break;
     case validationTypes.warning:
-      color = getColor({ variable: 'foreground.warning', theme });
+      variable = 'foreground.warning';
       break;
     case validationTypes.info:
-      color = getColor({ variable: 'foreground.subtle', theme });
+      variable = 'foreground.subtle';
+      break;
+    default:
+      variable = 'foreground.default';
       break;
   }
 
+  const color = getColor({ variable, theme });
+
   return css`
     color: ${color};
   `;

packages/notifications/src/styled/StyledWell.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
+import styled, { ThemeProps, css, DefaultTheme } from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledBase } from './StyledBase';
 
@@ -15,16 +15,24 @@ export interface IStyledWellProps {
   $isRecessed?: boolean;
 }
 
+const colorStyles = ({ theme, $isRecessed }: IStyledWellProps & ThemeProps<DefaultTheme>) => {
+  const foreground = getColor({ variable: 'foreground.subtle', theme });
+  const background = $isRecessed && getColor({ variable: 'background.recessed', theme });
+
+  return css`
+    background-color: ${background};
+    color: ${foreground};
+  `;
+};
+
 /**
  * Supports all `<div>` props
  */
 export const StyledWell = styled(StyledBase).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledWellProps>`
-  background-color: ${p =>
-    p.$isRecessed && getColor({ variable: 'background.recessed', theme: p.theme })};
-  color: ${p => getColor({ variable: 'foreground.subtle', theme: p.theme })};
+  ${colorStyles}
 
   ${p => retrieveComponentStyles(COMPONENT_ID, p)};
 `;

packages/notifications/src/utils/icons.ts

@@ -18,7 +18,7 @@ export const validationIcons: Record<Type, Record<string, unknown>> = {
   info: InfoStrokeIcon
 };
 
-export const validationTypes: Record<Type, string> = {
+export const validationTypes: Record<Type, Type> = {
   success: 'success',
   error: 'error',
   warning: 'warning',