Merge pull request #818 from IPG-Automotive-UK/bug/nowraptypography-s…

…x-passing-wrong

NoWrapTypography sx prop does not work

package.json

@@ -17,7 +17,7 @@
     "start": "microbundle-crl watch --no-compress --format modern,cjs --jsxFragment React.Fragment",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
-    "storybook:serve:start": "pm2 start ./serve-storybook.js --name storybook",
+    "storybook:serve:start": "pm2 delete storybook -s 2> /dev/null || true && pm2 start ./serve-storybook.js --name storybook",
     "storybook:serve:stop": "pm2 delete storybook",
     "test": "run-s test:unit test:lint test:playwright",
     "test:playwright": "npm run storybook:build && npm run storybook:serve:start && npx playwright test && npm run storybook:serve:stop",

playwright.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
       use: { ...devices["Desktop Safari"] }
     }
   ],
-  reporter: "html",
+  reporter: [["html", { open: "never" }]],
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   testDir: "./src",

src/NoWrapTypography/NoWrapTypography.stories.tsx

@@ -29,10 +29,14 @@ const Template: StoryFn<NoWrapTypographyProps> = props => {
   );
 };
 
-export const Default = {
+export const Default: {
+  args: NoWrapTypographyProps;
+  render: StoryFn<NoWrapTypographyProps>;
+} = {
   args: {
     children: "text that is too long to fit in the box",
-    sx: { fontSize: "18px", maxWidth: "250px" }
+    sx: { maxWidth: "250px" },
+    variant: "body1"
   },
 
   render: Template

src/NoWrapTypography/NoWrapTypography.test.tsx

@@ -0,0 +1,14 @@
+import { describe, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import NoWrapTypography from "./NoWrapTypography";
+import React from "react";
+
+describe("NoWrapTypography", () => {
+  test("can pass 'sx' prop", () => {
+    render(
+      <NoWrapTypography sx={{ color: "red" }}>Some text</NoWrapTypography>
+    );
+    expect(screen.getByText("Some text")).toHaveStyle("color: rgb(255, 0, 0)");
+  });
+});

src/NoWrapTypography/NoWrapTypography.tsx

@@ -33,14 +33,17 @@ export default function NoWrapTypography({
       <Typography
         noWrap
         component="p" // forces a block element
-        sx={{
-          hyphens: "auto",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          wordBreak: "break-all",
+        sx={[
+          {
+            hyphens: "auto",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            wordBreak: "break-all"
+          },
+          // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
           ...(Array.isArray(sx) ? sx : [sx])
-        }}
+        ]}
         variant={variant}
       >
         {children}