fix(DrawerList): ensure links do wrap to new line (#2700)

Closes #2698
dnbexperience · Sep 29, 2023 · c994df4 · c994df4
1 parent bad7129
commit c994df4
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx b/...ges/dnb-design-system-portal/src/docs/uilib/components/fragments/drawer-list/Examples.tsx
@@ -74,6 +74,14 @@ export const DrawerListExampleOnlyToVisualize = () => (
               <span className="dnb-drawer-list__option__item item-nr-1">
                 <NumberFormat ban>11345678962</NumberFormat>
               </span>
+              <span className="dnb-drawer-list__option__item item-nr-2">
+                <a
+                  className="dnb-anchor dnb-anchor--has-icon"
+                  href="/uilib/components/fragments/drawer-list/"
+                >
+                  Long link that will wrap over several lines
+                </a>
+              </span>
               <span className="dnb-drawer-list__option__item">
                 Feriekonto - Kari Nordmann med et kjempelangt etternavnsen
               </span>

diff --git a/..._/__image_snapshots__/drawerlist-have-to-match-the-default-drawer-list.snap.png b/..._/__image_snapshots__/drawerlist-have-to-match-the-default-drawer-list.snap.png
diff --git a/...es/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap b/...es/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap
@@ -169,7 +169,6 @@ html[data-visual-test] .dnb-drawer-list--scroll .dnb-drawer-list__options, .dnb-
   display: inline-block;
   margin-right: 0.5rem;
   word-break: break-word;
-  white-space: nowrap;
   font-size: inherit;
 }
 @media screen and (min-width: 40em) {

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss
@@ -220,7 +220,6 @@
         display: inline-block;
         margin-right: 0.5rem;
         word-break: break-word;
-        white-space: nowrap;
 
         font-size: inherit;
       }