feat(SvgIcon): make default color 'inherit'; use in @prenda/spark-icons; expand colors; improve props (#174)

* feat(SvgIcon)!: revert default color to 'inherit'; improve props

* feat(SvgIcon): expand color options and improve handling / classes

* change @prenda/spark-icons dependency to spark

* specify color for lone icon in NavBar story

Author: WilliamKelley

libs/spark-icons/package.json

@@ -6,7 +6,7 @@
     "@babel/runtime": "^7.10.2"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.0.0",
+    "@prenda/spark": "^0.8.0",
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {

libs/spark-icons/src/utils/createSvgIcon.tsx

@@ -2,8 +2,7 @@
 //  Changes made since
 
 import * as React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
-import { SvgIconProps as MuiSvgIconProps } from '@material-ui/core';
+import { SvgIcon, SvgIconProps } from '@prenda/spark';
 
 export default function createSvgIcon(
   path: React.ReactNode,
@@ -12,7 +11,7 @@ export default function createSvgIcon(
   width?: string,
   height?: string
 ): typeof SvgIcon {
-  const Component = (props: MuiSvgIconProps, ref: React.ForwardedRef<SVGSVGElement>) => (
+  const Component = (props: SvgIconProps, ref: React.ForwardedRef<SVGSVGElement>) => (
     <SvgIcon ref={ref} viewBox={viewBox} width={width} height={height} {...props}>
       {path}
     </SvgIcon>

libs/spark/src/NavBarButton.tsx

@@ -11,12 +11,6 @@ export const NavBarButton = withStyles((theme) => ({
     padding: 6,
     textTransform: 'none',
     color: theme.palette.text.onLightLowContrast,
-    '& .MuiSvgIcon-root': {
-      color: theme.palette.text.onLightLowContrast,
-      '& .MuiSvgIcon-colorPrimary': {
-        fill: theme.palette.text.onLightLowContrast,
-      },
-    },
     '&:hover': {
       backgroundColor: theme.palette.grey.light,
       border: `2px solid ${theme.palette.grey.light}`,
@@ -31,23 +25,17 @@ export const NavBarButton = withStyles((theme) => ({
       border: `2px solid ${theme.palette.grey.light}`,
       backgroundColor: theme.palette.grey.light,
       color: theme.palette.text.onLight,
-      '& .MuiSvgIcon-colorPrimary': {
-        color: theme.palette.text.onLight,
-        '& > *:first-child': {
-          borderColor: theme.palette.blue[5],
-          fill: theme.palette.blue[3],
-          fillOpacity: '0.24',
-        },
+      '& .MuiSvgIcon-root > *[fill="#F0F1F2"]': {
+        fill: theme.palette.blue[3],
+        fillOpacity: '0.24',
       },
     },
     label: { fontWeight: 700 },
   },
   iconSizeLarge: {
+    // override Mui selector
     '& > *:first-child': {
-      fontSize: '2rem', // small/medium/large for icons is 16px/24px/32px
-      '&.MuiSvgIcon-fontSizeLarge': {
-        fontSize: '2rem',
-      },
+      fontSize: '2rem',
     },
   },
   disabled: {
@@ -56,12 +44,6 @@ export const NavBarButton = withStyles((theme) => ({
       color: theme.palette.grey.dark,
       backgroundColor: 'transparent',
       borderColor: 'transparent',
-      '& .MuiSvgIcon-colorPrimary': {
-        color: theme.palette.grey.dark,
-        '& > *:first-child': {
-          color: theme.palette.grey.dark,
-        },
-      },
     },
   },
   focusVisible: {

libs/spark/src/SvgIcon.tsx

@@ -4,24 +4,59 @@ import { palette } from './styles/palette';
 import clsx from 'clsx';
 import { capitalize } from './utils';
 
-export interface SvgIconProps extends MuiSvgIconProps {
+export interface SvgIconProps extends Omit<MuiSvgIconProps, 'color'> {
   contrast?: 'high' | 'low';
+  color?:
+    | 'inherit'
+    | 'onLight'
+    | 'onDark'
+    | 'disabled'
+    | 'error'
+    | 'success'
+    | 'warning'
+    | 'info'
+    | 'white';
 }
 
-export const MuiSvgIconDefaultProps = {
-  color: 'primary' as const,
-};
+export const MuiSvgIconDefaultProps = {};
 
+// :NOTE: Duotone fill selector is & > *[fill="#F0F1F2"]
 export const MuiSvgIconStyleOverrides = {
   root: {
-    // fontSizeDefault
+    // fontSizeDefault/Medium
     fontSize: '1.5rem', // 24px
-    '&.SparkSvgIcon-contrastHigh': {
-      opacity: 0.72,
-    },
+    // contrastHigh is `opacity: 1` which is just the default CSS value
     '&.SparkSvgIcon-contrastLow': {
       opacity: 0.72,
     },
+    // custom colors
+    '&.SparkSvgIcon-colorSuccess': {
+      color: palette.green[2],
+      '& > *[fill="#F0F1F2"]': {
+        fill: palette.green[1],
+        opacity: 0.72,
+      },
+    },
+    '&.SparkSvgIcon-colorWarning': {
+      color: palette.yellow[2],
+      '& > *[fill="#F0F1F2"]': {
+        fill: palette.yellow[1],
+        opacity: 0.72,
+      },
+    },
+    '&.SparkSvgIcon-colorInfo': {
+      color: palette.blue[2],
+      '& > *[fill="#F0F1F2"]': {
+        fill: palette.blue[1],
+        opacity: 0.72,
+      },
+    },
+    '&.SparkSvgIcon-colorWhite': {
+      color: palette.common.white,
+      '& > *[fill="#F0F1F2"]': {
+        opacity: 0.72,
+      },
+    },
   },
   fontSizeSmall: {
     fontSize: '1rem', // 16px
@@ -34,23 +69,56 @@ export const MuiSvgIconStyleOverrides = {
   },
   colorSecondary: {
     color: palette.text.onDark,
+    '& > *[fill="#F0F1F2"]': {
+      opacity: 0.72,
+    },
+  },
+  colorError: {
+    color: palette.red[2],
+    '& > *[fill="#F0F1F2"]': {
+      fill: palette.red[1],
+      opacity: 0.72,
+    },
   },
 };
 
-function SparkSvgIcon({
-  contrast = 'high',
-  className,
-  ...other
-}: SvgIconProps) {
+const SparkSvgIcon = React.forwardRef(function SparkSvgIcon(
+  { contrast = 'high', color = 'inherit', className, ...other }: SvgIconProps,
+  ref: React.ForwardedRef<SVGSVGElement>
+) {
+  let muiColor;
+  let sparkColor = 'inherit';
+  if (color === 'onLight') {
+    muiColor = 'primary';
+  } else if (color === 'onDark') {
+    muiColor = 'secondary';
+  } else if (color === 'success') {
+    sparkColor = 'success';
+    muiColor = 'inherit';
+  } else if (color === 'warning') {
+    sparkColor = 'warning';
+    muiColor = 'inherit';
+  } else if (color === 'info') {
+    sparkColor = 'info';
+    muiColor = 'inherit';
+  } else if (color === 'white') {
+    sparkColor = 'white';
+    muiColor = 'inherit';
+  } else {
+    muiColor = color;
+  }
+
   return (
     <SvgIcon
-      className={clsx(
-        className,
-        `SparkSvgIcon-contrast${capitalize(contrast)}`
-      )}
+      color={muiColor}
+      className={clsx(className, {
+        [`SparkSvgIcon-contrast${capitalize(contrast)}`]: contrast !== 'high',
+        [`SparkSvgIcon-color${capitalize(sparkColor)}`]:
+          sparkColor !== 'inherit',
+      })}
       {...other}
     />
   );
-}
+});
 
 export { SparkSvgIcon as SvgIcon };

libs/spark/stories/icons.stories.tsx

@@ -77,7 +77,7 @@ const Template: Story<NavBarProps> = (args) => (
         0
       </InboxNavBarButton>
       <UserMenu>
-        <UserDuotone fontSize="large" />
+        <UserDuotone color="onLight" fontSize="large" />
       </UserMenu>
     </CustomToolbar>
   </NavBar>