Add docs for data-* attributes

[anthonyalayo]

Link to the page where something nasty is located

https://mantine.dev/styles/create-styles/

Exact quote of what is wrong

Hey all,

First of all, a big thank you to everyone who contributes to this project. I'm an amateur/hobbyist for frontend, but I have seen a lot of libraries. I'm pretty confident when I say Mantine is the best component library I've seen thus far.

I spent some time this weekend reading the docs and playing with the example navbar here: https://ui.mantine.dev/component/navbar-simple

I noticed that compared to the docs, the example was a bit messy. So I took it as an opportunity to learn the library by trying to match the example with a cleaner way of doing it. I eventually ended up with a match:

With that being said, this is where the issue comes in.

The docs only have the following example on how to set active classes: https://mantine.dev/styles/create-styles/#classes-merging-cx-function

Passing both className and classNames to a single component for this feature felt a bit awkward to me, and I assumed there was a cleaner way to do it.

After a lot of digging, I realized that under the hood there are data-* attributes on a lot of components. These are not documented anywhere besides being mentioned in change logs.

Could we add data-* attributes to the documentation?

Here is the much simpler implementation using the latest from Mantine (along with Next.js):

const useStyles = createStyles((theme) => {
  const colors = theme.fn.variant({
    variant: 'light',
    color: theme.primaryColor,
  });

  return {
    root: {
      '&:hover': {
        color: theme.black,
      },

      '&:hover .icon': {
        color: theme.black,
      },

      '&[data-active]:hover': {
        color: colors.color,
      },

      '&[data-active] .icon': {
        color: colors.color,
      },

      color: theme.colors.gray[7],
      borderRadius: theme.radius.sm,
      fontWeight: 500,
    },
    icon: {
      color: theme.colors.gray[6],
    },
  };
});

export default function MyNav() {
  const router = useRouter();
  const { classes } = useStyles();

  return (
    <Navbar width={{ sm: 300 }} p="md">
      <Navbar.Section grow>
        <Group position="apart">
          <MantineLogo size={28} />
          <Code sx={{ fontWeight: 700 }}>v3.1.2</Code>
        </Group>
        <Divider mt="md" mb="xl" color="gray.2" />
        {data.map((item) => (
          <Link key={item.label} href={item.link} passHref>
            <NavLink
              py="xs"
              classNames={{ ...classes }}
              component="a"
              icon={<item.icon stroke={1.5} />}
              label={item.label}
              active={router.pathname === item.link}
            />
          </Link>
        ))}
      </Navbar.Section>
      <Navbar.Section>
        <Divider mt="md" pt="md" color="gray.2" />
        <Link key="logout" href="/logout" passHref>
          <NavLink
            py="xs"
            classNames={{ ...classes }}
            component="a"
            icon={<IconLogout stroke={1.5} />}
            label="Logout"
          />
        </Link>
      </Navbar.Section>
    </Navbar>
  );
}

Are you willing to create pull request with the fix?

No response

[rtivital]

Hi @anthonyalayo, thanks for kind words, it is planned to add documentation for data- attributes. It is on hold right now though, as it is planned to include Mantine components styling with data- attributes in these docs, but not all components are fully ready for this.

[anthonyalayo]

Thank you @rtivital !

[rj-wowza]

it would be great if for cases like NavLink, the StylesAPI included an active key for managing the styles in the theme layer.

[rtivital]

This issue is closed for one of these reasons:

• It was fixed in 7.0
• It is no longer reproducible in 7.0
• It is no longer applicable in 7.0
• It does not have a reproduction

If you think that this issue was closed by mistake and it is still an issue in version 7.0, please reopen it.