From 7425eceb892b15becce4ed5da13e79045c3cfb63 Mon Sep 17 00:00:00 2001
From: Shoaib Ahmed <ashoaib540918@gmail.com>
Date: Wed, 16 Oct 2024 22:46:02 +0530
Subject: [PATCH] [Inline Code]: Update children prop (#4109)

* feat(inline-code): update children prop

* feat(inline-code): add changeset

* feat(inline-code): update changeset

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .changeset/spicy-badgers-double.md                    |  6 ++++++
 .../components/inline-code/src/InlineCode.tsx         |  2 +-
 .../components/inline-code/stories/index.stories.tsx  | 11 +++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/spicy-badgers-double.md

diff --git a/.changeset/spicy-badgers-double.md b/.changeset/spicy-badgers-double.md
new file mode 100644
index 0000000000..1b3447870f
--- /dev/null
+++ b/.changeset/spicy-badgers-double.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/inline-code": patch
+"@twilio-paste/core": patch
+---
+
+[Inline Code]: Update children prop to accept `React.ReactNode` instead of `string`
diff --git a/packages/paste-core/components/inline-code/src/InlineCode.tsx b/packages/paste-core/components/inline-code/src/InlineCode.tsx
index 02d8c7cbd3..69ab5a341c 100644
--- a/packages/paste-core/components/inline-code/src/InlineCode.tsx
+++ b/packages/paste-core/components/inline-code/src/InlineCode.tsx
@@ -10,7 +10,7 @@ import * as React from "react";
 type InlineCodeVariants = "default" | "minimal";
 
 export interface InlineCodeProps extends Partial<Omit<HTMLPasteProps<"div">, "children">> {
-  children: string;
+  children: React.ReactNode;
   /**
    * Overrides the default element name to apply unique styles with the Customization Provider.
    *
diff --git a/packages/paste-core/components/inline-code/stories/index.stories.tsx b/packages/paste-core/components/inline-code/stories/index.stories.tsx
index 6ea2fe35e5..a50842338c 100644
--- a/packages/paste-core/components/inline-code/stories/index.stories.tsx
+++ b/packages/paste-core/components/inline-code/stories/index.stories.tsx
@@ -5,6 +5,7 @@ import { Heading } from "@twilio-paste/heading";
 import { Stack } from "@twilio-paste/stack";
 import { Text } from "@twilio-paste/text";
 import { useTheme } from "@twilio-paste/theme";
+import { Truncate } from "@twilio-paste/truncate";
 import * as React from "react";
 
 import { InlineCode } from "../src";
@@ -94,6 +95,16 @@ export const DisplayingAPIKey: StoryFn = () => {
   );
 };
 
+export const WithTruncate: StoryFn = () => {
+  return (
+    <Box maxWidth="size20">
+      <InlineCode>
+        <Truncate title="Some very long text to truncate">Some very long text to truncate</Truncate>
+      </InlineCode>
+    </Box>
+  );
+};
+
 export const Customization: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
   const currentTheme = useTheme();
   return (