Merged in fix/ref-errors-typography (pull request #2240)

fix: rendering errors when applying components to children that are already applying to children

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra
This commit is contained in:
Christian Andolf
2025-06-02 08:36:02 +00:00
3 changed files with 13 additions and 16 deletions

View File

@@ -5,6 +5,7 @@ import { DayPicker } from "react-day-picker"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Lang } from "@/constants/languages" import { Lang } from "@/constants/languages"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
@@ -12,7 +13,6 @@ import { dt } from "@/lib/dt"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import { locales } from "../locales" import { locales } from "../locales"
@@ -123,9 +123,9 @@ export default function DatePickerRangeDesktop({
MonthCaption(props) { MonthCaption(props) {
return ( return (
<div className={props.className}> <div className={props.className}>
<Subtitle asChild type="two"> <Typography variant="Title/Subtitle/md">
{props.children} <h3>{props.children}</h3>
</Subtitle> </Typography>
</div> </div>
) )
}, },

View File

@@ -3,13 +3,13 @@ import { DayPicker } from "react-day-picker"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Lang } from "@/constants/languages" import { Lang } from "@/constants/languages"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import { locales } from "../locales" import { locales } from "../locales"
@@ -86,9 +86,9 @@ export default function DatePickerRangeMobile({
MonthCaption(props) { MonthCaption(props) {
return ( return (
<div className={props.className}> <div className={props.className}>
<Subtitle asChild type="two"> <Typography variant="Title/Subtitle/md">
{props.children} <h3>{props.children}</h3>
</Subtitle> </Typography>
</div> </div>
) )
}, },

View File

@@ -8,7 +8,6 @@ import { getHeader } from "@/lib/trpc/memoizedRequests"
import { IconName } from "@/components/Icons/iconName" import { IconName } from "@/components/Icons/iconName"
import LanguageSwitcher from "@/components/LanguageSwitcher" import LanguageSwitcher from "@/components/LanguageSwitcher"
import SkeletonShimmer from "@/components/SkeletonShimmer" import SkeletonShimmer from "@/components/SkeletonShimmer"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext" import { getLang } from "@/i18n/serverContext"
import { isLoggedInUser } from "@/utils/isLoggedInUser" import { isLoggedInUser } from "@/utils/isLoggedInUser"
@@ -47,13 +46,11 @@ export default async function TopMenu() {
<div className={styles.options}> <div className={styles.options}>
<LanguageSwitcher type="desktopHeader" /> <LanguageSwitcher type="desktopHeader" />
<Caption type="regular" color="textMediumContrast" asChild> <HeaderLink href={findMyBookingUrl} iconName={IconName.Search}>
<HeaderLink href={findMyBookingUrl} iconName={IconName.Search}> {intl.formatMessage({
{intl.formatMessage({ defaultMessage: "Find booking",
defaultMessage: "Find booking", })}
})} </HeaderLink>
</HeaderLink>
</Caption>
</div> </div>
</div> </div>
</div> </div>