feat: Add SVG Icon Props (#726)

* add icon and banner props * better dx * add svgs to everything * combine sdsicon and svgicon, rename prop * fix double icon Co-authored-by: Timmy Huang <[email protected]> * feat(icon): custom svg icon support in sds components Custom svg icon support has been added to all the SDS components that accepted icon in some form Please refer to the PR description about custom svg icon support * refactor(icon): fix prop name * refactor(buttonicon): fix prop name * fix(deprecation): add deprecation notes for the old sdsIcon prop on ButtonIcon and MenuItem --------- Co-authored-by: Timmy Huang <[email protected]> Co-authored-by: Masoud Amjadi <[email protected]>
chanzuckerberg · Feb 5, 2024 · f71236f · f71236f
1 parent 3fc888b
commit f71236f
Show file tree

Hide file tree

Showing 46 changed files with 507 additions and 189 deletions.
diff --git a/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx b/packages/components/src/common/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx
@@ -1,6 +1,8 @@
 // (masoudmanson): The unit tests rely on the content in this file; do not alter it!
 
 import Icon from "../core/Icon";
+import CustomSdsIcon from "./customSdsIcon";
+import CustomSvgIcon from "./customSvgIcon";
 
 export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
   {
@@ -66,57 +68,60 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [
     name: "Column Three",
     options: [
       {
-        name: "Bacteria",
-        sdsIcon: "bacteria",
-        sdsIconProps: {
-          color: "gray",
-        },
+        icon: <CustomSdsIcon sdsSize="s" color="gray" />,
+        name: "Custom SDS Icon",
+        section: "With Icon",
+      },
+      {
+        icon: <CustomSvgIcon sx={{ color: "#999", height: 14, width: 14 }} />,
+        name: "Custom SVG Icon",
+        section: "With Icon",
       },
       {
+        icon: "puzzlePiece",
         name: "Puzzle Piece",
-        sdsIcon: "puzzlePiece",
         sdsIconProps: {
           color: "gray",
         },
       },
       {
         count: 10,
+        icon: "copy",
         name: "Copy",
-        sdsIcon: "copy",
         sdsIconProps: {
           color: "gray",
         },
       },
       {
+        icon: "lightBulb",
         name: "Light Bulb",
-        sdsIcon: "lightBulb",
         sdsIconProps: {
           color: "gray",
         },
       },
       {
         count: 6,
+        icon: "list",
         name: "List",
-        sdsIcon: "list",
         sdsIconProps: {
           color: "gray",
         },
       },
       {
+        icon: "treeVertical",
         name: "Vertical Tree",
-        sdsIcon: "treeVertical",
         sdsIconProps: {
           color: "gray",
         },
       },
       {
+        icon: "link",
         name: "Link",
-        sdsIcon: "link",
         sdsIconProps: {
           color: "gray",
         },
       },
     ],
-    width: 180,
+    width: 190,
   },
 ];
diff --git a/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx b/packages/components/src/common/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx
@@ -1,6 +1,8 @@
 // (masoudmanson): The unit tests rely on the content in this file; do not alter it!
 
 import Tag from "../core/Tag";
+import CustomSdsIcon from "./customSdsIcon";
+import CustomSvgIcon from "./customSvgIcon";
 
 export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
   {
@@ -32,58 +34,61 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [
     section: "name with details",
   },
   {
-    name: "Bacteria",
-    sdsIcon: "bacteria",
-    sdsIconProps: {
-      color: "gray",
-    },
+    icon: <CustomSdsIcon sdsSize="s" color="gray" />,
+    name: "Custom SDS Icon",
+    section: "With Icon",
+  },
+  {
+    icon: <CustomSvgIcon sx={{ color: "#999", height: 14, width: 14 }} />,
+    name: "Custom SVG Icon",
     section: "With Icon",
   },
   {
+    icon: "puzzlePiece",
     name: "Puzzle Piece",
-    sdsIcon: "puzzlePiece",
     sdsIconProps: {
       color: "gray",
+      sdsSize: "xl",
     },
     section: "With Icon",
   },
   {
     count: 10,
+    icon: "copy",
     name: "Copy",
-    sdsIcon: "copy",
     sdsIconProps: {
       color: "gray",
     },
     section: "With Icon",
   },
   {
+    icon: "lightBulb",
     name: "Light Bulb",
-    sdsIcon: "lightBulb",
     sdsIconProps: {
       color: "gray",
     },
     section: "With Icon",
   },
   {
     count: 6,
+    icon: "list",
     name: "List",
-    sdsIcon: "list",
     sdsIconProps: {
       color: "gray",
     },
     section: "With Icon",
   },
   {
+    icon: "treeVertical",
     name: "Vertical Tree",
-    sdsIcon: "treeVertical",
     sdsIconProps: {
       color: "gray",
     },
     section: "With Icon",
   },
   {
+    icon: "link",
     name: "Link",
-    sdsIcon: "link",
     sdsIconProps: {
       color: "gray",
     },

diff --git a/packages/components/src/common/customSdsIcon.tsx b/packages/components/src/common/customSdsIcon.tsx
@@ -0,0 +1,32 @@
+import Icon, { IconProps } from "../core/Icon";
+
+/**
+ * CustomSdsIcon is an Icon component built on top of the core SDS Icon.
+ * This custom component is designed for use in Storybook demos,
+ * allowing easy customization.
+ */
+function CustomSdsIcon(props: {
+  sdsIcon?: IconProps<"bacteria">["sdsIcon"];
+  sdsSize?: IconProps<"bacteria">["sdsSize"];
+  sdsType?: IconProps<"bacteria">["sdsType"];
+  color?: IconProps<"bacteria">["color"];
+}) {
+  const {
+    sdsIcon = "bacteria",
+    sdsSize = "l",
+    sdsType = "static",
+    color = "primary",
+    ...rest
+  } = props;
+  return (
+    <Icon
+      sdsIcon={sdsIcon}
+      sdsSize={sdsSize}
+      sdsType={sdsType}
+      color={color}
+      {...rest}
+    />
+  );
+}
+
+export default CustomSdsIcon;
diff --git a/packages/components/src/common/customSvgIcon.tsx b/packages/components/src/common/customSvgIcon.tsx
@@ -0,0 +1,15 @@
+import { SvgIcon, SvgIconProps } from "@mui/material";
+
+/**
+ * CustomSvgIcon is a component that extends the SvgIcon component from the Material-UI library.
+ * It allows easy usage of custom SVG icons with in the storybook demos.
+ */
+function CustomSvgIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon color="primary" viewBox="2 2 20 20" {...props}>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+
+export default CustomSvgIcon;
diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx b/packages/components/src/core/Accordion/components/AccordionHeader/index.tsx
@@ -1,6 +1,6 @@
 import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
-import Icon from "src/core/Icon";
 import { StyledAccordionHeader, StyledSubtitle } from "./style";
+import Icon from "src/core/Icon";
 
 export interface SdsAccordionHeaderProps {
   subtitle?: string;

diff --git a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
@@ -44,6 +44,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             <button
               aria-label="search-button"
               class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-5z5hxc-MuiButtonBase-root-MuiIconButton-root"
+              icon="search"
               tabindex="0"
               type="button"
             >

diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx
@@ -40,7 +40,7 @@ interface AutocompleteOptionGeneral {
 export interface AutocompleteOptionBasic extends AutocompleteOptionGeneral {
   count?: number; // An optional count associated with the option.
   details?: string; // An optional string for additional details.
-  sdsIcon?: keyof IconNameToSmallSizes; // An optional icon key.
+  icon?: keyof IconNameToSmallSizes | React.ReactElement<CustomSVGProps>; // An optional icon key.
   sdsIconProps?: Partial<IconProps<keyof IconNameToSmallSizes>>; // Optional properties for the associated icon.
 }
 
@@ -227,7 +227,7 @@ const AutocompleteBase = <
                     sdsIconProps={{
                       sdsType: "iconButton",
                     }}
-                    sdsIcon="xMark"
+                    icon="xMark"
                   />
                 )}
                 <ButtonIcon
@@ -237,7 +237,7 @@ const AutocompleteBase = <
                   sdsIconProps={{
                     sdsType: "interactive",
                   }}
-                  sdsIcon="search"
+                  icon="search"
                 />
               </StyledInputAdornment>
             ),
@@ -317,7 +317,7 @@ const AutocompleteBase = <
   ) {
     let MenuItemContent;
 
-    const { component, details, count, sdsIcon, sdsIconProps } = option;
+    const { component, details, count, icon, sdsIconProps } = option;
     const menuItemLabel = getOptionLabel(option);
 
     if (component) {
@@ -339,7 +339,7 @@ const AutocompleteBase = <
       <MenuItem
         column={count}
         disabled={optionProps["aria-disabled"] === true}
-        sdsIcon={sdsIcon}
+        icon={icon}
         sdsIconProps={sdsIconProps}
         isMultiSelect={multiple}
         selected={selected}

diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
@@ -207,7 +207,7 @@ const AutocompleteMultiColumn = <
                     sdsIconProps={{
                       sdsType: "iconButton",
                     }}
-                    sdsIcon="xMark"
+                    icon="xMark"
                     onClick={clearInput}
                   />
                 )}
@@ -218,7 +218,7 @@ const AutocompleteMultiColumn = <
                   sdsIconProps={{
                     sdsType: "interactive",
                   }}
-                  sdsIcon="search"
+                  icon="search"
                 />
               </StyledInputAdornment>
             ),

