Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Inline Code]: Update children prop #4109

Merged
merged 4 commits into from
Oct 16, 2024
Merged

[Inline Code]: Update children prop #4109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
733fe9f
feat(inline-code): update children prop
PixeledCode Oct 16, 2024
0a76d9c
feat(inline-code): add changeset
PixeledCode Oct 16, 2024
9355ae1
feat(inline-code): update changeset
PixeledCode Oct 16, 2024
155fd38
Merge branch 'main' into truncate-inline
kodiakhq[bot] Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/spicy-badgers-double.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`
2 changes: 1 addition & 1 deletion packages/paste-core/components/inline-code/src/InlineCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
11 changes: 11 additions & 0 deletions packages/paste-core/components/inline-code/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -94,6 +95,16 @@ export const DisplayingAPIKey: StoryFn = () => {
);
};

export const WithTruncate: StoryFn = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: could you also add a story with a truncated inline code within a block of regular paragraph text?

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 (
Expand Down
Loading