Revert "fix(SW-2101): do not apply underline to Material icons inside Link and Button"

This reverts commit 35f9c3aab5.

apps/scandic-web/components/TempDesignSystem/Button/button.module.css

@@ -278,10 +278,7 @@ a.default {
 .baseText:focus,
 .baseText:hover {
   color: var(--Base-Button-Text-On-Fill-Hover);
-
-  & span:not(:global(.material-symbols)) {
-    text-decoration: underline;
-  }
+  text-decoration: underline;
 }
 
 .baseText:disabled {
@@ -300,6 +297,7 @@ a.default {
 .icon.baseText:focus svg *,
 .icon.baseText:hover svg * {
   fill: var(--Base-Button-Text-On-Fill-Hover);
+  text-decoration: underline;
 }
 
 .icon.baseText:disabled svg,

apps/scandic-web/components/TempDesignSystem/Button/index.tsx

@@ -1,29 +1,14 @@
 "use client"
 
 import { Slot } from "@radix-ui/react-slot"
-import { Children, type ReactNode } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 
 import { buttonVariants } from "./variants"
 
 import type { ButtonProps } from "./button"
 
-// We wrap all text nodes to avoid having consumers manually wrap text nodes in spans.
-// This is so that we can better support underline on buttons as Material Symbols
-// are implemented as a font and therefore gets underline. Icons inside buttons
-// should not get an underline.
-function wrapTextNodes(children: ReactNode): ReactNode {
-  return Children.map(children, (child) => {
-    if (typeof child === "string") {
-      return <span>{child}</span>
-    }
-    return child
-  })
-}
-
 export default function Button(props: ButtonProps) {
   const {
-    children,
     className,
     clean,
     intent,
@@ -46,17 +31,9 @@ export default function Button(props: ButtonProps) {
     variant,
   })
 
-  const wrappedChildren =
-    typeof children === "function" ? children : wrapTextNodes(children)
-
   if (restProps.asChild) {
     const { asChild, ...slotProps } = restProps
-    return (
-      <Slot className={classNames} {...slotProps}>
-        {/* @ts-expect-error: Incorrect types for Slot */}
-        {wrappedChildren}
-      </Slot>
-    )
+    return <Slot className={classNames} {...slotProps} />
   }
 
   const { asChild, onClick, disabled, ...racProps } = restProps
@@ -66,8 +43,6 @@ export default function Button(props: ButtonProps) {
       isDisabled={disabled}
       onPress={onClick}
       {...racProps}
-    >
-      {wrappedChildren}
-    </ButtonRAC>
+    />
   )
 }

apps/scandic-web/components/TempDesignSystem/Link/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import NextLink from "next/link"
 import { usePathname, useSearchParams } from "next/navigation"
-import { Children, type ReactNode, useCallback, useMemo } from "react"
+import { useCallback, useMemo } from "react"
 
 import { useCheckIfExternalLink } from "@/hooks/useCheckIfExternalLink"
 import { trackClick } from "@/utils/tracking"
@@ -10,21 +10,7 @@ import { linkVariants } from "./variants"
 
 import type { LinkProps } from "./link"
 
-// We wrap all text nodes to avoid having consumers manually wrap text nodes in spans.
-// This is so that we can better support underline on links as Material Symbols
-// are implemented as a font and therefore gets underline. Icons inside links
-// should not get an underline.
-function wrapTextNodes(children: ReactNode): ReactNode {
-  return Children.map(children, (child) => {
-    if (typeof child === "string") {
-      return <span>{child}</span>
-    }
-    return child
-  })
-}
-
 export default function Link({
-  children,
   active,
   className,
   color,
@@ -110,9 +96,6 @@ export default function Link({
     className: classNames,
   }
 
-  const wrappedChildren =
-    typeof children === "function" ? children : wrapTextNodes(children)
-
   return isExternal ? (
     <a
       {...linkProps}
@@ -122,9 +105,7 @@ export default function Link({
           onClick(e)
         }
       }}
-    >
-      {wrappedChildren}
-    </a>
+    />
   ) : (
     <NextLink
       scroll={scroll}
@@ -140,8 +121,6 @@ export default function Link({
       id={trackingId}
       {...props}
       {...linkProps}
-    >
-      {wrappedChildren}
-    </NextLink>
+    />
   )
 }

apps/scandic-web/components/TempDesignSystem/Link/link.module.css

@@ -43,10 +43,7 @@
   font-weight: var(--typography-Body-Underline-fontWeight);
   letter-spacing: var(--typography-Body-Underline-letterSpacing);
   line-height: var(--typography-Body-Underline-lineHeight);
-
-  & span:not(:global(.material-symbols)) {
-    text-decoration: underline;
-  }
+  text-decoration: underline;
 }
 
 .myPageMobileDropdown {