Ease identification of components building blocks

[favorodera]

Package

v4.x

Description

Currently, when a developer needs to restyle a specific part of a component using the :ui prop, the process involves several steps:

• Inspecting the component in browser developer tools to identify the specific HTML element.
• Consulting the component's documentation to find the corresponding UI theme keys.
• Matching the identified HTML element's classes or structure to the documentation to determine the correct key value for customization within the UI theme.

This workflow is inefficient as it frequently requires switching between browser devtools and documentation, which can be time-consuming and interrupt the development flow, especially for complex components or new users.

Proposed Solution: Introduce a new attribute like for example themekey, to the key building blocks of components' HTML structure. This attribute would directly indicate the corresponding key in the component's UI theme configuration.

Example: Consider the following button component. With the themekey attribute, identifying the parts for customization becomes straightforward:

<button themekey="base" type="button" class="rounded-md font-medium inline-flex items-center ">
  <svg themekey="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"></svg>
  <span themekey="label" class="truncate">Button</span>
</button>

In this example:

• themekey="base" identifies the main button element.
• themekey="icon" identifies the SVG icon.
• themekey="label" identifies the text span.

Benefits

• Improved Developer Experience: Developers can quickly identify the correct UI theme keys by simply inspecting the element in devtools, without needing to cross-reference documentation.
• Faster Customization: Reduces the time and effort required to apply custom styling via the :ui prop.
• Reduced Documentation Reliance: While documentation remains important, this attribute provides an immediate, in-context hint for common customization points.
• Clarity: Makes the component's structure and customizable parts more explicit.

Additional context

No response

[KazimirPodolski]

Also it would help identifying slots at least somehow, which is currently a blind spot in documentation.

[benjamincanac]

We could maybe add a data-slot attribute on all components 🤔

[favorodera]

@benjamincanac

That could work.
Anything to make it easy to identify the compnent parts

[HugoRCD]

We could maybe add a data-slot attribute on all components 🤔

I like the idea 🤔

[rdjanuar]

We could maybe add a data-slot attribute on all components 🤔

and also if possible add image anatomy components, it's very helpfull @benjamincanac

[benjamincanac]

It's not that easy to make a slot visualizer in the docs 😅

[benjamincanac]

I've opened #5183 but I'm not convinced about this solution, adding a data-slot on every "div" will increase the rendered HTML significantly. I think we need to find another way.