fix: makes productIcon optional in ProductSwitcherItem (#4359)

* fix: makes productIcon optional in ProductSwitcherItem

* fix: removes customizationprovider from story

* Update .changeset/great-frogs-grin.md

Co-authored-by: krisantrobus <55083528+krisantrobus@users.noreply.github.com>

* fix(ci): fix failing ci checks

* fix(ci): fix failing ci checks

---------

Co-authored-by: krisantrobus <55083528+krisantrobus@users.noreply.github.com>
Co-authored-by: Kristian Antrobus <kantrobus@twilio.com>

Author: simpixelated

.changeset/great-frogs-grin.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/product-switcher": patch
+"@twilio-paste/core": patch
+---
+
+[ProductSwitcherItem] made productIcon optional

packages/paste-core/components/product-switcher/__tests__/ProductSwitcher.spec.tsx

@@ -1,7 +1,11 @@
 import { act, render, screen } from "@testing-library/react";
 import * as React from "react";
 
-import { CustomElementName, DefaultElementName } from "../stories/ProductSwitcher.customization.stories";
+import {
+  CustomElementName,
+  DefaultElementName,
+  WithoutProductIcons,
+} from "../stories/ProductSwitcher.customization.stories";
 import { ProductSwitcherMenu } from "../stories/ProductSwitcher.stories";
 
 describe("ProductSwitcher", () => {
@@ -64,3 +68,21 @@ describe("ProductSwitcher", () => {
     });
   });
 });
+describe("customization of productIcon", () => {
+  it("should render product icon if set", async () => {
+    await act(async () => {
+      render(<DefaultElementName />);
+    });
+    const menuItem = screen.getByRole("menuitemradio", { name: "Twilio SMS, Voice & Video" });
+    const imgChildren = Array.from(menuItem.querySelectorAll('[role="img"]'));
+    expect(imgChildren).toHaveLength(2);
+  });
+  it("should not render product icon if none is set", async () => {
+    await act(async () => {
+      render(<WithoutProductIcons />);
+    });
+    const menuItem = screen.getByRole("menuitemradio", { name: "Twilio SMS, Voice & Video" });
+    const imgChildren = Array.from(menuItem.querySelectorAll('[role="img"]'));
+    expect(imgChildren).toHaveLength(1);
+  });
+});

packages/paste-core/components/product-switcher/src/ProductSwitcherItem.tsx

@@ -24,10 +24,10 @@ export interface ProductSwitcherItemProps extends Omit<MenuItemRadioProps, "vari
    * Icon to use for the ProductSwitcherItem. Use a Paste Icon.
    *
    * @default 'PRODUCT_SWITCHER_ITEM'
-   * @type {NonNullable<React.ReactNode>}
+   * @type {React.ReactNode}
    * @memberof ProductSwitcherItemProps
    */
-  productIcon: NonNullable<React.ReactNode>;
+  productIcon?: React.ReactNode;
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider.
    *
@@ -43,7 +43,7 @@ const ProductSwitcherItem = React.forwardRef<HTMLDivElement, ProductSwitcherItem
     return (
       <MenuItemRadio element={element} {...props} ref={ref}>
         <Box display="flex" flexDirection="row" columnGap="space50" alignItems="center">
-          <Box color="colorTextIcon">{productIcon}</Box>
+          {productIcon && <Box color="colorTextIcon">{productIcon}</Box>}
           <Box>
             <Text as="span" display="block">
               {productName}

packages/paste-core/components/product-switcher/stories/ProductSwitcher.customization.stories.tsx

@@ -173,3 +173,75 @@ export const CustomElementName: StoryFn = () => {
     </CustomizationProvider>
   );
 };
+
+export const WithoutProductIcons: StoryFn = () => {
+  const productSwitcher = useProductSwitcherState({ visible: true });
+  const [product, setProduct] = React.useState("twilio");
+  return (
+    <>
+      <ProductSwitcherButton {...productSwitcher} element="FOO" i18nButtonLabel="Switch products" />
+      <ProductSwitcher {...productSwitcher} element="BAR" aria-label="Avaiable accounts">
+        <ProductSwitcherItem
+          {...productSwitcher}
+          element="BAZ"
+          name="product"
+          value="twilio"
+          checked={product === "twilio"}
+          onChange={() => {
+            setProduct("twilio");
+          }}
+          productName="Twilio"
+          productStrapline="SMS, Voice & Video"
+        />
+        <ProductSwitcherItem
+          {...productSwitcher}
+          element="BAZ"
+          name="product"
+          value="segment"
+          checked={product === "segment"}
+          onChange={() => {
+            setProduct("segment");
+          }}
+          productName="Segment"
+          productStrapline="Customer data platform"
+        />
+        <ProductSwitcherItem
+          {...productSwitcher}
+          element="BAZ"
+          name="product"
+          value="flex"
+          checked={product === "flex"}
+          onChange={() => {
+            setProduct("flex");
+          }}
+          productName="Flex"
+          productStrapline="Cloud-based contact center"
+        />
+        <ProductSwitcherItem
+          {...productSwitcher}
+          element="BAZ"
+          name="product"
+          value="sendgrid"
+          checked={product === "sendgrid"}
+          onChange={() => {
+            setProduct("sendgrid");
+          }}
+          productName="SendGrid"
+          productStrapline="Email delivery and API"
+        />
+        <ProductSwitcherItem
+          {...productSwitcher}
+          element="BAZ"
+          name="product"
+          value="admin"
+          checked={product === "admin"}
+          onChange={() => {
+            setProduct("admin");
+          }}
+          productName="Console Admin"
+          productStrapline="Admin center"
+        />
+      </ProductSwitcher>
+    </>
+  );
+};

packages/paste-core/components/product-switcher/type-docs.json

@@ -2026,13 +2026,6 @@
       "externalProp": true,
       "description": "Moves focus to the previous item."
     },
-    "productIcon": {
-      "type": "NonNullable<ReactNode>",
-      "defaultValue": "'PRODUCT_SWITCHER_ITEM'",
-      "required": true,
-      "externalProp": false,
-      "description": "Icon to use for the ProductSwitcherItem. Use a Paste Icon."
-    },
     "productName": {
       "type": "string",
       "defaultValue": null,
@@ -3883,6 +3876,13 @@
       "required": false,
       "externalProp": true
     },
+    "productIcon": {
+      "type": "string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>",
+      "defaultValue": "'PRODUCT_SWITCHER_ITEM'",
+      "required": false,
+      "externalProp": false,
+      "description": "Icon to use for the ProductSwitcherItem. Use a Paste Icon."
+    },
     "property": {
       "type": "string",
       "defaultValue": null,