Anchor "default" font size should be inherited

ivan-kleshnin commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

Anchor component is hardcoded to be of md size by default.

When it's used within an context of resized text (h1/Title, resized Text, etc) it continues to have its own (md) size and each time should be corrected manually.

Pls. check the Sandbox.

In which browser did the problem occur

All

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

font-weight behaves correctly. font-size should inherit parent size by default in the same way.

Same problem with Text. Mantine typography components are not composable 😨

<Text size="lg">
  Large text <Text weight={600}>bold text but small!</Text>
</Text>

MUI Sandbox. Default behavior is to inherit which preserves composability. Related discussion: https://github.com/mui/material-ui/issues/16110

ivan-kleshnin commented 2 years ago

Updates

There's an inherit property but it has a higher priority than size so it's rather a hard reset.
It's possible to override Text but it's a lot of code and you'll makes things messy with names and imports.

...

export const Text: TextComponent = React.forwardRef(({size, sx, ...rest}: TextProps<"div">, ref: PolymorphicRef<"div">) => {
  sx = size ? sx : {fontSize: "inherit", ...sx} // !!!

  return <Mantine.Text
    {...rest}
    ref={ref}
    size={size}
    sx={sx}
  />
}) as any

First attempt to override globally (fail)

<MantineProvider
  defaultProps={{
    Text: {sx: {fontSize: "inherit"}}, // -- will have more priority than size
  }}

Second attempt to override globally (success)

<MantineProvider
  defaultProps={{
    Anchor: {size: "inherit"}, // -- replace the initial "md" setting
    Text: {size: "xxx"},       // -- any unexpected non-undefined value will have the same effect
  }}