[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

@@ -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`

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.
  *

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 (