diff --git a/packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap b/packages/components/src/core/Banner/__snapshots__/banner.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   <button
     aria-label="Close"
     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-co4rz1-MuiButtonBase-root-MuiIconButton-root"
+    icon="xMark"
     tabindex="0"
     type="button"
   >

diff --git a/packages/components/src/core/Banner/index.stories.tsx b/packages/components/src/core/Banner/index.stories.tsx
@@ -1,9 +1,18 @@
 import { styled } from "@mui/material/styles";
 import { Args, Meta } from "@storybook/react";
 import RawBanner from "./index";
+import CustomSdsIcon from "src/common/customSdsIcon";
+import CustomSvgIcon from "src/common/customSvgIcon";
 
 const BANNER_TEXT = "Banner text lorem ipsum dolor mit";
 
+const iconOptions = [
+  "checkCircle",
+  "infoCircle",
+  <CustomSdsIcon key="customSdsIcon" sdsSize="l" />,
+  <CustomSvgIcon key="customSvgIcon" sx={{ height: 22, width: 22 }} />,
+];
+
 const Banner = (props: Args): JSX.Element => {
   const { sdsType, textChild } = props;
   return (
@@ -21,6 +30,24 @@ export default {
     dismissible: {
       control: { type: "boolean" },
     },
+    icon: {
+      control: {
+        labels: [
+          "SDS Icon: Check Circle",
+          "SDS Icon: Info Circle",
+          "Custom SDS Icon",
+          "Custom SVG Icon",
+        ],
+        type: "select",
+      },
+      mapping: iconOptions,
+      options: Object.keys(iconOptions),
+    },
+    sdsIconProps: {
+      control: {
+        type: "object",
+      },
+    },
     sdsType: {
       control: { type: "radio" },
       options: ["primary", "secondary"],