From 5d7d3ea1529522eff3db6be39a30418468e62162 Mon Sep 17 00:00:00 2001 From: Antonio Ereiz Date: Mon, 15 Sep 2025 22:35:29 +0200 Subject: [PATCH 1/3] add wrapLongLines option to CodeSnippet Signed-off-by: Antonio Ereiz --- .../src/components/CodeSnippet/CodeSnippet.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index 8c31bc4e6d..e79dc07ad3 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -57,6 +57,14 @@ export interface CodeSnippetProps { * Array of line numbers to highlight */ highlightedNumbers?: number[]; + /** + * Whether to style the `` block with `white-space: pre-wrap` or `white-space: pre` + * + * @remarks + * + * Default: false (`white-space: pre`) + */ + wrapLongLines?: boolean; /** * Custom styles applied to code * @@ -79,6 +87,7 @@ export function CodeSnippet(props: CodeSnippetProps) { language, showLineNumbers = false, highlightedNumbers, + wrapLongLines, customStyle, showCopyCodeButton = false, } = props; @@ -94,6 +103,7 @@ export function CodeSnippet(props: CodeSnippetProps) { style={mode} showLineNumbers={showLineNumbers} wrapLines + wrapLongLines={wrapLongLines} lineNumberStyle={{ color: theme.palette.textVerySubtle }} lineProps={(lineNumber: number) => highlightedNumbers?.includes(lineNumber) From 9110d7b7e465b5c9569b1bc66cc23f34d3414f06 Mon Sep 17 00:00:00 2001 From: Antonio Ereiz Date: Wed, 1 Oct 2025 20:42:46 +0200 Subject: [PATCH 2/3] update api report Signed-off-by: Antonio Ereiz --- packages/core-components/report.api.md | 1 + plugins/catalog-react/report-alpha.api.md | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md index b89b61ac77..bd8363b423 100644 --- a/packages/core-components/report.api.md +++ b/packages/core-components/report.api.md @@ -188,6 +188,7 @@ export interface CodeSnippetProps { showCopyCodeButton?: boolean; showLineNumbers?: boolean; text: string; + wrapLongLines?: boolean; } // Warning: (ae-forgotten-export) The symbol "Props_12" needs to be exported by the entry point index.d.ts diff --git a/plugins/catalog-react/report-alpha.api.md b/plugins/catalog-react/report-alpha.api.md index 30cdd91704..cf28d80c11 100644 --- a/plugins/catalog-react/report-alpha.api.md +++ b/plugins/catalog-react/report-alpha.api.md @@ -92,12 +92,12 @@ export const catalogReactTranslationRef: TranslationRef< readonly 'entityTableColumnTitle.title': 'Title'; readonly 'entityTableColumnTitle.description': 'Description'; readonly 'entityTableColumnTitle.domain': 'Domain'; + readonly 'entityTableColumnTitle.system': 'System'; + readonly 'entityTableColumnTitle.tags': 'Tags'; readonly 'entityTableColumnTitle.namespace': 'Namespace'; readonly 'entityTableColumnTitle.lifecycle': 'Lifecycle'; readonly 'entityTableColumnTitle.owner': 'Owner'; - readonly 'entityTableColumnTitle.system': 'System'; readonly 'entityTableColumnTitle.targets': 'Targets'; - readonly 'entityTableColumnTitle.tags': 'Tags'; } >; @@ -533,8 +533,8 @@ export const EntityTableColumnTitle: ({ translationKey, }: EntityTableColumnTitleProps) => | 'Title' - | 'Domain' | 'System' + | 'Domain' | 'Lifecycle' | 'Namespace' | 'Owner' From f6b49ce93e2009074eb51ebcd801682f1f544ea7 Mon Sep 17 00:00:00 2001 From: Antonio Ereiz Date: Fri, 10 Oct 2025 21:50:46 +0200 Subject: [PATCH 3/3] add changeset Signed-off-by: Antonio Ereiz --- .changeset/spicy-sides-grow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spicy-sides-grow.md diff --git a/.changeset/spicy-sides-grow.md b/.changeset/spicy-sides-grow.md new file mode 100644 index 0000000000..3f44f35866 --- /dev/null +++ b/.changeset/spicy-sides-grow.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +added support for wrapLongLines option in CodeSnippet