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, "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 ( + + + Some very long text to truncate + + + ); +}; + export const Customization: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return (