fix: makes productIcon optional in ProductSwitcherItem

.changeset/great-frogs-grin.md

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

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

@@ -1,7 +1,7 @@
 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 +64,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,81 @@ export const CustomElementName: StoryFn = () => {
     </CustomizationProvider>
   );
 };
+
+export const WithoutProductIcons: StoryFn = () => {
+  const productSwitcher = useProductSwitcherState({ visible: true });
+  const [product, setProduct] = React.useState("twilio");
+  return (
+    <CustomizationProvider
+      elements={{
+        FOO: { backgroundColor: "colorBackgroundPrimary", color: "colorTextWeakest" },
+        BAR: { borderColor: "colorBorderDestructiveStrong" },
+        BAZ: { textDecoration: "underline" },
+      }}
+    >
+      <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>
+    </CustomizationProvider>
+  );
+};