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);
-
+  text-decoration: underline;
-  & span:not(:global(.material-symbols)) {
-    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 (
+    return <Slot className={classNames} {...slotProps} />
-      <Slot className={classNames} {...slotProps}>
-        {/* @ts-expect-error: Incorrect types for Slot */}
-        {wrappedChildren}
-      </Slot>
-    )
   }
 
   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);
-
+  text-decoration: underline;
-  & span:not(:global(.material-symbols)) {
-    text-decoration: underline;
-  }
 }
 
 .myPageMobileDropdown {

packages/design-system/.storybook/preview.tsx

@@ -2,8 +2,6 @@ import { withThemeByClassName } from '@storybook/addon-themes'
 
 import type { Preview, ReactRenderer } from '@storybook/react'
 
-import 'react-material-symbols/rounded'
-
 import '../lib/style.css'
 import '../lib/fonts.css'
 

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -5,7 +5,6 @@ import { fn } from '@storybook/test'
 import { Button } from './Button'
 import { config as buttonConfig } from './variants'
 import { config as typographyConfig } from '../Typography/variants'
-import { MaterialIcon } from '../Icons'
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
@@ -150,15 +149,3 @@ export const TextSmall: Story = {
     size: 'Small',
   },
 }
-
-export const TextWithIcon: Story = {
-  args: {
-    ...TextDefault.args,
-    children: (
-      <>
-        <MaterialIcon icon="add" color="CurrentColor" />
-        <span>Add room</span>
-      </>
-    ),
-  },
-}

packages/design-system/lib/components/Button/button.module.css

@@ -82,10 +82,6 @@
   padding: var(--Space-x15) 0;
 }
 
-.variant-text:hover span:not(:global(.material-symbols)) {
-  text-decoration: underline;
-}
-
 .variant-icon {
   background-color: transparent;
   border-color: transparent;