From 30b49b1d717f151bdab69033dd4e97e70f2d32e1 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Thu, 23 Feb 2023 11:32:46 -0600
Subject: [PATCH] fix(link): ensure inline prop allows text wrapping (#13183)

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../react/src/components/Link/Link.stories.js | 22 +++++++++++++++++++
 .../styles/scss/components/link/_link.scss    |  1 +
 2 files changed, 23 insertions(+)

diff --git a/packages/react/src/components/Link/Link.stories.js b/packages/react/src/components/Link/Link.stories.js
index 8d07b32017a9..d7a474fc7838 100644
--- a/packages/react/src/components/Link/Link.stories.js
+++ b/packages/react/src/components/Link/Link.stories.js
@@ -39,6 +39,28 @@ export default {
 
 export const Default = () => <Link href="#">Link</Link>;
 
+export const Inline = () => (
+  <>
+    <Link inline href="#">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </Link>
+    <p>
+      Ut facilisis semper lorem in aliquet. Aliquam accumsan ante justo, vitae
+      fringilla eros vehicula id. Ut at enim quis libero pharetra ullamcorper.
+      Maecenas feugiat sodales arcu ut porttitor. In blandit ultricies est.
+      Vivamus risus massa, cursus eu tellus sed, sagittis commodo nunc.{' '}
+      <Link inline href="#">
+        Maecenas nunc mauris, consequat quis mauris sit amet
+      </Link>
+      , finibus suscipit nunc. Phasellus ex quam, placerat quis tempus sit amet,
+      pretium nec sem. Etiam dictum scelerisque mauris, blandit ultrices erat
+      pellentesque id. Quisque venenatis purus sit amet sodales condimentum.
+      Duis at tincidunt orci. Ut velit ipsum, lacinia at ex quis, aliquet
+      rhoncus purus. Praesent et scelerisque ligula.
+    </p>
+  </>
+);
+
 export const PairedWithIcon = () => (
   <Link href="#" renderIcon={Download}>
     Download
diff --git a/packages/styles/scss/components/link/_link.scss b/packages/styles/scss/components/link/_link.scss
index de42f693580f..bfe79f5a33f5 100644
--- a/packages/styles/scss/components/link/_link.scss
+++ b/packages/styles/scss/components/link/_link.scss
@@ -85,6 +85,7 @@ $link-focus-text-color: custom-property.get-var(
   }
 
   .#{$prefix}--link.#{$prefix}--link--inline {
+    display: inline;
     text-decoration: underline;
 
     &:focus,