fix: issue with long inline links not breaking (#3232)

db-ui · Sep 25, 2024 · 1827bb7 · 1827bb7
1 parent 06e49bb
commit 1827bb7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/components/src/styles/_link-components.scss b/packages/components/src/styles/_link-components.scss
@@ -40,7 +40,14 @@
 	// TODO: We should evaluate whether we could move this declaration to the @font-face declarations even already
 	text-underline-position: from-font;
 	text-decoration-thickness: helpers.px-to-rem($pxValue: 1);
-	white-space: nowrap;
+
+	&:not([data-variant="inline"]) {
+		white-space: nowrap;
+	}
+
+	&[data-variant="inline"] {
+		display: inline;
+	}
 
 	&:focus-visible {
 		border-radius: variables.$db-border-radius-xs;

diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
@@ -16,7 +16,8 @@ import {
 	DBTabItem,
 	DBTag,
 	DBTextarea,
-	DBTooltip
+	DBTooltip,
+	DBLink
 } from '../../../../../output/react/src';
 import type {
 	ChangeEvent,
@@ -273,6 +274,28 @@ const FormComponent = () => {
 
 				<DBDivider />
 
+				<p>
+					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+					diam nonumy eirmod tempor{' '}
+					<DBLink variant="inline" href="#">
+						invidunt
+					</DBLink>{' '}
+					ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+					ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+					sadipscing elitr, sed diam nonumy eirmod tempor{' '}
+					<DBLink variant="inline" href="#">
+						labore et dolore magna aliquyam erat, sed diam voluptua.
+						At vero eos et accusam et justo duo dolores et ea rebum.
+						Stet
+					</DBLink>{' '}
+					ut labore et dolore magna aliquyam erat, sed diam voluptua.
+					At vero eos et accusam et justo duo dolores et ea rebum.
+					Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+					ipsum dolor sit amet.
+				</p>
+
 				<DBButton
 					onClick={() => {
 						setTabsTest(!tabsTest);