fix(Snippet): indentation not working (#5534)

Author: matthprost

.changeset/sour-ways-scream.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Snippet />` to preserve indentation

packages/ui/src/components/Snippet/__stories__/Indented.stories.tsx

@@ -0,0 +1,27 @@
+import { Template } from './Template.stories'
+
+export const Indented = Template.bind({})
+
+Indented.args = {
+  children: `{
+  "name": "John Doe",
+  "age": 30,
+  "email": "[email protected]",
+  "isActive": true,
+  "roles": ["admin", "user"],
+  "address": {
+    "street": "123 Main St",
+    "city": "Metropolis",
+    "zip": "12345"
+  }
+}`,
+}
+
+Indented.parameters = {
+  docs: {
+    description: {
+      story:
+        'If you add indentation to the code snippet, it will be preserved.',
+    },
+  },
+}

packages/ui/src/components/Snippet/__stories__/index.stories.tsx

@@ -23,3 +23,4 @@ export { LongMultilineExpanded } from './LongMultilineExpanded.stories'
 export { Prefixes } from './Prefixes.stories'
 export { Rows } from './Rows.stories'
 export { NoExpandable } from './NoExpandable.stories'
+export { Indented } from './Indented.stories'

packages/ui/src/components/Snippet/__tests__/__snapshots__/index.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`snippet > renders correctly 1`] = `
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -156,6 +157,7 @@ exports[`snippet > renders correctly in multiline  1`] = `
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -382,6 +384,7 @@ exports[`snippet > renders correctly in multiline with prefix command 1`] = `
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -623,6 +626,7 @@ exports[`snippet > renders correctly in multiline with prefix lines number 1`] =
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -855,6 +859,7 @@ exports[`snippet > renders correctly with copiedText 1`] = `
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -968,6 +973,7 @@ exports[`snippet > renders correctly with copyText 1`] = `
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -1112,6 +1118,7 @@ exports[`snippet > renders correctly with custom number of rows 1`] = `
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -1126,6 +1133,7 @@ exports[`snippet > renders correctly with custom number of rows 1`] = `
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -1292,6 +1300,7 @@ exports[`snippet > renders correctly with hideText 1`] = `
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -1557,6 +1566,7 @@ exports[`snippet > renders correctly with initiallyExpanded 1`] = `
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -1571,6 +1581,7 @@ exports[`snippet > renders correctly with initiallyExpanded 1`] = `
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -1842,6 +1853,7 @@ exports[`snippet > renders correctly with noExpandable 1`] = `
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -1856,6 +1868,7 @@ exports[`snippet > renders correctly with noExpandable 1`] = `
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -2061,6 +2074,7 @@ exports[`snippet > renders correctly with showText 1`] = `
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -2075,6 +2089,7 @@ exports[`snippet > renders correctly with showText 1`] = `
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -2340,6 +2355,7 @@ exports[`snippet > renders correctly with single line with prefix command 1`] =
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -2468,6 +2484,7 @@ exports[`snippet > renders correctly with single line with prefix lines number 1
 
 .emotion-6 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-6:not([data-multiline]):after {
@@ -2646,6 +2663,7 @@ exports[`snippet > should click on extend button to display full content on  1`]
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {
@@ -2660,6 +2678,7 @@ exports[`snippet > should click on extend button to display full content on  1`]
 
 .emotion-8 {
   display: block;
+  white-space: pre;
 }
 
 .emotion-8:not([data-multiline]):after {

packages/ui/src/components/Snippet/index.tsx

@@ -46,7 +46,7 @@ const StyledSpan = styled('span', {
     !['linePrefix', 'multiline', 'prefix'].includes(prop),
 })<{ linePrefix?: string; multiline?: boolean; prefix?: Prefixes }>`
   display: block;
-
+  white-space: pre;
 
   &:not([data-multiline]):after {
     content: "";