saleor/macaw-ui

Add semantic attributes around components root

Closed this issue · 3 comments

lkostrowski commented

What I'm trying to achieve

I want to debug semantic components (Text, Box...) on compiled Macaw

Currently component like Text is rendered:

<p class="_1ruekcrv _1ruekcrz _1ruekcr13 _18fs8psz3 _18fs8ps113 _18fs8ps1do _18fs8ps14o _18fs8pslf _18fs8psmo _18fs8psnx _18fs8psp6 _18fs8ps1i3">
    ...
</p>

Describe a proposed solution

Add HTML attribute to top level element (likely all Boxes that components are built on top) with either:

  1. Class name, eg. macaw-box, macaw-text ...
  2. Data attribute [macaw-component]="Text"

This can be done on client code but it will be very verbose, while Macaw can hide it nicely.

This option can be opt-out with some settings later but I don't think it will provide much overhead to HTML size

eg implementation

export const Chip = forwardRef<HTMLDivElement, ChipProps>(
  ({ children, size, className, ...props }, ref) => {
    return (
      <Box
        data-macaw-component="Chip"
        as="span"
        className={classNames(
          chip({
            size,
          }),
          className
        )}
        ref={ref}
        {...props}
      >
        {children}
      </Box>
    );
  }
);

Acceptance Criteria

  1. HTML attribute must not be obfuscated/compiled
  2. Attributes must be scoped enough not to get accidentally styled by any third party (like global styles for jquery etc).
  3. Sentry must properly infer selector so in case of incident, element trigger must be easy to find

Screenshots or mockups

krzysztofzuraw commented

I like data-* attribute - it reminds me a bit of Radix. As solution for now you can use data-test-id as well 😄

lkostrowski commented

@mmiszy looking good, I assume this is a single class name, not a prefix/suffix to every classname (there can be a ~15 classes sometimes)

@krzysztofzuraw I prefer to have it in Macaw. Test-ids make sense because you know "testing scenarios" ahead of time, but incidents that cause debugging needs can be hard to predict

  • 👍1