diff --git a/apps/scandic-web/components/TempDesignSystem/Button/button.module.css b/apps/scandic-web/components/TempDesignSystem/Button/button.module.css index 2b9df3319..291e14f31 100644 --- a/apps/scandic-web/components/TempDesignSystem/Button/button.module.css +++ b/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, diff --git a/apps/scandic-web/components/TempDesignSystem/Button/index.tsx b/apps/scandic-web/components/TempDesignSystem/Button/index.tsx index 88f20ec16..83e3ebe99 100644 --- a/apps/scandic-web/components/TempDesignSystem/Button/index.tsx +++ b/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 {child} - } - 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 ( - - {/* @ts-expect-error: Incorrect types for Slot */} - {wrappedChildren} - - ) + return } const { asChild, onClick, disabled, ...racProps } = restProps @@ -66,8 +43,6 @@ export default function Button(props: ButtonProps) { isDisabled={disabled} onPress={onClick} {...racProps} - > - {wrappedChildren} - + /> ) } diff --git a/apps/scandic-web/components/TempDesignSystem/Link/index.tsx b/apps/scandic-web/components/TempDesignSystem/Link/index.tsx index 76fd06814..931b4594c 100644 --- a/apps/scandic-web/components/TempDesignSystem/Link/index.tsx +++ b/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 {child} - } - 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 ? ( - {wrappedChildren} - + /> ) : ( - {wrappedChildren} - + /> ) } diff --git a/apps/scandic-web/components/TempDesignSystem/Link/link.module.css b/apps/scandic-web/components/TempDesignSystem/Link/link.module.css index fa8f8607a..10ce6991d 100644 --- a/apps/scandic-web/components/TempDesignSystem/Link/link.module.css +++ b/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 { diff --git a/packages/design-system/.storybook/preview.tsx b/packages/design-system/.storybook/preview.tsx index 04e495227..1869fabcb 100644 --- a/packages/design-system/.storybook/preview.tsx +++ b/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' diff --git a/packages/design-system/lib/components/Button/Button.stories.tsx b/packages/design-system/lib/components/Button/Button.stories.tsx index 41fc059f1..5ce8d78c2 100644 --- a/packages/design-system/lib/components/Button/Button.stories.tsx +++ b/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 = { title: 'Components/Button', @@ -150,15 +149,3 @@ export const TextSmall: Story = { size: 'Small', }, } - -export const TextWithIcon: Story = { - args: { - ...TextDefault.args, - children: ( - <> - - Add room - - ), - }, -} diff --git a/packages/design-system/lib/components/Button/button.module.css b/packages/design-system/lib/components/Button/button.module.css index 926c4bbdc..cdd1ef50e 100644 --- a/packages/design-system/lib/components/Button/button.module.css +++ b/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;