DOP-5114: Force inline literals to wrap (#1343)

Author: mmeigs

src/components/Literal.js

@@ -17,6 +17,11 @@ const inlineCodeStyling = css`
   }
 `;
 
+const wordWrapStyle = css`
+  word-wrap: break-word;
+  white-space: unset;
+`;
+
 const StyledNavigationInlineCode = styled('code')`
   /* Used for Literals that don't need LeafyGreen's InlineCode component */
   font-family: 'Source Code Pro';
@@ -28,7 +33,7 @@ const Literal = ({ nodeData: { children }, formatTextOptions }) => {
   const CurrInlineCode = navigationStyle ? StyledNavigationInlineCode : InlineCode;
 
   return (
-    <CurrInlineCode className={cx(navigationStyle ? '' : inlineCodeStyling)}>
+    <CurrInlineCode className={cx(navigationStyle ? '' : inlineCodeStyling, wordWrapStyle)}>
       {children.map((node, i) => (
         <ComponentFactory nodeData={node} key={i} />
       ))}

tests/unit/__snapshots__/DefinitionList.test.js.snap

@@ -19,6 +19,8 @@ exports[`DefinitionList renders correctly 1`] = `
   display: inline;
   color: var(--font-color-primary);
   background: var(--background-color-secondary);
+  word-wrap: break-word;
+  white-space: unset;
 }
 
 .lg-ui-0000:hover>.emotion-0 {

tests/unit/__snapshots__/Field.test.js.snap

@@ -20,6 +20,8 @@ exports[`renders correctly 1`] = `
   display: inline;
   color: var(--font-color-primary);
   background: var(--background-color-secondary);
+  word-wrap: break-word;
+  white-space: unset;
 }
 
 .lg-ui-0000:hover>.emotion-0 {

tests/unit/__snapshots__/FieldList.test.js.snap

@@ -41,6 +41,8 @@ exports[`renders correctly 1`] = `
   display: inline;
   color: var(--font-color-primary);
   background: var(--background-color-secondary);
+  word-wrap: break-word;
+  white-space: unset;
 }
 
 .lg-ui-0000:hover>.emotion-3 {

tests/unit/__snapshots__/Line.test.js.snap

@@ -29,6 +29,8 @@ exports[`renders correctly 1`] = `
   display: inline;
   color: var(--font-color-primary);
   background: var(--background-color-secondary);
+  word-wrap: break-word;
+  white-space: unset;
 }
 
 .lg-ui-0000:hover>.emotion-0 {

tests/unit/__snapshots__/Literal.test.js.snap

@@ -19,6 +19,8 @@ exports[`renders correctly 1`] = `
   display: inline;
   color: var(--font-color-primary);
   background: var(--background-color-secondary);
+  word-wrap: break-word;
+  white-space: unset;
 }
 
 .lg-ui-0000:hover>.emotion-0 {

tests/unit/__snapshots__/Target.test.js.snap

@@ -19,6 +19,8 @@ exports[`renders correctly with a directive_argument node 1`] = `
   display: inline;
   color: var(--font-color-primary);
   background: var(--background-color-secondary);
+  word-wrap: break-word;
+  white-space: unset;
 }
 
 .lg-ui-0000:hover>.emotion-0 {

tests/unit/__snapshots__/VersionModified.test.js.snap

@@ -19,6 +19,8 @@ exports[`when rendering a deprecated directive with 0 arguments renders correctl
   display: inline;
   color: var(--font-color-primary);
   background: var(--background-color-secondary);
+  word-wrap: break-word;
+  white-space: unset;
 }
 
 .lg-ui-0000:hover>.emotion-0 {